/* ============================================================
   Contacts — dense, searchable people table + detail drawer.
   ============================================================ */

function TagCell({ c, flash }) {
  const E = window.WTC.enrollments, seqs = window.WTC.sequences, LM = window.WTC.LANE_META;
  const [open, setOpen] = React.useState(false);
  const [, tick] = React.useReducer((x) => x + 1, 0);
  const cur = E[c.id];
  const flow = cur ? seqs.find((s) => s.id === cur.seqId) : null;
  const setTag = (l) => { const s = seqs.find((x) => x.lane === l); if (s) { E[c.id] = { seqId: s.id, step: 1 }; flash && flash(c.name.split(" ")[0] + " tagged " + LM[l].label + " → enrolled"); } setOpen(false); tick(); };
  const clear = () => { delete E[c.id]; setOpen(false); tick(); };
  return (
    <div className="tagcell" onClick={(e) => e.stopPropagation()}>
      {flow
        ? <button className="tag-pill" onClick={() => setOpen((o) => !o)}><span className="chip-dot" style={{ background: `var(--lane-${flow.lane})` }}></span>{LM[flow.lane].label}<Icon name="chevronDown" size={11} /></button>
        : <button className="tag-add" onClick={() => setOpen((o) => !o)}><Icon name="plus" size={12} /> Tag</button>}
      {open && (
        <div className="menu-pop" style={{ top: 30, left: 0, minWidth: 176 }}>
          <div className="menu-label">Tag → auto-enroll</div>
          {["brand", "agency", "event", "travel"].map((l) => (
            <button key={l} className="menu-item" onClick={() => setTag(l)}>
              <span className="chip-dot" style={{ background: `var(--lane-${l})` }}></span>{LM[l].label}
              {flow && flow.lane === l && <Icon name="check" size={13} style={{ marginLeft: "auto", color: "var(--accent)" }} />}
            </button>
          ))}
          {flow && <React.Fragment><div style={{ height: 1, background: "var(--line)", margin: "5px 0" }}></div>
            <button className="menu-item" onClick={clear} style={{ color: "var(--red)" }}><Icon name="x" size={13} /> Remove tag</button></React.Fragment>}
        </div>
      )}
    </div>
  );
}

function FacetChips({ options, selected, onToggle }) {
  return (
    <div className="facet-chips">
      {options.map((o) => (
        <button key={o.id} className="facet-chip" data-on={selected.has(o.id) || undefined} onClick={() => onToggle(o.id)}>
          {o.dot && <span className="chip-dot" style={{ background: o.dot }}></span>}
          {o.label}
        </button>
      ))}
    </div>
  );
}

