@extends('layouts.master')

@section('content')
    <main style="display: flex; height: calc(100vh - 60px);">
        @if(auth()->user()->hasRole('admin'))
            <section class="diagram-container" style="flex:1; background: #f1f5f9; position: relative; overflow: hidden;">
                <div
                    style="position: absolute; top: 16px; left: 16px; z-index: 1000; background: white; padding: 16px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid var(--border);">
                    @php
                        $backRoute = route('admin.templates.index');
                        if (auth()->user()->hasRole('admin') && $template->created_by != auth()->id()) {
                            $backRoute = route('admin.user-requests.index');
                        }
                    @endphp
                    <a href="{{ $backRoute }}" class="btn"
                        style="background:var(--bg-main); display:flex; align-items:center; gap:8px;">
                        <i data-lucide="arrow-left" size="14"></i> Back
                    </a>
                    <h2 style="margin-top: 12px; margin-bottom: 0; font-size: 18px; color: var(--text-main); font-weight: 700;">
                        {{ $template->name }}
                    </h2>
                </div>

                <div class="diagram-viewer"
                    style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;">
                    <div class="diagram-scroller" style="flex: 1; overflow: auto; padding: 100px; position: relative;">
                        <div id="diagram"
                            style="display: inline-block; background: transparent; transition: transform 0.2s ease-out; transform-origin: 0 0;">
                        </div>
                    </div>

                    <div class="canvas-controls"
                        style="position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; background: white; padding: 6px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid var(--border); gap: 6px; align-items: center; z-index: 1000;">
                        <div class="control-btn" id="zoom-out" title="Zoom Out"
                            style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted);">
                            <i data-lucide="minus" size="14" style="color: var(--text-muted);"></i>
                        </div>
                        <div class="control-btn" id="zoom-in" title="Zoom In"
                            style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted);">
                            <i data-lucide="plus" size="14" style="color: var(--text-muted);"></i>
                        </div>
                        <div style="width:1px; background:var(--border); margin:4px 0; height: 16px;"></div>
                        <div class="control-btn" id="reset-zoom" title="Reset (100%)"
                            style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted);">
                            <i data-lucide="maximize" size="16" style="color: var(--text-muted);"></i>
                        </div>
                        <span id="zoom-label"
                            style="font-size: 11px; font-weight: 600; color: var(--text-muted); width: 40px; text-align: center;">100%</span>
                    </div>
                </div>
            </section>
        @else
            <section style="flex:1; background: #f8fafc; padding: 40px; overflow-y: auto;">
                <div style="max-width: 800px; margin: 0 auto;">
                    <a href="{{ route('admin.templates.index') }}" class="btn" style="margin-bottom: 24px;">
                        <i data-lucide="arrow-left" size="14"></i> Back
                    </a>
                    <div class="panel" style="padding: 32px;">
                        <h1 style="margin-top: 0;">{{ $template->name }}</h1>
                        <p style="color: var(--text-muted);">Template created on {{ $template->created_at->format('M d, Y') }}
                            by {{ $template->creator->name }}</p>

                        <h3 style="margin-top: 32px; border-bottom: 1px solid var(--border); padding-bottom: 8px;">Selected
                            Categories</h3>
                        <div style="margin-top: 16px;">
                            @php
                                $selectedNodes = \App\Models\Category::whereIn('id', $checkedCategories)->get();
                            @endphp
                            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                @foreach($selectedNodes as $node)
                                    <span
                                        style="background: #e2e8f0; color: #475569; padding: 4px 12px; border-radius: 16px; font-size: 14px; font-weight: 500;">
                                        {{ $node->name }}
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </main>
@endsection

