// Meetings module — calendar date picker, expandable cards, Admin add/edit/delete.
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState } = React;
  const IC = window.IC, D = window.DATA;
  const typeTone = { Vendor:"info", Executive:"warn", Internal:"neutral", Supplier:"ok" };
  const TYPE_OPTS = ["Internal","Executive","Vendor","Supplier"];
  const selStyle = { border:0, background:"none", outline:"none", font:"inherit", fontSize:13, flex:1, color:"var(--ink)" };

  // ── Create / Edit Meeting Modal ───────────────────────────
  function MeetingModal({ edit, onClose, onDone }) {
    const isEdit = !!edit;
    // Time is now two fields (start/end). For legacy edits, try to split the old "08:00–09:00" string.
    function splitTime(t) {
      if (!t) return { startTime:"", endTime:"" };
      const m = t.match(/(\d{1,2}:\d{2})\s*[–-]\s*(\d{1,2}:\d{2})/);
      return m ? { startTime:m[1].padStart(5,"0"), endTime:m[2].padStart(5,"0") } : { startTime:"", endTime:"" };
    }
    const init = isEdit ? Object.assign({
      title: edit.title, projectId: edit.projectId || "",
      project: edit.project || "",
      dateISO: edit.dateISO || window.todayISO(),
      type: edit.type || "Internal", room: edit.room || "",
      attendees: (edit.attendees || []).join(", "),
      agenda: (edit.agenda || []).join("\n"),
      decisions: (edit.decisions || []).join("\n"),
    }, splitTime(edit.time)) : { title:"", projectId:"", project:"", dateISO: window.todayISO(), startTime:"", endTime:"", type:"Internal", room:"", attendees:"", agenda:"", decisions:"" };
    const [f, setF, safeClose, restoredDraft] = window.useDirty(init, onClose, isEdit ? null : { draftKey: "meeting-create" });
    const [saving, setSaving] = useState(false);
    const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
    const submit = async (e) => {
      e.preventDefault(); if (!f.title.trim()) return; setSaving(true);
      const proj = D.projects.find((p) => p.id === f.projectId);
      const time = (f.startTime && f.endTime) ? (f.startTime + "–" + f.endTime) : (f.startTime || "");
      const payload = { ...f, time, projectId: proj ? proj.id : null, project: proj ? proj.name : "" };
      if (isEdit) await window.DB.updateMeeting(edit.id, payload);
      else { await window.DB.createMeeting(payload); window.clearDraft("meeting-create"); }
      setSaving(false);
      window.toast(isEdit ? "บันทึกการประชุมแล้ว" : "สร้างการประชุม \"" + f.title + "\" แล้ว");
      onDone(); onClose();
    };
    return (
      <div className="login-overlay" onClick={window.NOOP}>
        <form className="login-card" style={{ maxWidth:520, width:"94vw", maxHeight:"92vh", overflowY:"auto" }} onClick={(e) => e.stopPropagation()} onSubmit={submit}>
          <button type="button" className="login-x icon-btn" onClick={safeClose}>{IC.x}</button>
          <div className="login-badge">{IC.meet}</div>
          <h2>{isEdit ? "แก้ไขการประชุม" : "สร้างการประชุม"}</h2>
          {!isEdit && restoredDraft && <div className="pill warn wrappable" style={{ marginTop: 8 }}><i />กู้คืนแบบร่างที่บันทึกไว้</div>}
          <div style={{ display:"grid", gap:12, marginTop:4 }}>
            <label className="login-field"><span>หัวข้อการประชุม *</span><div className="login-input"><input value={f.title} onChange={set("title")} placeholder="หัวข้อ" required /></div></label>
            <window.DateField label="วันที่" value={f.dateISO} onChange={(v) => setF((p) => ({ ...p, dateISO: v }))} />
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              <window.TimeField label="เวลาเริ่ม" value={f.startTime} onChange={(v) => setF((p) => ({ ...p, startTime: v, endTime: p.endTime || window.addMinutes(v, 60) }))} />
              <window.TimeField label="เวลาสิ้นสุด" value={f.endTime} onChange={(v) => setF((p) => ({ ...p, endTime: v }))} />
            </div>
            <window.QuickDurationButtons start={f.startTime} onEnd={(v) => setF((p) => ({ ...p, endTime: v }))} />
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              <label className="login-field"><span>ประเภท</span>
                <div className="login-input"><select value={f.type} onChange={set("type")} style={selStyle}>
                  {TYPE_OPTS.map((t) => <option key={t} value={t}>{t}</option>)}
                </select></div>
              </label>
              <label className="login-field"><span>ห้อง / ช่องทาง</span><div className="login-input"><input value={f.room} onChange={set("room")} placeholder="ห้องประชุม / Online" /></div></label>
            </div>
            <label className="login-field"><span>โครงการที่เกี่ยวข้อง</span>
              <div className="login-input"><select value={f.projectId} onChange={set("projectId")} style={selStyle}>
                <option value="">— ทุกโครงการ —</option>
                {D.projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
              </select></div>
            </label>
            <label className="login-field"><span>ผู้เข้าร่วม (คั่นด้วย ,)</span><div className="login-input"><input value={f.attendees} onChange={set("attendees")} placeholder="ชื่อผู้เข้าร่วม คั่นด้วยคอมมา" /></div></label>
            <label className="login-field"><span>วาระ (แต่ละบรรทัด = 1 วาระ)</span>
              <div className="login-input" style={{ alignItems:"flex-start" }}>
                <window.AutoTextarea value={f.agenda} onChange={set("agenda")} rows={3} placeholder="แต่ละบรรทัด = 1 วาระ" />
              </div>
            </label>
            <label className="login-field"><span>มติที่ประชุม (แต่ละบรรทัด = 1 มติ)</span>
              <div className="login-input" style={{ alignItems:"flex-start" }}>
                <window.AutoTextarea value={f.decisions} onChange={set("decisions")} rows={2} placeholder="ถ้ามี — แต่ละบรรทัด = 1 มติ" />
              </div>
            </label>
          </div>
          <div className="login-acts" style={{ marginTop:16 }}>
            <button type="button" className="btn" onClick={safeClose}>ยกเลิก</button>
            <button type="submit" className="btn pri" disabled={saving}>{saving ? "กำลังบันทึก…" : (isEdit ? "บันทึก" : "สร้างการประชุม")}</button>
          </div>
        </form>
      </div>
    );
  }

  function MeetingCard({ m, open, onToggle, onEdit, onDelete, canEdit }) {
    const [dd, mo] = (m.date || "").split(" ");
    return (
      <div className={"meet-card" + (open ? " open" : "")}>
        <div className="meet-h" onClick={onToggle}>
          <div className="meet-cal"><b className="tnum">{dd || "—"}</b><span>{mo || ""}</span></div>
          <div className="meet-info" style={{ minWidth:0 }}>
            <div className="meet-title" style={{ wordBreak:"break-word", overflowWrap:"anywhere" }}>{m.title}</div>
            <div className="meet-meta" style={{ flexWrap:"wrap" }}><span>{IC.clock}</span>{m.time || "—"}<span>·</span>{m.room || "—"}<span>·</span>{m.project || "ทุกโครงการ"}</div>
            <div className="meet-tags">
              <span className={"pill " + (typeTone[m.type] || "neutral")}><i />{m.type}</span>
              {m.decisions.length > 0 && <span className="pill ok"><i />{m.decisions.length} มติ</span>}
              {m.actions.length > 0 && <span className="pill warn"><i />{m.actions.length} action</span>}
            </div>
          </div>
          {canEdit && <>
            <button className="icon-btn" title="แก้ไข" onClick={(e) => { e.stopPropagation(); onEdit(m); }} style={{ width:32, height:32 }}>{IC.settings}</button>
            <button className="icon-btn" title="ลบ" onClick={(e) => { e.stopPropagation(); onDelete(m); }} style={{ width:32, height:32, color:"var(--danger)" }}>{IC.x}</button>
          </>}
          <span className="meet-chev">{IC.chevR}</span>
        </div>
        {open && (
          <div className="meet-body">
            <div className="meet-sec">
              <h4>วาระการประชุม</h4>
              <ul className="meet-list">{m.agenda.map((a, i) => <li key={i}><span className="bullet" />{a}</li>)}</ul>
            </div>
            <div className="meet-sec">
              <h4>ผู้เข้าร่วม ({m.attendees.length} กลุ่ม)</h4>
              <div className="attendee-row">{m.attendees.map((a, i) => <span className="attendee" key={i}><span className="avatar">{a.slice(0, 2)}</span>{a}</span>)}</div>
            </div>
            {m.decisions.length > 0 && (
              <div className="meet-sec full">
                <h4>มติที่ประชุม</h4>
                <ul className="meet-list">{m.decisions.map((d, i) => <li key={i}><span style={{ color:"var(--ok)", marginTop:0 }}>{IC.check}</span>{d}</li>)}</ul>
              </div>
            )}
            {m.actions.length > 0 && (
              <div className="meet-sec full">
                <h4>Action Items</h4>
                <div style={{ display:"flex", flexDirection:"column", gap:9 }}>
                  {m.actions.map((a, i) => (
                    <div className="action-item" key={i}>
                      <span className="ai-check" />
                      <span className="ai-task">{a.task}</span>
                      <span className="ai-meta"><b style={{ color:"var(--ink2)" }}>{a.owner}</b><br />ภายใน {a.due}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }

  window.SCREENS.meetings = function Meetings() {
    window.useLiveData();
    const records = D.meetingRecords;
    const [openId, setOpenId] = useState(records[0] ? records[0].id : null);
    const [modal, setModal] = useState(null);   // null | {edit?}
    const [typeFilter, setTypeFilter] = useState("ทั้งหมด");
    const shown = records.filter((m) => typeFilter === "ทั้งหมด" || m.type === typeFilter);
    const canEdit = window.can("edit");
    const onDelete = async (m) => {
      if (!confirm("ลบการประชุม \"" + m.title + "\" ?")) return;
      await window.DB.deleteMeeting(m.id);
      window.toast("ลบการประชุมแล้ว");
    };

    return (
      <div className="page wide" style={{ maxWidth:920 }}>
        <header>
          <div className="eyebrow">Coordination</div>
          <h1 className="page-title">การประชุม</h1>
          <p className="page-sub">บันทึกการประชุม วาระ มติ และ Action Items ทั้งหมดในที่เดียว</p>
        </header>
        <div className="toolbar">
          {canEdit
            ? <button className="btn pri" onClick={() => setModal({})}>{IC.plus} สร้างประชุม</button>
            : <span className="pill neutral" style={{ padding:"8px 13px" }}>{IC.eye}<span style={{ marginLeft:2 }}>อ่านอย่างเดียว</span></span>}
          <div className="spacer" />
          {["ทั้งหมด","Vendor","Executive","Internal"].map((t) => (
            <button key={t} className={"chip" + (typeFilter === t ? " act" : "")} onClick={() => setTypeFilter(t)}>{t}</button>
          ))}
        </div>
        {shown.length === 0
          ? <window.EmptyState icon="meet" title="ยังไม่มีการประชุม" sub="ยังไม่มีบันทึกการประชุม เริ่มต้นด้วยการสร้างการประชุมใหม่เพื่อบันทึกวาระ มติ และ Action Items" ctaLabel={canEdit ? "สร้างการประชุมแรก" : undefined} onCta={canEdit ? () => setModal({}) : undefined} />
          : shown.map((m) => <MeetingCard key={m.id} m={m} canEdit={canEdit} open={openId === m.id} onToggle={() => setOpenId(openId === m.id ? null : m.id)} onEdit={(x) => setModal({ edit: x })} onDelete={onDelete} />)}
        {modal && <MeetingModal edit={modal.edit} onClose={() => setModal(null)} onDone={() => {}} />}
      </div>
    );
  };
})();