/* global React, I, UI */
// =============== ห้องแชท: store + สิทธิ์ + modal จัดการห้อง/สมาชิก ===============
const { useState: useStateCR, useMemo: useMemoCR } = React;

const CR_ROOMS_KEY = "sss-chat-rooms-v1";
const CR_PERMS_KEY = "sss-chat-perms-v1";

const CR_SEED_ROOMS = [
  { id: "general", name: "ทั่วไป", icon: "💬", topic: "ประกาศรวม · ทุกคนเห็น", members: "all", createdBy: "ปิยะ ศรีสวัสดิ์", invite: "members", locked: true },
  { id: "r-tech", name: "ทีมช่าง", icon: "🛠️", topic: "งานผลิต ตัด พับ เชื่อม", members: ["ปิยะ ศรีสวัสดิ์", "วิทยา ใจกล้า", "สมศักดิ์ ทองดี", "ประยุทธ มั่นคง", "อาทิตย์ ช่างฝึก", "ภาณุพงศ์ วิศวกร"], createdBy: "วิทยา ใจกล้า", invite: "owner" },
  { id: "r-delivery", name: "ทีมส่งของ", icon: "🚚", topic: "งานส่งของประจำวัน", ref: "DD-2569-0048", members: ["ปิยะ ศรีสวัสดิ์", "วิทยา ใจกล้า", "สุชาติ ขนส่ง", "วันเพ็ญ สุขใจ"], createdBy: "ปิยะ ศรีสวัสดิ์", invite: "members" }
];

function crLoadRooms() {
  try { return JSON.parse(localStorage.getItem(CR_ROOMS_KEY) || "null") || CR_SEED_ROOMS; } catch { return CR_SEED_ROOMS; }
}
function crSaveRooms(list) {
  try { localStorage.setItem(CR_ROOMS_KEY, JSON.stringify(list)); } catch {}
  window.dispatchEvent(new Event("sss-chat-rooms-changed"));
}
function crPerms() {
  try { return { createRooms: "all", ...(JSON.parse(localStorage.getItem(CR_PERMS_KEY) || "{}")) }; } catch { return { createRooms: "all" }; }
}
function crSavePerms(p) {
  try { localStorage.setItem(CR_PERMS_KEY, JSON.stringify(p)); } catch {}
  window.dispatchEvent(new Event("sss-chat-rooms-changed"));
}
function crIsAdmin(user) {
  const u = user || window.SSSData.Company.currentUser;
  return /Admin|เจ้าของ/.test(u.role || "");
}
function crIsMember(room, name) {
  return room.members === "all" || (room.members || []).includes(name) || room.createdBy === name;
}
function crCanCreate(user) {
  return crPerms().createRooms === "all" || crIsAdmin(user);
}
function crCanInvite(room, name) {
  if (crIsAdmin()) return true;
  if (room.createdBy === name) return true;
  return room.invite === "members" && crIsMember(room, name);
}
window.ChatRooms = {
  load: crLoadRooms, save: crSaveRooms,
  get: (id) => crLoadRooms().find(r => r.id === id),
  upsert(room) {
    const list = crLoadRooms();
    const i = list.findIndex(r => r.id === room.id);
    if (i >= 0) list[i] = room; else list.push(room);
    crSaveRooms(list);
  },
  remove(id) { crSaveRooms(crLoadRooms().filter(r => r.id !== id)); },
  visible(name) {
    const list = crLoadRooms();
    return crIsAdmin() ? list : list.filter(r => crIsMember(r, name));
  },
  perms: crPerms, savePerms: crSavePerms,
  isAdmin: crIsAdmin, isMember: crIsMember, canCreate: crCanCreate, canInvite: crCanInvite
};

const CR_ICONS = ["💬", "🛠️", "📦", "🚚", "📣", "💰", "🧾", "🎨", "🏗️", "📐", "🧹", "⭐"];

