'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Icon } from '@/components/marketing/icons';
import { ChimboLogo } from '@/components/brand/chimbo-logo';
import { adminNav, isAdminNavActive } from '@/features/admin/nav';
import { cn } from '@/lib/utils';
import { LogoutButton } from '@/features/auth/logout-button';

export function AdminShell({
  adminName,
  children,
}: {
  adminName: string;
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  return (
    <div className="flex min-h-dvh bg-[#0B1220] text-white">
      {/* Desktop sidebar */}
      <aside className="sticky top-0 hidden h-dvh w-64 shrink-0 flex-col border-r border-white/10 bg-[#070B14] lg:flex">
        <div className="border-b border-white/10 px-4 py-4">
          <ChimboLogo variant="full" className="chimbo-logo-on-dark h-9 w-auto max-w-[9rem] object-contain" />
          <p className="mt-2 text-sm font-extrabold">Control Center</p>
        </div>
        <nav className="flex-1 overflow-y-auto px-2 py-3" aria-label="Super Admin">
          {adminNav.map((section, i) => (
            <div key={section.title ?? `s-${i}`} className={cn(i > 0 && 'mt-4')}>
              {section.title && (
                <p className="mb-1.5 px-3 text-[10px] font-bold uppercase tracking-[0.14em] text-white/35">
                  {section.title}
                </p>
              )}
              <ul className="space-y-0.5">
                {section.items.map(item => {
                  const active = isAdminNavActive(pathname, item);
                  return (
                    <li key={item.href}>
                      <Link
                        href={item.href}
                        className={cn(
                          'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-semibold transition-colors',
                          active ? 'bg-primary text-white' : 'text-white/70 hover:bg-white/5 hover:text-white',
                        )}
                      >
                        <Icon name={item.icon} size={16} />
                        {item.label}
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </nav>
        <div className="border-t border-white/10 p-3">
          <p className="truncate px-2 text-xs text-white/50">{adminName}</p>
          <div className="mt-2 px-1"><LogoutButton /></div>
        </div>
      </aside>

      <div className="flex min-w-0 flex-1 flex-col bg-[#F4F7FB] text-navy">
        <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-card/95 px-3 backdrop-blur-md lg:px-6">
          <div className="flex items-center gap-2">
            <button
              type="button"
              className="inline-flex size-10 items-center justify-center rounded-lg border border-border lg:hidden"
              aria-label="Open navigation"
              onClick={() => setOpen(true)}
            >
              <Icon name="menu" size={18} />
            </button>
            <div>
              <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-teal">Platform operations</p>
              <p className="text-sm font-bold text-navy">Super Admin</p>
            </div>
          </div>
          <Link href="/dashboard" className="text-xs font-semibold text-muted-foreground hover:text-navy">
            Broker panel →
          </Link>
        </header>

        <main id="main" className="mx-auto w-full max-w-7xl flex-1 px-3 py-5 sm:px-5 lg:px-6">
          {children}
        </main>
      </div>

      {/* Mobile drawer */}
      {open && (
        <div className="fixed inset-0 z-50 lg:hidden" role="dialog" aria-modal>
          <button type="button" className="absolute inset-0 bg-navy/50" aria-label="Close" onClick={() => setOpen(false)} />
          <div className="absolute inset-y-0 left-0 flex w-[min(18rem,90vw)] flex-col bg-[#070B14] text-white shadow-xl">
            <div className="flex items-center justify-between border-b border-white/10 px-4 py-4">
              <p className="font-extrabold">Control Center</p>
              <button type="button" onClick={() => setOpen(false)} aria-label="Close menu">
                <Icon name="close" size={18} />
              </button>
            </div>
            <nav className="flex-1 overflow-y-auto px-2 py-3">
              {adminNav.flatMap(s => s.items).map(item => (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setOpen(false)}
                  className={cn(
                    'mb-0.5 flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-semibold',
                    isAdminNavActive(pathname, item) ? 'bg-primary' : 'text-white/75 hover:bg-white/5',
                  )}
                >
                  <Icon name={item.icon} size={16} />
                  {item.label}
                </Link>
              ))}
            </nav>
          </div>
        </div>
      )}
    </div>
  );
}