import type { ReactNode } from 'react'
import { NavLink } from 'react-router-dom'
import { LogOut, PhoneOutgoing, Radio, Zap } from 'lucide-react'
import { useZino } from '../zino-sdk'

const navItem =
  'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors'

export default function Layout({ children }: { children: ReactNode }) {
  const { auth, client } = useZino()

  const signOut = () => {
    auth.logout()
    // The router is inside the auth gate in App, so a reload is the simplest
    // way back to the login screen without threading state through context.
    window.location.reload()
  }

  const email = (() => {
    try {
      const t = client.getToken()
      if (!t) return ''
      return JSON.parse(atob(t.split('.')[1])).email ?? ''
    } catch {
      return ''
    }
  })()

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <header className="sticky top-0 z-10 border-b border-slate-200 bg-white">
        <div className="mx-auto flex max-w-6xl items-center gap-6 px-6 py-3">
          <div className="flex items-center gap-2">
            <span className="grid h-8 w-8 place-items-center rounded-lg bg-emerald-600 text-white">
              <Zap size={17} />
            </span>
            <div className="leading-tight">
              <div className="text-sm font-semibold">Verta Motors</div>
              <div className="text-xs text-slate-500">EV Sales Desk</div>
            </div>
          </div>

          <nav className="flex items-center gap-1">
            <NavLink
              to="/place-call"
              className={({ isActive }) =>
                `${navItem} ${
                  isActive
                    ? 'bg-emerald-50 text-emerald-700'
                    : 'text-slate-600 hover:bg-slate-100'
                }`
              }
            >
              <PhoneOutgoing size={16} />
              Place a call
            </NavLink>
            <NavLink
              to="/monitor"
              className={({ isActive }) =>
                `${navItem} ${
                  isActive
                    ? 'bg-emerald-50 text-emerald-700'
                    : 'text-slate-600 hover:bg-slate-100'
                }`
              }
            >
              <Radio size={16} />
              Live monitor
            </NavLink>
          </nav>

          <div className="ml-auto flex items-center gap-3">
            {email && <span className="text-xs text-slate-500">{email}</span>}
            <button
              onClick={signOut}
              className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-600 hover:bg-slate-100"
            >
              <LogOut size={14} />
              Sign out
            </button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-6xl px-6 py-8">{children}</main>
    </div>
  )
}