---
interface Props {
  title: string;
}

const { title } = Astro.props;
const currentPath = Astro.url.pathname;

import SystemStatus from '@/components/admin/SystemStatus';
import SystemStatusBar from '@/components/admin/SystemStatusBar';
import { GlobalToaster, CoreProvider } from '@/components/providers/CoreProviders';


const navGroups = [
  {
    title: 'Command Station',
    items: [
      { href: '/admin', label: 'Mission Control', icon: 'home' },
      { href: '/admin/sites/jumpstart', label: 'Jumpstart Test 🚀', icon: 'rocket_launch' },
      { href: '/admin/content-factory', label: 'Content Factory', icon: 'factory' },
    ]
  },
  {
    title: 'Intelligence Library',
    items: [
      { href: '/admin/content/avatars', label: 'Avatar Intelligence', icon: 'users' },
      { href: '/admin/collections/avatar-variants', label: 'Avatar Variants', icon: 'users' },
      { href: '/admin/collections/geo-intelligence', label: 'Geo Intelligence', icon: 'map' },
      { href: '/admin/collections/spintax-dictionaries', label: 'Spintax Dictionaries', icon: 'puzzle' },
      { href: '/admin/collections/cartesian-patterns', label: 'Cartesian Patterns', icon: 'hub' },
    ]
  },
  {
    title: 'Content Engine',
    items: [
      { href: '/admin/collections/campaign-masters', label: 'Campaigns', icon: 'web' },
      { href: '/admin/collections/content-fragments', label: 'Content Fragments', icon: 'puzzle' },
      { href: '/admin/collections/headline-inventory', label: 'Headlines', icon: 'puzzle' },
      { href: '/admin/collections/offer-blocks', label: 'Offer Blocks', icon: 'puzzle' },
      { href: '/admin/collections/generation-jobs', label: 'Generation Queue', icon: 'history' },
    ]
  },
  {
    title: 'Production',
    items: [
      { href: '/admin/sites', label: 'Sites & Deployments', icon: 'web' },
      { href: '/admin/seo/articles', label: 'Generated Articles', icon: 'newspaper' },
      { href: '/admin/leads', label: 'Leads & Inquiries', icon: 'users' },
      { href: '/admin/media/templates', label: 'Media Assets', icon: 'image' },
    ]
  },
  {
    title: 'System',
    items: [
      { href: '/admin/settings', label: 'Configuration', icon: 'settings' },
      { href: '/admin/content/work_log', label: 'System Logs', icon: 'history' },
    ]
  }
];

function isActive(href: string) {
  if (href === '/admin') return currentPath === '/admin';
  return currentPath.startsWith(href);
}
---

<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title} | Spark Admin</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    
    <style is:global>
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
      
      :root {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;
        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;
        --primary: 217.2 91.2% 59.8%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 224.3 76.3% 48%;
        --radius: 0.5rem;
      }
      
      * {
        border-color: hsl(var(--border));
      }
      
      body {
        font-family: 'Inter', sans-serif;
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
      }
    </style>
  </head>
  
  <body class="min-h-screen flex antialiased">
    <!-- Sidebar -->
    <aside class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col fixed h-full overflow-y-auto">
      <div class="p-6 border-b border-gray-800 sticky top-0 bg-gray-900 z-10">
        <a href="/admin" class="flex items-center gap-3">
          <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <span class="text-xl font-bold text-white">Spark Admin</span>
        </a>
      </div>
      
      <nav class="flex-1 p-4 space-y-8">
        {navGroups.map((group) => (
          <div>
            <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
              {group.title}
            </h3>
            <div class="space-y-1">
              {group.items.map((item) => (
                <a
                  href={item.href}
                  class={`flex items-center gap-3 px-4 py-2 rounded-lg transition-colors text-sm ${
                    isActive(item.href)
                      ? 'bg-primary/20 text-primary font-medium'
                      : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                  }`}
                >
                  <span class="w-5 h-5 flex-shrink-0">
                    {item.icon === 'home' && (
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
                    )}
                    {item.icon === 'rocket_launch' && (
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
                    )}
                    {item.icon === 'factory' && (
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m8-2a2 2 0 00-2-2H9a2 2 0 00-2 2v2m7-2a2 2 0 00-2-2h-1a2 2 0 00-2 2v2m-6-2a2 2 0 00-2-2h-1a2 2 0 00-2 2v2" /></svg>
                    )}
                    {item.icon === 'users' && (
                       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                    )}
                    {item.icon === 'map' && (
                       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" /></svg>
                    )}
                     {item.icon === 'puzzle' && (
                       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" /></svg>
                    )}
                    {item.icon === 'hub' && (
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
                    )}
                    {item.icon === 'web' && (
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg>
                    )}
                    {item.icon === 'newspaper' && (
                       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /></svg>
                    )}
                    {item.icon === 'image' && (
                       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                    )}
                    {item.icon === 'settings' && (
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                    )}
                     {item.icon === 'history' && (
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    )}
                  </span>
                  <span class="font-medium">{item.label}</span>
                </a>
              ))}
            </div>
          </div>
        ))}
      </nav>
      
      <div class="px-4 pb-4 mt-auto">
          <SystemStatus client:load />
      </div>

      <div class="p-4 border-t border-gray-800">
        <a 
          href="/"
          target="_blank"
          class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
          <span class="font-medium">View Site</span>
        </a>
      </div>
    </aside>
    
    <!-- Main Content -->
    <div class="flex-1 ml-64">
      <header class="sticky top-0 z-40 bg-gray-900/80 backdrop-blur-lg border-b border-gray-800 px-8 py-4">
        <div class="flex items-center justify-between">
          <h1 class="text-2xl font-bold text-white">{title}</h1>
          
          <div class="flex items-center gap-4">
            <button class="p-2 text-gray-400 hover:text-white rounded-lg hover:bg-gray-800 transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </button>
            
            <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold">
              A
            </div>
          </div>
        </div>
      </header>
      
      <main class="p-8 pb-24">
        <CoreProvider client:load>
          <slot />
        </CoreProvider>
      </main>
    </div>

    <!-- Full-Width System Status Bar -->
    <SystemStatusBar client:load />
    <GlobalToaster client:load />
  </body>
</html>
