import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom'
import { useZino } from '../zino-sdk'
import { PROCESSES } from '../config'

const link = ({ isActive }: { isActive: boolean }) =>
  `block px-3 py-1.5 rounded text-sm ${isActive ? 'bg-blue-50 text-blue-700 font-medium' : 'text-slate-700 hover:bg-slate-100'}`

export default function Layout() {
  const { user, auth, setUser } = useZino()
  const nav = useNavigate()
  const signOut = async () => { await auth.logout(); setUser(null); nav('/login') }
  return (
    <div className="min-h-screen flex flex-col bg-slate-50 text-slate-800">
      <header className="h-14 bg-white border-b border-slate-200 px-5 flex items-center justify-between">
        <Link to="/" className="font-semibold">Truck Desk</Link>
        <div className="flex items-center gap-4 text-sm">
          <span className="text-slate-500">{user?.name || user?.email}</span>
          <button onClick={signOut} className="text-blue-700 hover:underline">Sign out</button>
        </div>
      </header>
      <div className="flex flex-1">
        <nav className="w-60 bg-white border-r border-slate-200 p-3 space-y-4" aria-label="Processes">
          <NavLink to="/" end className={link}>Home</NavLink>
          {PROCESSES.map((p) => (
            <div key={p.slug}>
              <div className="px-3 text-xs uppercase tracking-wide text-slate-400 mb-1">{p.name}</div>
              {p.lists.map((l) => (
                <NavLink key={l.slug} to={`/lists/${l.slug}`} className={link}>{l.name}</NavLink>
              ))}
            </div>
          ))}
        </nav>
        <main className="flex-1 p-6 min-w-0"><Outlet /></main>
      </div>
    </div>
  )
}