// ─── App.jsx ──────────────────────────────────────────────────
// Top-level state machine for the click-thru workspace.
//   phase: 'welcome' | 'streaming' | 'answered'
// Picking a suggestion or submitting the composer runs a fake stream.

const CANNED = {
  default: {
    doctrine: 'חוזים',
    strength: 76,
    sources: [
      {
        title: 'ע״א 4628/93 מ״י נ׳ אפרופים שיכון ויזום (1991) בע״מ',
        excerpt: '״לשון החוזה היא נקודת המוצא, אך לא נקודת הסיום. יש לפרש את החוזה לפי תכליתו, כפי שהיא משתמעת מהחוזה כולו ומן הנסיבות החיצוניות לו.״',
        badge: 'community', badgeLabel: 'מילה במילה',
        year: '1995', court: 'ע״א',
      },
      {
        title: 'דנ״א 2045/05 ארגון מגדלי הירקות נ׳ מ״י',
        excerpt: '״תכלית סובייקטיבית (כוונת הצדדים) מול תכלית אובייקטיבית (תכלית הראויה של עסקה מסוג זה).״',
        badge: 'community', badgeLabel: 'מילה במילה',
        year: '2006', court: 'דנ״א',
      },
      {
        title: 'ע״א 8763/15 חברת תשתיות נ׳ קצב',
        excerpt: '״כאשר לשון החוזה ברורה, יש לבחון תחילה את התכלית הסובייקטיבית של הצדדים.״',
        badge: 'session', badgeLabel: 'partial',
        year: '2018', court: 'ע״א',
      },
    ],
  },
  labor: {
    doctrine: 'עבודה',
    strength: 88,
    sources: [
      {
        title: 'ע״ע 1349/99 חברת תרדיון בע״מ נ׳ זילברשטיין',
        excerpt: '״חובת השימוע חלה לפני קבלת החלטה הפוגעת בעובד, אף בתקופת ניסיון, אלא אם הוסכם מפורשות אחרת.״',
        badge: 'community', badgeLabel: 'מילה במילה',
        year: '2002', court: 'ע״ע',
      },
      {
        title: 'בג״ץ 654/78 גינגולד נ׳ בית הדין הארצי לעבודה',
        excerpt: '״עקרון הצדק הטבעי מחייב מתן הזדמנות נאותה לעובד להשמיע את טענותיו.״',
        badge: 'community', badgeLabel: 'מילה במילה',
        year: '1979', court: 'בג״ץ',
      },
      {
        title: 'ע״ע 300353/98 רחל מאיר נ׳ מ״י',
        excerpt: '״פיטורים שנעשו בלא שימוע מקנים לעובד זכות לפיצויים, אף אם הפיטורים עצמם היו במקומם.״',
        badge: 'session', badgeLabel: 'partial',
        year: '2001', court: 'ע״ע',
      },
    ],
  },
  tort: {
    doctrine: 'נזיקין',
    strength: 71,
    sources: [
      {
        title: 'ע״א 5604/94 חמד נ׳ מ״י',
        excerpt: '״אחריותם של מעוולים יחד היא אחריות סולידרית — הניזוק רשאי לתבוע את מלוא נזקו מכל אחד מהם.״',
        badge: 'community', badgeLabel: 'מילה במילה',
        year: '1995', court: 'ע״א',
      },
      {
        title: 'ע״א 2245/91 ברנשטיין נ׳ עירית בני ברק',
        excerpt: '״המבחן הוא של גרימה משותפת לאותו נזק בלתי-נפרד.״',
        badge: 'community', badgeLabel: 'מילה במילה',
        year: '1992', court: 'ע״א',
      },
    ],
  },
};

function classify(q) {
  if (/פיטור|שימוע|עבוד|מעביד/.test(q)) return 'labor';
  if (/מעוול|נזיק|חמד|רישול/.test(q)) return 'tort';
  return 'default';
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "רגוע",
  "theme": "יום",
  "ornaments": true,
  "nightStart": 19,
  "nightEnd": 7
}/*EDITMODE-END*/;

const DIR_KEY = { 'רגוע': 'calm', 'ממוקד': 'focused', 'מלומד': 'scholar' };

