/* Truong So CRM — Contacts database list */
const { useState: useCS, useMemo: useCM } = React;

function StatusBadge({ id }) {
  const s = window.CRM_CONTACT_STATUS[id];
  if (!s) return null;
  return (
    <span className="statusBadge" style={{
      color: `oklch(0.45 0.13 ${s.hue})`,
      background: `oklch(0.95 0.045 ${s.hue})`,
    }}>
      <span className="sbDot" style={{ background: `oklch(0.6 0.16 ${s.hue})` }}></span>
      {window.tStatus ? window.tStatus(id) : s.name}
    </span>
  );
}

function relText(iso) {
  const now = new Date("2026-06-06T09:00:00");
  const diff = Math.round((new Date(iso).setHours(0,0,0,0) - new Date(now).setHours(0,0,0,0)) / 86400000);
  const en = window.__lang === "en";
  if (diff === 0) return en ? "Today" : "Hôm nay";
  if (diff === -1) return en ? "Yesterday" : "Hôm qua";
  if (diff < 0) return en ? (Math.abs(diff) + " days ago") : (Math.abs(diff) + " ngày trước");
  return en ? ("in " + diff + " days") : ("Sau " + diff + " ngày");
}

function ContactsList({ contacts, onAdd, onOpen, onStatusChange, onDealFromContact }) {
  const [query, setQuery] = useCS("");
  const [status, setStatus] = useCS("all");
  const [owner, setOwner] = useCS("all");
  const [sort, setSort] = useCS({ key: "last", dir: "desc" });
  const [sel, setSel] = useCS(new Set());
  const [statusMenu, setStatusMenu] = useCS(false);

  const rows = useCM(() => {
    let r = contacts.filter(c =>
      (status === "all" || c.status === status) &&
      (owner === "all" || c.owner === owner) &&
      (query === "" || (c.name + c.company + c.email + c.phone).toLowerCase().includes(query.toLowerCase()))
    );
    const { key, dir } = sort;
    r = [...r].sort((a, b) => {
      let av = a[key], bv = b[key];
      if (key === "name" || key === "company") { av = av.toLowerCase(); bv = bv.toLowerCase(); }
      if (av < bv) return dir === "asc" ? -1 : 1;
      if (av > bv) return dir === "asc" ? 1 : -1;
      return 0;
    });
    return r;
  }, [contacts, status, owner, query, sort]);

  function toggleSort(key) {
    setSort(s => s.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
  }
  function toggleSel(id) { setSel(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }
  const allSel = rows.length > 0 && rows.every(r => sel.has(r.id));
  function toggleAll() { setSel(allSel ? new Set() : new Set(rows.map(r => r.id))); }

  const totalVal = rows.reduce((s, c) => s + c.openValue, 0);
  const statuses = window.CRM_CONTACT_STATUS;

  function SortHead({ k, children, align }) {
    const on = sort.key === k;
    return (
      <th className={"sortable" + (align === "right" ? " right" : "")} onClick={() => toggleSort(k)}>
        <span>{children}</span>
        <span className={"sortArrow" + (on ? " on" : "")}>{on && sort.dir === "asc" ? "↑" : "↓"}</span>
      </th>
    );
  }

  return (
    <div className="listView">
      <header className="topbar">
        <div className="pipeSwitch">
          <h1 className="viewTitle">{t("contacts_title")}</h1>
          <div className="viewSub">{rows.length} {t("contacts_sub_a")} · {fmtVND(totalVal)} ₫ {t("contacts_sub_b")}</div>
        </div>
        <div className="topRight">
          <div className="search">
            <svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>
            <input placeholder={t("search_contacts")} value={query} onChange={e => setQuery(e.target.value)} />
          </div>
          <button className="btn primary addBtn" onClick={onAdd}>
            <svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 5v14M5 12h14"/></svg>
            {t("add_customer")}
          </button>
        </div>
      </header>

      <div className="listToolbar">
        <div className="chipFilters">
          <button className={"fchip" + (status === "all" ? " on" : "")} onClick={() => setStatus("all")}>{t("filter_all")}</button>
          {Object.entries(statuses).map(([k, v]) => (
            <button key={k} className={"fchip" + (status === k ? " on" : "")} onClick={() => setStatus(k)}
              style={status === k ? { "--c": `oklch(0.6 0.16 ${v.hue})` } : {}}>
              <span className="fchipDot" style={{ background: `oklch(0.6 0.16 ${v.hue})` }}></span>{window.tStatus ? window.tStatus(k) : v.name}
            </button>
          ))}
        </div>
        <div className="ownerSeg">
          <span className="segLbl">{t("filter_sales")}</span>
          <SalesFilter value={owner} onChange={setOwner} />
        </div>
      </div>

      <div className="tableWrap">
        <table className="dataTable">
          <thead>
            <tr>
              <th className="chk"><input type="checkbox" checked={allSel} onChange={toggleAll} /></th>
              <SortHead k="name">{t("col_customer")}</SortHead>
              <SortHead k="company">{t("col_company")}</SortHead>
              <th>{t("col_contact")}</th>
              <th>{t("col_owner")}</th>
              <SortHead k="openValue" align="right">{t("col_value")}</SortHead>
              <th>{t("col_status")}</th>
              <SortHead k="last">{t("col_last")}</SortHead>
            </tr>
          </thead>
          <tbody>
            {rows.map(c => {
              const o = ownerById(c.owner);
              return (
                <tr key={c.id} className={sel.has(c.id) ? "selected" : ""} onClick={() => onOpen(c)}>
                  <td className="chk" onClick={e => e.stopPropagation()}>
                    <input type="checkbox" checked={sel.has(c.id)} onChange={() => toggleSel(c.id)} />
                  </td>
                  <td>
                    <div className="cellPerson">
                      <div className="personAv" style={{ background: `oklch(0.62 0.13 ${(c.name.length*23)%360})` }}>{c.name.split(" ").slice(-1)[0][0]}</div>
                      <div className="personInfo"><div className="pName">{c.name}</div><div className="pTitle">{c.title}</div></div>
                    </div>
                  </td>
                  <td><div className="cellCompany">{c.company}<span className="cLoc">{c.location}</span></div></td>
                  <td>
                    <div className="cellContact">
                      <a href={"mailto:"+c.email} onClick={e=>e.stopPropagation()}>{c.email}</a>
                      <span className="cPhone">{c.phone}</span>
                    </div>
                  </td>
                  <td><div className="cellOwner"><Avatar owner={o} size={26} /><span>{o.name.split(" ").slice(-2).join(" ")}</span></div></td>
                  <td className="right"><span className="cellVal">{fmtVND(c.openValue)} ₫</span></td>
                  <td><StatusBadge id={c.status} /></td>
                  <td>
                    <div className="lastCell">
                      <span className="cellLast">{relText(c.last)}</span>
                      <div className="rowActions" onClick={e => e.stopPropagation()}>
                        <a className="raBtn" href={"tel:" + c.phone} title={t("act_call")}><svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 4h4l2 5-3 2a11 11 0 005 5l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg></a>
                        <a className="raBtn" href={"mailto:" + c.email} title={t("act_email")}><svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18v12H3zM3 7l9 6 9-6"/></svg></a>
                        {onDealFromContact && <button className="raBtn" onClick={() => onDealFromContact(c)} title={t("add_deal")}><svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 5v14M5 12h14"/></svg></button>}
                        <button className="raBtn" onClick={() => onOpen(c)} title={t("act_open")}><svg viewBox="0 0 24 24" width="15" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg></button>
                      </div>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {rows.length === 0 && <div className="tableEmpty">{t("no_records")}</div>}
      </div>

      {sel.size > 0 && (
        <div className="bulkBar">
          <span className="bulkCount">{sel.size} {t("bulk_selected")}</span>
          <div className="bulkActions">
            <button className="bulkBtn">{t("bulk_assign")}</button>
            <div className="bulkStatusWrap">
              <button className="bulkBtn" onClick={() => setStatusMenu(m => !m)}>{t("bulk_status")} ▾</button>
              {statusMenu && (
                <div className="bulkStatusMenu" onMouseLeave={() => setStatusMenu(false)}>
                  {Object.entries(statuses).map(([k, v]) => (
                    <button key={k} className="bsOpt" onClick={() => { onStatusChange([...sel], k); setStatusMenu(false); setSel(new Set()); }}>
                      <span className="sbDot" style={{ background: `oklch(0.6 0.16 ${v.hue})` }}></span>{window.tStatus ? window.tStatus(k) : v.name}
                    </button>
                  ))}
                </div>
              )}
            </div>
            <button className="bulkBtn">{t("bulk_email")}</button>
            <button className="bulkBtn danger">{t("bulk_delete")}</button>
          </div>
          <button className="bulkClose" onClick={() => setSel(new Set())}>✕</button>
        </div>
      )}
    </div>
  );
}

function ContactPanel({ contact, onClose, onAddDeal }) {
  if (!contact) return null;
  const o = ownerById(contact.owner);
  return (
    <>
      <div className="drawerScrim" onClick={onClose}></div>
      <aside className="drawer" role="dialog">
        <div className="drawerHead">
          <StatusBadge id={contact.status} />
          <button className="iconBtn" onClick={onClose} aria-label="Đóng">✕</button>
        </div>
        <div className="cpHero">
          <div className="cpAvatar" style={{ background: `oklch(0.62 0.13 ${(contact.name.length*23)%360})` }}>{contact.name.split(" ").slice(-1)[0][0]}</div>
          <div><h2 className="drawerTitle" style={{marginTop:0}}>{contact.name}</h2>
          <div className="drawerCompany">{contact.title} · {contact.company}</div></div>
        </div>

        <div className="cpQuick">
          <a className="qbtn" href={"tel:"+contact.phone}><svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 4h4l2 5-3 2a11 11 0 005 5l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg>Gọi</a>
          <a className="qbtn" href={"mailto:"+contact.email}><svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18v12H3zM3 7l9 6 9-6"/></svg>Email</a>
          <button className="qbtn" onClick={() => onAddDeal(contact)}><svg viewBox="0 0 24 24" width="16" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 5v14M5 12h14"/></svg>Tạo deal</button>
        </div>

        <div className="drawerGrid">
          <div className="dgItem"><span className="dgLabel">Email</span><span className="dgVal" style={{fontWeight:600}}>{contact.email}</span></div>
          <div className="dgItem"><span className="dgLabel">Điện thoại</span><span className="dgVal" style={{fontWeight:600}}>{contact.phone}</span></div>
          <div className="dgItem"><span className="dgLabel">Khu vực</span><span className="dgVal" style={{fontWeight:600}}>{contact.location}</span></div>
          <div className="dgItem"><span className="dgLabel">Nguồn</span><span className="dgVal" style={{fontWeight:600}}>{contact.source}</span></div>
          <div className="dgItem"><span className="dgLabel">Phụ trách</span><span className="dgVal"><Avatar owner={o} size={20} /> {o.name}</span></div>
          <div className="dgItem"><span className="dgLabel">Giá trị mở</span><span className="dgVal">{fmtVND(contact.openValue)} ₫</span></div>
        </div>

        {contact.tags.length > 0 && (
          <div className="drawerSection"><div className="dsHead">Nhãn</div>
            <div className="dealLabels" style={{display:'flex',gap:6,flexWrap:'wrap'}}>{contact.tags.map(t => <Label key={t} id={t} />)}</div>
          </div>
        )}

        <div className="drawerSection">
          <div className="dsHead">Ghi chú gần đây</div>
          <div className="noteCard">Đã trao đổi nhu cầu triển khai, khách quan tâm gói tiêu chuẩn. Hẹn gửi báo giá trong tuần.</div>
        </div>
      </aside>
    </>
  );
}

Object.assign(window, { ContactsList, ContactPanel, StatusBadge, relText });