/* global React, I, UI */
// =============== เปลือกแชท: หน้า activity (sidebar ห้อง) + popup widget (แท็บห้อง) ===============
const { useState: useStateCS, useEffect: useEffectCS } = React;

function csRooms(meName) {
  return window.ChatRooms ? window.ChatRooms.visible(meName) : [{ id: "general", name: "ทั่วไป", icon: "💬", topic: "ทุกคนเห็น", members: "all", locked: true }];
}

function csUseRoomsRefresh() {
  const [, force] = useStateCS(0);
  useEffectCS(() => {
    const h = () => force(n => n + 1);
    window.addEventListener("sss-chat-rooms-changed", h);
    window.addEventListener("sss-chat-changed", h);
    window.addEventListener("sss-chat-read", h);
    return () => {
      window.removeEventListener("sss-chat-rooms-changed", h);
      window.removeEventListener("sss-chat-changed", h);
      window.removeEventListener("sss-chat-read", h);
    };
  }, []);
}

function csUnread(roomId, meName) {
  if (!window.ChatCore) return [];
  const TC_KEY = "sss-chat", TC_READ = "sss-chat-read-ts";
  const k = roomId === "general" ? TC_KEY : TC_KEY + ":" + roomId;
  const rk = roomId === "general" ? TC_READ : TC_READ + ":" + roomId;
  let msgs = [];
  try { msgs = JSON.parse(localStorage.getItem(k) || "null") || []; } catch {}
  const rt = parseInt(localStorage.getItem(rk) || "0", 10);
  return msgs.filter(m => (m.ts || 0) > rt && m.name !== meName);
}

// ---------- chip เอกสารที่ห้องผูกไว้ ----------
function RoomRefChip({ refNo }) {
  if (!refNo) return null;
  const doc = window.SSSSearch ? window.SSSSearch.findByNo(refNo) : null;
  return (
    <span onClick={() => { if (doc) window.location.hash = "#/" + doc.route; }}
      title={doc ? `เปิด ${doc.type} ${doc.no}` : refNo}
      style={{display: "inline-flex", alignItems: "center", gap: 4, cursor: doc ? "pointer" : "default",
        background: "var(--surface)", border: "1px solid var(--line-strong)", borderRadius: 5,
        padding: "1px 7px", fontSize: 11, fontWeight: 600, whiteSpace: "nowrap"}}>
      📄 <span className="mono">{refNo}</span>{doc && doc.status ? <span style={{opacity: 0.7, fontWeight: 400}}>· {doc.status}</span> : null}
    </span>
  );
}

