// Schaffner OS — app shell: sidebar, topbar, router, tweaks
const NAV = [
  ['command', 'Command Center'],
  ['intake', 'Intake'],
  ['insights', 'Insights'],
  ['compounding', 'Compounding'],
  ['queue', 'Fill Queue'],
  ['inventory', 'Inventory'],
  ['reports', 'Reports'],
];

const TITLES = {
  command: 'Good morning, Chris.',
  intake: 'Intake',
  insights: 'Insights',
  compounding: 'Compounding',
  queue: 'Fill Queue',
  inventory: 'Inventory',
  reports: 'Reports',
  patient: 'Patient Profile',
};

const ACCENTS = {
  '#a8652f': { ink: '#8a4f20', bright: '#c98b52' },   // copper
  '#4a7a5c': { ink: '#39604a', bright: '#7fae93' },   // fern
  '#5b6b8c': { ink: '#46546f', bright: '#93a4c4' },   // dusk
};

function Sidebar({ screen, go, scope, setScope, counts, open, onClose }) {
  return (
    <React.Fragment>
      <div className={'sidebar-scrim' + (open ? ' on' : '')} onClick={onClose}></div>
      <aside className={'sidebar' + (open ? ' open' : '')}>
        <div className="sidebar-logo">
          <img src="assets/schaffner-logo-white.png" alt="Schaffner Pharmacy"></img>
          <div className="sidebar-os">Pharmacy OS</div>
        </div>

        <nav className="nav">
          {NAV.map(([id, label], i) => (
            <button key={id} className={'nav-item' + (screen === id ? ' active' : '')} onClick={() => { go(id); onClose(); }}>
              <span className="nav-num">{'0' + (i + 1)}</span>
              <span>{label}</span>
              {counts[id] ? <span className="nav-badge">{counts[id]}</span> : null}
            </button>
          ))}
        </nav>

        <div className="nav-label" style={{ padding: '10px 24px 7px' }}>Stores</div>
        <div className="sidebar-stores">
          {STORES.map(s => (
            <button key={s.id} className="store-row" onClick={() => { setScope(scope === s.id ? 'all' : s.id); onClose(); }}>
              <span className={'dot' + (s.waitMin >= 15 ? ' busy' : '')}></span>
              <span style={scope === s.id ? { color: '#f3f1e7', fontWeight: 600 } : null}>{s.name}</span>
              <span className="mono">{s.inQueue}</span>
            </button>
          ))}
        </div>

        <div className="sidebar-foot">
          <div className="avatar">CS</div>
          <div>
            <div className="who">Chris Schaffner, PharmD</div>
            <div className="role">Owner · all locations</div>
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
}

function TopBar({ screen, scope, setScope, onMenu }) {
  return (
    <div className="topbar">
      <button className="menu-btn" onClick={onMenu} aria-label="Open menu">
        <span></span><span></span><span></span>
      </button>
      <h1>{TITLES[screen]}</h1>
      <span className="date">Thursday, June 11 · week 24</span>
      <div className="scope">
        <button className={scope === 'all' ? 'on' : ''} onClick={() => setScope('all')}>All stores</button>
        {STORES.map(s => (
          <button key={s.id} className={scope === s.id ? 'on' : ''} onClick={() => setScope(s.id)}>{s.tag}</button>
        ))}
      </div>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#a8652f",
  "density": "regular",
  "showAlerts": true
}/*EDITMODE-END*/;

function App() {
  const { useState } = React;
  const [screen, setScreen] = useState('command');
  const [scope, setScope] = useState('all');
  const [menuOpen, setMenuOpen] = useState(false);
  const [patientId, setPatientId] = useState(null);
  const [queueTab, setQueueTab] = useState('queue');
  const [queueCards, setQueueCards] = useState(() => QUEUE_RX.map(c => ({ ...c })));
  const [enteredIntake, setEnteredIntake] = useState({});
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const acc = ACCENTS[t.accent] || ACCENTS['#a8652f'];

  const nav = {
    go: (s) => { if (s === 'queue') setQueueTab('queue'); setScreen(s); },
    goPatient: (id) => { setPatientId(id); setScreen('patient'); },
    goQueue: (tabName) => { setQueueTab(tabName); setScreen('queue'); },
    addRx: (rec) => setQueueCards(cs => cs.some(c => c.rx === rec.rx) ? cs : [...cs, { ...rec }]),
  };

  const intakeCount = INTAKE_ITEMS.filter(i => i.id !== 'in5' && !enteredIntake[i.id]).length;
  const counts = { queue: queueCards.length, intake: intakeCount };

  const screenEl = {
    command: <CommandCenter scope={scope} setScope={setScope} go={nav.go} nav={nav}></CommandCenter>,
    intake: <Intake nav={nav} entered={enteredIntake} setEntered={setEnteredIntake}></Intake>,
    insights: <Insights go={nav.go} nav={nav}></Insights>,
    compounding: <Compounding density={t.density}></Compounding>,
    queue: <FillQueue scope={scope} tab={queueTab} setTab={setQueueTab} nav={nav} cards={queueCards} setCards={setQueueCards}></FillQueue>,
    inventory: <Inventory scope={scope} density={t.density}></Inventory>,
    reports: <Reports></Reports>,
    patient: <PatientProfile patientId={patientId} nav={nav}></PatientProfile>,
  }[screen];

  return (
    <div className="app" style={{
      '--accent': t.accent, '--accent-ink': acc.ink, '--accent-bright': acc.bright,
    }}>
      <Sidebar screen={screen} go={nav.go} scope={scope} setScope={setScope} counts={counts} open={menuOpen} onClose={() => setMenuOpen(false)}></Sidebar>
      <div className="main">
        <TopBar screen={screen} scope={scope} setScope={setScope} onMenu={() => setMenuOpen(true)}></TopBar>
        {screenEl}
      </div>

      <TweaksPanel>
        <TweakSection label="Theme"></TweakSection>
        <TweakColor label="Accent" value={t.accent} options={Object.keys(ACCENTS)}
          onChange={v => setTweak('accent', v)}></TweakColor>
        <TweakSection label="Tables"></TweakSection>
        <TweakRadio label="Density" value={t.density} options={['regular', 'compact']}
          onChange={v => setTweak('density', v)}></TweakRadio>
      </TweaksPanel>
    </div>
  );
}

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