/* ============================================================
   Shared UI components + icon set
   ============================================================ */
const { useState, useRef, useEffect, useLayoutEffect } = React;

/* ---- Icon set (simple line icons) ---- */
const ICONS = {
  dashboard: 'M3 3h7v8H3zM14 3h7v5h-7zM14 11h7v10h-7zM3 14h7v7H3z',
  drivers: 'M16 18a4 4 0 0 0-8 0 M12 11a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4',
  schedule: 'M4 5h16v15H4zM4 9h16M8 3v4M16 3v4M8 13h2M12 13h2M8 16h2',
  settings: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6 M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L16 1H8l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 3 12a7 7 0 0 0 .1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L8 23h8l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6A7 7 0 0 0 19 12z',
  board: 'M3 4h6v16H3zM10 4h6v16h-6zM17 4h4v16h-4z',
  arrow: 'M5 12h14M13 6l6 6-6 6',
  calendar: 'M4 5h16v15H4zM4 9h16M8 3v4M16 3v4',
  play: 'M7 5l12 7-12 7z',
  pause: 'M7 5h4v14H7zM13 5h4v14h-4z',
  plus: 'M12 5v14M5 12h14',
  edit: 'M4 20h4l11-11-4-4L4 16zM14 5l4 4',
  trash: 'M4 7h16M9 7V4h6v3M6 7l1 14h10l1-14',
  download: 'M12 3v12M7 11l5 5 5-5M4 21h16',
  refresh: 'M21 12a9 9 0 1 1-3-6.7M21 4v4h-4',
  check: 'M5 12l5 5 9-11',
  x: 'M6 6l12 12M18 6L6 18',
  menu: 'M4 6h16M4 12h16M4 18h16',
  sun: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19',
  moon: 'M21 13a8 8 0 1 1-9.5-9.5 6.5 6.5 0 0 0 9.5 9.5z',
  truck: 'M2 6h11v9H2zM13 9h4l4 3v3h-8zM7.5 18.5a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2M17.5 18.5a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2',
  pin: 'M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6',
  bolt: 'M13 2L4 14h6l-1 8 9-12h-6z',
  phone: 'M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A18 18 0 0 1 3 6a2 2 0 0 1 2-2z',
  clock: 'M12 7v5l3 2M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18',
  box: 'M3 7l9-4 9 4v10l-9 4-9-4zM3 7l9 4 9-4M12 11v10',
  chart: 'M4 20V10M10 20V4M16 20v-7M22 20H2',
  flag: 'M5 21V4M5 4h11l-2 4 2 4H5',
  collapse: 'M15 6l-6 6 6 6',
  filter: 'M3 5h18l-7 8v6l-4-2v-4z',
  tasks: 'M4 6l1.6 1.6L8 4M4 12l1.6 1.6L8 10M4 18l1.6 1.6L8 16M11 5h9M11 11h9M11 17h9',
};

function Icon({ name, style }) {
  const d = ICONS[name] || '';
  const paths = d.split(' M').map((seg, i) => (i === 0 ? seg : 'M' + seg));
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9"
         strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths.map((p, i) => <path key={i} d={p} />)}
    </svg>
  );
}

/* ---- Status helpers ---- */
const STATUS_META = {
  scheduled:  { label: 'Scheduled',  cls: 'b-gray'   },
  in_transit: { label: 'In Transit', cls: 'b-accent' },
  completed:  { label: 'Completed',  cls: 'b-green'  },
  delayed:    { label: 'Delayed',    cls: 'b-amber'  },
  off:        { label: 'Off Duty',   cls: 'b-gray'   },
};
function StatusBadge({ status }) {
  const m = STATUS_META[status] || STATUS_META.scheduled;
  return <span className={'badge ' + m.cls}><span className="dot"></span>{m.label}</span>;
}

function Route({ from, to }) {
  return (
    <span className="route">
      <span className="reg">{from}</span>
      <Icon name="arrow" />
      <span className="reg">{to}</span>
    </span>
  );
}

