/* ===== Schedule add/edit modal (recurring reports) ===== */
const { useState: useStateS, useEffect: useEffectS } = React;

function ScheduleModal({ schedule, members, onClose, onSave, onDelete, onManageMembers }) {
  const isNew = !schedule.id;
  const memberList = members || MEMBERS;
  const todayStr = new Date().toISOString().slice(0, 10);
  const [form, setForm] = useStateS({
    name: schedule.name || "",
    owner: schedule.owner || memberList[0].id,
    cadence: schedule.cadence || "daily",
    dueHour: schedule.dueHour ?? 18,
    dueDow: schedule.dueDow ?? 5,    // ศุกร์
    dueDom: schedule.dueDom ?? 1,    // วันที่ 1
    startDate: schedule.startDate || todayStr,  // วันที่เริ่มของรายงาน
  });
  const [err, setErr] = useStateS(false);

  useEffectS(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = () => {
    if (!form.name.trim()) { setErr(true); return; }
    const payload = { ...schedule, name: form.name.trim(), owner: form.owner, cadence: form.cadence, dueHour: Number(form.dueHour), startDate: form.startDate || todayStr };
    if (form.cadence === "weekly")  payload.dueDow = Number(form.dueDow);
    if (form.cadence === "monthly") payload.dueDom = Number(form.dueDom);
    // clean up unused fields
    if (form.cadence !== "weekly")  delete payload.dueDow;
    if (form.cadence !== "monthly") delete payload.dueDom;
    onSave(payload);
  };

  // preview text
  const previewText = (() => {
    const h = `${String(form.dueHour).padStart(2, "0")}:00`;
    if (form.cadence === "daily")  return `ทุกวัน ${h} น.`;
    if (form.cadence === "weekly") return `ทุกวัน${DOW_TH[form.dueDow]} ${h} น.`;
    return `ทุกวันที่ ${form.dueDom} ของเดือน ${h} น.`;
  })();

  return (
    <div style={smStyles.overlay} onMouseDown={onClose}>
      <div style={smStyles.sheet} className="scroll modal-sheet" onMouseDown={(e) => e.stopPropagation()}>
        <div style={smStyles.head}>
          <div>
            <div style={smStyles.kicker}>{isNew ? "รายงานใหม่ · New report" : "แก้ไขรายงาน · Edit report"}</div>
            <div style={smStyles.headTitle}>{isNew ? "เพิ่มรายงานประจำ" : "ตั้งค่ารายงานประจำ"}</div>
          </div>
          <button style={smStyles.x} className="tm-x" onClick={onClose}><CloseIcon /></button>
        </div>

        <div style={smStyles.body}>
          <label style={smStyles.field}>
            <span style={smStyles.label}>ชื่อรายงาน <b style={{ color: "var(--high)" }}>*</b></span>
            <input
              autoFocus value={form.name}
              onChange={(e) => { set("name", e.target.value); setErr(false); }}
              placeholder="เช่น สรุปงานดีไซน์ประจำวัน"
              style={{ ...smStyles.input, borderColor: err ? "var(--high)" : "var(--line)" }} />
            {err && <span style={smStyles.errTxt}>กรุณาใส่ชื่อรายงาน</span>}
          </label>

          <label style={smStyles.field}>
            <span style={smStyles.label}>ผู้รับผิดชอบ · Owner</span>
            <MemberPicker value={form.owner} onChange={(id) => set("owner", id)} members={memberList} onManage={onManageMembers} />
          </label>

          <div style={smStyles.field}>
            <span style={smStyles.label}>ความถี่ · Cadence</span>
            <div style={{ display: "flex", gap: 8 }}>
              {Object.values(CADENCES).map(c => {
                const on = form.cadence === c.id;
                return (
                  <button key={c.id} onClick={() => set("cadence", c.id)}
                    style={{
                      flex: 1, padding: "10px 8px", borderRadius: 11, fontWeight: 600, fontSize: 13.5,
                      border: "1.5px solid " + (on ? "var(--primary)" : "var(--line)"),
                      background: on ? "var(--primary-soft)" : "var(--surface)",
                      color: on ? "var(--primary)" : "var(--ink-2)",
                      transition: ".12s",
                    }}>
                    {c.label}
                    <div style={{ fontSize: 11, fontWeight: 500, opacity: .75, marginTop: 2 }}>{c.en}</div>
                  </button>
                );
              })}
            </div>
          </div>

          <div style={smStyles.row2} className="sm-row2">
            {form.cadence === "weekly" && (
              <label style={smStyles.field}>
                <span style={smStyles.label}>วันในสัปดาห์</span>
                <select value={form.dueDow} onChange={(e) => set("dueDow", e.target.value)} style={{ ...smStyles.input, ...smStyles.select }}>
                  {DOW_TH.map((d, i) => <option key={i} value={i}>{d}</option>)}
                </select>
              </label>
            )}
            {form.cadence === "monthly" && (
              <label style={smStyles.field}>
                <span style={smStyles.label}>วันที่ในเดือน</span>
                <select value={form.dueDom} onChange={(e) => set("dueDom", e.target.value)} style={{ ...smStyles.input, ...smStyles.select }}>
                  {Array.from({ length: 28 }, (_, i) => i + 1).map(d => <option key={d} value={d}>วันที่ {d}</option>)}
                </select>
              </label>
            )}
            <label style={smStyles.field}>
              <span style={smStyles.label}>กำหนดส่ง (เวลา)</span>
              <select value={form.dueHour} onChange={(e) => set("dueHour", e.target.value)} style={{ ...smStyles.input, ...smStyles.select }}>
                {Array.from({ length: 24 }, (_, i) => i).map(h => (
                  <option key={h} value={h}>{String(h).padStart(2, "0")}:00 น.</option>
                ))}
              </select>
            </label>
          </div>

          <label style={smStyles.field}>
            <span style={smStyles.label}>วันที่เริ่ม · Start date</span>
            <input
              type="date" value={form.startDate}
              onChange={(e) => set("startDate", e.target.value)}
              style={smStyles.input} />
            <span style={{ fontSize: 12, color: "var(--ink-3)" }}>
              ระบบจะนับรอบการส่งตั้งแต่วันนี้เป็นต้นไป — รอบก่อนหน้าจะไม่ถูกแสดง
            </span>
          </label>

          <div style={smStyles.preview}>
            <span style={{ fontSize: 12, fontWeight: 700, color: "var(--primary)", letterSpacing: ".3px", textTransform: "uppercase" }}>ตัวอย่าง</span>
            <div style={{ fontSize: 15, fontWeight: 600, color: "var(--ink)", marginTop: 4 }}>
              {form.name.trim() || "ชื่อรายงาน"}
            </div>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>
              ส่ง{previewText}
            </div>
            {form.startDate && (
              <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 4 }}>
                เริ่มนับจาก {form.startDate}
              </div>
            )}
          </div>
        </div>

        <div style={smStyles.foot}>
          {!isNew
            ? <button className="btn" style={smStyles.del} onClick={() => { if (confirm("ลบรายงานนี้? ประวัติการส่งจะยังคงอยู่ในระบบ")) onDelete(schedule.id); }}>ลบรายงาน</button>
            : <span />}
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn btn-ghost" onClick={onClose}>ยกเลิก</button>
            <button className="btn btn-primary" onClick={submit}>{isNew ? "เพิ่มรายงาน" : "บันทึก"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

const smStyles = {
  overlay: {
    position: "fixed", inset: 0, zIndex: 100, background: "rgba(20,30,55,.42)",
    backdropFilter: "blur(4px)", display: "grid", placeItems: "center", padding: 20,
    animation: "overlayIn .2s ease both",
  },
  sheet: {
    width: "min(560px, 100%)", maxHeight: "92vh", overflowY: "auto",
    background: "var(--surface)", borderRadius: 22, boxShadow: "var(--shadow-pop)",
    animation: "sheetIn .3s cubic-bezier(.2,.7,.3,1) both",
  },
  head: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", padding: "24px 26px 6px" },
  kicker: { fontSize: 12, fontWeight: 700, color: "var(--primary)", letterSpacing: ".3px", textTransform: "uppercase" },
  headTitle: { fontSize: 21, fontWeight: 700, marginTop: 4 },
  x: { width: 36, height: 36, borderRadius: 10, border: "1px solid var(--line)", background: "var(--surface)", color: "var(--ink-2)", display: "grid", placeItems: "center" },
  body: { padding: "16px 26px 8px", display: "flex", flexDirection: "column", gap: 16 },
  field: { display: "flex", flexDirection: "column", gap: 7, flex: 1 },
  label: { fontSize: 13, fontWeight: 600, color: "var(--ink-2)" },
  input: {
    border: "1.5px solid var(--line)", borderRadius: 11, padding: "11px 13px",
    fontSize: 14.5, color: "var(--ink)", background: "var(--surface)", outline: "none", width: "100%",
  },
  select: { appearance: "none", cursor: "pointer" },
  row2: { display: "flex", gap: 12 },
  errTxt: { fontSize: 12, color: "var(--high)", fontWeight: 600 },
  preview: {
    padding: "13px 15px", borderRadius: 13, border: "1.5px dashed var(--primary)",
    background: "var(--primary-soft)",
  },
  foot: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 26px 24px", marginTop: 6 },
  del: { background: "var(--high-soft)", color: "var(--high)" },
};

window.ScheduleModal = ScheduleModal;