@push('styles')
    <style>
        /* Mermaid Node Box */
        .mermaid .node rect {
            fill: #ffffff !important;
            stroke: #E5442A !important;
            stroke-width: 1.5px !important;
            rx: 6px !important;
            ry: 6px !important;
        }

        /* Node text */
        .mermaid .node text,
        .mermaid .node .label,
        .mermaid .node .label div,
        .mermaid .node .label span {
            font-family: 'Inter', sans-serif !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            fill: #0f172a !important;
            color: #0f172a !important;
        }

        /* Long text override */
        .mermaid .node.longText text,
        .mermaid .node.longText .label,
        .mermaid .node.longText .label div,
        .mermaid .node.longText .label span {
            font-size: 12px !important;
        }

        /* HTML labels center */
        .mermaid .node .label div {
            text-align: center !important;
            padding: 4px 10px !important;
            line-height: 1.4 !important;
            white-space: nowrap !important;
            /* Prevent truncation */
        }

        .mermaid svg text,
        .mermaid .nodeLabel,
        .mermaid .edgeLabel {
            text-anchor: middle !important;
            dominant-baseline: middle !important;
            color: #0f172a !important;
            text-align: center;
            font-family: 'Inter', sans-serif !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        mermaid.initialize({
            startOnLoad: false,
            securityLevel: 'loose',
            theme: "default",
            flowchart: {
                htmlLabels: true,
                useMaxWidth: false
            },
            htmlLabels: true,
            themeVariables: {
                fontSize: '15px',
                fontFamily: 'Inter',
                lineColor: '#E5442A',
                nodeBackground: '#ffffff',
                nodeBorder: '#E5442A',
                mainBkg: '#ffffff',
                textColor: '#0f172a',
                nodeTextColor: '#0f172a',
                defaultColor: '#0f172a'
            }
        });

        let nodes = @json($diagram);
        let checkedCategories = @json($checkedCategories ?? []);

        let zoomLevel = {{ (auth()->check() && auth()->user()->hasRole('admin')) ? '0.8' : '1.0' }};

        function changeZoom(delta) {
            zoomLevel += delta;
            if (zoomLevel < 0.2) zoomLevel = 0.2;
            if (zoomLevel > 5.0) zoomLevel = 5.0; // Increased to 500%
            applyZoom();
        }

        function applyZoom() {
            const el = document.getElementById("diagram");
            const label = document.getElementById("zoom-label");
            if (el) {
                el.style.transform = `scale(${zoomLevel})`;
            }
            if (label) {
                label.textContent = Math.round(zoomLevel * 100) + "%";
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('zoom-in').onclick = () => changeZoom(0.2);
            document.getElementById('zoom-out').onclick = () => changeZoom(-0.2);
            document.getElementById('reset-zoom').onclick = () => {
                zoomLevel = {{ (auth()->check() && auth()->user()->hasRole('admin')) ? '0.8' : '1.0' }};
                applyZoom();
            };
            applyZoom();
            renderDiagram();
        });

        function renderDiagram() {
            let text = "flowchart LR\n";
            let edges = new Set();
            let nodesSet = new Set();

            checkedCategories.forEach(id => {
                let node = nodes.find(n => n.id == id);
                if (node && node.parent) {
                    let parent = nodes.find(n => n.id == node.parent);
                    if (parent) {
                        edges.add(`node${parent.id}["${parent.name}"] --> node${node.id}["${node.name}"]`);
                        nodesSet.add(parent);
                        nodesSet.add(node);
                    }
                } else if (node && !node.parent) {
                    // Include root nodes even if they don't have children yet
                    text += `node${node.id}["${node.name}"]\n`;
                    nodesSet.add(node);
                }
            });

            edges.forEach(e => {
                text += e + "\n";
            });

            // Apply classes based on length
            nodesSet.forEach(node => {
                if (node.name.length > 15) {
                    text += `class node${node.id} longText\n`;
                }
            });

            text += "classDef longText font-size:12px,font-weight:700;\n";

            const diagram = document.getElementById("diagram");
            diagram.innerHTML = `<div class="mermaid">${text}</div>`;

            mermaid.run({
                nodes: document.querySelectorAll('.mermaid')
            });
        }
    </script>
@endpush