<script setup>
import { computed } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
  SidebarMenuBadge
} from '@/components/ui/sidebar'
import { Separator } from '@/components/ui/separator'
import { useDark, useToggle } from '@vueuse/core'

const DISABLE_AUTH = import.meta.env.VITE_DISABLE_AUTH === 'true'
const route = useRoute()

// Force LIGHT mode as default — useDark expects string values internally
const isDark = useDark()
isDark.value = false          // ← clear any cached dark from localStorage
const toggleDark = useToggle(isDark)

// ─── SVG Icon definitions ────────────────────────────
const icons = {
  home:       `<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>`,
  flow:       `<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>`,
  history:    `<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>`,
  product:    `<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>`,
  desc:       `<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>`,
  fashion:    `<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>`,
  report:     `<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>`,
  sql:        `<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>`,
  monitor:    `<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>`,
  prompt:     `<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`,
  simulator:  `<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>`,
  insight:    `<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>`,
  graph:      `<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>`,
  reaction:   `<path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"/><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path d="M9.5 14.5c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.83 8 21v-5c0-.83.67-1.5 1.5-1.5z"/><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"/>`,
  regression: `<polyline points="20 6 9 17 4 12"/>`,
  stress:     `<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>`,
  diagram:    `<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="21"/>`,
  competitor: `<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>`,
  resources:  `<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>`,
  notes:      `<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/>`,
  changelog:  `<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>`,
  guide:      `<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>`,
  roadmap:    `<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>`,
  save:       `<path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>`,
  tagsearch:  `<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>`,
  skusearch:  `<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>`,
  imagesearch:`<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>`,
  lead:       `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
  leadhistory:`<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>`,
  cache:      `<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>`,
  experiment: `<path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5h0c-1.4 0-2.5-1.1-2.5-2.5V2"/><path d="M8.5 2h7"/><path d="M14.5 16h-5"/><path d="M9 10H6l-3 5"/><path d="M14.5 10H18l3 5"/>`,
  note:       `<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>`,
  store:      `<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>`,
}

const navGroups = [
  {
    label: 'Dashboards',
    items: [
      { path: '/home',                    label: 'Tổng quan',         iconKey: 'home' },
      { path: '/home/flow',               label: 'Sơ đồ hoạt động',   iconKey: 'flow' },
      { path: '/home/history',            label: 'Chat History',      iconKey: 'history' },
      { path: '/home/product',            label: 'Product Perf.',     iconKey: 'product' },
      { path: '/home/product-desc',       label: 'Ultra Description', badge: 'NEW', iconKey: 'desc' },
      { path: '/home/fashion-matches',    label: 'Fashion Matches',   badge: 'NEW', iconKey: 'fashion' },
    ],
  },
  {
    label: 'AI Tools',
    items: [
      { path: '/home/ai-report',          label: 'AI Data Analyst',   badge: 'NEW', iconKey: 'report' },
      { path: '/home/ai-sql',             label: 'SQL Generator',     badge: 'NEW', iconKey: 'sql' },
      { path: '/home/live-monitor',       label: 'Live Monitor',      badge: 'LIVE', iconKey: 'monitor' },
      { path: '/home/prompt-optimizer',   label: 'Prompt Optimizer',  iconKey: 'prompt' },
      { path: '/home/user-simulator',     label: 'User Simulator',    iconKey: 'simulator' },
      { path: '/home/user-insight',       label: 'User Insight',      iconKey: 'insight' },
      { path: '/home/knowledge-graph',    label: 'Knowledge Graph',   iconKey: 'graph' },
      { path: '/home/reaction-simulator', label: 'Reaction Sim.',     iconKey: 'reaction' },
      { path: '/home/diagram-agent',      label: 'AI Diagram',        iconKey: 'diagram' },
      { path: '/home/competitor-research',label: 'Competitor Intel.', iconKey: 'competitor' },
    ],
  },
  {
    label: 'Testing',
    items: [
      { path: '/home/regression-test',    label: 'Regression Test',   iconKey: 'regression' },
      { path: '/home/stress-test',        label: 'Stress Test',       iconKey: 'stress' },
    ],
  },
  {
    label: 'Pages',
    items: [
      { path: '/home/resources',      label: 'Resources',       iconKey: 'resources' },
      { path: '/home/notes',          label: 'Team Notes',      iconKey: 'notes' },
      { path: '/home/changelog',      label: 'Changelog',       iconKey: 'changelog' },
      { path: '/home/guide',          label: 'Hướng dẫn',       iconKey: 'guide' },
      { path: '/home/roadmap',        label: 'Kế hoạch',        iconKey: 'roadmap' },
      { path: '/home/save',           label: 'Saved Items',     iconKey: 'save' },
    ],
  },
  {
    label: 'Development',
    items: [
      { path: '/home/tag-search',     label: 'Tag Search',      iconKey: 'tagsearch' },
      { path: '/home/sku-search',     label: 'SKU Search',      iconKey: 'skusearch' },
      { path: '/home/store-search',   label: 'Store Search',    iconKey: 'store' },
      { path: '/home/image-search',   label: 'Image Search',    iconKey: 'imagesearch' },
      { path: '/home/lead-flow',      label: 'Lead Flow',       iconKey: 'lead' },
      { path: '/home/lead-history',   label: 'Lead History',    iconKey: 'leadhistory' },
      { path: '/home/cache',          label: 'Cache',           iconKey: 'cache' },
      { path: '/home/experiment-log', label: 'Experiments',     iconKey: 'experiment' },
      { path: '/home/merge-history',  label: 'Merge History',   iconKey: 'leadhistory' },
    ],
  },
]