function App() {
  const [phase,  setPhase]  = React.useState('welcome');
  const [query,  setQuery]  = React.useState('');
  const [data,   setData]   = React.useState(null);
  const [step,   setStep]   = React.useState(0);
  const [doctrine, setDoctrine] = React.useState(null);
  const [strength, setStrength] = React.useState(null);
  const [sourceCount, setSourceCount] = React.useState(null);
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const dirKey = DIR_KEY[tw.direction] || 'calm';
  const isAuto = tw.theme === 'אוטומטי';
  const [autoNight, setAutoNight] = React.useState(false);

  // Auto theme: switch to Midnight inside the user-defined night window,
  // re-checking every 30s so it flips on its own as the hour passes.
  React.useEffect(() => {
    if (!isAuto) return;
    const check = () => {
      const h = new Date().getHours();
      const ns = Number(tw.nightStart), ne = Number(tw.nightEnd);
      const night = ns === ne ? false : (ns > ne ? (h >= ns || h < ne) : (h >= ns && h < ne));
      setAutoNight(night);
    };
    check();
    const id = setInterval(check, 30000);
    return () => clearInterval(id);
  }, [isAuto, tw.nightStart, tw.nightEnd]);

  const theme = (tw.theme === 'חצות' || (isAuto && autoNight)) ? 'midnight' : 'day';
  const [mode, setMode]   = React.useState('standard'); // 'standard' | 'opposing'

  React.useEffect(() => {
    document.body.dataset.theme = theme;
    document.body.dataset.direction = dirKey;
    document.body.classList.toggle('le-no-motifs', !tw.ornaments);
  }, [theme, dirKey, tw.ornaments]);

  // Auto-run a query passed via ?q= (deep-link from the landing demo)
  React.useEffect(() => {
    try {
      const params = new URLSearchParams(window.location.search);
      const q = params.get('q');
      if (q && phase === 'welcome') {
        ask(q);
        // Clean URL so reload doesn't re-trigger
        window.history.replaceState({}, '', window.location.pathname);
      }
    } catch (e) {}
  // eslint-disable-next-line
  }, []);

  function ask(text) {
    const key = classify(text);
    const payload = CANNED[key];
    setQuery(text);
    setData(null);
    setDoctrine(null);
    setStrength(null);
    setSourceCount(null);
    setStep(0);
    setPhase('streaming');
    setTimeout(() => {
      setDoctrine(payload.doctrine);
      setStep(1);
    }, 800);
    setTimeout(() => {
      setSourceCount(payload.sources.length);
      setStep(2);
    }, 1900);
    setTimeout(() => {
      setStrength(payload.strength);
      setStep(3);
      setData(payload);
      setPhase('answered');
    }, 2900);
  }

  function reset() {
    setPhase('welcome'); setQuery(''); setData(null);
    setDoctrine(null); setStrength(null); setStep(0); setSourceCount(null);
  }

  return (
    <div className="le-shell">
      <Sidebar active={phase === 'welcome' ? 'new' : 'history'} onPick={(id) => id === 'new' && reset()} />
      <div className="le-main">
        <Topbar
          crumb={phase === 'welcome' ? 'שיחה חדשה' : (query.slice(0, 60) + (query.length > 60 ? '…' : ''))}
          theme={theme}
          onToggleTheme={() => setTweak('theme', theme === 'midnight' ? 'יום' : 'חצות')}
          mode={mode}
          onToggleMode={() => setMode(m => m === 'opposing' ? 'standard' : 'opposing')}
        />
        <div className="le-workspace">
          <div className="le-workspace-inner">
            {phase === 'welcome' && <WelcomeScreen onPick={ask} />}

            {phase !== 'welcome' && (
              <div className="le-messages">
                <UserMessage>{query}</UserMessage>

                {phase === 'streaming' && (
                  <AssistantMessage>
                    <Streaming
                      step={step}
                      doctrine={doctrine}
                      sourceCount={sourceCount}
                      strength={strength}
                      done={false}
                    />
                  </AssistantMessage>
                )}

                {phase === 'answered' && data && (
                  <>
                    <AssistantMessage confidence={data.strength}>
                      <Streaming
                        step={3}
                        doctrine={data.doctrine}
                        sourceCount={data.sources.length}
                        strength={data.strength}
                        done
                      />
                    </AssistantMessage>

                    {mode === 'opposing' ? (
                      <OpposingCounsel query={query} data={data} />
                    ) : (
                    <TalmudicLayout
                      query={query}
                      doctrine={data.doctrine}
                      strength={data.strength}
                      pros={data.sources.slice(0, 2).map(s => ({
                        title: s.title,
                        excerpt: s.excerpt,
                        cite: `${s.year} · ${s.court}`,
                      }))}
                      cons={data.sources.slice(2).map(s => ({
                        title: s.title,
                        excerpt: s.excerpt,
                        cite: `${s.year} · ${s.court}`,
                      }))}
                      exceptions={['חוזה אחיד', 'יחסי עובד-מעביד', 'חוזה ביטוח', 'יחסי צרכן']}
                      body={
                        <>
                          <p>
                            <ClaimSpan confidence="ok">
                              בהתאם לפסיקה <span className="le-inline-cite">{data.sources[0].title.split(' ')[0]}</span>, בית-המשפט קבע כי{' '}
                              <Citation kind="ok" sup={1} case={data.sources[0].title.split(' ').slice(0,2).join(' ')} page={89}>״{data.sources[0].excerpt.replace(/[״״]/g, '').slice(0, 90)}…״</Citation>
                            </ClaimSpan> — מכאן עולה שהתכלית מנחה את הפרשנות.
                          </p>
                          <p>
                            הצד הסותר יטען כי{' '}
                            <Citation kind="partial" sup={2} case={data.sources[1].title.split(' ').slice(0,2).join(' ')} page={142}>״{data.sources[1].excerpt.replace(/[״״]/g, '').slice(0, 78)}…״</Citation> —
                            וזאת לצד תכלית סובייקטיבית של הצדדים.
                          </p>
                        </>
                      }
                    />
                    )}

                    {mode !== 'opposing' && <VerbatimStampSet
                      caseName={data.sources[0].title.split(' ').slice(0, 2).join(' ') + ' · בעמ׳ 89'}
                      doctrine={data.doctrine}
                      strength={data.strength}
                    />}

                    <Feedback />
                  </>
                )}
              </div>
            )}
          </div>
        </div>
        <Composer onSubmit={ask} disabled={phase === 'streaming'} />
      </div>
      <TweaksConfig tw={tw} setTweak={setTweak} theme={theme} />
    </div>
  );
}

