/* ===== Team members manager modal ===== */
const { useState: useStateMM, useEffect: useEffectMM } = React;

function MembersModal({ members, tasks, schedules, onClose, onSave, onDelete, prefillName }) {
  const [editing, setEditing] = useStateMM(null); // member id or "__new__"
  const [draft, setDraft] = useStateMM(null);
  const [confirmDel, setConfirmDel] = useStateMM(null);

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

  // auto-open new-member form if prefill provided
  useEffectMM(() => {
    if (prefillName) startNew(prefillName);
    // eslint-disable-next-line
  }, []);

  const startEdit = (m) => {
    setEditing(m.id);
    setDraft({ ...m });
    setConfirmDel(null);
  };
  const startNew = (presetName = "") => {
    const usedColors = members.map(m => m.color);
    const color = MEMBER_COLORS.find(c => !usedColors.includes(c)) || MEMBER_COLORS[(members.length) % MEMBER_COLORS.length];
    setEditing("__new__");
    setDraft({ id: null, nick: presetName, name: presetName, role: "", av: presetName ? presetName.trim().charAt(0).toUpperCase() : "?", color });
  };
  const cancelEdit = () => { setEditing(null); setDraft(null); };

  const setField = (k, v) => setDraft(d => {
    const next = { ...d, [k]: v };
    // auto-update avatar letter from nick if user hasn't changed it manually
    if (k === "nick" && (!d.av || d.av === d.nick.trim().charAt(0).toUpperCase() || d.av === "?")) {
      next.av = v.trim().charAt(0).toUpperCase() || "?";
    }
    return next;
  });

  const save = () => {
    const nick = (draft.nick || "").trim();
    const name = (draft.name || "").trim() || nick;
    const role = (draft.role || "").trim() || "ทีม";
    if (!nick) return;
    const payload = {
      id: draft.id || ("u" + Date.now()),
      nick, name, role,
      av: (draft.av || nick.charAt(0)).toUpperCase().slice(0, 2),
      color: draft.color || MEMBER_COLORS[0],
    };
    onSave(payload);
    cancelEdit();
  };

  // counts for each member (tasks + schedules)
  const countOf = (id) => ({
    tasks: tasks.filter(t => t.assignee === id).length,
    schedules: schedules.filter(s => s.owner === id).length,
  });

  return (
    <div style={mmStyles.overlay} onMouseDown={onClose}>
      <div style={mmStyles.sheet} className="scroll modal-sheet" onMouseDown={(e) => e.stopPropagation()}>
        <div style={mmStyles.head}>
          <div>
            <div style={mmStyles.kicker}>จัดการสมาชิก · Team members</div>
            <div style={mmStyles.headTitle}>รายชื่อภายในทีม</div>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4 }}>ทั้งหมด {members.length} คน · เพิ่ม แก้ไข หรือลบสมาชิกได้ที่นี่</div>
          </div>
          <button style={mmStyles.x} className="tm-x" onClick={onClose}><CloseIcon /></button>
        </div>

        <div style={mmStyles.body}>
          {/* member list */}
          <div style={mmStyles.list}>
            {members.map(m => {
              const counts = countOf(m.id);
              const isEditingThis = editing === m.id;
              const isConfirming = confirmDel === m.id;
              return (
                <div key={m.id} style={{ ...mmStyles.row, background: isEditingThis ? "var(--primary-soft)" : "transparent" }}>
                  <Avatar member={m} size={42} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 600 }}>{m.nick} <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>· {m.name}</span></div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>{m.role}</div>
                    <div style={{ display: "flex", gap: 12, marginTop: 6, fontSize: 11.5, color: "var(--ink-3)" }}>
                      <span><b style={{ color: "var(--ink-2)" }}>{counts.tasks}</b> งาน</span>
                      <span><b style={{ color: "var(--ink-2)" }}>{counts.schedules}</b> รายงาน</span>
                    </div>
                  </div>
                  {!isConfirming ? (
                    <div style={{ display: "flex", gap: 6 }}>
                      <button className="btn btn-ghost" style={mmStyles.smallBtn} onClick={() => startEdit(m)} title="แก้ไข">
                        <PencilIcon /> แก้ไข
                      </button>
                      <button className="btn" style={mmStyles.delBtn} onClick={() => setConfirmDel(m.id)} title="ลบ"
                        disabled={members.length <= 1}>
                        <TrashIcon />
                      </button>
                    </div>
                  ) : (
                    <div style={mmStyles.confirm}>
                      <div style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 600 }}>
                        ลบ <b>{m.nick}</b>?
                        {(counts.tasks > 0 || counts.schedules > 0) && (
                          <div style={{ fontSize: 11.5, color: "var(--high)", fontWeight: 500, marginTop: 3 }}>
                            มี {counts.tasks} งาน + {counts.schedules} รายงานที่ผูกอยู่ — จะถูกย้ายไปคนที่เหลือ
                          </div>
                        )}
                      </div>
                      <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
                        <button className="btn btn-ghost" style={mmStyles.smallBtn} onClick={() => setConfirmDel(null)}>ยกเลิก</button>
                        <button className="btn" style={{ ...mmStyles.smallBtn, background: "var(--high)", color: "#fff" }}
                          onClick={() => { onDelete(m.id); setConfirmDel(null); }}>ลบเลย</button>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          {/* add / edit panel */}
          {editing && draft ? (
            <div style={mmStyles.editPanel}>
              <div style={{ fontSize: 13, fontWeight: 700, color: "var(--primary)", letterSpacing: ".3px", textTransform: "uppercase", marginBottom: 12 }}>
                {editing === "__new__" ? "เพิ่มสมาชิกใหม่" : "แก้ไข " + draft.nick}
              </div>
              <div style={mmStyles.formRow}>
                <label style={mmStyles.field}>
                  <span style={mmStyles.label}>ชื่อเล่น · Nick <b style={{ color: "var(--high)" }}>*</b></span>
                  <input autoFocus value={draft.nick} onChange={(e) => setField("nick", e.target.value)} placeholder="เช่น ฟ้า" style={mmStyles.input} />
                </label>
                <label style={mmStyles.field}>
                  <span style={mmStyles.label}>ชื่อ-นามสกุล · Full name</span>
                  <input value={draft.name} onChange={(e) => setField("name", e.target.value)} placeholder="เช่น ฟ้าใส วงศ์ดี" style={mmStyles.input} />
                </label>
              </div>
              <div style={mmStyles.formRow}>
                <label style={{ ...mmStyles.field, flex: 2 }}>
                  <span style={mmStyles.label}>ตำแหน่ง · Role</span>
                  <input value={draft.role} onChange={(e) => setField("role", e.target.value)} placeholder="เช่น UX Designer" style={mmStyles.input} />
                </label>
                <label style={{ ...mmStyles.field, flex: 1 }}>
                  <span style={mmStyles.label}>อักษรย่อ</span>
                  <input value={draft.av} onChange={(e) => setField("av", e.target.value.slice(0, 2).toUpperCase())} maxLength={2}
                    style={{ ...mmStyles.input, textAlign: "center", fontWeight: 700, letterSpacing: 1 }} />
                </label>
              </div>
              <div style={mmStyles.field}>
                <span style={mmStyles.label}>สี · Color</span>
                <div style={mmStyles.colorRow}>
                  {MEMBER_COLORS.map(c => {
                    const on = draft.color === c;
                    return (
                      <button key={c} onClick={() => setField("color", c)}
                        style={{
                          width: 30, height: 30, borderRadius: 10, padding: 0,
                          background: c, border: on ? "3px solid var(--ink)" : "2px solid #fff",
                          boxShadow: on ? "0 0 0 2px var(--ink)" : "0 1px 4px rgba(22,35,63,.15)",
                          transition: ".12s", cursor: "pointer",
                        }} />
                    );
                  })}
                </div>
              </div>

              {/* preview */}
              <div style={mmStyles.preview}>
                <Avatar member={draft} size={44} ring />
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{draft.nick || "ชื่อเล่น"}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{draft.role || "ตำแหน่ง"}</div>
                </div>
              </div>

              <div style={{ display: "flex", gap: 10, marginTop: 14, justifyContent: "flex-end" }}>
                <button className="btn btn-ghost" onClick={cancelEdit}>ยกเลิก</button>
                <button className="btn btn-primary" onClick={save} disabled={!draft.nick.trim()}>
                  {editing === "__new__" ? "เพิ่มสมาชิก" : "บันทึก"}
                </button>
              </div>
            </div>
          ) : (
            <button className="btn btn-soft" style={{ width: "100%", justifyContent: "center", padding: "13px" }} onClick={() => startNew()}>
              <PlusIcon /> เพิ่มสมาชิกใหม่
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

const mmStyles = {
  overlay: {
    position: "fixed", inset: 0, zIndex: 110, background: "rgba(20,30,55,.42)",
    backdropFilter: "blur(4px)", display: "grid", placeItems: "center", padding: 20,
    animation: "overlayIn .2s ease both",
  },
  sheet: {
    width: "min(620px, 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 8px" },
  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: "12px 26px 24px", display: "flex", flexDirection: "column", gap: 14 },
  list: { display: "flex", flexDirection: "column", gap: 4, maxHeight: "44vh", overflowY: "auto", padding: 2 },
  row: { display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", borderRadius: 12, transition: ".12s" },
  smallBtn: { padding: "7px 10px", fontSize: 12.5, display: "inline-flex", alignItems: "center", gap: 5 },
  delBtn: { padding: "7px 9px", fontSize: 12.5, background: "var(--high-soft)", color: "var(--high)" },
  confirm: { background: "var(--high-soft)", borderRadius: 10, padding: "10px 12px", flexShrink: 0, minWidth: 200 },
  editPanel: { background: "var(--surface-soft)", border: "1.5px solid var(--line)", borderRadius: 14, padding: 18 },
  formRow: { display: "flex", gap: 12, marginBottom: 13 },
  field: { display: "flex", flexDirection: "column", gap: 6, flex: 1 },
  label: { fontSize: 12.5, fontWeight: 600, color: "var(--ink-2)" },
  input: {
    border: "1.5px solid var(--line)", borderRadius: 10, padding: "10px 12px",
    fontSize: 14, color: "var(--ink)", background: "var(--surface)", outline: "none", width: "100%",
  },
  colorRow: { display: "flex", gap: 7, flexWrap: "wrap" },
  preview: {
    marginTop: 12, padding: "12px 14px", borderRadius: 12, background: "var(--surface)",
    border: "1.5px dashed var(--primary)", display: "flex", alignItems: "center", gap: 12,
  },
};

window.MembersModal = MembersModal;