function isActive(path) {
  if (path === '/home') return route.path === '/home'
  return route.path === path || route.path.startsWith(path + '/')
}

const currentBreadcrumb = computed(() => {
  const p = route.path.replace('/home', '').replace(/-/g, ' ')
  return p ? p.substring(1) : 'Overview'
})
</script>

<template>
  <SidebarProvider>
    <Sidebar variant="inset" collapsible="icon">
      
      <!-- Brand Logo / Header -->
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" as-child>
              <RouterLink to="/home" class="flex items-center gap-3">
                <div class="flex items-center justify-center w-8 h-8 rounded-lg font-black text-[11px] text-white"
                     style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); letter-spacing: -0.5px;">
                  CA
                </div>
                <div class="grid flex-1 text-left text-sm leading-tight text-foreground truncate">
                  <span class="truncate font-bold tracking-tight">Canifa AI</span>
                  <span class="truncate text-[10px] text-muted-foreground font-medium">Admin Console</span>
                </div>
              </RouterLink>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <!-- Main Navigation Content -->
      <SidebarContent>
        <SidebarGroup v-for="group in navGroups" :key="group.label">
          <SidebarGroupLabel class="uppercase tracking-wider text-[10px] font-bold text-muted-foreground/70">{{ group.label }}</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem v-for="item in group.items" :key="item.path">
                <SidebarMenuButton as-child :is-active="isActive(item.path)" :tooltip="item.label">
                  <RouterLink :to="item.path">
                    <!-- Icon -->
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"
                         v-html="icons[item.iconKey]" />
                         
                    <!-- Label -->
                    <span>{{ item.label }}</span>
                  </RouterLink>
                </SidebarMenuButton>

                <!-- Badge -->
                <SidebarMenuBadge v-if="item.badge" 
                  class="font-bold text-[8px] leading-none tracking-wider px-1.5 py-0.5 rounded-full"
                  :class="item.badge === 'LIVE' ? 'bg-red-50 text-red-600' : 'bg-amber-50 text-amber-600'">
                  {{ item.badge }}
                </SidebarMenuBadge>

              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <!-- Footer (Account Switcher Sim) -->
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
              <div class="flex aspect-square h-8 w-8 items-center justify-center rounded-lg bg-amber-100 text-amber-700 font-bold text-xs">
                A
              </div>
              <div class="grid flex-1 text-left text-sm leading-tight">
                <span class="truncate font-semibold">Admin User</span>
                <span v-if="DISABLE_AUTH" class="truncate text-[9px] font-bold text-amber-600">DEV MODE</span>
                <span v-else class="truncate text-xs text-muted-foreground">canifa@canifa.com</span>
              </div>
              <!-- Settings/Log out Icon -->
              <svg class="ml-auto size-4 text-muted-foreground" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>

    </Sidebar>

    <!-- Main App Content Area -->
    <SidebarInset>
      <header class="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-border/80 bg-white/90 backdrop-blur-sm px-4 lg:px-6 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 sticky top-0 z-50">
        
        <!-- Left Side: Trigger + Breadcrumb -->
        <div class="flex items-center gap-1.5 lg:gap-2">
          <SidebarTrigger class="-ml-2" />
          <Separator orientation="vertical" class="mx-2 h-4" />
          <div class="flex items-center gap-2 text-sm">
            <span class="font-bold tracking-tight text-foreground">Canifa AI</span>
            <span class="text-muted-foreground/50">/</span>
            <span class="text-muted-foreground capitalize font-medium">
              {{ currentBreadcrumb }}
            </span>
          </div>
        </div>

        <!-- Right Side: Status & Settings Tools -->
        <div class="flex items-center gap-2 lg:gap-3">
          
          <!-- Tool box -->
          <div class="flex items-center gap-0.5 bg-muted/40 p-1 rounded-lg border border-border/50">
            <button @click="toggleDark()" class="w-7 h-7 flex items-center justify-center rounded-md hover:bg-background hover:shadow-sm text-muted-foreground hover:text-foreground transition-all">
              <svg v-if="!isDark" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
              <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
            </button>
            <button class="w-7 h-7 flex items-center justify-center rounded-md hover:bg-background hover:shadow-sm text-muted-foreground hover:text-foreground transition-all">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
            <button class="w-7 h-7 flex items-center justify-center rounded-md hover:bg-background hover:shadow-sm text-muted-foreground hover:text-foreground transition-all">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
            </button>
          </div>

          <div class="hidden sm:flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-400 pl-1">
            <span class="relative flex h-2 w-2">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
            </span>
            <span class="hidden lg:inline">Online</span>
          </div>

          <div class="text-[10px] font-bold px-2 py-1.5 rounded-full border border-border text-muted-foreground leading-none ml-1">
            v3.0.0
          </div>
        </div>
      </header>

      <main class="flex-1 w-full p-0">
        <slot />
      </main>
    </SidebarInset>
  </SidebarProvider>
</template>
