import { NavLink, Outlet } from 'react-router-dom'
import { useZino } from '../api/provider.jsx'
import { STAGES } from '../api/config.js'
import logo from '../assets/brand/zurich_logo.webp'
import './Shell.css'

/**
 * The sidebar IS the pipeline, in the order a lead moves — so the shape of the
 * process is legible before any record is opened. The one human queue is marked
 * as such, because it is the only place the machine stops.
 */
export default function Shell() {
  const { user, signOut } = useZino()
  const work = STAGES.filter((s) => s.kind !== 'end')
  const closed = STAGES.filter((s) => s.kind === 'end')

  return (
    <div className="shell">
      <header className="shell__top">
        <div className="shell__brand">
          <img src={logo} alt="Zurich Kotak General Insurance" />
          <div>
            <strong>Lead Desk</strong>
            <span>Lead to Policy</span>
          </div>
        </div>
        <div className="shell__who">
          <div className="shell__user">
            <strong>{user?.name || user?.email || 'Signed in'}</strong>
            <span>{user?.email}</span>
          </div>
          <button type="button" className="shell__signout" onClick={signOut}>
            Sign out
          </button>
        </div>
      </header>

      <div className="shell__body">
        <nav className="shell__nav" aria-label="Pipeline">
          <p className="shell__navlabel">Pipeline</p>
          {work.map((s) => (
            <NavLink
              key={s.uid}
              to={`/stage/${s.uid}`}
              className={({ isActive }) =>
                'shell__stage' + (isActive ? ' is-active' : '') + (s.kind === 'human' ? ' is-human' : '')
              }
            >
              <span className="shell__stagename">{s.name}</span>
              {s.kind === 'human' ? <span className="shell__badge">you</span> : null}
            </NavLink>
          ))}
          <p className="shell__navlabel shell__navlabel--closed">Closed</p>
          {closed.map((s) => (
            <NavLink
              key={s.uid}
              to={`/stage/${s.uid}`}
              className={({ isActive }) => 'shell__stage' + (isActive ? ' is-active' : '')}
            >
              <span className="shell__stagename">{s.name}</span>
            </NavLink>
          ))}
        </nav>

        <main className="shell__main">
          <Outlet />
        </main>
      </div>
    </div>
  )
}