// ---------- Modal สร้าง/แก้ไขห้อง ----------
function RoomFormModal({ initial, onClose, onSave, onDelete }) {
  const D = window.SSSData;
  const { Btn } = window.UI;
  const me = D.Company.currentUser;
  const [f, setF] = useStateCR(initial || { name: "", icon: "💬", topic: "", ref: "", invite: "owner", members: [me.name] });
  const [kind, setKind] = useStateCR(initial && initial.ref ? "doc" : "topic");
  const [docQ, setDocQ] = useStateCR("");
  const upd = (k, v) => setF(p => ({ ...p, [k]: v }));

  const docResults = useMemoCR(() => {
    if (kind !== "doc" || !window.SSSSearch || !docQ.trim()) return [];
    return window.SSSSearch.search(docQ.trim(), 5);
  }, [docQ, kind]);

  const toggleMember = (name) => {
    if (name === me.name || name === f.createdBy) return;
    setF(p => {
      const cur = Array.isArray(p.members) ? p.members : [];
      return { ...p, members: cur.includes(name) ? cur.filter(n => n !== name) : [...cur, name] };
    });
  };

  const save = () => {
    if (!f.name.trim()) { window.toast && window.toast("ตั้งชื่อห้องก่อน"); return; }
    onSave({
      ...f, name: f.name.trim(),
      ref: kind === "doc" ? f.ref : "",
      id: f.id || "r-" + Date.now(),
      createdBy: f.createdBy || me.name
    });
    onClose();
  };

  const isAll = f.members === "all";
  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 18, zIndex: 230}} onClick={onClose}>
      <div style={{background: "var(--surface)", borderRadius: 14, width: 560, maxWidth: "96vw", maxHeight: "92vh", display: "flex", flexDirection: "column", overflow: "hidden"}} onClick={e => e.stopPropagation()}>
        <div style={{padding: "16px 20px 12px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center"}}>
          <div style={{flex: 1}}>
            <div style={{fontSize: 15, fontWeight: 700}}>{initial ? `แก้ไขห้อง ${initial.name}` : "สร้างห้องแชทใหม่"}</div>
            <div style={{fontSize: 12, color: "var(--ink-3)"}}>ตั้งห้องตามทีม ตามหัวข้อ หรือผูกกับเอกสาร แล้วเชิญพนักงานเข้าห้อง</div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.close size={14}/></button>
        </div>

        <div style={{padding: "14px 20px", overflow: "auto", display: "flex", flexDirection: "column", gap: 12}}>
          <div style={{display: "flex", gap: 6, flexWrap: "wrap"}}>
            {CR_ICONS.map(ic => (
              <button key={ic} onClick={() => upd("icon", ic)} style={{width: 34, height: 34, borderRadius: 8, fontSize: 17, cursor: "pointer",
                border: f.icon === ic ? "1.5px solid var(--ink-1)" : "1px solid var(--line)",
                background: f.icon === ic ? "var(--surface-3)" : "var(--surface)"}}>{ic}</button>
            ))}
          </div>
          <div className="field"><label>ชื่อห้อง</label>
            <input className="input" value={f.name} onChange={e => upd("name", e.target.value)} placeholder="เช่น ทีมแพ็คของ · ทีมการตลาด"></input>
          </div>

          <div className="field">
            <label>ประเภทห้อง</label>
            <div style={{display: "flex", gap: 6}}>
              <button className={`btn sm ${kind === "topic" ? "primary" : ""}`} onClick={() => setKind("topic")}>ตามหัวข้อ / ทีม</button>
              <button className={`btn sm ${kind === "doc" ? "primary" : ""}`} onClick={() => setKind("doc")}>ตามเอกสาร</button>
            </div>
          </div>

          {kind === "doc" && (
            <div className="field" style={{position: "relative"}}>
              <label>ผูกกับเอกสาร</label>
              {f.ref
                ? <div style={{display: "flex", alignItems: "center", gap: 8}}>
                    <span className="badge outline mono">📄 {f.ref}</span>
                    <Btn size="sm" kind="ghost" onClick={() => upd("ref", "")}>เปลี่ยน</Btn>
                  </div>
                : <input className="input" value={docQ} onChange={e => setDocQ(e.target.value)} placeholder="พิมพ์เลขเอกสารหรือชื่อลูกค้า เช่น DN-2569"></input>}
              {!f.ref && docResults.length > 0 && (
                <div style={{position: "absolute", top: "100%", left: 0, right: 0, background: "var(--surface)", border: "1px solid var(--line-strong)", borderRadius: 8, boxShadow: "var(--shadow-lg)", overflow: "hidden", zIndex: 5}}>
                  {docResults.map((d, i) => (
                    <div key={d.no + i} onClick={() => { upd("ref", d.no); if (!f.name.trim()) upd("name", d.no); setDocQ(""); }}
                      style={{display: "flex", gap: 8, alignItems: "center", padding: "7px 10px", cursor: "pointer", fontSize: 12.5}}
                      onMouseOver={ev => ev.currentTarget.style.background = "var(--surface-2)"}
                      onMouseOut={ev => ev.currentTarget.style.background = "transparent"}>
                      <span className="badge outline" style={{fontSize: 9}}>{d.type}</span>
                      <b className="mono">{d.no}</b>
                      <span style={{color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{d.title}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          <div className="field"><label>หัวข้อ / คำอธิบายห้อง</label>
            <input className="input" value={f.topic} onChange={e => upd("topic", e.target.value)} placeholder="เช่น คุยงานแพ็คสินค้าก่อนส่งทุกวัน"></input>
          </div>

          <div className="field">
            <label>ใครเชิญสมาชิกเพิ่มได้บ้าง</label>
            <div style={{display: "flex", gap: 6, flexWrap: "wrap"}}>
              <button className={`btn sm ${f.invite === "owner" ? "primary" : ""}`} onClick={() => upd("invite", "owner")}>เฉพาะเจ้าของห้อง</button>
              <button className={`btn sm ${f.invite === "members" ? "primary" : ""}`} onClick={() => upd("invite", "members")}>สมาชิกทุกคนในห้อง</button>
            </div>
          </div>

          {!isAll && (
            <div>
              <div className="label mb">เชิญสมาชิก ({(f.members || []).length} คน)</div>
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6}}>
                {D.Employees.map(e => {
                  const inRoom = (f.members || []).includes(e.name);
                  const lockedM = e.name === me.name || e.name === f.createdBy;
                  return (
                    <label key={e.id} style={{display: "flex", gap: 8, alignItems: "center", padding: "6px 9px", border: `1px solid ${inRoom ? "var(--ink-1)" : "var(--line)"}`, borderRadius: 8, cursor: lockedM ? "default" : "pointer", opacity: lockedM ? 0.7 : 1, background: inRoom ? "var(--surface-2)" : "var(--surface)"}}>
                      <input type="checkbox" checked={inRoom} disabled={lockedM} onChange={() => toggleMember(e.name)}></input>
                      <span style={{fontSize: 12, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{e.name} <span style={{color: "var(--ink-3)", fontSize: 10.5}}>· {e.role}</span></span>
                    </label>
                  );
                })}
              </div>
            </div>
          )}
        </div>

        <div style={{padding: "12px 20px", borderTop: "1px solid var(--line)", background: "var(--surface-2)", display: "flex", gap: 8, alignItems: "center"}}>
          {initial && !initial.locked && onDelete && (
            <button className="btn sm" style={{color: "var(--danger)", borderColor: "var(--danger-bg)"}}
              onClick={async () => {
                const ok = await window.confirmDialog({ title: "ลบห้องแชท", message: `ลบห้อง <b>${initial.icon} ${initial.name}</b> และประวัติแชทในห้องทั้งหมด?`, confirmText: "ลบห้อง", danger: true });
                if (ok) { onDelete(initial); onClose(); }
              }}>ลบห้องนี้</button>
          )}
          <span style={{flex: 1}}></span>
          <Btn kind="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn kind="primary" icon={I.check} onClick={save}>{initial ? "บันทึกห้อง" : "สร้างห้อง + เชิญสมาชิก"}</Btn>
        </div>
      </div>
    </div>
  );
}

// ---------- Modal สมาชิกในห้อง (เชิญ/เอาออก) ----------
function RoomMembersModal({ room, onClose, onSave }) {
  const D = window.SSSData;
  const { Btn } = window.UI;
  const me = D.Company.currentUser;
  const canEdit = crCanInvite(room, me.name);
  const [members, setMembers] = useStateCR(Array.isArray(room.members) ? room.members : []);
  const isAll = room.members === "all";

  const toggle = (name) => {
    if (!canEdit || name === room.createdBy) return;
    setMembers(m => m.includes(name) ? m.filter(n => n !== name) : [...m, name]);
  };

  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 18, zIndex: 230}} onClick={onClose}>
      <div style={{background: "var(--surface)", borderRadius: 14, width: 440, maxWidth: "96vw", maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden"}} onClick={e => e.stopPropagation()}>
        <div style={{padding: "16px 20px 12px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center"}}>
          <div style={{flex: 1}}>
            <div style={{fontSize: 15, fontWeight: 700}}>{room.icon} สมาชิกห้อง {room.name}</div>
            <div style={{fontSize: 12, color: "var(--ink-3)"}}>
              {isAll ? "ห้องรวม — พนักงานทุกคนเป็นสมาชิกอัตโนมัติ"
                : canEdit ? "ติ๊กเพื่อเชิญ / เอาออก · เจ้าของห้อง: " + room.createdBy
                : "คุณไม่มีสิทธิ์เชิญสมาชิกในห้องนี้ (" + (room.invite === "owner" ? "เฉพาะเจ้าของห้อง" : "เฉพาะสมาชิก") + ")"}
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.close size={14}/></button>
        </div>
        <div style={{padding: "12px 20px", overflow: "auto", display: "flex", flexDirection: "column", gap: 6}}>
          {D.Employees.map(e => {
            const inRoom = isAll || members.includes(e.name) || e.name === room.createdBy;
            const lockedM = isAll || e.name === room.createdBy || !canEdit;
            return (
              <label key={e.id} style={{display: "flex", gap: 10, alignItems: "center", padding: "7px 10px", border: "1px solid var(--line)", borderRadius: 8, cursor: lockedM ? "default" : "pointer", background: inRoom ? "var(--surface-2)" : "var(--surface)"}}>
                <input type="checkbox" checked={inRoom} disabled={lockedM} onChange={() => toggle(e.name)}></input>
                {window.RankAvatar ? <window.RankAvatar name={e.name} size={24}/> : <span className="avatar" style={{width: 24, height: 24, fontSize: 9}}>{e.name.slice(0, 2)}</span>}
                <span style={{fontSize: 12.5, flex: 1}}>{e.name} <span style={{color: "var(--ink-3)", fontSize: 11}}>· {e.role}</span></span>
                {e.name === room.createdBy && <span className="badge outline" style={{fontSize: 9}}>เจ้าของห้อง</span>}
              </label>
            );
          })}
        </div>
        <div style={{padding: "12px 20px", borderTop: "1px solid var(--line)", background: "var(--surface-2)", display: "flex", gap: 8, justifyContent: "flex-end"}}>
          <Btn kind="ghost" onClick={onClose}>ปิด</Btn>
          {canEdit && !isAll && <Btn kind="primary" icon={I.check} onClick={() => { onSave(members); onClose(); }}>บันทึกสมาชิก</Btn>}
        </div>
      </div>
    </div>
  );
}

// ---------- Modal ตั้งค่าสิทธิ์แชท (admin) ----------
function ChatPermsModal({ onClose }) {
  const { Btn } = window.UI;
  const [p, setP] = useStateCR(() => crPerms());
  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 18, zIndex: 230}} onClick={onClose}>
      <div style={{background: "var(--surface)", borderRadius: 14, width: 420, maxWidth: "96vw", overflow: "hidden"}} onClick={e => e.stopPropagation()}>
        <div style={{padding: "16px 20px 12px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center"}}>
          <div style={{flex: 1}}>
            <div style={{fontSize: 15, fontWeight: 700}}>สิทธิ์การใช้แชททีม</div>
            <div style={{fontSize: 12, color: "var(--ink-3)"}}>ตั้งได้เฉพาะผู้ดูแลระบบ (Admin)</div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.close size={14}/></button>
        </div>
        <div style={{padding: "14px 20px", display: "flex", flexDirection: "column", gap: 10}}>
          <div className="field">
            <label>ใครสร้างห้องแชทใหม่ได้บ้าง</label>
            <div style={{display: "flex", flexDirection: "column", gap: 6}}>
              {[{ v: "all", t: "พนักงานทุกคน", s: "ทุกคนตั้งห้องทีมของตัวเองได้" },
                { v: "admins", t: "เฉพาะผู้ดูแล / เจ้าของกิจการ", s: "พนักงานขอให้ Admin สร้างให้" }].map(o => (
                <label key={o.v} style={{display: "flex", gap: 10, alignItems: "flex-start", padding: "9px 12px", border: `1.5px solid ${p.createRooms === o.v ? "var(--ink-1)" : "var(--line)"}`, borderRadius: 8, cursor: "pointer"}}>
                  <input type="radio" name="cr-perm" checked={p.createRooms === o.v} onChange={() => setP(x => ({ ...x, createRooms: o.v }))}></input>
                  <span><b style={{fontSize: 13}}>{o.t}</b><br/><span style={{fontSize: 11.5, color: "var(--ink-3)"}}>{o.s}</span></span>
                </label>
              ))}
            </div>
          </div>
          <div style={{fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.6}}>
            สิทธิ์การ<b>เชิญสมาชิก</b>ตั้งแยกรายห้อง ตอนสร้างหรือแก้ไขห้อง (เฉพาะเจ้าของห้อง / สมาชิกทุกคน)
          </div>
        </div>
        <div style={{padding: "12px 20px", borderTop: "1px solid var(--line)", background: "var(--surface-2)", display: "flex", gap: 8, justifyContent: "flex-end"}}>
          <Btn kind="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn kind="primary" icon={I.check} onClick={() => { crSavePerms(p); window.toast && window.toast("บันทึกสิทธิ์แชทแล้ว"); onClose(); }}>บันทึก</Btn>
        </div>
      </div>
    </div>
  );
}

window.RoomFormModal = RoomFormModal;
window.RoomMembersModal = RoomMembersModal;
window.ChatPermsModal = ChatPermsModal;