/* Contacts list — search, ratings, masked sensitive fields. window.ContactsScreen */
const { useState } = React;

function Stars({ n }) {
  return <span style={{ display: "inline-flex", gap: 1 }}>{[1,2,3,4,5].map(i => <Icon key={i} name="star" size={13} color={i <= n ? "var(--amber-500)" : "var(--slate-200)"} style={{ fill: i <= n ? "var(--amber-500)" : "none" }} />)}</span>;
}

function ContactsScreen({ onOpen }) {
  const d = window.PT_DATA;
  const [q, setQ] = useState("");
  const [role, setRole] = useState("All");
  const roles = ["All", ...Array.from(new Set(d.allContacts.map((c) => c.role)))];
  const rows = d.allContacts.filter((c) => (role === "All" || c.role === role) && c.name.toLowerCase().includes(q.toLowerCase()));
  return (
    <div style={{ padding: 22 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14, flexWrap: "wrap" }}>
        <div style={{ width: 260 }}>
          <Input icon="search" placeholder="Search contacts…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <div style={{ width: 170 }}>
          <Select value={role} onChange={(e) => setRole(e.target.value)}>{roles.map((r) => <option key={r}>{r}</option>)}</Select>
        </div>
        <div style={{ marginLeft: "auto" }}><Button variant="brand" size="sm" icon="user-plus" onClick={() => navigate("/contacts/new")}>Add contact</Button></div>
      </div>

      <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-xs)" }}>
        <div className="pt-scroll-x">
        <table style={{ width: "100%", minWidth: 820, borderCollapse: "collapse" }}>
          <thead>
            <tr style={{ background: "var(--surface-sunken)" }}>
              {["Contact", "Type", "Phone", "Email", "Quick comment", "Deals", "Rating"].map((h) => (
                <th key={h} style={{ textAlign: "left", padding: "9px 14px", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", fontWeight: 700, color: "var(--text-muted)", borderBottom: "1px solid var(--border-default)", whiteSpace: "nowrap" }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((c, i) => (
              <ContactListRow key={i} c={c} onOpen={onOpen} />
            ))}
          </tbody>
        </table>
        </div>
        {rows.length === 0 && <div style={{ padding: 8 }}><EmptyState compact icon="users" title="No contacts match" description="Try a different name or type filter." /></div>}
      </div>
      <div style={{ marginTop: 12, fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>{rows.length} contacts</div>
    </div>
  );
}

function ContactListRow({ c, onOpen }) {
  const [hover, setHover] = useState(false);
  return (
    <tr onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => navigate("/contacts/" + window.PT_DATA.allContacts.indexOf(c))}
      style={{ cursor: "pointer", background: hover ? "var(--surface-hover)" : "transparent", borderBottom: "1px solid var(--border-subtle)" }}>
      <td style={{ padding: "10px 14px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Avatar name={c.name} size="sm" />
          <span style={{ fontWeight: 700, color: "var(--text-strong)", fontSize: "var(--text-base)", whiteSpace: "nowrap" }}>{c.name}</span>
        </div>
      </td>
      <td style={{ padding: "10px 14px" }}><Badge tone="neutral" size="sm">{c.role}</Badge></td>
      <td style={{ padding: "10px 14px", fontSize: "var(--text-sm)" }} className="tnum">
        {c.masked ? <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--text-subtle)", fontStyle: "italic" }}><Icon name="lock" size={12} />(hidden)</span> : c.phone}
      </td>
      <td style={{ padding: "10px 14px", fontSize: "var(--text-sm)", color: "var(--text-muted)", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.email}</td>
      <td style={{ padding: "10px 14px", fontSize: "var(--text-sm)", color: "var(--text-body)", fontStyle: "italic", maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.quick}</td>
      <td style={{ padding: "10px 14px", fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-strong)" }} className="tnum">{c.deals}</td>
      <td style={{ padding: "10px 14px" }}><Stars n={c.rating} /></td>
    </tr>
  );
}
window.ContactsScreen = ContactsScreen;