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

/**
 * The sidebar groups the pipeline by WHO IS HOLDING each lead, not by where it
 * sits in the process. Fourteen flat stages answer "what is the process?", which
 * is not the question anyone signing in has; these answer "is anything waiting
 * on me?". Queues that need a person are named by what they want done.
 *
 * It deliberately carries no counts. A tally here can only come from fetching
 * every lead on a timer and counting client-side, which is a second full list
 * call per open tab that disagrees with the queue's own total the moment either
 * one is paged. The count belongs on the queue, which already has it from the
 * server.
 */
export default function Shell() {
  return (
    <div className="shell">
      <header className="shell__top">
        <div className="shell__brand">
          <img src={logo} alt="Zurich Kotak General Insurance" />
          <div className="shell__brandtext">
            <strong>Lead Desk</strong>
            <span>Lead to Policy</span>
          </div>
        </div>
        <UserMenu />
      </header>

      <div className="shell__body">
        <nav className="shell__nav" aria-label="Pipeline">
          <NavLink
            to="/"
            end
            className={({ isActive }) => 'shell__today' + (isActive ? ' is-active' : '')}
          >
            Today
          </NavLink>

          <NavLink to="/add" className="shell__add">
            <svg viewBox="0 0 16 16" aria-hidden="true">
              <path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor" strokeWidth="1.7"
                    strokeLinecap="round" />
            </svg>
            Add a lead
          </NavLink>

          {NAV_GROUPS.map((group) => {
            const stages = STAGES.filter((s) => s.kind === group.kind)
            if (!stages.length) return null
            return (
              <div className="shell__group" key={group.kind}>
                <p className="shell__navlabel">{group.label}</p>
                <div className="shell__stages">
                  {stages.map((s) => (
                    <NavLink
                      key={s.uid}
                      to={`/stage/${s.uid}`}
                      title={s.need ? s.name : undefined}
                      className={({ isActive }) =>
                        'shell__stage' + (isActive ? ' is-active' : '') + (s.kind === 'needs' ? ' is-needed' : '')
                      }
                    >
                      <span className="shell__stagename">{s.need ?? s.name}</span>
                    </NavLink>
                  ))}
                </div>
              </div>
            )
          })}
        </nav>

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