/* ===== คลังเทมเพลต (admin) — เพิ่ม/แก้ไข/ลบ/ปรับแต่ง ===== */

const BUILTIN_TEMPLATES = [
  { id: "classic-gold", name: "คลาสสิก ทอง", desc: "กรอบทองคู่ เป็นทางการ" },
  { id: "modern-blue", name: "โมเดิร์น น้ำเงิน", desc: "เรียบ ทันสมัย มีแถบสีด้านข้าง" },
  { id: "ornate-cream", name: "วิจิตร ครีม", desc: "โทนอ่อนหวาน" },
];

/* ตัวแก้ไขตำแหน่งชื่อ/เลขที่ บนพรีวิวเกียรติบัตร (ลากได้) */
function PositionEditor({ base, imageUrl, namePos, noPos, setNamePos, setNoPos, nameFont, nameSize, accent, bg, border, sampleRec }) {
  const wrapRef = React.useRef(null);
  const [dragT, setDragT] = React.useState(null);
  const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));

  function moveTo(cx, cy) {
    const r = wrapRef.current.getBoundingClientRect();
    let x = ((cx - r.left) / r.width) * 100, y = ((cy - r.top) / r.height) * 100;
    if (dragT === "name") setNamePos({ x: Math.round(clamp(x, 8, 92)), y: Math.round(clamp(y, 8, 92)) });
    else if (dragT === "no") setNoPos({ x: Math.round(clamp(x, 4, 96)), y: Math.round(clamp(y, 3, 97)) });
  }
  React.useEffect(() => {
    if (!dragT) return;
    const mv = e => { const t = e.touches ? e.touches[0] : e; moveTo(t.clientX, t.clientY); };
    const up = () => setDragT(null);
    window.addEventListener("mousemove", mv); window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", mv, { passive: false }); window.addEventListener("touchend", up);
    return () => { window.removeEventListener("mousemove", mv); window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", mv); window.removeEventListener("touchend", up); };
  }, [dragT]);

  const [scale, setScale] = React.useState(0.55);
  React.useEffect(() => {
    function fit() { const w = wrapRef.current ? wrapRef.current.parentElement.clientWidth : 600; setScale(Math.min((w - 4) / CERT_W, 0.7)); }
    fit(); window.addEventListener("resize", fit); return () => window.removeEventListener("resize", fit);
  }, []);

  const Handle = ({ target, pos, color }) => (
    <div onMouseDown={() => setDragT(target)} onTouchStart={() => setDragT(target)}
      style={{ position: "absolute", left: `${pos.x}%`, top: `${pos.y}%`, transform: "translate(-50%,-50%)", cursor: "grab", padding: 8, zIndex: 5 }}>
      <div style={{ width: 28, height: 28, borderRadius: 99, background: color, color: "#fff",
        display: "grid", placeItems: "center", boxShadow: "var(--sh-md)", border: "2px solid #fff" }}><Icon.move size={15} /></div>
    </div>
  );
  const Sliders = ({ label, pos, set, color, bounds }) => (
    <div style={{ display: "grid", gap: 7 }}>
      <div style={{ fontSize: 12.5, fontWeight: 700, color }}>{label}</div>
      {[["X", "x"], ["Y", "y"]].map(([lbl, k]) => (
        <div key={k} style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span className="muted" style={{ fontSize: 12, width: 14 }}>{lbl}</span>
          <input type="range" min={bounds[k][0]} max={bounds[k][1]} value={pos[k]}
            onChange={e => set({ ...pos, [k]: +e.target.value })} style={{ accentColor: color, width: 120 }} />
          <span style={{ fontSize: 12, fontFamily: "ui-monospace,monospace", width: 32, color: "var(--c-ink-soft)" }}>{pos[k]}%</span>
        </div>
      ))}
    </div>
  );

  return (
    <div>
      <div style={{ display: "grid", placeItems: "center" }}>
        <div ref={wrapRef} style={{ position: "relative", boxShadow: "var(--sh-md)", borderRadius: 2, overflow: "hidden",
          cursor: dragT ? "grabbing" : "default", touchAction: "none", width: CERT_W * scale, height: CERT_H * scale }}>
          <Certificate event={{ title: "ชื่อกิจกรรม", date: "—" }}
            rec={sampleRec || { name: "ชื่อ–นามสกุล ตัวอย่าง", role: "เข้าร่วมกิจกรรม", no: "1/2569" }}
            template={base} imageUrl={imageUrl} scale={scale} namePos={namePos} noPos={noPos}
            nameFont={nameFont} nameSize={nameSize} accent={accent} bg={bg} border={border} highlightName highlightNo />
          <Handle target="name" pos={namePos} color="var(--c-primary)" />
          <Handle target="no" pos={noPos} color="var(--c-gold-deep)" />
        </div>
      </div>
      <div style={{ display: "flex", gap: 26, justifyContent: "center", marginTop: 14, flexWrap: "wrap" }}>
        <Sliders label="ตำแหน่งชื่อ" pos={namePos} set={setNamePos} color="var(--c-primary)" bounds={{ x: [8, 92], y: [8, 92] }} />
        <Sliders label="ตำแหน่งเลขที่" pos={noPos} set={setNoPos} color="var(--c-gold-deep)" bounds={{ x: [4, 96], y: [3, 97] }} />
      </div>
    </div>
  );
}

