// app.jsx — As It Happens main app (router + nav strip + tweaks)

const SCREENS = [
  { id: 'onboard', label: '01 Onboarding', priority: 7 },
  { id: 'home',    label: '02 Home',       priority: 1 },
  { id: 'record',  label: '03 Recording',  priority: 1 },
  { id: 'tag',     label: '04 Tag flow',   priority: 1, star: true },
  { id: 'records', label: '05 Records',    priority: 4 },
  { id: 'detail',  label: '06 Detail',     priority: 5 },
  { id: 'export',  label: '07 Export',     priority: 6 },
];

const TAGLINES = {
  capture: 'Capture it as it happens.',
  record: 'The record you\u2019ll wish you\u2019d kept.',
  stamped: 'Time-stamped. Tamper-evident. Yours.',
  evidence: 'Evidence, the moment it matters.',
};

function App() {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "showAnnotations": false,
    "tagline": "capture",
    "currentScreen": "home"
  }/*EDITMODE-END*/);
  const setScreen = (id) => setTweak('currentScreen', id);
  const screen = t.currentScreen || 'home';

  const renderScreen = () => {
    switch (screen) {
      case 'onboard': return <OnboardingScreen go={setScreen} tagline={TAGLINES[t.tagline] || TAGLINES.capture} />;
      case 'home':    return <HomeScreen go={setScreen} />;
      case 'record':  return <RecordingScreen go={setScreen} />;
      case 'tag':     return <TagFlow go={setScreen} />;
      case 'records': return <RecordsScreen go={setScreen} />;
      case 'detail':  return <DetailScreen go={setScreen} />;
      case 'export':  return <ExportScreen go={setScreen} />;
      case 'settings': return <SettingsScreen go={setScreen} />;
      default:        return <HomeScreen go={setScreen} />;
    }
  };

  // Derive screen-label for comment context
  const currentDef = SCREENS.find(s => s.id === screen);

  return (
    <div style={{
      minHeight: '100vh',
      background: '#1a1a1a',
      backgroundImage: `
        radial-gradient(ellipse at top, #2a2a2a 0%, #1a1a1a 60%),
        repeating-linear-gradient(0deg, transparent 0px, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px)
      `,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      padding: '40px 20px 80px',
      gap: 28,
      color: '#F5F1E8',
      fontFamily: 'var(--sans)',
      // expose annotation toggle to css
      '--anno-display': t.showAnnotations ? 'block' : 'none',
    }}>
      {/* header strip */}
      <div style={{ width: '100%', maxWidth: 1200, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(245,241,232,0.5)', letterSpacing: 0.18, textTransform: 'uppercase' }}>
            Mockup · iPhone 16 · 393 × 852
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, color: '#F5F1E8', marginTop: 4, letterSpacing: -0.4 }}>
            As It Happens — first pass
          </div>
        </div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'rgba(245,241,232,0.4)', letterSpacing: 0.05, textAlign: 'right', lineHeight: 1.6 }}>
          codename: cornelius · v0.1<br/>
          mid-fidelity · light mode
        </div>
      </div>

      {/* Screen nav strip */}
      <div style={{
        display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'center',
        padding: '8px 12px',
        background: 'rgba(255,255,255,0.04)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 12,
      }}>
        {SCREENS.map(s => {
          const sel = screen === s.id;
          return (
            <button key={s.id} onClick={() => setScreen(s.id)} style={{
              border: 'none',
              background: sel ? 'var(--teal)' : 'transparent',
              color: sel ? '#F5F1E8' : 'rgba(245,241,232,0.65)',
              fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500,
              padding: '7px 11px', borderRadius: 8, cursor: 'pointer',
              letterSpacing: 0.04,
              display: 'flex', alignItems: 'center', gap: 5,
              transition: 'all 120ms ease',
            }}>
              {s.label}
              {s.star && <span style={{ color: sel ? '#F5F1E8' : 'var(--teal)', fontSize: 9 }}>★</span>}
            </button>
          );
        })}
      </div>

      {/* Phone */}
      <div data-screen-label={currentDef ? currentDef.label : screen}>
        <PhoneFrame>
          {renderScreen()}
        </PhoneFrame>
      </div>

      {/* Caption under phone */}
      <div style={{ textAlign: 'center', maxWidth: 420, color: 'rgba(245,241,232,0.55)', fontSize: 12, lineHeight: 1.5 }}>
        {captionFor(screen)}
      </div>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Presentation">
          <TweakToggle
            label="Show annotations"
            hint="design-spec callouts on each screen"
            value={t.showAnnotations}
            onChange={(v) => setTweak('showAnnotations', v)}
          />
        </TweakSection>

        <TweakSection title="Onboarding">
          <TweakSelect
            label="Tagline"
            value={t.tagline}
            onChange={(v) => setTweak('tagline', v)}
            options={[
              { value: 'capture', label: 'Capture it as it happens.' },
              { value: 'record', label: 'The record you\u2019ll wish you\u2019d kept.' },
              { value: 'stamped', label: 'Time-stamped. Tamper-evident. Yours.' },
              { value: 'evidence', label: 'Evidence, the moment it matters.' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Jump to screen">
          <TweakSelect
            label="Screen"
            value={t.currentScreen}
            onChange={(v) => setTweak('currentScreen', v)}
            options={SCREENS.map(s => ({ value: s.id, label: s.label }))}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function captionFor(screen) {
  switch (screen) {
    case 'onboard': return 'Onboarding · single sentence, three pillars (time-stamped / hashed / AU-resident), one primary action.';
    case 'home':    return 'Home · the screen opened 80% of the time. Quiet, mostly empty cream space, single ≥80pt teal record button. Hold to record.';
    case 'record':  return 'Recording · navy takeover, calm horizontal waveform in teal, monospace timer. The hash badge sits in the bottom-centre as subtle reassurance.';
    case 'tag':     return 'Tag flow · the differentiator. 7 sections, every field optional. No nag. ★';
    case 'records': return 'Records list · chronological + filterable. Date headers in monospace. Chain badge marks records that are part of an ongoing pattern.';
    case 'detail':  return 'Single record · audio, transcript (versioned), monospace metadata block, foldable chain-of-custody page.';
    case 'export':  return 'Export composer · Cornelius pack vs Advocate brief, filters, consistency check, checkable record list. Generate at the bottom.';
    case 'settings':return 'Settings · standard iOS grouped lists. Storage, capture, account.';
    default: return '';
  }
}