function Contacts({ lane, onDraft }) {
  const all = window.WTC.contacts;
  const [q, setQ] = React.useState("");
  const [panelOpen, setPanelOpen] = React.useState(false);
  const [lanes, setLanes] = React.useState(new Set());
  const [sides, setSides] = React.useState(new Set());
  const [stages, setStages] = React.useState(new Set());
  const [data, setData] = React.useState(new Set());   // hasEmail, needsEmail, hasPhone, hasLinkedin
  const [openId, setOpenId] = React.useState(null);

  const toggle = (setter) => (id) => setter((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const clearAll = () => { setLanes(new Set()); setSides(new Set()); setStages(new Set()); setData(new Set()); setQ(""); };
  const activeCount = lanes.size + sides.size + stages.size + data.size;

  const rows = all.filter((c) => {
    if (lane !== "all" && c.lane !== lane) return false;
    if (lanes.size && !lanes.has(c.lane)) return false;
    if (sides.size && !sides.has(c.side)) return false;
    if (stages.size && !stages.has(c.stage)) return false;
    if (data.has("hasEmail") && !c.verified) return false;
    if (data.has("needsEmail") && c.verified) return false;
    if (data.has("hasPhone") && !c.intel.phone) return false;
    if (data.has("hasLinkedin") && !c.intel.linkedinUrl) return false;
    if (q) {
      const s = (c.name + c.title + c.brand + c.email).toLowerCase();
      if (!s.includes(q.toLowerCase())) return false;
    }
    return true;
  });

  const [toast, setToast] = React.useState(null);
  const flash = (m) => { setToast(m); setTimeout(() => setToast(null), 1600); };
  const openContact = all.find((c) => c.id === openId);
  const needsCount = all.filter((c) => (lane === "all" || c.lane === lane) && !c.verified).length;

  const LM = window.WTC.LANE_META, SM = window.WTC.STAGE_META;

  return (
    <div className="surface-scroll">
      <div className="today-head">
        <div>
          <h1 className="page-title">Contacts</h1>
          <p className="page-sub">{rows.length} of {all.filter((c) => lane === "all" || c.lane === lane).length} people · {needsCount} need email enrichment</p>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn" onClick={() => flash("Exported " + rows.filter((r) => !r.verified).length + " unverified rows → clay-enrich.csv")}>
            <Icon name="upload" size={15} /> Export for Clay
          </button>
          <button className="btn" onClick={() => flash("Exported " + rows.length + " contacts → contacts.csv")}>
            <Icon name="upload" size={15} /> Export CSV
          </button>
        </div>
      </div>

      <div className="filter-bar">
        <div className="search-mini" style={{ flex: 1, maxWidth: 340 }}>
          <Icon name="search" size={15} style={{ color: "var(--text-3)" }} />
          <input placeholder="Search name, title, email…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <button className="btn" data-on={panelOpen || undefined} onClick={() => setPanelOpen((o) => !o)}
          style={panelOpen || activeCount ? { borderColor: "var(--accent)", color: "var(--accent)" } : null}>
          <Icon name="filter" size={14} /> Filters {activeCount > 0 && <span className="filter-count">{activeCount}</span>}
        </button>
        {/* quick channel toggles */}
        <button className="btn btn--sm" data-on={data.has("hasEmail") || undefined} onClick={() => toggle(setData)("hasEmail")}
          style={data.has("hasEmail") ? { borderColor: "var(--accent)", color: "var(--accent)" } : null}>
          <Icon name="mail" size={14} /> Verified email
        </button>
        <button className="btn btn--sm" data-on={data.has("needsEmail") || undefined} onClick={() => toggle(setData)("needsEmail")}
          style={data.has("needsEmail") ? { borderColor: "var(--amber)", color: "var(--amber)" } : null}>
          <Icon name="sparkles" size={14} /> Needs enrichment
        </button>
        {activeCount > 0 && <button className="btn btn--ghost btn--sm" onClick={clearAll}>Clear all</button>}
      </div>

      {panelOpen && (
        <div className="filter-panel">
          <div className="facet">
            <div className="facet-label">Type</div>
            <FacetChips selected={lanes} onToggle={toggle(setLanes)}
              options={["brand", "agency", "event", "travel"].map((id) => ({ id, label: LM[id].label, dot: `var(--lane-${id})` }))} />
          </div>
          <div className="facet">
            <div className="facet-label">Side of deal</div>
            <FacetChips selected={sides} onToggle={toggle(setSides)}
              options={[{ id: "brand", label: "Brand-side" }, { id: "agency", label: "Agency-side" }]} />
          </div>
          <div className="facet">
            <div className="facet-label">Stage</div>
            <FacetChips selected={stages} onToggle={toggle(setStages)}
              options={["new", "contacted", "in_convo", "pitched", "won", "lost"].map((id) => ({ id, label: SM[id].label, dot: SM[id].color }))} />
          </div>
          <div className="facet">
            <div className="facet-label">Data available</div>
            <FacetChips selected={data} onToggle={toggle(setData)}
              options={[{ id: "hasEmail", label: "Verified email" }, { id: "needsEmail", label: "Needs enrichment" }, { id: "hasPhone", label: "Phone" }, { id: "hasLinkedin", label: "LinkedIn" }]} />
          </div>
        </div>
      )}

      <div className="dense-wrap">
        <table className="dense">
          <thead>
            <tr>
              <th>Name</th><th>Title</th><th>Target</th><th>Type</th>
              <th>Side</th><th>Email</th><th>Stage</th><th style={{ width: 116 }}>Tags</th><th style={{ width: 120 }}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((c) => (
              <tr key={c.id} className="lift" onClick={() => setOpenId(c.id)}>
                <td><div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                  <Avatar name={c.name} initials={c.initials} color={c.color} size={28} />
                  <span style={{ fontWeight: 600, whiteSpace: "nowrap" }}>{c.name}</span>
                </div></td>
                <td style={{ color: "var(--text-2)" }}>{c.title}</td>
                <td><div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                  <Avatar mono={c.mono} size={22} square /><span style={{ color: "var(--text-2)" }}>{c.brand}</span>
                </div></td>
                <td><LaneChip lane={c.lane} small /></td>
                <td><span className={"side-tag side-tag--" + c.side}>{c.side === "brand" ? "Brand" : "Agency"}</span></td>
                <td>
                  {c.verified
                    ? <span className="num" style={{ color: "var(--text-3)", fontSize: 12 }}>{c.email}</span>
                    : <span style={{ color: "var(--amber)", fontSize: 12, display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="sparkles" size={12} /> needs enrichment</span>}
                </td>
                <td><StageDot stage={c.stage} withLabel /></td>
                <td><TagCell c={c} flash={flash} /></td>
                <td>
                  <div style={{ display: "flex", gap: 3 }}>
                    <button className="icon-act" title="Draft with Claude" onClick={(e) => { e.stopPropagation(); onDraft(c.targetId, c.id); }}><Icon name="sparkles" size={15} /></button>
                    <button className="icon-act" title="Email" onClick={(e) => { e.stopPropagation(); window.open("mailto:" + c.email); }}><Icon name="mail" size={15} /></button>
                    <button className="icon-act" title="LinkedIn" onClick={(e) => { e.stopPropagation(); flash("Opening LinkedIn for " + c.name); }}><Icon name="linkedin" size={15} /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {rows.length === 0 && <EmptyState icon="contacts" title="No contacts match" sub="Adjust the filters or pick another lane folder." />}
      </div>
      {openContact && <ContactDrawer c={openContact} onClose={() => setOpenId(null)} onDraft={onDraft} flash={flash} />}
      {toast && <div className="toast">{toast}</div>}
    </div>
  );
}

// ---------- Contact detail drawer ----------
function FlowSection({ c, flash }) {
  const E = window.WTC.enrollments;
  const seqs = window.WTC.sequences;
  const LM = window.WTC.LANE_META;
  const [, bump] = React.useReducer((x) => x + 1, 0);
  const cur = E[c.id];
  const flow = cur ? seqs.find((s) => s.id === cur.seqId) : null;
  const flowOf = (lane) => seqs.find((s) => s.lane === lane);
  const tagEnroll = (lane) => { const s = flowOf(lane); if (!s) return; E[c.id] = { seqId: s.id, step: 1 }; flash && flash(c.name.split(" ")[0] + " tagged " + LM[lane].label + " → auto-enrolled in " + s.name); bump(); };
  const remove = () => { delete E[c.id]; flash && flash(c.name.split(" ")[0] + " removed from flow"); bump(); };
  const activeTag = flow ? flow.lane : null;
  const total = flow ? flow.steps.length : 0;
  const step = flow ? Math.min(cur.step, total) : 0;
  const nextStep = flow ? flow.steps[Math.min(step, total - 1)] : null;
  const nextLabel = nextStep ? ({ email: "Email", linkedin: "LinkedIn" }[nextStep.channel] || "Step") : "";

  return (
    <div className="cd-section" style={{ borderTop: "none", paddingTop: 0 }}>
      <div className="cd-section-label"><Icon name="sequence" size={13} style={{ marginRight: 5, verticalAlign: "-2px", color: "var(--accent)" }} />Tag → auto-enroll</div>
      <div className="facet-chips" style={{ marginBottom: flow ? 12 : 8 }}>
        {["brand", "agency", "event", "travel"].map((l) => (
          <button key={l} className="facet-chip" data-on={activeTag === l || undefined} onClick={() => tagEnroll(l)}>
            <span className="chip-dot" style={{ background: `var(--lane-${l})` }}></span>{LM[l].label}
          </button>
        ))}
      </div>
      {flow ? (
        <div className="flow-enrolled">
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <LaneChip lane={flow.lane} small />
              <span style={{ fontSize: 13, fontWeight: 650, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{flow.name}</span>
            </div>
            <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 4 }}><span className="num">Step {step} of {total}</span> · next: {nextLabel}</div>
          </div>
          <button className="btn btn--sm btn--ghost btn--danger" onClick={remove} title="Remove from flow"><Icon name="x" size={14} /></button>
        </div>
      ) : (
        <div className="insp-note" style={{ fontSize: 12 }}>Not in a flow. Tag this contact and it auto-enrolls into the matching follow-up sequence.</div>
      )}
    </div>
  );
}

function InfoRow({ icon, label, value, href, mono, onCopy }) {
  if (!value) return null;
  return (
    <div className="info-row">
      <span className="info-ico"><Icon name={icon} size={15} /></span>
      <span className="info-label">{label}</span>
      {href
        ? <a className="info-value link" href={href} target="_blank" rel="noreferrer">{value} <Icon name="arrowUpRight" size={12} /></a>
        : <span className={"info-value" + (mono ? " num" : "")}>{value}</span>}
    </div>
  );
}

function ContactDrawer({ c, onClose, onDraft, flash }) {
  const intel = c.intel || {};
  const W = window.WTC;
  const thread = c.threadId ? W.threads.find((t) => t.id === c.threadId) : null;
  const sideLabel = c.side === "brand" ? "Brand-side" : "Agency-side";

  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="contact-drawer" onClick={(e) => e.stopPropagation()}>
        <button className="btn btn--ghost btn--icon drawer-x" onClick={onClose}><Icon name="x" size={18} /></button>

        {/* identity */}
        <div className="cd-head">
          <Avatar name={c.name} initials={c.initials} color={c.color} size={56} />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 19, fontWeight: 720, letterSpacing: "-0.01em" }}>{c.name}</div>
            <div style={{ fontSize: 13, color: "var(--text-2)", marginTop: 2 }}>{c.title}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 9, flexWrap: "wrap" }}>
              <span className={"side-tag side-tag--" + c.side}>{sideLabel}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--text-2)" }}>
                <Avatar mono={c.mono} size={18} square /> {c.brand}
              </span>
              <LaneChip lane={c.lane} small />
              <StageDot stage={c.stage} withLabel />
            </div>
          </div>
        </div>

        {/* primary actions */}
        <div className="cd-actions">
          <button className="btn btn--primary" onClick={() => onDraft(c.targetId, c.id)}><Icon name="sparkles" size={15} /> Draft with Claude</button>
          <button className="btn" onClick={() => window.open("mailto:" + c.email)}><Icon name="mail" size={15} /> Email</button>
          <button className="btn" onClick={() => flash("Opening LinkedIn for " + c.name)}><Icon name="linkedin" size={15} /> LinkedIn</button>
        </div>

        <div className="cd-body">
          <FlowSection c={c} flash={flash} />
          {/* contact info */}
          <div className="cd-section">
            <div className="cd-section-label">Contact</div>
            <InfoRow icon="mail" label="Email" value={c.email} href={"mailto:" + c.email} mono />
            <InfoRow icon="phone" label="Phone" value={intel.phone} mono />
            <InfoRow icon="globe" label="Website" value={intel.website} href={"https://" + intel.website} />
            <InfoRow icon="building" label="HQ" value={intel.hq} />
          </div>

          {/* socials */}
          <div className="cd-section">
            <div className="cd-section-label">Social</div>
            <InfoRow icon="linkedin" label="LinkedIn" value={intel.linkedinUrl} href={"https://" + intel.linkedinUrl} />
            <InfoRow icon="sparkles" label="Instagram" value={intel.instagram} href={"https://instagram.com/" + (intel.instagram || "").replace("@", "")} />
            <InfoRow icon="send" label="X / Twitter" value={intel.twitter} href={"https://x.com/" + (intel.twitter || "").replace("@", "")} />
          </div>

          {/* company */}
          <div className="cd-section">
            <div className="cd-section-label">About {c.brand}</div>
            <p className="cd-blurb">{intel.companyBlurb}</p>
            {intel.event && <InfoRow icon="calendar" label="Context" value={intel.event} />}
            {intel.value > 0 && <InfoRow icon="dollar" label="Est. value" value={fmtMoney(intel.value)} mono />}
            {intel.sourcedBy && <InfoRow icon="link" label="Sourced by" value={intel.sourcedBy} />}
            {intel.unlocked && <InfoRow icon="trend" label="Unlocked" value={intel.unlocked.join(", ")} />}
          </div>

          {/* pitch intel */}
          <div className="cd-section cd-intel">
            <div className="cd-section-label" style={{ color: "var(--accent)" }}>
              <Icon name="sparkles" size={13} style={{ marginRight: 5, verticalAlign: "-2px" }} />Pitch intel
            </div>
            <div className="intel-block">
              <span className="intel-tag intel-tag--signal">Why now</span>
              <p>{intel.signal}</p>
            </div>
            <div className="intel-block">
              <span className="intel-tag intel-tag--fit">Angle</span>
              <p>{intel.fit}</p>
            </div>
            <div className="intel-block">
              <span className="intel-tag intel-tag--cadence">Cadence</span>
              <p>{intel.cadence ? `${intel.cadence.label} · next due ${intel.cadence.nextDue}` : "Not enrolled"}</p>
            </div>
          </div>

          {/* activity */}
          {thread && (
            <div className="cd-section">
              <div className="cd-section-label">Recent activity</div>
              <div className="cd-activity">
                {thread.messages.slice(-3).map((m) => (
                  <div key={m.id} className="cd-act-row">
                    <span className="stagedot" style={{ background: m.from === "me" ? "var(--accent)" : "var(--green)", marginTop: 6 }}></span>
                    <div>
                      <div style={{ fontSize: 11.5, color: "var(--text-3)", marginBottom: 2 }}>{m.from === "me" ? "You" : c.name.split(" ")[0]} · {m.time}</div>
                      <div style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.5 }}>{m.body}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Contacts, ContactDrawer });