// contacts-page.jsx — Довідник зовнішніх контактів
// Зведення з наявних модулів (не дублює дані): Замовники, Підрядники, Ліди.
// Контакти команди живуть у Команда → Профілі (єдине місце), тут їх немає.

// Розбір рядка контакту "Ім'я · +380… · email" у частини
function parseContactStr(str) {
  const parts = String(str || "").split("·").map(s => s.trim()).filter(Boolean);
  let name = "", phone = "", email = "", extra = "";
  parts.forEach(p => {
    if (/@/.test(p)) email = p;
    else if (/\+?\d[\d\s().-]{6,}/.test(p)) phone = p;
    else if (!name) name = p;
    else extra = p;
  });
  return { name, phone, email, extra };
}

function initialsOf(name) {
  return String(name || "?").trim().split(/\s+/).map(w => w[0]).slice(0, 2).join("").toUpperCase();
}

const CONTACT_TYPES = {
  client:   { label: "Замовник",  chip: "client" },
  supplier: { label: "Підрядник", chip: "supplier" },
  lead:     { label: "Лід",       chip: "lead" },
};

// Зведення всіх контактів
window.allContacts = function () {
  const out = [];
  (window.DATA.CLIENTS || []).forEach(c => {
    const k = c.contact || {};
    out.push({ id: "cl-" + c.id, type: "client", name: k.name || c.name, org: c.name, role: k.role || "", phone: k.phone || "", email: k.email || "", edrpou: c.edrpou || "", note: c.note || "" });
  });
  (window.DATA.SUPPLIERS || []).forEach(s => {
    const k = parseContactStr(s.contact);
    const cat = (window.SUPPLIER_CATEGORIES || {})[s.category];
    out.push({ id: "su-" + s.id, type: "supplier", name: k.name || s.name, org: s.name, role: cat ? cat.label : "", phone: k.phone, email: k.email, edrpou: s.edrpou || "", note: s.note || "" });
  });
  (window.DATA.LEADS || []).forEach(l => {
    const k = parseContactStr(l.contact);
    const t = (window.LEAD_TYPE || {})[l.type];
    out.push({ id: "ld-" + l.id, type: "lead", name: k.name || l.client, org: l.client, role: [l.name, t].filter(Boolean).join(" · "), phone: k.phone, email: k.email, edrpou: "", note: k.extra || "" });
  });
  // Команда навмисно не зводиться сюди — контакти співробітників лише у Команда → Профілі.
  return out;
};

function ContactsPage({ role }) {
  const all = window.allContacts();
  const [q, setQ] = React.useState("");
  const [type, setType] = React.useState("all");

  const counts = all.reduce((a, c) => { a[c.type] = (a[c.type] || 0) + 1; return a; }, {});
  const ql = q.trim().toLowerCase();
  let shown = all;
  if (type !== "all") shown = shown.filter(c => c.type === type);
  if (ql) shown = shown.filter(c =>
    [c.name, c.org, c.role, c.phone, c.email, c.edrpou].filter(Boolean).join(" ").toLowerCase().includes(ql)
  );
  shown = [...shown].sort((a, b) => a.name.localeCompare(b.name, "uk"));

  const pills = [
    { id: "all",      label: "Усі",        n: all.length },
    { id: "client",   label: "Замовники",  n: counts.client || 0 },
    { id: "supplier", label: "Підрядники", n: counts.supplier || 0 },
    { id: "lead",     label: "Ліди",       n: counts.lead || 0 },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Контакти</h1>
        <div className="page-sub">
          <span>{all.length} контактів</span>
          <span className="dot"></span>
          <span>зведено з Замовників, Підрядників і Лідів</span>
        </div>
      </div>

      <div className="hint-box">
        Довідник зовнішніх контактів. Дані тягнуться з відповідних модулів — щоб змінити контакт,
        редагуйте його у джерелі (Продажі → Замовники / Підрядники / Ліди).
        Контакти співробітників — у розділі <b>Команда → Профілі</b>.
      </div>

      <div className="toolbar" style={{ marginTop: 8 }}>
        <div className="filter-pill" role="tablist">
          {pills.map(p => (
            <button key={p.id} className={`filter-pill-item ${type === p.id ? "is-active" : ""}`} onClick={() => setType(p.id)}>
              {p.label} {p.n > 0 && <span style={{ opacity: 0.6 }}>{p.n}</span>}
            </button>
          ))}
        </div>
        <div className="search" style={{ marginLeft: "auto", minWidth: 260 }}>
          <window.Icon.Search />
          <input placeholder="Пошук: ім'я, організація, телефон, email…" value={q} onChange={e => setQ(e.target.value)} />
        </div>
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th></th>
            <th>Контакт</th>
            <th>Тип</th>
            <th>Роль / організація</th>
            <th>Телефон</th>
            <th>Email</th>
            <th>ЄДРПОУ</th>
          </tr>
        </thead>
        <tbody>
          {shown.map(c => {
            const t = CONTACT_TYPES[c.type];
            return (
              <tr key={c.id}>
                <td><div className={`team-avatar contact-av av-${c.type}`} style={{ width: 32, height: 32, fontSize: 11.5 }}>{initialsOf(c.name)}</div></td>
                <td>
                  <div className="cell-name">{c.name}</div>
                  {c.note && <div className="cell-sub" style={{ maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.note}</div>}
                </td>
                <td><span className={`contact-type-chip av-${c.type}`}>{t.label}</span></td>
                <td>
                  <div className="cell-name" style={{ fontWeight: 500 }}>{c.org}</div>
                  {c.role && <div className="cell-sub">{c.role}</div>}
                </td>
                <td style={{ whiteSpace: "nowrap" }}>
                  {c.phone ? <a className="td-link td-mono" style={{ fontSize: 12.5 }} href={`tel:${c.phone.replace(/[^\d+]/g, "")}`}>{c.phone}</a> : <span style={{ color: "var(--ink-4)" }}>—</span>}
                </td>
                <td style={{ whiteSpace: "nowrap" }}>
                  {c.email ? <a className="td-link" style={{ fontSize: 12.5 }} href={`mailto:${c.email}`}>{c.email}</a> : <span style={{ color: "var(--ink-4)" }}>—</span>}
                </td>
                <td className="td-mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{c.edrpou || "—"}</td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {shown.length === 0 && <div className="empty" style={{ padding: "32px 0", textAlign: "center", color: "var(--ink-3)" }}>Нічого не знайдено за запитом «{q}».</div>}
    </div>
  );
}

window.ContactsPage = ContactsPage;