{% extends "base.html" %}

{% block title %}{{ template.group_name }}/{{ template.name }}{% endblock %}

{% block extra_css %}
<style>
    pre { scrollbar-width: thin; scrollbar-color: #222 #050505; }
    .file-list-item:hover { background-color: rgba(255, 255, 255, 0.05); }
    .file-list-item.active { background-color: rgba(255, 255, 255, 0.1); border-left: 2px solid currentColor; }
    {{ pygments_css | safe }}
</style>
{% endblock %}

{% block content %}
<main class="max-w-7xl mx-auto px-6 py-12">
    <!-- Header -->
    <div class="bg-zinc-900/40 border terminal-border rounded-xl overflow-hidden mb-12">
        <div class="p-10 border-b terminal-border bg-zinc-900/20">
            <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-8">
                <div>
                    <div class="flex items-center gap-3 mb-4">
                        <span class="text-[10px] font-black text-{{ site_meta.theme_color }} uppercase tracking-[0.3em]">DIRECTORY_ROOT</span>
                        <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
                        <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">{{ template.added_date.split(' ')[0] }}</span>
                    </div>
                    <h1 class="text-3xl lg:text-5xl font-bold tracking-tighter text-white">{{ template.group_name }}/{{ template.name }}</h1>
                    <p class="mt-4 text-sm text-zinc-400 font-medium max-w-2xl leading-relaxed">{{ template.description }}</p>
                </div>
                <div class="flex flex-col items-start lg:items-end">
                    <div class="bg-black/50 border terminal-border px-6 py-4 rounded-lg flex items-center gap-8">
                        <div class="text-center">
                            <p class="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-1">STABLE_RELEASE</p>
                            <p class="text-sm font-bold text-{{ site_meta.theme_color }}">v{{ template.versions[0].version }}</p>
                        </div>
                        <div class="w-px h-8 bg-zinc-800"></div>
                        <div class="text-center">
                            <p class="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-1">DOWNLOAD_TRAFFIC</p>
                            <p class="text-sm font-bold text-white">{{ template.download_count }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8 flex flex-wrap gap-2">
                {% for lang in template.languages %}
                <a href="/?lang={{ lang }}" class="px-3 py-1 rounded border border-zinc-800 text-[9px] font-bold uppercase tracking-widest text-zinc-500 hover:border-{{ site_meta.theme_color }} hover:text-{{ site_meta.theme_color }} transition-all">
                    {{ lang }}
                </a>
                {% endfor %}
                {% for tag in template.tags %}
                <a href="/?tag={{ tag }}" class="px-3 py-1 rounded border border-zinc-800 text-[9px] font-bold text-zinc-600 hover:border-{{ site_meta.theme_color }} hover:text-{{ site_meta.theme_color }} transition-all">
                    #{{ tag }}
                </a>
                {% endfor %}
            </div>
        </div>

        <!-- Top Actions & Metadata -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 px-10 pt-10">
            <!-- Resources & Download -->
            <div class="bg-zinc-900/40 border terminal-border p-6 rounded-xl flex flex-col justify-between">
                <div>
                    <h3 class="text-[10px] font-black text-zinc-500 uppercase tracking-[0.3em] mb-4 text-center md:text-left">RESOURCES</h3>
                    <a href="/archive/download/{{ template.group_name }}/{{ template.name }}/{{ template.versions[0].version }}/{{ template.group_name }}_{{ template.name }}_{{ template.versions[0].version }}.tar.gz" 
                       download="{{ template.group_name }}_{{ template.name }}_{{ template.versions[0].version }}.tar.gz"
                       class="flex items-center justify-center gap-3 w-full bg-{{ site_meta.theme_color }}/10 hover:bg-{{ site_meta.theme_color }} text-{{ site_meta.theme_color }} hover:text-black border border-{{ site_meta.theme_color }}/30 py-4 rounded-lg font-bold text-xs uppercase tracking-widest transition-all group">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                        Download Archive
                    </a>
                </div>
            </div>

            <!-- Clone Script -->
            <div class="bg-zinc-900/40 border terminal-border p-6 rounded-xl">
                <h3 class="text-[10px] font-black text-zinc-500 uppercase tracking-[0.3em] mb-4 text-center md:text-left">CLONE_SCRIPT</h3>
                <div class="bg-black p-4 rounded border border-zinc-800 font-mono text-[10px] group relative h-[52px] flex items-center overflow-hidden">
                    <div class="text-{{ site_meta.theme_color }} break-all leading-none pr-8">
                        {% if public_url %}
                        nptmpl clone {{ public_url }}/api/v1/templates/{{ template.group_name }}/{{ template.name }} .
                        {% else %}
                        nptmpl clone {{ template.group_name }}/{{ template.name }} .
                        {% endif %}
                    </div>
                    <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText.trim())" class="absolute right-3 text-[8px] font-bold text-zinc-700 hover:text-white uppercase transition-colors">Copy</button>
                </div>
            </div>

            <!-- Metadata Summary -->
            <div class="bg-zinc-900/40 border terminal-border p-6 rounded-xl">
                <h3 class="text-[10px] font-black text-zinc-500 uppercase tracking-[0.3em] mb-4 text-center md:text-left">METADATA</h3>
                <div class="flex justify-between items-center text-[10px] mb-2">
                    <span class="font-bold text-zinc-600 uppercase">MAINTAINER</span>
                    <a href="/?author={{ template.author }}" class="font-black text-white hover:text-{{ site_meta.theme_color }} transition-colors">{{ template.author }}</a>
                </div>
                <div class="flex justify-between items-center text-[10px]">
                    <span class="font-bold text-zinc-600 uppercase">LICENSE</span>
                    <a href="/?license={{ template.license }}" class="font-black text-zinc-300 hover:text-{{ site_meta.theme_color }} transition-colors">{{ template.license or 'MIT' }}</a>
                </div>
            </div>
        </div>

        <!-- Codebase Explorer -->
        <div class="grid grid-cols-1 lg:grid-cols-12 min-h-[600px] border-t terminal-border mt-10">
            <!-- File Tree -->
            <div class="lg:col-span-3 border-r terminal-border bg-black/20 overflow-y-auto">
                <div class="p-4 border-b terminal-border bg-zinc-900/30 flex justify-between items-center">
                    <span class="text-[10px] font-black text-zinc-500 uppercase tracking-widest">FILESYSTEM</span>
                    <span class="text-[9px] font-bold text-zinc-700">{{ files|length }} items</span>
                </div>
                <div class="divide-y border-zinc-900">
                    <button onclick="showReadme(this)" class="file-list-item file-tree-item w-full text-left px-4 py-3 flex items-center gap-3 transition-all active text-{{ site_meta.theme_color }}" data-path="README.md" data-type="file">
                        <div class="icon-container flex-shrink-0 w-4 h-4 flex items-center justify-center"></div>
                        <span class="text-[11px] font-bold">README.md</span>
                    </button>

                    {% for f in files %}
                    <button onclick="loadFile(this, '{{ f.path }}')" class="file-list-item file-tree-item w-full text-left px-4 py-3 flex items-center gap-3 transition-all" data-path="{{ f.path }}" data-type="{{ f.type }}">
                        <div class="icon-container flex-shrink-0 w-4 h-4 flex items-center justify-center"></div>
                        <span class="text-[11px] font-medium text-zinc-400 truncate">{{ f.path }}</span>
                    </button>
                    {% endfor %}
                </div>
            </div>

            <!-- Content Area -->
            <div class="lg:col-span-9 flex flex-col bg-black/40">
                <div id="contentHeader" class="p-4 border-b terminal-border bg-zinc-900/30 flex justify-between items-center">
                    <div class="flex items-center gap-3">
                        <div id="headerIcon" class="flex-shrink-0 w-4 h-4 flex items-center justify-center"></div>
                        <span id="currentPath" class="text-[10px] font-black text-{{ site_meta.theme_color }} uppercase tracking-widest">README.md</span>
                    </div>
                </div>
                
                <div id="fileContentWrapper" class="flex-1 overflow-auto p-8 relative">
                    <div id="loadingOverlay" class="hidden absolute inset-0 bg-black/80 flex items-center justify-center z-10">
                        <div class="flex flex-col items-center gap-4">
                            <div class="w-8 h-8 border-2 border-{{ site_meta.theme_color }} border-t-transparent rounded-full animate-spin"></div>
                            <p class="text-[10px] font-bold text-{{ site_meta.theme_color }} uppercase tracking-widest">Fetching_Data...</p>
                        </div>
                    </div>

                    <!-- Markdown Content -->
                    <div id="readmeView" class="prose prose-invert prose-{{ site_meta.theme_color.split('-')[0] }} max-w-none prose-sm">
                        {% if template.versions[0].readme_html %}
                        {{ template.versions[0].readme_html | safe }}
                        {% elif template.versions[0].readme_content %}
                        {{ template.versions[0].readme_content }}
                        {% else %}
                        <div class="py-20 text-center border-2 border-dashed border-zinc-900 rounded-xl">
                            <p class="text-zinc-600 font-bold italic text-sm uppercase tracking-widest">No documentation found.</p>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Code View -->
                    <div id="codeView" class="hidden"></div>
                </div>
            </div>
        </div>
    </div>

    {% if related %}
    <div class="mt-12">
        <h3 class="text-xs font-black text-{{ site_meta.theme_color }} uppercase tracking-[0.3em] mb-8 flex items-center gap-3">
            <span class="w-1.5 h-1.5 rounded-full bg-{{ site_meta.theme_color }}"></span>
            PEER_NODES
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {% for r in related %}
            <a href="/{{ r.group_name }}/{{ r.name }}" class="group p-6 rounded-xl border terminal-border bg-zinc-900/20 hover:bg-zinc-900 transition-all">
                <div class="flex justify-between items-center mb-4">
                    <span class="text-[9px] font-black text-zinc-600 uppercase tracking-widest">{{ r.group_name }}</span>
                    <span class="text-[9px] font-bold text-zinc-700">{{ r.download_count }}↓</span>
                </div>
                <h4 class="text-md font-bold text-white group-hover:text-{{ site_meta.theme_color }} transition-colors mb-2">{{ r.name }}</h4>
                <p class="text-[11px] text-zinc-500 line-clamp-1 leading-relaxed">{{ r.description }}</p>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</main>
{% endblock %}

{% block extra_js %}
<script>
    const group = "{{ template.group_name }}";
    const name = "{{ template.name }}";
    const version = "{{ template.versions[0].version }}";
    const themeColorClass = "text-{{ site_meta.theme_color }}";
    
    const readmeView = document.getElementById('readmeView');
    const codeView = document.getElementById('codeView');
    const currentPath = document.getElementById('currentPath');
    const loadingOverlay = document.getElementById('loadingOverlay');
    const listItems = document.querySelectorAll('.file-list-item');

    const initialReadmeHTML = readmeView.innerHTML;

    // Initialize icons
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.file-tree-item').forEach(item => {
            const path = item.getAttribute('data-path');
            const isDir = item.getAttribute('data-type') === 'directory';
            const container = item.querySelector('.icon-container');
            if (container) container.innerHTML = getFileIconSVG(path, isDir);
        });
        const headerIcon = document.getElementById('headerIcon');
        if (headerIcon) headerIcon.innerHTML = getFileIconSVG('readme.md', false);
    });

    function setActive(el) {
        listItems.forEach(item => {
            item.classList.remove('active', themeColorClass, 'text-white');
            item.style.color = "";
        });
        if (el) {
            el.classList.add('active');
            const span = el.querySelector('span');
            const text = span ? span.innerText : el.innerText;
            el.classList.add(text.toLowerCase().endsWith('readme.md') ? themeColorClass : 'text-white');
        }
    }

    function showReadme(btn) {
        setActive(btn);
        readmeView.classList.remove('hidden');
        codeView.classList.add('hidden');
        readmeView.innerHTML = initialReadmeHTML;
        currentPath.textContent = 'README.md';
        const headerIcon = document.getElementById('headerIcon');
        if (headerIcon) headerIcon.innerHTML = getFileIconSVG('README.md', false);
    }

    async function loadFile(btn, path) {
        loadingOverlay.classList.remove('hidden');
        try {
            const response = await fetch(`/api/v1/inspect/${group}/${name}/${version}?path=${encodeURIComponent(path)}`);
            const data = await response.json();
            setActive(btn);
            if (data.is_markdown && data.html_content) {
                readmeView.classList.remove('hidden');
                codeView.classList.add('hidden');
                readmeView.innerHTML = data.html_content;
            } else {
                readmeView.classList.add('hidden');
                codeView.classList.remove('hidden');
                codeView.innerHTML = data.html_content || `<pre class="text-xs p-4 highlighted-raw-code">${data.content}</pre>`;
            }
            currentPath.textContent = path;
            const headerIcon = document.getElementById('headerIcon');
            if (headerIcon) headerIcon.innerHTML = getFileIconSVG(path, false);
        } catch (err) {
            console.error('Failed to fetch file content:', err);
            showToast('ACCESS_DENIED_OR_FILE_CORRUPT', 'error');
        } finally {
            loadingOverlay.classList.add('hidden');
        }
    }
</script>
{% endblock %}