/* Lovingo — app root */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["oklch(0.74 0.17 350)", "oklch(0.70 0.16 300)", "oklch(0.78 0.13 30)"],
  "bgDensity": 1,
  "radius": 26,
  "glass": 26
}/*EDITMODE-END*/;

const PALETTES = [
  ["oklch(0.74 0.17 350)", "oklch(0.70 0.16 300)", "oklch(0.80 0.13 30)"],  // gül & mor
  ["oklch(0.75 0.16 25)", "oklch(0.73 0.16 350)", "oklch(0.81 0.13 70)"],   // gün batımı
  ["oklch(0.70 0.15 290)", "oklch(0.66 0.15 262)", "oklch(0.75 0.13 320)"], // gece moru
  ["oklch(0.74 0.13 215)", "oklch(0.70 0.14 285)", "oklch(0.78 0.12 190)"], // okyanus
];

function buildItems() {
  return window.PRESET_QUESTIONS.map((q) => ({ q, a: "" }));
}

function buildDemoItems() {
  return window.PRESET_QUESTIONS.map((q, i) => ({ q, a: window.DEMO_ANSWERS[i] || "" }));
}

function makePuzzle(items, shuffleSeed) {
  let entries = items
    .map((it, idx) => ({ word: it.a, clue: it.q, idx }))
    .filter((e) => window.LovingoEngine.normalizeAnswer(e.word).length >= 2);
  if (shuffleSeed) {
    // deterministic-ish shuffle
    entries = entries
      .map((e, i) => ({ e, k: Math.sin(shuffleSeed * 999 + i * 17) }))
      .sort((a, b) => a.k - b.k)
      .map((x) => x.e);
  }
  return window.LovingoEngine.generate(entries);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = React.useState("home");
  const [step, setStep] = React.useState(0);
  const [names, setNames] = React.useState({ a: "Ömer", b: "Zeynep", date: "" });
  const [items, setItems] = React.useState(buildItems);
  const [puzzle, setPuzzle] = React.useState(null);
  const [shuffleSeed, setShuffleSeed] = React.useState(0);

  // apply tweaks -> CSS vars
  React.useEffect(() => {
    const r = document.documentElement.style;
    const pal = t.palette || PALETTES[0];
    r.setProperty("--a1", pal[0]);
    r.setProperty("--a2", pal[1]);
    r.setProperty("--a3", pal[2] || pal[0]);
    r.setProperty("--radius", t.radius + "px");
    r.setProperty("--radius-sm", Math.round(t.radius * 0.62) + "px");
    r.setProperty("--glass-blur", t.glass + "px");
  }, [t]);

  // sample puzzle for the hero
  const samplePuzzle = React.useMemo(() => makePuzzle(buildDemoItems(), 0), []);

  function generate(seed = 0) {
    setPuzzle(makePuzzle(items, seed));
    setShuffleSeed(seed);
    setView("result");
    window.scrollTo({ top: 0 });
  }

  return (
    <>
      <AppBackground density={t.bgDensity} />

      {view === "home" && (
        <Hero onStart={() => { setStep(0); setView("create"); window.scrollTo({ top: 0 }); }}
          samplePuzzle={samplePuzzle} names={names} />
      )}

      {view === "create" && (
        <Create
          names={names} setNames={setNames}
          items={items} setItems={setItems}
          step={step} setStep={setStep}
          onBack={() => (step === 0 ? setView("home") : setStep(step - 1))}
          onGenerate={() => generate(0)}
        />
      )}

      {view === "result" && puzzle && (
        <Result
          names={names} puzzle={puzzle}
          onBack={() => setView("home")}
          onEdit={() => { setStep(1); setView("create"); window.scrollTo({ top: 0 }); }}
          onPdf={() => { setView("pdf"); window.scrollTo({ top: 0 }); }}
          onShuffle={() => generate(shuffleSeed + 1)}
        />
      )}

      {view === "pdf" && puzzle && (
        <PdfView names={names} puzzle={puzzle} onBack={() => { setView("result"); window.scrollTo({ top: 0 }); }} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Renk paleti" />
        <TweakColor label="Aksan" value={t.palette} options={PALETTES}
          onChange={(v) => setTweak("palette", v)} />
        <TweakSection label="Atmosfer" />
        <TweakSlider label="Arka plan yoğunluğu" value={t.bgDensity} min={0} max={1} step={0.05}
          onChange={(v) => setTweak("bgDensity", v)} />
        <TweakSection label="Form" />
        <TweakSlider label="Köşe yuvarlaklığı" value={t.radius} min={8} max={34} unit="px"
          onChange={(v) => setTweak("radius", v)} />
        <TweakSlider label="Cam efekti" value={t.glass} min={6} max={40} unit="px"
          onChange={(v) => setTweak("glass", v)} />
      </TweaksPanel>
    </>
  );
}

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