function Contacts({ clients: _clients, onOpenClient, activeId, onAddClient, stageFilter: stageFilterProp, onStageFilter }) {
  const [search, setSearch] = React.useState("");
  const [localStageFilter, setLocalStageFilter] = React.useState(null);
  const stageFilter = stageFilterProp !== undefined ? stageFilterProp : localStageFilter;
  function setStageFilter(v) { if (onStageFilter) onStageFilter(v); setLocalStageFilter(v); }
  const q = search.toLowerCase().trim();
  const src = (_clients || CLIENTS);
  const filtered = src.filter(c => {
    const matchesQ = !q || c.name.toLowerCase().includes(q) || c.city.toLowerCase().includes(q) || c.category.toLowerCase().includes(q) || c.id.toLowerCase().includes(q);
    const matchesStage = !stageFilter || c.stage === stageFilter;
    return matchesQ && matchesStage;
  });

  return (
    <div className="cm-page">
      <div className="cm-bar">
        <div className="cm-bar__l">
          <span className="cm-bar__crumb">Contacts <span className="cm-bar__crumbSep">/</span> <span className="cm-bar__crumbMuted">All</span></span>
          <div className="cm-bar__tabs">
            <span className={"cm-bar__tab " + (!stageFilter ? "is-active" : "")} onClick={() => setStageFilter(null)}>All</span>
            <span className={"cm-bar__tab " + (stageFilter === "closed" ? "is-active" : "")} onClick={() => setStageFilter("closed")}>Paying</span>
            <span className={"cm-bar__tab " + (stageFilter === "negotiating" ? "is-active" : "")} onClick={() => setStageFilter("negotiating")}>Negotiating</span>
          </div>
        </div>
        <div className="cm-bar__r">
          <div className="cm-search">
            <i data-lucide="search" className="cm-icon-xs"></i>
            <input
              placeholder="Search clients"
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
            {search && <span style={{ cursor:"pointer", color:"var(--color-ink-subtle)", fontSize:13 }} onClick={() => setSearch("")}>✕</span>}
          </div>
          <button className="cm-btn cm-btn--primary" onClick={onAddClient}><i data-lucide="plus" className="cm-icon-xs"></i>Add contact</button>
        </div>
      </div>

      <div className="cm-pageScroll">
        <table className="cm-table">
          <thead>
            <tr>
              <th>Business name</th>
              <th>Location</th>
              <th>Stage</th>
              <th>Site URL</th>
              <th style={{ textAlign:"right" }}>MRR</th>
              <th>Last contact</th>
              <th>Next follow-up</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 && (
              <tr><td colSpan={8} style={{ textAlign:"center", color:"var(--color-ink-subtle)", padding:24 }}>No clients match your search.</td></tr>
            )}
            {filtered.map(c => (
              <tr key={c.id}
                  className={activeId === c.id ? "is-active" : ""}
                  onClick={() => onOpenClient(c.id)}>
                <td style={{ fontWeight:500 }}>{c.name}</td>
                <td className="muted">{c.city}</td>
                <td><StageTag stageKey={c.stage} /></td>
                <td className="cm-mono" style={{ fontSize:11.5 }}>
                  {c.siteUrl
                    ? <a href={"https://"+c.siteUrl} target="_blank" rel="noreferrer"
                        onClick={e => e.stopPropagation()}
                        style={{ color:"var(--color-accent)", textDecoration:"none" }}>{c.siteUrl}</a>
                    : <span className="muted">—</span>}
                </td>
                <td className="num" style={{ textAlign:"right" }}>{c.mrr ? `$${c.mrr}` : <span className="muted">—</span>}</td>
                <td className="muted">{c.lastContact || "—"}</td>
                <td>
                  {c.overdue ? <span style={{ color:"#f08585" }}>Overdue · {c.nextCall}</span>
                            : (c.nextCall || <span className="muted">—</span>)}
                </td>
                <td className="muted" style={{ maxWidth:260, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{c.notes || "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.Contacts = Contacts;