function TweaksConfig({ tw, setTweak, theme }) {
  const h = new Date().getHours();
  const ns = Number(tw.nightStart), ne = Number(tw.nightEnd);
  const isNightNow = ns === ne ? false : (ns > ne ? (h >= ns || h < ne) : (h >= ns && h < ne));
  const pad = (n) => String(n).padStart(2, '0') + ':00';
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="כיוון · פריסת התשובה" />
      <TweakRadio
        label="כיוון"
        value={tw.direction}
        options={['רגוע', 'ממוקד', 'מלומד']}
        onChange={(v) => setTweak('direction', v)}
      />
      <TweakSection label="תצוגה" />
      <TweakRadio
        label="תמה"
        value={tw.theme}
        options={['יום', 'חצות', 'אוטומטי']}
        onChange={(v) => setTweak('theme', v)}
      />
      {tw.theme === 'אוטומטי' && (
        <>
          <TweakSlider
            label="מעבר ללילה"
            value={Number(tw.nightStart)} min={0} max={23} step={1} unit=":00"
            onChange={(v) => setTweak('nightStart', v)}
          />
          <TweakSlider
            label="חזרה ליום"
            value={Number(tw.nightEnd)} min={0} max={23} step={1} unit=":00"
            onChange={(v) => setTweak('nightEnd', v)}
          />
          <div style={{
            margin: '2px 2px 6px', padding: '9px 11px', borderRadius: 9,
            background: 'rgba(217,184,92,0.10)', border: '1px solid rgba(217,184,92,0.28)',
            fontFamily: 'var(--font-mono, monospace)', fontSize: 11, lineHeight: 1.6,
            color: 'var(--fg-2, #5a5e68)'
          }}>
            לילה {pad(ns)}–{pad(ne)} · כעת {isNightNow ? 'מצב לילה' : 'מצב יום'}
          </div>
        </>
      )}
      <TweakToggle
        label="חותמות ועיטורים"
        value={tw.ornaments}
        onChange={(v) => setTweak('ornaments', v)}
      />
    </TweaksPanel>
  );
}

window.App = App;

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