/* global React, ReactDOM, STEPS, Landing, QuickDraftPage, Hearing, Generating, Output, BrandComposer, BrandWorkersAIComposer, BrandAIProviderComposer, 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",
};

const DEFAULT_GENERATION_SETTINGS = {
  provider: "local",
};

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);
  const [generationStatus, setGenerationStatus] = useAppState("");
  const [generationSeed, setGenerationSeed] = useAppState(0);
  const [generationSettings, setGenerationSettings] = useAppState(DEFAULT_GENERATION_SETTINGS);

  // 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 = async () => {
    setScreen("generating");
    const useWorkersAI = generationSettings.provider === "workers-ai";
    const useGemini = generationSettings.provider === "gemini";
    setGenerationStatus(useWorkersAI
      ? `Cloudflare Workers AI実験モード: ${BrandWorkersAIComposer.DEFAULT_MODEL} をPages Functions経由で短文呼び出しします。失敗時はローカル生成に戻します。`
      : useGemini
        ? `Gemini PoCモード: ${BrandAIProviderComposer.DEFAULT_MODEL} はPages Functions経由だけで呼び出します。未設定・失敗時はローカル生成に戻します。`
        : "無料のローカルWriter/Criticで生成しています。外部AI APIは使用していません。");
    const minWait = new Promise((resolve) => setTimeout(resolve, 2600));
    const nextSeed = generationSeed + 1;
    setGenerationSeed(nextSeed);
    const localResult = BrandComposer.generate(form, { seed: Date.now() + nextSeed, count: 3 });
    let nextResult = localResult;
    let nextStatus = "無料のローカルWriter/Criticで生成しました。外部AI APIは使用していません。";
    if (useWorkersAI) {
      try {
        nextResult = await BrandWorkersAIComposer.generate(form, {
          endpointPath: BrandWorkersAIComposer.DEFAULT_ENDPOINT,
          localResult,
          timeoutMs: BrandWorkersAIComposer.DEFAULT_TIMEOUT_MS,
        });
        nextStatus = nextResult.source === "workers-ai-experiment"
          ? `Cloudflare Workers AI実験モードで生成しました。model=${nextResult.model} / 追加キー・ブラウザSecret入力は未使用です。`
          : "Cloudflare Workers AIは利用できませんでした。ローカルWriter/Criticの結果を表示しています。";
      } catch (e) {
        nextResult = localResult;
        nextStatus = `Cloudflare Workers AIは利用できませんでした。${e.message || "AI call failed"} ローカルWriter/Criticの結果を表示しています。`;
      }
    }
    if (useGemini) {
      try {
        nextResult = await BrandAIProviderComposer.generate(form, {
          endpointPath: BrandAIProviderComposer.DEFAULT_ENDPOINT,
          provider: BrandAIProviderComposer.DEFAULT_PROVIDER,
          localResult,
          timeoutMs: BrandAIProviderComposer.DEFAULT_TIMEOUT_MS,
        });
        nextStatus = nextResult.source === "gemini-experiment"
          ? `Gemini PoCモードで生成しました。model=${nextResult.model} / 品質ゲート accepted=${nextResult.qualityGate?.acceptedCount ?? "n/a"} rejected=${nextResult.qualityGate?.rejectedCount ?? 0}${nextResult.qualityGate?.forcedCount ? ` forced=${nextResult.qualityGate.forcedCount}` : ""} / ブラウザSecret入力は未使用です。`
          : nextResult.qualityFallback?.provider === "gemini"
            ? `Gemini PoCの出力は品質ゲートで除外しました。rejected=${nextResult.qualityFallback.rejectedCount} / ローカルWriter/Criticの結果を表示しています。`
          : "Gemini PoCは利用できませんでした。ローカルWriter/Criticの結果を表示しています。";
      } catch (e) {
        nextResult = localResult;
        nextStatus = `Gemini PoCは利用できませんでした。${e.message || "AI call failed"} ローカルWriter/Criticの結果を表示しています。`;
      }
    }
    await minWait;
    setResult(nextResult);
    setGenerationStatus(nextStatus);
    setScreen("output");
  };
  const restart = () => {
    setForm(DEFAULT_FORM);
    setStep(0);
    setResult(null);
    setGenerationStatus("");
    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}
        generationSettings={generationSettings}
        setGenerationSettings={setGenerationSettings}
        onComplete={beginGenerate}
        onExit={() => setScreen("quick")}
      />
    );
  } else if (screen === "generating") {
    view = <Generating />;
  } else if (screen === "output" && result) {
    view = <Output result={result} status={generationStatus} onRestart={restart} onEdit={editInputs} onRegenerate={beginGenerate} />;
  } else {
    view = <Landing onStart={() => setScreen("quick")} hasDraft={false} />;
  }

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

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