/* global React, ReactDOM, STEPS, Landing, QuickDraftPage, Hearing, Generating, Output, BrandComposer, BrandIntakeTools */
const { useState: useAppState, useEffect: useAppEffect } = React;

const LS_KEY = "branding_studio_v1";

function loadState() {
  try {
    const raw = localStorage.getItem(LS_KEY);
    if (!raw) return null;
    return JSON.parse(raw);
  } catch (e) { return null; }
}
function saveState(s) {
  try { localStorage.setItem(LS_KEY, JSON.stringify(s)); } catch (e) {}
}

const DEFAULT_FORM = {
  target_type: "person",
  name: "", what: "",
  audience: "", audience_problem: "", audience_goal: "",
  strength: "", proof: "", value: "",
  difference: "", belief: "", tone: "trust",
};

function App() {
  const saved = loadState();
  const initialScreen = "landing";
  const [screen, setScreen] = useAppState(initialScreen);
  const [step, setStep] = useAppState(saved && typeof saved.step === "number" ? saved.step : 0);
  const [form, setForm] = useAppState(saved && saved.form ? { ...DEFAULT_FORM, ...saved.form } : DEFAULT_FORM);
  const [result, setResult] = useAppState(saved && saved.result ? saved.result : null);

  // persist (skip the transient "generating" screen)
  useAppEffect(() => {
    const persistScreen = screen === "generating" ? "hearing" : screen;
    saveState({ screen: persistScreen, step, form, result });
  }, [screen, step, form, result]);

  const applyQuickDraft = (quick) => {
    const candidate = BrandIntakeTools.synthesizeFromQuick(quick);
    setForm((prev) => ({ ...prev, ...candidate.fields }));
    setStep(0);
    setScreen("hearing");
  };
  const beginGenerate = () => {
    const r = BrandComposer.generate(form);
    setResult(r);
    setScreen("generating");
  };
  const finishGenerate = () => { setScreen("output"); };
  const restart = () => {
    setForm(DEFAULT_FORM);
    setStep(0);
    setResult(null);
    setScreen("landing");
  };
  const editInputs = () => { setScreen("hearing"); };

  let view;
  if (screen === "landing") {
    view = <Landing onStart={() => setScreen("quick")} hasDraft={false} />;
  } else if (screen === "quick") {
    view = <QuickDraftPage onApply={applyQuickDraft} />;
  } else if (screen === "hearing") {
    view = (
      <Hearing
        form={form}
        setForm={setForm}
        step={step}
        setStep={setStep}
        onComplete={beginGenerate}
        onExit={() => setScreen("quick")}
      />
    );
  } else if (screen === "generating") {
    view = <Generating onDone={finishGenerate} />;
  } else if (screen === "output" && result) {
    view = <Output result={result} onRestart={restart} onEdit={editInputs} />;
  } else {
    view = <Landing onStart={() => setScreen("quick")} hasDraft={false} />;
  }

  return <div className="app-shell">{view}</div>;
}

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