// view-pop.jsx — ④ ポップ・チラシ自動生成
const { useState, useEffect } = React;

const TEMPLATES = [
  { id: "bold",    name: "BOLD / 新入荷推し",  desc: "ネイビー × NEWタグ" },
  { id: "minimal", name: "MINIMAL / 落ち着き", desc: "和紙風・型番強調"   },
  { id: "festive", name: "FESTIVE / SALE",     desc: "縞模様 × 円形プライス" },
];

function PopPage({ tmpl, data }) {
  const src = tmpl === "bold"    ? "assets/pop-bold.png"
            : tmpl === "minimal" ? "assets/pop-minimal.png"
            :                      "assets/pop-festive.png";
  return (
    <div className={`pop-tmpl pop-tmpl-${tmpl}`}>
      <img src={src} alt="" className="pop-bg" />
    </div>
  );
}

function PopView({ confirmedFromCore }) {
  const [tmpl, setTmpl] = useState("bold");
  const [data, setData] = useState({
    eyebrow: "NEW ARRIVAL",
    title:   "蒼穹の終焉竜",
    sku:     "BLU-EWD-001",
    rarity:  "SR / スーパーレア",
    price:   3200,
    priceLabel: "店頭販売価格 (税込)",
  });
  const [toast, setToast] = useState(null);

  // pull live values from the core view's last confirmed price
  useEffect(() => {
    if (confirmedFromCore) {
      setData(d => ({
        ...d,
        title: confirmedFromCore.name,
        sku: confirmedFromCore.sku.replace(/-SEC$/, ""),
        rarity: `${confirmedFromCore.rarity} / ${rarityName(confirmedFromCore.rarity)}`,
        price: confirmedFromCore.price,
      }));
    }
  }, [confirmedFromCore]);

  const update = (k, v) => setData(d => ({...d, [k]: v}));

  const exportPDF = () => {
    setToast("ポップ_BLU-EWD-001.pdf を保存しました");
    setTimeout(() => setToast(null), 2400);
  };

  return (
    <div className="view" data-screen-label="04 Pop">
      <div className="view-header">
        <div>
          <div className="crumb">④ 周辺 / Figmaクリッカブル + サンプルPDF</div>
          <h1>ポップ・チラシ自動生成</h1>
          <div className="sub">
            テンプレ選択 → リアルタイムプレビュー → PDF出力。価格は ① コアの確定値が自動反映されるので、現場スタッフは1クリックで店頭ポップを刷れる。
          </div>
        </div>
        <div className="header-side">
          {confirmedFromCore && (
            <span className="chip success">
              ✓ コアから ¥{Number(confirmedFromCore.price).toLocaleString("ja-JP")} 反映済み
            </span>
          )}
        </div>
      </div>

      <div className="pop-grid">
        {/* templates */}
        <div className="card">
          <div className="card-head"><span className="h">テンプレート</span><span className="chip">{TEMPLATES.length}件</span></div>
          <div className="card-pad">
            <div className="tmpl-list">
              {TEMPLATES.map(t => (
                <div
                  key={t.id}
                  className={`tmpl-card ${tmpl === t.id ? "is-selected" : ""}`}
                  onClick={() => setTmpl(t.id)}>
                  <div className="tmpl-thumb">
                    <div style={{transform: "scale(0.135)", transformOrigin: "top left", width: 420, height: 594}}>
                      <PopPage tmpl={t.id} data={data} />
                    </div>
                  </div>
                  <div>
                    <div className="tmpl-name">{t.name}</div>
                    <div className="tmpl-desc">{t.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{marginTop: 18, padding: 12, background: "var(--surface-2)", borderRadius: 3, fontSize: 11, color: "var(--ink-3)", lineHeight: 1.55}}>
              <b>運用Tips：</b><br/>
              テンプレ画像は事前デザイン済み。<br/>
              店頭スタッフは <b>価格を確定するだけ</b> で<br/>
              A4ポップが即印刷できる。
            </div>
          </div>
        </div>

        {/* preview */}
        <div className="pop-preview-wrap">
          <div className="pop-page">
            <PopPage tmpl={tmpl} data={data} />
          </div>
          {toast && (
            <div className="export-toast">
              <span className="check">✓</span>
              <span>{toast}</span>
            </div>
          )}
          <div style={{position: "absolute", bottom: 12, left: 0, right: 0, textAlign: "center", fontSize: 11, color: "var(--ink-3)"}}>
            <span className="mono">A4 / 210 × 297 mm</span> · 印刷プレビュー
          </div>
        </div>

        {/* fields */}
        <div className="card">
          <div className="card-head"><span className="h">差し込みデータ</span><span className="chip accent">コア連動</span></div>
          <div className="card-pad">
            <div className="field-group">
              <label>カード名</label>
              <input value={data.title} onChange={e => update("title", e.target.value)} />
            </div>
            <div className="field-group">
              <label>型番</label>
              <input value={data.sku} onChange={e => update("sku", e.target.value)} />
            </div>
            <div className="field-group">
              <label>レアリティ</label>
              <input value={data.rarity} onChange={e => update("rarity", e.target.value)} />
            </div>
            <div className="field-group">
              <label>店頭販売価格 (円)</label>
              <input
                type="number"
                value={data.price}
                onChange={e => update("price", Number(e.target.value) || 0)} />
              <div style={{fontSize: 10, color: "var(--ink-4)", marginTop: 4}}>
                ※ ①コアで確定した価格が自動反映されます
              </div>
            </div>

            <div className="pop-actions">
              <button className="btn btn-accent btn-block btn-lg" onClick={exportPDF}>
                📄 PDFを出力する
              </button>
              <button className="btn btn-block">🖨 印刷キューに送る</button>
              <button className="btn btn-ghost btn-block" style={{fontSize: 12, color: "var(--ink-4)"}}>
                ↓ コアの最新価格を再取得
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function rarityName(id) {
  return {N:"ノーマル",R:"レア",SR:"スーパーレア",UR:"ウルトラレア",SEC:"シークレットレア"}[id] || "";
}

window.PopView = PopView;