'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { useState } from 'react'
import {
  LayoutDashboard,
  Users,
  FileText,
  TrendingUp,
  ShieldCheck,
  LogOut,
  Menu,
  X,
} from 'lucide-react'

interface AdminShellProps {
  admin: { id: string; email: string; name: string }
  children: React.ReactNode
}

const NAV = [
  { href: '/pitch-admin', label: 'Dashboard', icon: LayoutDashboard, exact: true },
  { href: '/pitch-admin/investors', label: 'Investors', icon: Users },
  { href: '/pitch-admin/audit', label: 'Audit Log', icon: FileText },
  { href: '/pitch-admin/financial-model', label: 'Financial Model', icon: TrendingUp },
  { href: '/pitch-admin/admins', label: 'Admins', icon: ShieldCheck },
]

export default function AdminShell({ admin, children }: AdminShellProps) {
  const pathname = usePathname()
  const router = useRouter()
  const [open, setOpen] = useState(false)

  async function logout() {
    await fetch('/api/admin-auth/logout', { method: 'POST' })
    router.push('/pitch-admin/login')
  }

  function isActive(item: typeof NAV[number]) {
    if (item.exact) return pathname === item.href
    return pathname === item.href || pathname.startsWith(item.href + '/')
  }

  return (
    <div className="min-h-screen bg-[#0a0a1a] text-white flex">
      {/* Sidebar */}
      <aside
        className={`fixed lg:static inset-y-0 left-0 z-40 w-64 bg-black/40 backdrop-blur-xl border-r border-white/[0.06]
          transform transition-transform lg:transform-none ${open ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}
      >
        <div className="h-full flex flex-col">
          <div className="px-6 py-5 border-b border-white/[0.06]">
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
                <svg width="20" height="20" viewBox="0 0 40 40" fill="none">
                  <path d="M8 12L20 6L32 12V28L20 34L8 28V12Z" stroke="white" strokeWidth="2.5" fill="none" />
                  <circle cx="20" cy="20" r="3" fill="white" />
                </svg>
              </div>
              <div className="min-w-0">
                <div className="text-sm font-semibold text-white">BreakPilot</div>
                <div className="text-[10px] text-white/40 uppercase tracking-wider">Pitch Admin</div>
              </div>
            </div>
          </div>

          <nav className="flex-1 px-3 py-4 space-y-1">
            {NAV.map((item) => {
              const Icon = item.icon
              const active = isActive(item)
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setOpen(false)}
                  className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors
                    ${active
                      ? 'bg-indigo-500/15 text-indigo-300 border border-indigo-500/20'
                      : 'text-white/60 hover:bg-white/[0.04] hover:text-white/90 border border-transparent'}`}
                >
                  <Icon className="w-4 h-4" />
                  {item.label}
                </Link>
              )
            })}
          </nav>

          <div className="px-3 py-4 border-t border-white/[0.06]">
            <div className="px-3 py-2 mb-2">
              <div className="text-sm font-medium text-white/90 truncate">{admin.name}</div>
              <div className="text-xs text-white/40 truncate">{admin.email}</div>
            </div>
            <button
              onClick={logout}
              className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-white/60 hover:bg-red-500/10 hover:text-red-300 transition-colors"
            >
              <LogOut className="w-4 h-4" />
              Logout
            </button>
          </div>
        </div>
      </aside>

      {/* Mobile overlay */}
      {open && (
        <div
          onClick={() => setOpen(false)}
          className="fixed inset-0 bg-black/60 z-30 lg:hidden"
        />
      )}

      {/* Main content */}
      <div className="flex-1 flex flex-col min-w-0">
        <header className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
          <button
            onClick={() => setOpen(true)}
            className="w-9 h-9 rounded-lg bg-white/[0.04] flex items-center justify-center"
          >
            <Menu className="w-5 h-5" />
          </button>
          <div className="text-sm font-semibold">Pitch Admin</div>
          <div className="w-9" />
        </header>
        <main className="flex-1 p-6 lg:p-8 overflow-y-auto">{children}</main>
      </div>
    </div>
  )
}