// Top-level app composition

const { useState } = React;

function App() {
  const [tweaks, setTweak] = useTweaks({
    viewMode: 'Monat',
    selectedChild: 'liam',
    modalOpen: false,
    confirmDrawerOpen: false,
    showOverview: true,
    accentTone: 'Forest',
    activeTab: 'Kalender',
    ansicht: 'Desktop',
  });
  const [selectedDay, setSelectedDay] = useState(16);

  const child = KIDS.find(k => k.id === tweaks.selectedChild) || KIDS[0];
  const dayMeta = {
    fullLabel: 'Sa. 16. Mai 2026',
    parent: 'Vater',
  };

  // Apply accent tone tweak
  React.useEffect(() => {
    const root = document.documentElement;
    if (tweaks.accentTone === 'Sage') {
      root.style.setProperty('--forest-800', 'oklch(0.42 0.07 152)');
      root.style.setProperty('--forest-900', 'oklch(0.30 0.06 152)');
    } else if (tweaks.accentTone === 'Pine') {
      root.style.setProperty('--forest-800', 'oklch(0.28 0.06 165)');
      root.style.setProperty('--forest-900', 'oklch(0.22 0.05 165)');
    } else {
      root.style.removeProperty('--forest-800');
      root.style.removeProperty('--forest-900');
    }
  }, [tweaks.accentTone]);

  const isCalendar = tweaks.activeTab === 'Kalender';
  const isFerien = tweaks.activeTab === 'Ferien & Feiertage';
  const isMobile = tweaks.ansicht === 'Mobile';
  const showSidebar = isCalendar && !isMobile;

  let bodyStyle = null;
  if (isMobile) {
    bodyStyle = { gridTemplateColumns: '1fr', maxWidth: 1400, margin: '0 auto', width: '100%' };
  } else if (!isCalendar) {
    bodyStyle = { gridTemplateColumns: '280px 1fr', maxWidth: 1400, margin: '0 auto', width: '100%' };
  }

  return (
    <div className="app">
      {!isMobile && (
        <TopNav
          onProposeChange={() => setTweak('modalOpen', true)}
          onOpenConfirmations={() => setTweak('confirmDrawerOpen', true)}
          activeTab={tweaks.activeTab}
          onTabChange={(t) => setTweak('activeTab', t)}
          openConfirmCount={2}
        />
      )}

      {isMobile ? (
        <div style={{padding: '32px 24px 48px', maxWidth: 1400, margin: '0 auto', width: '100%'}}>
          <MobilePreview />
        </div>
      ) : (
        <div className="app-body" style={bodyStyle}>
          {!isCalendar && (
            <Sidebar
              child={child}
              onSelectChild={(id) => setTweak('selectedChild', id)}
              model="Wechselmodell 50/50"
              onOpenConfirmations={() => setTweak('confirmDrawerOpen', true)}
            />
          )}
          {isCalendar && (
            <>
              <Sidebar
                child={child}
                onSelectChild={(id) => setTweak('selectedChild', id)}
                model="Wechselmodell 50/50"
                onOpenConfirmations={() => setTweak('confirmDrawerOpen', true)}
              />
              <main className="main">
                <CalendarCard
                  selected={selectedDay}
                  onSelect={setSelectedDay}
                  viewMode={tweaks.viewMode}
                  onViewModeChange={(m) => setTweak('viewMode', m)}
                />
                {tweaks.showOverview && <MonthOverview />}
              </main>
              <DetailPanel
                day={dayMeta}
                child={child}
                onClose={() => {}}
                onProposeChange={() => setTweak('modalOpen', true)}
              />
            </>
          )}
          {isFerien && <FerienPage />}
          {tweaks.activeTab === 'Zahlungen' && <ZahlungenPage />}
          {tweaks.activeTab === 'Vereinbarungen' && <VereinbarungenPage />}
          {tweaks.activeTab === 'Dokumente' && <DokumentePage />}
          {tweaks.activeTab === 'Nachrichten' && <NachrichtenPage />}
        </div>
      )}

      <ProposeModal
        open={tweaks.modalOpen}
        onClose={() => setTweak('modalOpen', false)}
      />

      <ConfirmationsDrawer
        open={tweaks.confirmDrawerOpen}
        onClose={() => setTweak('confirmDrawerOpen', false)}
        onProposeChange={() => {
          setTweak('confirmDrawerOpen', false);
          setTweak('modalOpen', true);
        }}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Ansicht" />
        <TweakRadio
          label="Plattform"
          value={tweaks.ansicht}
          options={['Desktop', 'Mobile']}
          onChange={(v) => setTweak('ansicht', v)}
        />
        {!('Mobile' === tweaks.ansicht) && (
          <>
            <TweakSelect
              label="Aktiver Tab"
              value={tweaks.activeTab}
              options={['Kalender', 'Ferien & Feiertage', 'Vereinbarungen', 'Zahlungen', 'Dokumente', 'Nachrichten']}
              onChange={(v) => setTweak('activeTab', v)}
            />
            <TweakSection label="Layout" />
            <TweakRadio
              label="Kalender-Ansicht"
              value={tweaks.viewMode}
              options={['Monat', 'Woche', 'Liste']}
              onChange={(v) => setTweak('viewMode', v)}
            />
            <TweakToggle
              label="Monats-Übersicht anzeigen"
              value={tweaks.showOverview}
              onChange={(v) => setTweak('showOverview', v)}
            />
          </>
        )}
        <TweakSection label="Marken-Akzent" />
        <TweakRadio
          label="Grün-Ton"
          value={tweaks.accentTone}
          options={['Forest', 'Sage', 'Pine']}
          onChange={(v) => setTweak('accentTone', v)}
        />
        <TweakSection label="Demo-Status" />
        <TweakSelect
          label="Aktives Kind"
          value={tweaks.selectedChild}
          options={KIDS.map(k => ({ value: k.id, label: `${k.name} (${k.age})` }))}
          onChange={(v) => setTweak('selectedChild', v)}
        />
        <TweakButton
          label={'„Änderung vorschlagen" öffnen'}
          onClick={() => setTweak('modalOpen', true)}
        />
        <TweakButton
          label={'Offene Bestätigungen öffnen'}
          onClick={() => setTweak('confirmDrawerOpen', true)}
        />
      </TweaksPanel>
    </div>
  );
}

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