/* ---- Sidebar ---- */
function Sidebar({ view, setView, counts, collapsed, simulating, toggleSim, mobileOpen, closeMobile }) {
  const NAV = [
    { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
    { id: 'drivers',   label: 'Drivers',   icon: 'drivers', count: counts.drivers },
    { id: 'trucks',    label: 'Trucks',    icon: 'truck',   count: counts.trucks },
    { id: 'schedule',  label: 'Schedule',  icon: 'schedule' },
    { id: 'board',     label: 'Dispatch Board', icon: 'board' },
    { id: 'dispatcher', label: "Dispatcher's Work", icon: 'tasks' },
  ];
  return (
    <aside className={'sidebar' + (mobileOpen ? ' open' : '')}>
      <div className="brand">
        <div className="brand-mark"><Icon name="truck" style={{ color: '#fff' }} /></div>
        <div className="brand-text">
          <div className="b1">Ejay Logistics</div>
          <div className="b2">Weekly Dispatch</div>
        </div>
      </div>
      <nav className="nav">
        <div className="nav-label">Operations</div>
        {NAV.map(n => (
          <div key={n.id}
               className={'nav-item' + (view === n.id ? ' active' : '')}
               onClick={() => { setView(n.id); closeMobile && closeMobile(); }}>
            <Icon name={n.icon} />
            <span>{n.label}</span>
            {n.id === 'dispatcher' && counts.dispatcherAlerts > 0
              ? <span className="badge-count alert">{counts.dispatcherAlerts}</span>
              : (n.count != null && <span className="badge-count">{n.count}</span>)}
          </div>
        ))}
        <div className="nav-label">System</div>
        <div className={'nav-item' + (view === 'settings' ? ' active' : '')}
             onClick={() => { setView('settings'); closeMobile && closeMobile(); }}>
          <Icon name="settings" /><span>Settings</span>
        </div>
      </nav>
      <div className="sidebar-foot">
        <button className={'sim-toggle' + (simulating ? ' live' : '')} onClick={toggleSim}>
          <Icon name={simulating ? 'pause' : 'play'} />
          <span>{simulating ? 'Live Sim Running' : 'Run Live Sim'}</span>
        </button>
      </div>
    </aside>
  );
}

/* ---- NC (US Eastern) live clock ---- */
function NCClock() {
  const [now, setNow] = useState(Engine.nowET());
  useEffect(() => {
    const id = setInterval(() => setNow(Engine.nowET()), 1000);
    return () => clearInterval(id);
  }, []);
  const today = Engine.fmtLong(Engine.todayET());
  return (
    <div className="nc-clock" title="North Carolina (US Eastern) time">
      <Icon name="clock" />
      <div className="nc-clock-txt">
        <span className="nc-time mono">{now}</span>
        <span className="nc-day">NC · {today}</span>
      </div>
    </div>
  );
}

/* ---- Topbar ---- */
const PAGE_META = {
  dashboard: { title: 'Dispatch Overview', sub: 'Weekly operations at a glance' },
  drivers:   { title: 'Driver Management', sub: 'Roster, assignments & duty status' },
  trucks:    { title: 'Truck Management',  sub: 'Fleet & utilization tracking' },
  schedule:  { title: 'Schedule Viewer',   sub: 'Per-driver weekly cycle' },
  board:     { title: 'Dispatch Board',    sub: 'Live operations grid' },
  dispatcher:{ title: "Dispatcher's Work", sub: 'Daily task checklist' },
  settings:  { title: 'Settings & Admin',  sub: 'Week start, fleet & overrides' },
};
function Topbar({ view, weekStart, theme, toggleTheme, simulating, simDate, onMenu }) {
  const m = PAGE_META[view] || PAGE_META.dashboard;
  return (
    <header className="topbar">
      <button className="icon-btn mobile-only" onClick={onMenu}><Icon name="menu" /></button>
      <div>
        <div className="page-title">{m.title}</div>
        <div className="page-sub">{m.sub}</div>
      </div>
      <div className="topbar-spacer"></div>
      {simulating && (
        <div className="live-pill"><span className="live-dot"></span>LIVE · {Engine.fmtLong(simDate)}</div>
      )}
      <NCClock />
      <div className="week-chip">
        <Icon name="calendar" />
        <span className="lbl">Week of</span>
        <span className="val">{Engine.fmtShort(weekStart)} 2026</span>
      </div>
      <button className="icon-btn" onClick={toggleTheme} title="Toggle theme">
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} />
      </button>
    </header>
  );
}

