/* Result page — server-generated banner preview + export */

function ResultPage({ form, generatedBanner, onBack, onOpenFunnel }) {
  const { t } = useI18n();
  const [toast, setToast] = React.useState("");

  const handleDownload = () => {
    if (!generatedBanner?.image) return;
    const link = document.createElement("a");
    const safeName = (form.name || "banner").replace(/[^\w-]+/g, "_").slice(0, 40);
    link.download = `BANNR_${safeName}_${(form.ratio || "1x1").replace(/[:.]/g, "x")}.png`;
    link.href = generatedBanner.image;
    link.click();
    setToast(t("result_download_done"));
  };

  return (
    <main className="result-wrap fade-in">
      <div className="container">
        <div className="page-head">
          <div className="page-head__eyebrow">Generated by secure server API</div>
          <h1 className="page-head__title">バナーが完成しました</h1>
          <p className="page-head__lede">
            サーバー側でプロンプトを保持したまま生成し、画像監査を通過したバナーだけを表示しています。
          </p>
        </div>

        <div style={{ marginBottom: 18 }}>
          <button className="btn btn--ghost" onClick={onBack}>← 入力に戻る</button>
        </div>

        {!generatedBanner?.image ? (
          <div className="result-meta-card">
            <h4>生成画像がありません</h4>
            <p className="dim-2" style={{ margin: 0 }}>
              入力画面に戻って、もう一度「バナーを生成する」を押してください。
            </p>
          </div>
        ) : (
          <div className="result-layout">
            <div className="banner-stage" style={{ minHeight: 560 }}>
              <img
                src={generatedBanner.image}
                alt={`${form.name || "生成バナー"} の広告バナー`}
                style={{
                  maxWidth: "100%",
                  maxHeight: 560,
                  borderRadius: 18,
                  boxShadow: "var(--shadow-2)",
                  objectFit: "contain",
                  background: "#fff",
                }}
              />
            </div>

            <div className="result-side">
              <div className="result-actions-card">
                <h4>アクション</h4>
                <div className="result-actions">
                  <button className="btn btn--primary" onClick={handleDownload}>
                    <Download size={15} />
                    PNGでダウンロード
                  </button>
                  <button className="btn btn--ghost" onClick={onBack}>
                    <Refresh size={15} />
                    入力を修正する
                  </button>
                  <button className="btn btn--primary" onClick={onOpenFunnel}>
                    LP/LINE導線を作る
                  </button>
                </div>
              </div>

              <div className="result-meta-card">
                <h4>監査結果</h4>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
                  <div style={{ color: "#047857", fontWeight: 700 }}>画像監査: OK</div>
                  {generatedBanner.audit?.visibleText && (
                    <div className="copy-block__row">
                      <label>検出された主な文字</label>
                      <div className="value">{generatedBanner.audit.visibleText}</div>
                    </div>
                  )}
                </div>
              </div>

              <div className="result-meta-card">
                <h4>入力情報</h4>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                    <span className="dim-2">商品名</span><span>{form.name}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                    <span className="dim-2">比率</span><span className="mono">{form.ratio}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                    <span className="dim-2">媒体</span><span>{(form.platforms || []).join(" / ")}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {toast && <Toast message={toast} onDone={() => setToast("")} />}
    </main>
  );
}

Object.assign(window, { ResultPage });