const { AppHeader, TabBar, IconButton, Toast } = window.BowcareDesignSystem_68307b;
const { TodayScreen, MedicinesScreen, VisitDetailScreen, AddVisitScreen, SettingsScreen } = window;

const TABS = [
  { id: 'today', label: 'Today', icon: 'house' },
  { id: 'meds', label: 'Medicines', icon: 'pill' },
  { id: 'add', label: 'Add', icon: 'plus' },
  { id: 'settings', label: 'Settings', icon: 'settings' },
];

const TITLES = { meds: 'Medicines', add: 'Add a visit', settings: 'Settings' };

function BowcareApp() {
  const [data, setData] = React.useState(window.BowcareData);
  const [tab, setTab] = React.useState('today');
  const [openId, setOpenId] = React.useState(null);
  const [toast, setToast] = React.useState('');
  const scroller = React.useRef(null);

  const visit = openId ? data.visits.find((v) => v.id === openId) : null;

  const flash = (msg) => {
    setToast(msg);
    window.clearTimeout(flash._t);
    flash._t = window.setTimeout(() => setToast(''), 3200);
  };
  const top = () => { if (scroller.current) scroller.current.scrollTop = 0; };
  const go = (id) => { setOpenId(null); setTab(id); top(); };

  let body, header;
  if (visit) {
    header = <AppHeader onBack={() => { setOpenId(null); top(); }} title={visit.specialty + ' visit'} subtitle={visit.date}
      action={<IconButton icon="share-2" label="Share this visit" onClick={() => flash('Shared with Diane')} />} />;
    body = <VisitDetailScreen visit={visit}
      onAddNote={() => flash('Note added to this visit')}
      onDelete={() => { setData({ ...data, visits: data.visits.filter((v) => v.id !== visit.id) }); setOpenId(null); flash('Visit deleted'); }} />;
  } else if (tab === 'today') {
    header = <AppHeader wordmark subtitle={'Good morning, ' + data.person.name.split(' ')[0]}
      action={<IconButton icon="bell" label="Reminders" onClick={() => flash('One reminder set for Wednesday')} />} />;
    body = <TodayScreen data={data} onOpenVisit={(id) => { setOpenId(id); top(); }} onAddVisit={() => go('add')} />;
  } else {
    header = <AppHeader title={TITLES[tab]} />;
    body = tab === 'meds' ? <MedicinesScreen data={data} />
      : tab === 'add' ? <AddVisitScreen onSave={() => { go('today'); flash('Visit saved'); }} />
      : <SettingsScreen />;
  }

  return (
    <div style={{ position: 'relative', width: 390, height: 844, display: 'grid', gridTemplateRows: 'auto 1fr auto', background: 'var(--surface-page)', overflow: 'hidden' }}>
      {header}
      <main ref={scroller} id="app-main" tabIndex={-1} style={{ overflowY: 'auto', padding: 'var(--space-5) var(--gutter-screen) var(--space-8)' }}>
        {body}
      </main>
      <TabBar items={TABS} value={visit ? 'today' : tab} onChange={go} />
      <div aria-live="polite" style={{ position: 'absolute', left: 16, right: 16, bottom: 108, pointerEvents: toast ? 'auto' : 'none', opacity: toast ? 1 : 0, transition: 'opacity var(--duration-base) var(--ease-standard)' }}>
        {toast ? <Toast tone="go" onDismiss={() => setToast('')}>{toast}</Toast> : null}
      </div>
    </div>
  );
}

Object.assign(window, { BowcareApp });