'use client'
import React, { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { logout } from '@/lib/auth'
import { Button } from '@/components/ui/Button'

const NAV_ITEMS = [
  { href: '/admin/documents', label: 'Documents', icon: '📄' },
  { href: '/admin/knowledge', label: 'Knowledge', icon: '🧠' },
  { href: '/admin/curriculum', label: 'Curriculum', icon: '📅' },
]

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const [mobileNavOpen, setMobileNavOpen] = useState(false)

  return (
    <div
      style={{
        minHeight: '100dvh',
        display: 'flex',
        flexDirection: 'column',
        background: 'var(--bg)',
      }}
    >
      {/* Top bar */}
      <header
        style={{
          background: 'var(--bg-dark)',
          color: 'var(--paper)',
          height: 'var(--nav-height)',
          display: 'flex',
          alignItems: 'center',
          padding: '0 var(--s-5)',
          gap: 'var(--s-4)',
          position: 'sticky',
          top: 0,
          zIndex: 100,
          flexShrink: 0,
        }}
      >
        {/* Mobile menu toggle */}
        <button
          onClick={() => setMobileNavOpen((o) => !o)}
          style={{
            background: 'none',
            border: 'none',
            color: 'var(--paper)',
            cursor: 'pointer',
            fontSize: '22px',
            padding: 'var(--s-1)',
            minWidth: '44px',
            minHeight: '44px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
          aria-label="Toggle navigation"
        >
          ☰
        </button>

        <span style={{ fontWeight: 700, fontSize: 'var(--t-body)', flex: 1 }}>
          Admin
        </span>

        <Link href="/app" style={{ textDecoration: 'none' }}>
          <span style={{ fontSize: 'var(--t-small)', color: 'rgba(255,255,255,0.75)', cursor: 'pointer' }}>
            Employee app →
          </span>
        </Link>

        <Button
          variant="ghost"
          size="sm"
          onClick={logout}
          style={{
            color: 'rgba(255,255,255,0.75)',
            borderColor: 'rgba(255,255,255,0.25)',
          }}
        >
          Logout
        </Button>
      </header>

      <div style={{ display: 'flex', flex: 1, position: 'relative' }}>
        {/* Sidebar (desktop) */}
        <nav
          style={{
            width: '220px',
            background: 'var(--bg-warm)',
            borderRight: '1px solid var(--cream)',
            padding: 'var(--s-5) 0',
            display: 'none',
            flexDirection: 'column',
            gap: 'var(--s-1)',
            position: 'sticky',
            top: 'var(--nav-height)',
            height: 'calc(100dvh - var(--nav-height))',
            overflowY: 'auto',
            flexShrink: 0,
          }}
          className="admin-sidebar"
        >
          {NAV_ITEMS.map((item) => {
            const active = pathname.startsWith(item.href)
            return (
              <Link key={item.href} href={item.href} style={{ textDecoration: 'none' }}>
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 'var(--s-3)',
                    padding: 'var(--s-3) var(--s-5)',
                    background: active ? 'var(--bg)' : 'transparent',
                    borderRight: active ? '3px solid var(--accent)' : '3px solid transparent',
                    fontSize: 'var(--t-body)',
                    fontWeight: active ? 600 : 400,
                    color: active ? 'var(--accent)' : 'var(--fg)',
                    transition: 'background 150ms',
                    cursor: 'pointer',
                  }}
                >
                  <span>{item.icon}</span>
                  <span>{item.label}</span>
                </div>
              </Link>
            )
          })}
        </nav>

        {/* Mobile nav dropdown */}
        {mobileNavOpen && (
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              background: 'var(--bg-warm)',
              borderBottom: '1px solid var(--cream)',
              zIndex: 99,
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            {NAV_ITEMS.map((item) => {
              const active = pathname.startsWith(item.href)
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setMobileNavOpen(false)}
                  style={{ textDecoration: 'none' }}
                >
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: 'var(--s-3)',
                      padding: 'var(--s-4) var(--s-5)',
                      borderBottom: '1px solid var(--cream)',
                      background: active ? 'var(--bg)' : 'transparent',
                      fontSize: 'var(--t-body)',
                      fontWeight: active ? 600 : 400,
                      color: active ? 'var(--accent)' : 'var(--fg)',
                    }}
                  >
                    <span>{item.icon}</span>
                    <span>{item.label}</span>
                  </div>
                </Link>
              )
            })}
          </div>
        )}

        {/* Main content */}
        <main
          style={{
            flex: 1,
            padding: 'var(--s-5)',
            maxWidth: '900px',
            width: '100%',
            margin: '0 auto',
          }}
        >
          {children}
        </main>
      </div>

      <style>{`
        @media (min-width: 768px) {
          .admin-sidebar {
            display: flex !important;
          }
        }
      `}</style>
    </div>
  )
}