/* ---- KPI card ---- */
function Kpi({ label, value, icon, tone, foot }) {
  return (
    <div className={'kpi ' + (tone ? 'k-' + tone : '')}>
      <div className="k-top">
        <div className="k-label">{label}</div>
        <div className="k-ic"><Icon name={icon} /></div>
      </div>
      <div className="k-val mono">{value}</div>
      {foot && <div className="k-foot">{foot}</div>}
    </div>
  );
}

/* ---- Modal shell ---- */
function Modal({ title, onClose, children, footer }) {
  useEffect(() => {
    const h = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <h3>{title}</h3>
          <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

/* ---- Toast ---- */
function Toast({ msg }) {
  if (!msg) return null;
  return <div className="toast"><Icon name="check" />{msg}</div>;
}

/* ---- Login gate ---- */
function LoginGate({ expected, onSuccess }) {
  const [pw, setPw] = useState('');
  const [err, setErr] = useState(false);
  const [show, setShow] = useState(false);
  const inputRef = useRef(null);
  useEffect(() => { inputRef.current && inputRef.current.focus(); }, []);

  const submit = (e) => {
    e.preventDefault();
    if (pw === expected) {
      try { sessionStorage.setItem('ejay_auth', '1'); } catch (_) {}
      onSuccess();
    } else {
      setErr(true);
      setPw('');
    }
  };

  return (
    <div className="gate">
      <div className="gate-bg"></div>
      <form className="gate-card" onSubmit={submit}>
        <div className="gate-brand">
          <div className="brand-mark" style={{ width: 44, height: 44 }}>
            <Icon name="truck" style={{ color: '#fff', width: 24, height: 24 }} />
          </div>
          <div>
            <div style={{ fontWeight: 700, fontSize: 17 }}>Ejay Logistics</div>
            <div style={{ fontSize: 11, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.13em', fontWeight: 600 }}>Weekly Dispatch</div>
          </div>
        </div>
        <div className="gate-title">Secure Access</div>
        <div className="gate-sub">Enter the dispatch password to continue.</div>
        <div className={'gate-input' + (err ? ' err' : '')}>
          <Icon name="settings" style={{ width: 16, height: 16, color: 'var(--text-faint)' }} />
          <input ref={inputRef} type={show ? 'text' : 'password'} value={pw}
                 placeholder="Password"
                 onChange={e => { setPw(e.target.value); setErr(false); }} />
          <button type="button" className="gate-eye" onClick={() => setShow(s => !s)}>
            <Icon name={show ? 'moon' : 'sun'} style={{ width: 16, height: 16 }} />
          </button>
        </div>
        {err && <div className="gate-err"><Icon name="x" style={{ width: 14, height: 14 }} />Incorrect password — try again.</div>}
        <button type="submit" className="btn btn-primary" style={{ width: '100%', padding: '11px', marginTop: 4 }}>
          <Icon name="bolt" /> Unlock Dashboard
        </button>
        <div className="gate-foot">Authorized personnel only · Ejay Logistics LLC</div>
      </form>
    </div>
  );
}

Object.assign(window, {
  Icon, ICONS, StatusBadge, STATUS_META, Route,
  Sidebar, Topbar, Kpi, Modal, Toast, LoginGate, NCClock,
  useState, useRef, useEffect, useLayoutEffect,
});