// =============== การ์ดแชทในหน้า "กิจกรรมและแชท" — มี sidebar ห้อง ===============
function TeamChatPanel() {
  const D = window.SSSData;
  const { Card, Btn } = window.UI;
  const me = D.Company.currentUser;
  csUseRoomsRefresh();
  const [roomId, setRoomId] = useStateCS("general");
  const [modal, setModal] = useStateCS(null); // {type:"form", room?} | {type:"members"} | {type:"perms"}

  const rooms = csRooms(me.name);
  const room = rooms.find(r => r.id === roomId) || rooms[0] || { id: "general", name: "ทั่วไป", icon: "💬" };
  const CR = window.ChatRooms;
  const isAdmin = CR && CR.isAdmin();
  const canCreate = CR && CR.canCreate(me);
  const canEditRoom = CR && (isAdmin || room.createdBy === me.name) && !room.locked;
  const memberCount = room.members === "all" ? D.Employees.length : (room.members || []).length;

  const ChatCoreC = window.ChatCore;
  const saveRoom = (r) => { CR.upsert(r); setRoomId(r.id); window.toast && window.toast(`บันทึกห้อง ${r.icon} ${r.name} แล้ว`); };
  const deleteRoom = (r) => { CR.remove(r.id); setRoomId("general"); window.toast && window.toast(`ลบห้อง ${r.name} แล้ว`); };

  return (
    <Card title="แชทภายในทีม" sub={`${rooms.length} ห้อง · สร้างห้องตามทีม ตามหัวข้อ หรือผูกกับเอกสาร`} padded={false}
      right={<div style={{display: "flex", gap: 6}}>
        {canCreate && <Btn size="sm" kind="ghost" icon={I.plus} onClick={() => setModal({ type: "form" })}>สร้างห้อง</Btn>}
        {isAdmin && <button className="icon-btn" title="สิทธิ์การใช้แชท (Admin)" onClick={() => setModal({ type: "perms" })}><I.cog size={13}/></button>}
      </div>}>
      <div style={{display: "flex", minHeight: 0}}>
        {/* sidebar ห้อง */}
        <div style={{width: 192, flexShrink: 0, borderRight: "1px solid var(--line)", display: "flex", flexDirection: "column", background: "var(--surface-2)"}}>
          <div style={{padding: "10px 12px 4px", fontSize: 10.5, fontWeight: 700, color: "var(--ink-3)", letterSpacing: 0.4}}>ห้องแชท</div>
          <div style={{flex: 1, overflowY: "auto", padding: "4px 8px 10px", display: "flex", flexDirection: "column", gap: 2}}>
            {rooms.map(r => {
              const un = csUnread(r.id, me.name);
              const cur = r.id === room.id;
              return (
                <button key={r.id} onClick={() => setRoomId(r.id)}
                  style={{display: "flex", alignItems: "center", gap: 7, padding: "7px 9px", borderRadius: 8, cursor: "pointer", textAlign: "left",
                    border: cur ? "1px solid var(--line-strong)" : "1px solid transparent",
                    background: cur ? "var(--surface)" : "transparent", boxShadow: cur ? "var(--shadow-sm)" : "none"}}>
                  <span style={{fontSize: 15}}>{r.icon}</span>
                  <span style={{flex: 1, minWidth: 0}}>
                    <b style={{fontSize: 12.5, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{r.name}</b>
                    {r.ref && <span className="mono" style={{fontSize: 9.5, color: "var(--ink-3)"}}>📄 {r.ref}</span>}
                  </span>
                  {un.length > 0 && !cur && (
                    <span style={{minWidth: 17, height: 17, borderRadius: 999, background: "var(--danger)", color: "white", fontSize: 10, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0 4px"}}>{un.length}</span>
                  )}
                </button>
              );
            })}
          </div>
          {canCreate && (
            <button onClick={() => setModal({ type: "form" })}
              style={{margin: "0 8px 10px", padding: "7px 9px", borderRadius: 8, cursor: "pointer", fontSize: 12, color: "var(--ink-2)",
                border: "1px dashed var(--line-strong)", background: "transparent", display: "flex", alignItems: "center", gap: 6, justifyContent: "center"}}>
              <I.plus size={12}/> สร้างห้องใหม่
            </button>
          )}
        </div>

        {/* พื้นที่แชทของห้อง */}
        <div style={{flex: 1, minWidth: 0, display: "flex", flexDirection: "column"}}>
          <div style={{padding: "9px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap"}}>
            <span style={{fontSize: 17}}>{room.icon}</span>
            <div style={{flex: 1, minWidth: 0}}>
              <b style={{fontSize: 13.5}}>{room.name}</b>
              {room.topic && <span style={{fontSize: 11.5, color: "var(--ink-3)", marginLeft: 8}}>{room.topic}</span>}
            </div>
            <RoomRefChip refNo={room.ref}/>
            <button className="icon-btn" title={`สมาชิก ${memberCount} คน — เชิญ / เอาออก`} onClick={() => setModal({ type: "members" })}
              style={{width: "auto", padding: "0 8px", gap: 4, display: "inline-flex", alignItems: "center"}}>
              <I.user size={13}/><span style={{fontSize: 11.5, fontWeight: 700}}>{memberCount}</span>
            </button>
            {canEditRoom && <button className="icon-btn" title="แก้ไขห้อง / ลบห้อง" onClick={() => setModal({ type: "form", room })}><I.edit size={13}/></button>}
          </div>
          <ChatCoreC key={room.id} roomId={room.id} bodyHeight={"clamp(380px, calc(100vh - 480px), 680px)"} active={true}/>
        </div>
      </div>

      {modal && modal.type === "form" && window.RoomFormModal && (
        <window.RoomFormModal initial={modal.room} onClose={() => setModal(null)} onSave={saveRoom} onDelete={deleteRoom}/>
      )}
      {modal && modal.type === "members" && window.RoomMembersModal && (
        <window.RoomMembersModal room={room} onClose={() => setModal(null)}
          onSave={(members) => { CR.upsert({ ...room, members }); window.toast && window.toast("บันทึกสมาชิกแล้ว"); }}/>
      )}
      {modal && modal.type === "perms" && window.ChatPermsModal && (
        <window.ChatPermsModal onClose={() => setModal(null)}/>
      )}
    </Card>
  );
}

// =============== Popup widget (ลอยทุกหน้าจอ) — มีแท็บห้องด้านบน ===============
function ChatWidget() {
  const D = window.SSSData;
  const me = D.Company.currentUser;
  const [open, setOpen] = useStateCS(false);
  const [roomId, setRoomId] = useStateCS("general");
  const [modal, setModal] = useStateCS(null);
  csUseRoomsRefresh();

  const rooms = csRooms(me.name);
  const room = rooms.find(r => r.id === roomId) || rooms[0] || { id: "general", name: "ทั่วไป", icon: "💬" };
  const CR = window.ChatRooms;
  const ChatCoreW = window.ChatCore;
  const canCreate = CR && CR.canCreate(me);

  // unread รวมทุกห้อง
  let total = 0, tagged = 0;
  rooms.forEach(r => {
    const un = csUnread(r.id, me.name);
    total += un.length;
    tagged += un.filter(m => m.text && m.text.includes("@" + me.name)).length;
  });

  if (!open) {
    return (
      <>
        <style>{`
          @keyframes chat-shake {
            0%,100%{transform:rotate(0deg) scale(1)}
            15%{transform:rotate(-10deg) scale(1.08)}
            30%{transform:rotate(10deg) scale(1.08)}
            45%{transform:rotate(-7deg) scale(1.05)}
            60%{transform:rotate(7deg) scale(1.05)}
            75%{transform:rotate(-3deg)}
            90%{transform:rotate(3deg)}
          }
          .chat-fab-tagged { animation: chat-shake 0.7s ease-in-out infinite; animation-delay: 0s; }
        `}</style>
        <button className={"ai-btn chat-fab" + (tagged ? " chat-fab-tagged" : "")} onClick={() => setOpen(true)}
          style={tagged ? {boxShadow: "0 0 0 4px rgba(245,158,11,0.4), var(--shadow-lg)", border: "2px solid var(--warning)", background: "var(--warning)"} : {}}>
          <I.msg size={16}/>
          <span>แชททีม</span>
          {total > 0 && (
            <span style={{minWidth: 19, height: 19, borderRadius: 999, background: tagged ? "#fff" : "var(--danger)", color: tagged ? "var(--warning)" : "white",
              fontSize: 11, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0 5px"}}>
              {tagged ? "🔔" + total : total}
            </span>
          )}
        </button>
      </>
    );
  }

  return (
    <div className="ai-panel chat-fab" style={{display: "flex", flexDirection: "column"}}>
      <div className="ai-head">
        <div style={{width: 28, height: 28, background: "var(--info)", color: "white", borderRadius: "50%", display: "grid", placeItems: "center"}}>
          <I.msg size={14}/>
        </div>
        <div style={{flex: 1, minWidth: 0}}>
          <h4>{room.icon} {room.name}</h4>
          <div style={{fontSize: 11, color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{room.topic || "@ แท็กคน · # แท็กเอกสาร"}</div>
        </div>
        <button className="icon-btn" title="เปิดแบบเต็มหน้า" onClick={() => { setOpen(false); window.location.hash = "#/activity"; }}><I.arrowRight size={13}/></button>
        <button className="icon-btn" onClick={() => setOpen(false)}><I.close size={14}/></button>
      </div>
      {/* แท็บห้อง */}
      <div style={{display: "flex", gap: 4, padding: "6px 8px", borderBottom: "1px solid var(--line)", overflowX: "auto", flexShrink: 0}}>
        {rooms.map(r => {
          const un = csUnread(r.id, me.name);
          const cur = r.id === room.id;
          return (
            <button key={r.id} onClick={() => setRoomId(r.id)}
              style={{display: "inline-flex", alignItems: "center", gap: 4, padding: "3px 9px", borderRadius: 999, cursor: "pointer", whiteSpace: "nowrap",
                fontSize: 11.5, fontWeight: cur ? 700 : 500, flexShrink: 0,
                border: cur ? "1.5px solid var(--ink-1)" : "1px solid var(--line)",
                background: cur ? "var(--surface-3)" : "var(--surface)"}}>
              <span>{r.icon}</span>{r.name}
              {un.length > 0 && !cur && (
                <span style={{minWidth: 15, height: 15, borderRadius: 999, background: "var(--danger)", color: "white", fontSize: 9, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0 3px"}}>{un.length}</span>
              )}
            </button>
          );
        })}
        {canCreate && (
          <button onClick={() => setModal({ type: "form" })} title="สร้างห้องใหม่"
            style={{display: "inline-flex", alignItems: "center", padding: "3px 8px", borderRadius: 999, cursor: "pointer", flexShrink: 0,
              border: "1px dashed var(--line-strong)", background: "transparent", color: "var(--ink-3)"}}>
            <I.plus size={11}/>
          </button>
        )}
      </div>
      <div style={{flex: 1, minHeight: 0, display: "flex", flexDirection: "column"}}>
        <ChatCoreW key={room.id} roomId={room.id} bodyHeight={null} active={open}/>
      </div>
      {modal && modal.type === "form" && window.RoomFormModal && (
        <window.RoomFormModal initial={modal.room} onClose={() => setModal(null)}
          onSave={(r) => { CR.upsert(r); setRoomId(r.id); window.toast && window.toast(`สร้างห้อง ${r.icon} ${r.name} แล้ว`); }}
          onDelete={(r) => { CR.remove(r.id); setRoomId("general"); }}/>
      )}
    </div>
  );
}

window.TeamChatPanel = TeamChatPanel;
window.ChatWidget = ChatWidget;