/* TMD Portal — shell, roles, routing. */
const uSa = React.useState;

const NAV = [
  { g: 'Work', items: [{ r: 'dash', l: 'Today' }, { r: 'inquiries', l: 'Inquiries' }, { r: 'board', l: 'Work' }, { r: 'tasks', l: 'My tasks' }, { r: 'clients', l: 'Clients' }, { r: 'people', l: 'People' }, { r: 'workload', l: 'Workload' }] },
  { g: 'Money', items: [{ r: 'expenses', l: 'Expenses', money: true }, { r: 'invoices', l: 'Invoices', money: true }, { r: 'pnl', l: 'Client profit', owner: true }] },
  { g: 'Settings', items: [{ r: 'pipelines', l: 'Pipelines' }] }
];

function App() {
  const auth = useSession();
  const [mobile, setMobile] = uSa(() => window.matchMedia('(max-width: 820px)').matches);
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 820px)');
    const on = e => setMobile(e.matches);
    mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);
  const [route, setRoute] = uSa('inquiries');
  const [dels, setDels] = uSa(T.deliverables);
  const [tasks, setTasks] = uSa(T.tasks);
  const [expenses, setExpenses] = uSa(T.expenses);
  const [invoices, setInvoices] = uSa(T.invoices);
  const [toast, setToast] = uSa(null);
  const [navOpen, setNavOpen] = uSa(false);

  const staff = auth.staff || { person_id: 'un', role: 'Intern', name: '' };
  const me = staff.person_id || 'un', role = staff.role;
  const canMoney = role !== 'Intern', owner = role === 'Owner';
  const go = r => { setRoute(r); setNavOpen(false); window.scrollTo(0, 0); };
  const fire = (msg, undo) => { setToast({ msg, undo }); setTimeout(() => setToast(null), 3200); };

  const app = {
    role, me, mobile, dels, tasks, expenses, invoices, canMoney, go, toast: fire, staff, staffList: auth.staffList, session: auth.session,
    setDone: id => { setTasks(ts => ts.map(t => t.id === id ? Object.assign({}, t, { state: t.state === 'done' ? 'todo' : 'done' }) : t)); fire('Task updated', true); },
    advance: id => {
      setDels(ds => ds.map(d => {
        if (d.id !== id) return d;
        const st = typeOf(d.type).stages, i = st.findIndex(s => s.name === stageMeta(d).name);
        return i < st.length - 1 ? Object.assign({}, d, { stage: st[i + 1].name }) : d;
      }));
      fire('Stage moved', true);
    },
    addExpense: e => { setExpenses(x => [Object.assign({ id: 'e' + Date.now(), date: T.TODAY, desc: e.cat + ' — ' + (e.client ? client(e.client).name : 'overhead') }, e)].concat(x)); fire('Expense logged', true); },
    issue: ids => { setInvoices(v => v.map(i => ids.includes(i.id) ? Object.assign({}, i, { status: 'issued', no: 'TMD-' + T.TODAY.slice(0, 4) + '-001', issued: T.TODAY, due: isoShift(7) }) : i)); fire('Invoice issued'); }
  };

  if (auth.loading) return <div className="signin"><p className="muted">Loading</p></div>;
  if (!auth.session) return <SignIn />;
  if (auth.needsPassword) return <SetPassword email={auth.session.user.email} onDone={auth.passwordSet} onOut={auth.signOut} />;
  if (!auth.staff) return <NotStaff email={auth.session.user.email} onOut={auth.signOut} />;

  const denied = (r) => (r === 'pnl' && !owner) || ((r === 'expenses' || r === 'invoices' || r.startsWith('inv:')) && !canMoney);
  let body;
  if (denied(route)) body = <Denied role={role} onBack={() => go('tasks')} />;
  else if (route === 'inquiries') body = <Inquiries app={app} session={auth.session} />;
  else if (route.startsWith('del:')) body = <DelDetail app={app} id={route.slice(4)} />;
  else if (route.startsWith('client:')) body = <ClientDetail app={app} id={route.slice(7)} />;
  else if (route.startsWith('inv:')) body = <InvoiceDetail app={app} id={route.slice(4)} />;
  else body = { dash: <Dashboard app={app} />, board: <Board app={app} />, tasks: <MyTasks app={app} />, clients: <Clients app={app} />, people: <Staff app={app} session={auth.session} reloadSession={auth.reload} />, workload: <Workload app={app} />, expenses: <Expenses app={app} />, invoices: <Invoices app={app} />, pnl: <PnL app={app} />, pipelines: <Pipelines app={app} /> }[route] || <Dashboard app={app} />;

  const visible = NAV.map(g => ({ g: g.g, items: g.items.filter(i => !(i.owner && !owner) && !(i.money && !canMoney)) })).filter(g => g.items.length);
  const tabs = role === 'Intern' ? [{ r: 'inquiries', l: 'Inquiries' }, { r: 'tasks', l: 'Tasks' }, { r: 'board', l: 'Work' }] : [{ r: 'inquiries', l: 'Inquiries' }, { r: 'dash', l: 'Today' }, { r: 'board', l: 'Work' }].concat(canMoney ? [{ r: 'expenses', l: 'Money' }] : []);

  const chrome = (
    <div className={'app' + (mobile ? ' app-m' : '')}>
      {!mobile ? (
        <aside className="nav">
          <div className="nav-mark"><Mark size={21} /></div>
          {visible.map(g => (
            <div key={g.g} className="nav-g">
              <div className="nav-gh">{g.g}</div>
              {g.items.map(i => <button key={i.r} type="button" className={'nav-i' + (route === i.r || route.startsWith(i.r.slice(0, 3) + ':') ? ' on' : '')} onClick={() => go(i.r)}>{i.l}</button>)}
            </div>
          ))}
          <div className="nav-me"><span className="who"><Avatar id={me} /><span>{staff.name || person(me).name}</span></span><em>{role}</em></div>
          <button type="button" className="nav-out" onClick={auth.signOut}>Sign out</button>
        </aside>
      ) : (
        <header className="mhead">
          <button type="button" className="mburger" onClick={() => setNavOpen(true)} aria-label="Menu">≡</button>
          <span className="sm-mark"><DS.Wordmark variant="short" size={18} /></span><Avatar id={me} size={28} />
        </header>
      )}
      <main className="main">{body}</main>
      {mobile ? (
        <nav className="mtabs">{tabs.map(t => <button key={t.r} type="button" className={route === t.r ? 'on' : ''} onClick={() => go(t.r)}>{t.l}</button>)}</nav>
      ) : null}
      {mobile && navOpen ? (
        <div className="scrim" onClick={() => setNavOpen(false)}>
          <div className="mnav" onClick={e => e.stopPropagation()}>
            {visible.map(g => <div key={g.g} className="nav-g"><div className="nav-gh">{g.g}</div>{g.items.map(i => <button key={i.r} type="button" className={'nav-i' + (route === i.r ? ' on' : '')} onClick={() => go(i.r)}>{i.l}</button>)}</div>)}
            <div className="nav-me"><span className="who"><Avatar id={me} /><span>{staff.name || person(me).name}</span></span><em>{role}</em></div>
            <button type="button" className="nav-out" onClick={auth.signOut}>Sign out</button>
          </div>
        </div>
      ) : null}
      <Toast toast={toast} onUndo={() => { setToast(null); fire('Reverted'); }} />
    </div>
  );

  return <div className="root">{chrome}</div>;
}

ReactDOM.createRoot(document.getElementById('tmd-root')).render(<App />);