/* ฟอร์มเพิ่ม/แก้ไขเทมเพลต */
function TemplateEditor({ template, initialBase, onClose, onSaved }) {
  const editing = !!template;
  const startBase = template?.base || initialBase || "classic-gold";
  const startPreset = STYLE_PRESETS[startBase] || STYLE_PRESETS["classic-gold"];
  const [name, setName] = React.useState(template?.name || "");
  const [description, setDescription] = React.useState(template?.description || "");
  const [base, setBase] = React.useState(startBase);
  const [namePos, setNamePos] = React.useState(template?.namePos || { x: 50, y: 46 });
  const [noPos, setNoPos] = React.useState(template?.noPos || { x: 14, y: 8 });
  const [nameFont, setNameFont] = React.useState(template?.nameFont || "pridi");
  const [nameSize, setNameSize] = React.useState(template?.nameSize || 52);
  const [accent, setAccent] = React.useState(template?.accent || startPreset.accent);
  const [bg, setBg] = React.useState(template?.bg || startPreset.bg);
  const [border, setBorder] = React.useState(template?.border || startPreset.border);
  function applyBase(id) {
    const p = STYLE_PRESETS[id] || STYLE_PRESETS["classic-gold"];
    setBase(id); setAccent(p.accent); setBg(p.bg); setBorder(p.border);
  }
  const [imageFile, setImageFile] = React.useState(null);
  const [localUrl, setLocalUrl] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const fileRef = React.useRef(null);

  React.useEffect(() => {
    if (imageFile) { const u = URL.createObjectURL(imageFile); setLocalUrl(u); return () => URL.revokeObjectURL(u); }
  }, [imageFile]);

  const previewUrl = localUrl || template?.imageUrl || null;

  async function save() {
    if (!name.trim()) { setErr("กรุณาตั้งชื่อเทมเพลต"); return; }
    setErr(""); setBusy(true);
    try {
      let id = template?.id;
      const payload = { name, description, base, namePos, noPos, nameFont, nameSize, accent, bg, border };
      if (editing) {
        await api.updateTemplate(id, payload);
      } else {
        const d = await api.createTemplate(payload);
        id = d.template.id;
      }
      if (imageFile) await api.uploadTemplateImage(id, imageFile);
      onSaved();
    } catch (e) {
      setErr(e.message || "บันทึกไม่สำเร็จ"); setBusy(false);
    }
  }

  return (
    <Modal open onClose={onClose} maxW={860}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
        <div style={{ fontWeight: 700, fontSize: 18 }}>{editing ? "แก้ไขเทมเพลต" : "เพิ่มเทมเพลตใหม่"}</div>
        <div style={{ flex: 1 }} />
        <button className="btn btn-ghost btn-sm" onClick={onClose} style={{ padding: 8 }}><Icon.x size={18} /></button>
      </div>

      <div style={{ display: "grid", gap: 16 }}>
        <div style={{ display: "grid", gap: 14, gridTemplateColumns: "1fr 1fr" }}>
          <div className="field"><label>ชื่อเทมเพลต</label>
            <input className="input" value={name} onChange={e => setName(e.target.value)} placeholder="เช่น เกียรติบัตรงานวิชาการ 2569" autoFocus /></div>
          <div className="field"><label>คำอธิบาย (ไม่บังคับ)</label>
            <input className="input" value={description} onChange={e => setDescription(e.target.value)} placeholder="เช่น โทนทอง สำหรับงานมอบรางวัล" /></div>
        </div>

        {/* image upload */}
        <input ref={fileRef} type="file" accept="image/png,image/jpeg" style={{ display: "none" }}
          onChange={e => setImageFile(e.target.files[0])} />
        <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
          <button className="btn btn-soft btn-sm" onClick={() => fileRef.current && fileRef.current.click()}>
            <Icon.upload size={15} /> {previewUrl ? "เปลี่ยนรูปเทมเพลต" : "อัปโหลดรูปเทมเพลต (PNG/JPG)"}
          </button>
          {previewUrl && <span className="chip chip-ok"><Icon.check size={13} /> มีรูปเทมเพลต</span>}
          {!previewUrl && (
            <div style={{ display: "flex", gap: 7, alignItems: "center" }}>
              <span className="muted" style={{ fontSize: 13 }}>หรือใช้สไตล์สำเร็จรูป:</span>
              {BUILTIN_TEMPLATES.map(b => (
                <button key={b.id} onClick={() => applyBase(b.id)}
                  style={{ fontSize: 12.5, fontWeight: 600, padding: "5px 10px", borderRadius: 8,
                    border: base === b.id ? "2px solid var(--c-primary)" : "1px solid var(--c-line)",
                    background: base === b.id ? "var(--c-primary-soft)" : "#fff", color: "var(--c-ink-soft)" }}>{b.name}</button>
              ))}
            </div>
          )}
        </div>

        {/* ปรับแต่งสไตล์ (เฉพาะแบบไม่มีรูปอัปโหลด) */}
        {!previewUrl && (
          <div style={{ display: "flex", gap: 22, flexWrap: "wrap", alignItems: "flex-end" }}>
            <div className="field" style={{ flex: "0 0 auto" }}>
              <label>สีหลัก (กรอบ/หัวเรื่อง)</label>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <input type="color" value={accent} onChange={e => setAccent(e.target.value)}
                  style={{ width: 46, height: 38, border: "1px solid var(--c-line)", borderRadius: 8, padding: 2, background: "#fff", cursor: "pointer" }} />
                <code style={{ fontSize: 12.5, color: "var(--c-ink-soft)" }}>{accent}</code>
              </div>
            </div>
            <div className="field" style={{ flex: "0 0 auto" }}>
              <label>สีพื้นหลัง</label>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <input type="color" value={bg} onChange={e => setBg(e.target.value)}
                  style={{ width: 46, height: 38, border: "1px solid var(--c-line)", borderRadius: 8, padding: 2, background: "#fff", cursor: "pointer" }} />
                <code style={{ fontSize: 12.5, color: "var(--c-ink-soft)" }}>{bg}</code>
              </div>
            </div>
            <div className="field" style={{ flex: "1 1 auto" }}>
              <label>รูปแบบกรอบ</label>
              <div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
                {BORDER_OPTIONS.map(o => (
                  <button key={o.id} onClick={() => setBorder(o.id)}
                    style={{ fontSize: 13, fontWeight: 600, padding: "8px 13px", borderRadius: 9,
                      border: border === o.id ? "2px solid var(--c-primary)" : "1px solid var(--c-line)",
                      background: border === o.id ? "var(--c-primary-soft)" : "#fff", color: "var(--c-ink-soft)" }}>{o.label}</button>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* ฟอนต์ + ขนาดชื่อ */}
        <div style={{ display: "flex", gap: 18, flexWrap: "wrap", alignItems: "flex-end" }}>
          <div className="field" style={{ flex: "1 1 260px" }}>
            <label>ฟอนต์ชื่อ–นามสกุล</label>
            <div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
              {NAME_FONTS.map(f => (
                <button key={f.id} onClick={() => setNameFont(f.id)}
                  style={{ fontFamily: f.css, fontSize: 15, padding: "8px 12px", borderRadius: 9,
                    border: nameFont === f.id ? "2px solid var(--c-primary)" : "1px solid var(--c-line)",
                    background: nameFont === f.id ? "var(--c-primary-soft)" : "#fff", color: "var(--c-ink)" }}>
                  {f.label}
                </button>
              ))}
            </div>
          </div>
          <div className="field" style={{ flex: "0 0 230px" }}>
            <label>ขนาดตัวอักษร: {nameSize}px</label>
            <input type="range" min={24} max={90} step={1} value={nameSize}
              onChange={e => setNameSize(+e.target.value)} style={{ accentColor: "var(--c-primary)", width: "100%" }} />
          </div>
        </div>

        <div style={{ background: "var(--c-bg-deep)", borderRadius: 12, padding: "16px 12px" }}>
          <div className="muted" style={{ fontSize: 13, textAlign: "center", marginBottom: 10 }}>
            ลากจุด <b style={{ color: "var(--c-primary)" }}>น้ำเงิน</b> = ตำแหน่งชื่อ · จุด <b style={{ color: "var(--c-gold-deep)" }}>ทอง</b> = ตำแหน่งเลขที่
          </div>
          <PositionEditor base={base} imageUrl={previewUrl} namePos={namePos} noPos={noPos}
            setNamePos={setNamePos} setNoPos={setNoPos} nameFont={nameFont} nameSize={nameSize}
            accent={accent} bg={bg} border={border} />
        </div>

        {err && <div style={{ color: "var(--c-danger)", fontSize: 13.5, fontWeight: 600 }}>{err}</div>}
        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
          <button className="btn btn-ghost" onClick={onClose}>ยกเลิก</button>
          <button className="btn btn-primary" onClick={save} disabled={busy}>
            {busy ? <Spinner size={17} color="#fff" /> : <Icon.check size={17} />} บันทึก
          </button>
        </div>
      </div>
    </Modal>
  );
}

/* หน้าหลักคลังเทมเพลต */
function TemplatesView() {
  const [templates, setTemplates] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editor, setEditor] = React.useState(null); // null | {template?}
  const [confirmDel, setConfirmDel] = React.useState(null);

  function load() {
    setLoading(true);
    api.listTemplates().then(d => setTemplates(d.templates || [])).catch(() => setTemplates([])).finally(() => setLoading(false));
  }
  React.useEffect(() => { load(); }, []);

  async function doDelete(t) {
    try { await api.deleteTemplate(t.id); setConfirmDel(null); load(); }
    catch (e) { alert(e.message); }
  }

  return (
    <>
      <div style={{ padding: "20px 28px", borderBottom: "1px solid var(--c-line-soft)", display: "flex", alignItems: "center", gap: 14,
        position: "sticky", top: 0, background: "oklch(1 0 0 / .85)", backdropFilter: "blur(8px)", zIndex: 20 }}>
        <div>
          <h1 style={{ fontSize: 21, fontWeight: 700 }}>เทมเพลต</h1>
          <div className="muted" style={{ fontSize: 13.5 }}>คลังแบบเกียรติบัตรของคุณ — อัปโหลด ปรับแต่ง และเลือกใช้ตอนสร้างกิจกรรม</div>
        </div>
        <div style={{ flex: 1 }} />
        <button className="btn btn-primary" onClick={() => setEditor({})}><Icon.plus size={18} /> เพิ่มเทมเพลต</button>
      </div>

      <div style={{ padding: 28 }}>
        {/* คลังของผู้ใช้ */}
        <h2 style={{ fontSize: 15, fontWeight: 700, margin: "0 2px 12px" }}>เทมเพลตของคุณ <span className="chip chip-muted" style={{ marginLeft: 4 }}>{templates.length}</span></h2>
        {loading ? (
          <div style={{ display: "grid", placeItems: "center", padding: "40px 0", color: "var(--c-muted)" }}><Spinner size={26} /></div>
        ) : templates.length === 0 ? (
          <div className="card" style={{ padding: "30px 20px", textAlign: "center", marginBottom: 30 }}>
            <div style={{ width: 56, height: 56, borderRadius: 14, background: "var(--c-primary-soft)", color: "var(--c-primary)",
              display: "grid", placeItems: "center", margin: "0 auto 12px" }}><Icon.cert size={28} /></div>
            <div style={{ fontWeight: 700, fontSize: 15, marginBottom: 4 }}>ยังไม่มีเทมเพลตของคุณ</div>
            <div className="muted" style={{ fontSize: 13.5, marginBottom: 14 }}>อัปโหลดรูปเกียรติบัตรจาก Canva แล้ววางตำแหน่งชื่อ/เลขที่ได้เลย</div>
            <button className="btn btn-primary btn-sm" onClick={() => setEditor({})}><Icon.plus size={16} /> เพิ่มเทมเพลตแรก</button>
          </div>
        ) : (
          <div style={{ display: "grid", gap: 18, gridTemplateColumns: "repeat(auto-fill,minmax(280px,1fr))", marginBottom: 30 }}>
            {templates.map(t => (
              <div key={t.id} className="card" style={{ overflow: "hidden" }}>
                <div style={{ height: 168, overflow: "hidden", background: "var(--c-bg-deep)", display: "grid", placeItems: "center" }}>
                  <Certificate event={{ title: "ชื่อกิจกรรม", date: "—" }}
                    rec={{ name: "ชื่อ–นามสกุล", role: "เข้าร่วมกิจกรรม", no: "1/2569" }}
                    template={t.base} imageUrl={t.imageUrl} namePos={t.namePos} noPos={t.noPos}
                    nameFont={t.nameFont} nameSize={t.nameSize} accent={t.accent} bg={t.bg} border={t.border} scale={0.3} />
                </div>
                <div style={{ padding: "13px 16px" }}>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>{t.name}</div>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 3, minHeight: 18 }}>{t.description || "—"}</div>
                  <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
                    <button className="btn btn-soft btn-sm" style={{ flex: 1 }} onClick={() => setEditor({ template: t })}>
                      <Icon.settings size={14} /> แก้ไข
                    </button>
                    <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDel(t)} style={{ color: "var(--c-danger)" }}>
                      <Icon.x size={14} /> ลบ
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* แบบสำเร็จรูป — ปรับแต่งแล้วบันทึกเป็นของคุณได้ */}
        <h2 style={{ fontSize: 15, fontWeight: 700, margin: "6px 2px 12px" }}>แบบสำเร็จรูปในระบบ</h2>
        <div className="muted" style={{ fontSize: 13, margin: "0 2px 14px" }}>กด “ปรับแต่ง” เพื่อแก้สี/กรอบ/ฟอนต์ แล้วบันทึกเป็นเทมเพลตของคุณ</div>
        <div style={{ display: "grid", gap: 18, gridTemplateColumns: "repeat(auto-fill,minmax(240px,1fr))" }}>
          {BUILTIN_TEMPLATES.map(o => (
            <div key={o.id} className="card" style={{ overflow: "hidden" }}>
              <div style={{ height: 150, overflow: "hidden", background: "var(--c-bg-deep)", display: "grid", placeItems: "center" }}>
                <Certificate event={{ title: "ชื่อกิจกรรม", date: "—" }}
                  rec={{ name: "ชื่อ–นามสกุล", role: "เข้าร่วมกิจกรรม", no: "1/2569" }} template={o.id} scale={0.26} />
              </div>
              <div style={{ padding: "12px 15px" }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{o.name}</div>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 2, minHeight: 17 }}>{o.desc}</div>
                <button className="btn btn-soft btn-sm btn-block" style={{ marginTop: 11 }} onClick={() => setEditor({ initialBase: o.id })}>
                  <Icon.settings size={14} /> ปรับแต่ง / ใช้แบบนี้
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {editor && <TemplateEditor template={editor.template} initialBase={editor.initialBase} onClose={() => setEditor(null)} onSaved={() => { setEditor(null); load(); }} />}

      {confirmDel && (
        <Modal open onClose={() => setConfirmDel(null)} maxW={420}>
          <div style={{ fontWeight: 700, fontSize: 17, marginBottom: 8 }}>ลบเทมเพลต?</div>
          <div className="muted" style={{ fontSize: 14, marginBottom: 20 }}>ต้องการลบ “{confirmDel.name}” ใช่ไหม การลบนี้ย้อนกลับไม่ได้ (กิจกรรมที่สร้างไปแล้วไม่ได้รับผลกระทบ)</div>
          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
            <button className="btn btn-ghost" onClick={() => setConfirmDel(null)}>ยกเลิก</button>
            <button className="btn btn-gold" onClick={() => doDelete(confirmDel)} style={{ background: "var(--c-danger)" }}><Icon.x size={16} /> ลบ</button>
          </div>
        </Modal>
      )}
    </>
  );
}

Object.assign(window, { TemplatesView, PositionEditor });