import { Outlet, useNavigate } from 'react-router-dom'
import { useMemo } from 'react'
import { useAuth } from '../context/useAuth.js'
import { useGlobalStore, selectSidebarOpen } from '../context/useGlobalStore.js'



const nav = [
  { to: '/dashboard', label: 'Dashboard', icon: (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7"/><path d="M9 22V12h6v10"/></svg>
  ) },
  { to: '/suppliers', label: 'Supplier', icon: (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M7 9h10"/><path d="M7 13h6"/></svg>
  ) },
  { to: '/shipments', label: 'Shipment', icon: (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M21 7v6h-6"/><path d="M3 7h6v6"/></svg>
  ) },
  { to: '/deliveries', label: 'Delivery', icon: (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.732l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.732l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22" x2="12" y2="12"/></svg>
  ) },
  { to: '/reports', label: 'Reports', icon: (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14"/><path d="M8 17h8"/><path d="M8 13h8"/><path d="M8 9h8"/></svg>
  ) },
]

export default function DashboardLayout() {
  const { logout, user } = useAuth()
  const navigate = useNavigate()
  const sidebarOpen = useGlobalStore(selectSidebarOpen)
  const setSidebarOpen = useGlobalStore((s) => s.setSidebarOpen)

  const items = useMemo(() => nav, [])

  const go = (to) => {
    setSidebarOpen(false)
    navigate(to)
  }

  return (
    <div className="min-h-screen bg-slate-50">
      {/* Mobile top bar */}
      <div className="sticky top-0 z-40 bg-white/90 backdrop-blur">
        <div className="flex items-center justify-between px-4 py-3 shadow-sm">
          <div className="flex items-center gap-3">
            <button
              className="inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white p-2 shadow-sm md:hidden"
              onClick={() => setSidebarOpen(!sidebarOpen)}
              aria-label="Open navigation"
            >
              <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="3" y1="6" x2="21" y2="6" />
                <line x1="3" y1="12" x2="21" y2="12" />
                <line x1="3" y1="18" x2="21" y2="18" />
              </svg>
            </button>
            <div className="flex flex-col">
              <p className="text-sm font-semibold text-slate-900">SCMS</p>
              <p className="text-xs text-slate-500">Supply Chain Management System</p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <span className="hidden text-sm text-slate-700 sm:block">{user?.username || ''}</span>
            <button
              onClick={() => {
                logout()
                navigate('/login')
              }}
              className="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-3 py-2 text-sm font-medium text-white shadow-sm hover:bg-slate-800"
            >
              <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
              Logout
            </button>
          </div>
        </div>
      </div>

      <div className="flex">
        {/* Desktop sidebar */}
        <aside className="hidden w-72 shrink-0 border-r border-slate-200 bg-white md:block">
          <div className="p-5">
            <div className="rounded-2xl bg-slate-900 p-4 text-white">
              <p className="text-sm font-semibold">SCMS</p>
              <p className="mt-1 text-xs text-slate-200">Operations Console</p>
            </div>
          </div>

          <nav className="px-4 pb-5">
            <div className="space-y-2">
              {items.map((it) => (
                <a
                  key={it.to}
                  href={it.to}
                  onClick={(e) => {
                    e.preventDefault()
                    go(it.to)
                  }}
                  className={`flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors hover:bg-slate-200`}
                >
                  {it.icon}
                  {it.label}
                </a>
              ))}
            </div>
          </nav>
        </aside>

        {/* Mobile drawer */}
        {sidebarOpen ? (
          <div className="fixed inset-0 z-50 md:hidden">
            <button
              className="absolute inset-0 bg-black/40"
              onClick={() => setSidebarOpen(false)}
              aria-label="Close navigation"
            />
            <div className="absolute left-0 top-0 h-full w-80 border-r border-slate-200 bg-white shadow-xl">
              <div className="p-4">
                <p className="text-sm font-semibold text-slate-900">Navigation</p>
                <p className="mt-1 text-xs text-slate-500">SCMS</p>
              </div>
              <nav className="px-4 pb-5">
                <div className="space-y-2">
                  {items.map((it) => (
                    <a
                      key={it.to}
                      href={it.to}
                      onClick={(e) => {
                        e.preventDefault()
                        go(it.to)
                      }}
                      className="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200"
                    >
                      {it.icon}
                      {it.label}
                    </a>
                  ))}
                </div>
              </nav>
            </div>
          </div>
        ) : null}

        <main className="flex-1 p-4 md:p-6">
          <Outlet />
        </main>
      </div>
    </div>
  )
}

