{% extends "base.html" %}
{% block title %}Dashboard — DriveCore{% endblock %}
{% block page_label %}Dashboard{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto space-y-10 pb-20 animate-fade-in">

    <!-- Hero -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div>
            <h1 class="text-[32px] md:text-[40px] font-bold tracking-tight mb-2">Drive Overview</h1>
            <p class="text-[15px] text-[#86868B]">Manage your storage, clean up clutter, and organize with AI.</p>
            <!-- Freshness chips -->
            <div id="freshness-chips" class="mt-3 flex flex-wrap items-center gap-2 text-[12px]"></div>
            <!-- Orphan alert (J6 reparented files surfaced at root) -->
            <div id="orphan-alert" class="hidden mt-4"></div>
        </div>
        <a href="/explorer" class="jelly-btn">
            <i data-lucide="folder-tree" class="w-[18px] h-[18px]"></i>
            <span>Open Explorer</span>
        </a>
    </div>

    <!-- Metrics Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

        <!-- Storage Used -->
        <div id="metric-storage" class="glass-card p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-[13px] font-semibold tracking-wide uppercase text-[#86868B]">Storage Used</h3>
                <i data-lucide="hard-drive" class="w-[18px] h-[18px] text-[#6366F1]"></i>
            </div>
            <p class="metric-value text-[32px] font-bold tracking-tight mb-1">—</p>
            <p class="metric-sub text-[13px] text-[#A1A1A6] dark:text-[#545456]">Loading...</p>
        </div>

        <!-- Indexed Items -->
        <div id="metric-items" class="glass-card p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-[13px] font-semibold tracking-wide uppercase text-[#86868B]">Indexed Items</h3>
                <i data-lucide="clock" class="w-[18px] h-[18px] text-[#D946EF]"></i>
            </div>
            <p class="metric-value text-[32px] font-bold tracking-tight mb-1">—</p>
            <p class="metric-sub text-[13px] text-[#A1A1A6] dark:text-[#545456]">Loading...</p>
        </div>

        <!-- Wasted Space -->
        <div id="metric-waste" class="glass-card p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-[13px] font-semibold tracking-wide uppercase text-[#86868B]">Wasted Space</h3>
                <i data-lucide="copy" class="w-[18px] h-[18px] text-orange-500"></i>
            </div>
            <p class="metric-value text-[32px] font-bold tracking-tight mb-1">—</p>
            <p class="metric-sub text-[13px] text-[#A1A1A6] dark:text-[#545456]">Loading...</p>
        </div>
    </div>

    <!-- Two Column: Storage Breakdown + Quick Actions -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Storage Breakdown -->
        <div class="glass-card lg:col-span-2 p-8 flex flex-col">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-[18px] font-bold">Storage Breakdown</h2>
                <button onclick="document.getElementById('storage-detail-wrap').classList.toggle('hidden')"
                    class="text-[13px] font-semibold text-[#6366F1] hover:text-[#4F46E5] transition-colors">
                    View Details
                </button>
            </div>

            <!-- Visual Bar -->
            <div id="storage-bar" class="w-full h-[12px] rounded-full flex overflow-hidden mb-8 gap-[2px]"
                 style="--bar-other: #86868B">
                <div class="storage-bar-segment h-full bg-[#E5E5EA] dark:bg-[#38383A] w-full rounded-full"></div>
            </div>

            <!-- Legend -->
            <div id="storage-legend" class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-auto">
                <div class="text-[13px] text-[#86868B]">Loading...</div>
            </div>

            <!-- Detail (hidden by default) -->
            <div id="storage-detail-wrap" class="hidden mt-8 pt-6 border-t border-[#E5E5EA] dark:border-[#38383A]">
                <h3 class="text-[14px] font-semibold mb-4">MIME Type Distribution</h3>
                <div id="storage-detail" class="max-h-[300px] overflow-y-auto custom-scrollbar"></div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="glass-card p-8">
            <h2 class="text-[18px] font-bold mb-6">Quick Actions</h2>
            <div class="space-y-2.5">

                <a href="/plan" class="w-full flex items-center p-3.5 rounded-[16px] transition-all text-left border border-transparent
                    hover:bg-[#F5F5F7] hover:border-[#E5E5EA]
                    dark:hover:bg-[#2C2C2E] dark:hover:border-[#38383A]
                    no-underline text-inherit">
                    <div class="p-2.5 rounded-[12px] mr-3
                        bg-white shadow-sm border border-[#E5E5EA]
                        dark:bg-[#1C1C1E] dark:border-[#38383A]">
                        <i data-lucide="sparkles" class="w-[18px] h-[18px] text-[#D946EF]"></i>
                    </div>
                    <div>
                        <p class="text-[14px] font-semibold">AI Classify</p>
                        <p class="text-[12px] mt-0.5 text-[#86868B]">Review organization plan</p>
                    </div>
                </a>

                <a href="/permissions" class="w-full flex items-center p-3.5 rounded-[16px] transition-all text-left border border-transparent
                    hover:bg-[#F5F5F7] hover:border-[#E5E5EA]
                    dark:hover:bg-[#2C2C2E] dark:hover:border-[#38383A]
                    no-underline text-inherit">
                    <div class="p-2.5 rounded-[12px] mr-3
                        bg-white shadow-sm border border-[#E5E5EA]
                        dark:bg-[#1C1C1E] dark:border-[#38383A]">
                        <i data-lucide="shield-alert" class="w-[18px] h-[18px] text-red-500"></i>
                    </div>
                    <div>
                        <p class="text-[14px] font-semibold">Review Permissions</p>
                        <p class="text-[12px] mt-0.5 text-[#86868B]">Check exposed files</p>
                    </div>
                </a>

                <a href="/explorer" class="w-full flex items-center p-3.5 rounded-[16px] transition-all text-left border border-transparent
                    hover:bg-[#F5F5F7] hover:border-[#E5E5EA]
                    dark:hover:bg-[#2C2C2E] dark:hover:border-[#38383A]
                    no-underline text-inherit">
                    <div class="p-2.5 rounded-[12px] mr-3
                        bg-white shadow-sm border border-[#E5E5EA]
                        dark:bg-[#1C1C1E] dark:border-[#38383A]">
                        <i data-lucide="folder-tree" class="w-[18px] h-[18px] text-[#6366F1]"></i>
                    </div>
                    <div>
                        <p class="text-[14px] font-semibold">Open Explorer</p>
                        <p class="text-[12px] mt-0.5 text-[#86868B]">Browse file tree</p>
                    </div>
                </a>

                <a href="/duplicates" class="w-full flex items-center p-3.5 rounded-[16px] transition-all text-left border border-transparent
                    hover:bg-[#F5F5F7] hover:border-[#E5E5EA]
                    dark:hover:bg-[#2C2C2E] dark:hover:border-[#38383A]
                    no-underline text-inherit">
                    <div class="p-2.5 rounded-[12px] mr-3
                        bg-white shadow-sm border border-[#E5E5EA]
                        dark:bg-[#1C1C1E] dark:border-[#38383A]">
                        <i data-lucide="copy" class="w-[18px] h-[18px] text-orange-500"></i>
                    </div>
                    <div>
                        <p class="text-[14px] font-semibold">Find Duplicates</p>
                        <p class="text-[12px] mt-0.5 text-[#86868B]">Clean up wasted space</p>
                    </div>
                </a>

            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', loadDashboard);
</script>
{% endblock %}