/* global React, html2canvas, jspdf */
const { useState: useStateO } = React;

function CopyBlock({ text }) {
  const [copied, setCopied] = useStateO(false);
  const doCopy = () => {
    const fn = navigator.clipboard && navigator.clipboard.writeText
      ? navigator.clipboard.writeText(text)
      : Promise.reject();
    fn.then(() => { setCopied(true); setTimeout(() => setCopied(false), 1600); })
      .catch(() => {
        // fallback
        const ta = document.createElement("textarea");
        ta.value = text; document.body.appendChild(ta); ta.select();
        try { document.execCommand("copy"); setCopied(true); setTimeout(() => setCopied(false), 1600); } catch (e) {}
        document.body.removeChild(ta);
      });
  };
  return (
    <div className="copyblock">
      <button className={"copy-btn" + (copied ? " copied" : "")} onClick={doCopy}>
        {copied ? "✓ コピー済み" : "⧉ コピー"}
      </button>
      {text}
    </div>
  );
}

function Section({ num, title, children }) {
  return (
    <div className="doc-section">
      <div className="ds-label">
        <div className="ds-num">{num}</div>
        <div className="ds-title">{title}</div>
      </div>
      <div className="ds-body">{children}</div>
    </div>
  );
}

function Output({ result, onRestart, onEdit }) {
  const r = result;
  const [saving, setSaving] = useStateO(false);
  const safeName = (r.name || "branding").replace(/[\\/:*?"<>|\s]+/g, "-").replace(/^-+|-+$/g, "") || "branding";
  const onSavePdf = async () => {
    if (saving) return;
    if (!window.html2canvas || !window.jspdf) {
      alert("PDF保存の準備が完了していません。少し待ってからもう一度お試しください。");
      return;
    }

    setSaving(true);
    try {
      const docNode = document.querySelector(".doc");
      const actionButtons = Array.from(document.querySelectorAll(".copy-btn, .doc-foot"));
      actionButtons.forEach((node) => node.classList.add("pdf-hidden"));

      const canvas = await html2canvas(docNode, {
        scale: Math.min(window.devicePixelRatio || 1, 2),
        backgroundColor: "#EEF5FA",
        useCORS: true,
      });
      actionButtons.forEach((node) => node.classList.remove("pdf-hidden"));

      const pdf = new jspdf.jsPDF("p", "mm", "a4");
      const pageWidth = pdf.internal.pageSize.getWidth();
      const pageHeight = pdf.internal.pageSize.getHeight();
      const margin = 10;
      const imgWidth = pageWidth - margin * 2;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      const imgData = canvas.toDataURL("image/jpeg", 0.96);

      let y = margin;
      let remainingHeight = imgHeight;
      pdf.addImage(imgData, "JPEG", margin, y, imgWidth, imgHeight);
      remainingHeight -= pageHeight - margin * 2;

      while (remainingHeight > 0) {
        pdf.addPage();
        y = margin - (imgHeight - remainingHeight);
        pdf.addImage(imgData, "JPEG", margin, y, imgWidth, imgHeight);
        remainingHeight -= pageHeight - margin * 2;
      }

      pdf.save(`${safeName}-brand-message.pdf`);
    } catch (e) {
      alert("PDFの保存に失敗しました。時間を置いてもう一度お試しください。");
    } finally {
      document.querySelectorAll(".pdf-hidden").forEach((node) => node.classList.remove("pdf-hidden"));
      setSaving(false);
    }
  };
  return (
    <div className="output fade-in">
      <div className="output-bar">
        <div className="output-bar-inner">
          <div className="ob-left">
            <div className="mark">B</div>
            <span>ブランド出力</span>
          </div>
          <div className="ob-actions">
            <button className="btn btn-ghost" onClick={onEdit} style={{ padding: "11px 18px", fontSize: 14 }}>入力を修正</button>
            <button className="btn btn-gold" onClick={onSavePdf} disabled={saving} style={{ padding: "12px 22px", fontSize: 14 }}>
              {saving ? "PDF作成中..." : "⤓ PDFを直接保存"}
            </button>
          </div>
        </div>
      </div>

      <div className="doc">
        <div className="doc-hero">
          <div className="dh-type-badge">{r.typeLabel}</div>
          <div className="dh-kicker">Brand Message</div>
          <div className="dh-name">{r.name}</div>
          <div className="dh-catch">{r.catch}</div>
          <div className="dh-tag">{r.tagline}</div>
        </div>

        <Section num="01" title="ブランドの核（ポジショニング）">
          <p className="statement" dangerouslySetInnerHTML={{ __html: r.statement }} />
        </Section>

        <Section num="02" title="誰に・どんな価値を">
          <div className="two-col">
            <div className="mini">
              <div className="mini-h">届ける相手</div>
              <div className="mini-c">{r.targetText}</div>
            </div>
            <div className="mini">
              <div className="mini-h">届ける価値</div>
              <div className="mini-c">{r.valueText}</div>
            </div>
          </div>
        </Section>

        <Section num="03" title="強み・差別化ポイント">
          <div className="point-list">
            {r.points.map((p, i) => (
              <div className="point" key={i}>
                <div className="p-no">{String(i + 1).padStart(2, "0")}</div>
                <div className="p-text">{p}</div>
              </div>
            ))}
          </div>
        </Section>

        <Section num="04" title="ブランドストーリー">
          <div className="story">
            {r.story.map((para, i) => (
              <p key={i} dangerouslySetInnerHTML={{ __html: para }} />
            ))}
          </div>
        </Section>

        <Section num="05" title="プロフィール文（自己紹介）">
          <CopyBlock text={r.profile} />
        </Section>

        <Section num="06" title="営業・紹介用ショートメッセージ">
          <CopyBlock text={r.pitch} />
        </Section>

        <div className="doc-foot">
          <div>このブランド出力は、あなたの入力をもとに自動で整理されたものです。言葉はそのまま使っても、たたき台にしても。</div>
          <div className="restart">
            <button className="btn btn-ghost" onClick={onEdit} style={{ fontSize: 14 }}>入力を見直す</button>
            <button className="btn-quiet" onClick={onRestart}>最初からやり直す</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Output, CopyBlock, Section });