// SkinJourney Dashboard — Main App: routing + tweaks + entry
const { useState: useS_app, useEffect: useE_app, useCallback: useCB_app, useMemo: useM_app } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "dataset": "full",
  "accent": "coral",
  "motion": "on"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useS_app({ name: 'overview' });
  const [paletteOpen, setPaletteOpen] = useS_app(false);
  const [bookOpen, setBookOpen] = useS_app(false);
  const [bookPatientId, setBookPatientId] = useS_app(null);

  const openBookingFor = useCB_app((id = null) => {
    setBookPatientId(id);
    setBookOpen(true);
  }, []);
  const toast = useToast();

  // Apply tweaks as data-attributes on the root
  useE_app(() => {
    document.documentElement.dataset.density = t.density;
    document.documentElement.dataset.accent = t.accent;
    document.documentElement.dataset.motion = t.motion === 'off' ? 'reduced' : 'on';
  }, [t.density, t.accent, t.motion]);

  // Cmd-K
  useE_app(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault(); setPaletteOpen((o) => !o);
      } else if (e.key === '/' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
        e.preventDefault(); setPaletteOpen(true);
      }
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  // Persist route across reloads
  useE_app(() => {
    const stored = localStorage.getItem('sj-route');
    if (stored) try { setRoute(JSON.parse(stored)); } catch {}
  }, []);
  useE_app(() => { localStorage.setItem('sj-route', JSON.stringify(route)); }, [route]);

  const navigate = useCB_app((r) => { setRoute(r); window.scrollTo({ top: 0, behavior: 'instant' }); }, []);
  const copyCode = useCB_app(() => {
    navigator.clipboard?.writeText(SJ_DATA.PRACTITIONER.invite_code).catch(() => {});
    toast.push('הקוד הועתק ללוח');
  }, [toast]);

  const dataset = t.dataset;

  // Auth screens get no shell
  if (route.name === 'login') return <LoginScreen navigate={navigate} />;
  if (route.name === 'register') return <RegisterScreen navigate={navigate} />;
  if (route.name === 'report') return <ReportScreen route={route} navigate={navigate} />;

  // Compute pending count for badge
  const pendingCount = dataset === 'empty' ? 0 : SJ_DATA.APPOINTMENTS.filter((a) => a.status === 'pending').length;

  return (
    <div className="app-shell">
      <NavRail
        route={route}
        navigate={navigate}
        pendingCount={pendingCount}
        practitioner={SJ_DATA.PRACTITIONER}
        onCopyCode={copyCode}
      />
      <div className="content-area">
        <TopBar
          route={route}
          onOpenPalette={() => setPaletteOpen(true)}
          onBookAppointment={() => openBookingFor(route.name === 'patient' ? route.id : null)}
        />
        <main key={route.name + (route.id || '')} className="screen">
          {route.name === 'overview' && <OverviewScreen navigate={navigate} onCopyCode={copyCode} onBookAppointment={() => openBookingFor(null)} dataset={dataset} />}
          {route.name === 'patients' && <PatientsScreen navigate={navigate} route={route} dataset={dataset} onCopyCode={copyCode} />}
          {route.name === 'patient' && <PatientScreen route={route} navigate={navigate} onBookAppointment={() => openBookingFor(route.id)} />}
          {route.name === 'appointments' && <AppointmentsScreen navigate={navigate} onBookAppointment={() => openBookingFor(null)} dataset={dataset} />}
          {route.name === 'calendar' && <CalendarScreen navigate={navigate} onBookAppointment={() => openBookingFor(null)} dataset={dataset} />}
          {route.name === 'settings' && <SettingsScreen navigate={navigate} />}
        </main>
      </div>

      <CommandPalette
        open={paletteOpen}
        onClose={() => setPaletteOpen(false)}
        navigate={navigate}
        onBook={() => openBookingFor(null)}
        onCopyCode={copyCode}
      />
      <BookAppointmentModal open={bookOpen} onClose={() => setBookOpen(false)} patientId={bookPatientId} />

      <TweaksPanel title="לוח עיצוב">
        <TweakSection label="תצוגה" />
        <TweakRadio label="צפיפות" value={t.density}
          options={['comfortable', 'compact']}
          onChange={(v) => setTweak('density', v)} />
        <TweakRadio label="מערכת צבעי הדגשה" value={t.accent}
          options={['coral', 'sage']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="אנימציה" value={t.motion}
          options={['on', 'off']}
          onChange={(v) => setTweak('motion', v)} />

        <TweakSection label="נתונים" />
        <TweakRadio label="מצב המרפאה" value={t.dataset}
          options={['full', 'empty']}
          onChange={(v) => setTweak('dataset', v)} />

        <TweakSection label="מסכים" />
        {[
          ['overview', 'סקירה'], ['patients', 'מטופלות'], ['appointments', 'תורים'],
          ['calendar', 'יומן'], ['settings', 'הגדרות'], ['login', 'כניסה'],
          ['register', 'הרשמה'], ['report', 'דוח PDF'],
        ].map(([key, label]) => (
          <TweakButton key={key} label={label} onClick={() => navigate(key === 'report' ? { name: 'report', id: 'p-1' } : { name: key })} />
        ))}
      </TweaksPanel>
    </div>
  );
}

function Root() {
  return (
    <ToastHost>
      <App />
    </ToastHost>
  );
}

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