/* eslint-disable */
const { useState, useMemo, useEffect } = React;

const Rail = ({ page, setPage, leadCount }) => {
  const items = [
    { id: "sheet", icon: "sheet", label: "Contact Sheet", badge: leadCount },
    { id: "lead", icon: "user", label: "Lead Record", hint: "click row" },
    { id: "settings", icon: "settings", label: "Agent Settings" },
    { id: "health", icon: "activity", label: "Agent Health", health: "ok" },
  ];
  return (
    <aside className="rail">
      <div className="rail-brand">
        <div className="rail-brand-mark">C</div>
        <div>
          <div className="rail-brand-name">Clawdified</div>
          <div className="rail-brand-sub">TAM · v0.7</div>
        </div>
      </div>

      <div className="rail-section">Workspace</div>
      {items.map(it => (
        <button key={it.id} className={"rail-item" + (page === it.id ? " active" : "")} onClick={() => setPage(it.id)}>
          <Icon name={it.icon} />
          <span>{it.label}</span>
          {it.badge != null && <span className="badge">{it.badge}</span>}
          {it.health && <span className="health-dot" />}
        </button>
      ))}

      <div className="rail-section">Saved views</div>
      <button className="rail-item"><Icon name="target" /><span>All leads</span><span className="badge">{leadCount}</span></button>
      <button className="rail-item"><span style={{ width: 16, display: "grid", placeItems: "center" }}><span style={{ width: 6, height: 6, borderRadius: 50, background: "oklch(0.62 0.16 145)" }} /></span><span>Hot fits (≥80)</span><span className="badge">11</span></button>
      <button className="rail-item"><span style={{ width: 16, display: "grid", placeItems: "center" }}><span style={{ width: 6, height: 6, borderRadius: 50, background: "oklch(0.55 0.16 25)" }} /></span><span>Stale &gt; 30d</span><span className="badge">14</span></button>
      <button className="rail-item"><span style={{ width: 16, display: "grid", placeItems: "center" }}><span style={{ width: 6, height: 6, borderRadius: 50, background: "var(--fg-muted)" }} /></span><span>Missing email</span><span className="badge">7</span></button>

      <div className="rail-foot">
        <div className="rail-foot-avatar">WM</div>
        <div>
          <div className="rail-foot-name">Wesley M.</div>
          <div className="rail-foot-role">Owner</div>
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ page, onNew, agent }) => {
  const titles = {
    sheet: ["Database", "Contact Sheet"],
    lead: ["Database", "Lead Record"],
    settings: ["Agent", "Settings"],
    health: ["Agent", "Health"],
  };
  const [a, b] = titles[page] || titles.sheet;
  return (
    <div className="topbar">
      <div className="crumb">
        <span>{a}</span>
        <span className="crumb-sep">/</span>
        <b>{b}</b>
      </div>
      <div className="topbar-spacer" />
      <div className="agent-pill">
        <span className="pulse" />
        Agent {agent}
      </div>
      <div className="topbar-search">
        <Icon name="search" />
        <input placeholder="Search leads, companies, domains…" />
        <kbd>⌘K</kbd>
      </div>
      <button className="icon-btn" title="History"><Icon name="history" /></button>
      <button className="btn"><Icon name="download" />Export</button>
      <button className="btn btn-primary" onClick={onNew}><Icon name="plus" />Add lead</button>
    </div>
  );
};

const StatStrip = ({ leads }) => {
  const total = leads.length;
  const hotFits = leads.filter(l => l.fitScore >= 80).length;
  const verifiedEmails = leads.filter(l => l.emailStatus === "verified").length;
  const verifiedDirect = leads.filter(l => l.directStatus === "verified").length;
  const avgConf = Math.round(leads.reduce((s, l) => s + l.confidence, 0) / total);
  return (
    <div className="stat-strip">
      <div className="stat-cell">
        <div className="stat-label">Total leads</div>
        <div className="stat-value">{total}<span className="stat-delta">+12</span></div>
        <div className="stat-icon"><Icon name="db" /></div>
      </div>
      <div className="stat-cell featured">
        <div className="stat-label">Hot fits <span style={{ color: "oklch(0.36 0.13 145)" }}>(≥80)</span></div>
        <div className="stat-value">{hotFits}<span className="stat-delta">+4</span></div>
        <div className="stat-icon" style={{ background: "oklch(0.95 0.05 145)", color: "oklch(0.36 0.13 145)" }}><Icon name="target" /></div>
      </div>
      <div className="stat-cell">
        <div className="stat-label">Verified emails</div>
        <div className="stat-value">{verifiedEmails}<span className="stat-delta">+8</span></div>
        <div className="stat-icon"><Icon name="mail" /></div>
      </div>
      <div className="stat-cell">
        <div className="stat-label">Verified direct phones</div>
        <div className="stat-value">{verifiedDirect}<span className="stat-delta">+3</span></div>
        <div className="stat-icon"><Icon name="phone" /></div>
      </div>
      <div className="stat-cell">
        <div className="stat-label">Avg. confidence</div>
        <div className="stat-value">{avgConf}<span style={{fontSize:13,color:"var(--fg-3)"}}>%</span><span className="stat-delta flat">±0</span></div>
        <div className="stat-icon"><Icon name="sparkle" /></div>
      </div>
    </div>
  );
};

/* ---------- Filter bar ---------- */
const FilterBar = ({ leads, filters, setFilters, view, setView }) => {
  // counts
  const industries = useMemo(() => {
    const m = new Map();
    leads.forEach(l => m.set(l.industry, (m.get(l.industry) || 0) + 1));
    return [...m.entries()].sort((a,b) => b[1]-a[1]).map(([v, c]) => ({
      value: v, label: v, count: c, swatch: indColor(v, "bar"),
    }));
  }, [leads]);

  const seniorities = ["C-Level", "VP", "Head", "Director"].map(s => ({
    value: s, label: s, count: leads.filter(l => l.seniority === s).length,
  }));

  const departments = useMemo(() => {
    const m = new Map();
    leads.forEach(l => m.set(l.department, (m.get(l.department) || 0) + 1));
    return [...m.entries()].sort((a,b) => b[1]-a[1]).map(([v, c]) => ({ value: v, label: v, count: c }));
  }, [leads]);

  const sizes = [
    { value: "small", label: "1–100", count: leads.filter(l => l.sizeNum <= 100).length },
    { value: "mid", label: "101–500", count: leads.filter(l => l.sizeNum > 100 && l.sizeNum <= 500).length },
    { value: "large", label: "501–2,000", count: leads.filter(l => l.sizeNum > 500 && l.sizeNum <= 2000).length },
    { value: "ent", label: "2,000+", count: leads.filter(l => l.sizeNum > 2000).length },
  ];

  const set = (k, v) => setFilters(f => ({ ...f, [k]: v }));

  const activeCount =
    (filters.industries?.length || 0) +
    (filters.seniorities?.length || 0) +
    (filters.departments?.length || 0) +
    (filters.sizes?.length || 0) +
    (filters.minFit > 0 ? 1 : 0);

  return (
    <div className="filter-bar">
      <div className="toolbar-group">
        <button className={"seg" + (view === "all" ? " active" : "")} onClick={() => setView("all")}>All</button>
        <button className={"seg" + (view === "missing" ? " active" : "")} onClick={() => setView("missing")}>Missing</button>
        <button className={"seg" + (view === "stale" ? " active" : "")} onClick={() => setView("stale")}>Stale</button>
        <button className={"seg" + (view === "verified" ? " active" : "")} onClick={() => setView("verified")}>Verified</button>
      </div>

      <FilterPill label="Industry" icon="db" options={industries} values={filters.industries || []} onChange={(v) => set("industries", v)} />
      <FilterPill label="Seniority" icon="user" options={seniorities} values={filters.seniorities || []} onChange={(v) => set("seniorities", v)} />
      <FilterPill label="Department" icon="building" options={departments} values={filters.departments || []} onChange={(v) => set("departments", v)} />
      <FilterPill label="Company size" icon="building" options={sizes} values={filters.sizes || []} onChange={(v) => set("sizes", v)} />
      <FilterPill label="Fit score" icon="target" allowSlider sliderValue={filters.minFit || 0} onSliderChange={(v) => set("minFit", v)} />

      {activeCount > 0 && (
        <button className="filter-pill" style={{ color: "var(--fg-3)", borderStyle: "dashed" }} onClick={() => setFilters({})}>
          <Icon name="x" />
          Clear all ({activeCount})
        </button>
      )}

      <div className="filter-summary">
        Sorted by <b>Fit score</b> ↓
      </div>
    </div>
  );
};

const FieldCell = ({ value, status, mono }) => {
  if (status === "missing" || !value) {
    return <div className="field-cell"><span className="dot missing" /><span className="dash">—</span></div>;
  }
  return (
    <div className={"field-cell" + (mono ? " mono" : "")}>
      <span className={"dot " + status} title={status} />
      <span className="val">{value}</span>
    </div>
  );
};

const ConfidenceBar = ({ value }) => {
  const cls = value >= 80 ? "" : value >= 50 ? "warn" : "err";
  return (
    <div className="confidence-bar">
      <div className="confidence-track">
        <div className={"confidence-fill " + cls} style={{ width: value + "%" }} />
      </div>
      <span className="confidence-num">{value}%</span>
    </div>
  );
};

const ContactSheet = ({ leads, onSelect, selectedId }) => {
  const [filters, setFilters] = useState({});
  const [view, setView] = useState("all");
  const [checked, setChecked] = useState(new Set());

  const filtered = useMemo(() => {
    let f = leads;
    if (view === "missing") f = f.filter(l => l.completeness < 100);
    if (view === "stale") f = f.filter(l => [l.emailStatus, l.directStatus, l.companyPhoneStatus].includes("stale"));
    if (view === "verified") f = f.filter(l => l.confidence === 100);
    if (filters.industries?.length) f = f.filter(l => filters.industries.includes(l.industry));
    if (filters.seniorities?.length) f = f.filter(l => filters.seniorities.includes(l.seniority));
    if (filters.departments?.length) f = f.filter(l => filters.departments.includes(l.department));
    if (filters.sizes?.length) {
      f = f.filter(l => filters.sizes.some(s => {
        if (s === "small") return l.sizeNum <= 100;
        if (s === "mid") return l.sizeNum > 100 && l.sizeNum <= 500;
        if (s === "large") return l.sizeNum > 500 && l.sizeNum <= 2000;
        if (s === "ent") return l.sizeNum > 2000;
      }));
    }
    if (filters.minFit > 0) f = f.filter(l => l.fitScore >= filters.minFit);
    return [...f].sort((a, b) => b.fitScore - a.fitScore);
  }, [leads, view, filters]);

  const toggleCheck = (id, e) => {
    e.stopPropagation();
    setChecked(prev => {
      const n = new Set(prev);
      if (n.has(id)) n.delete(id); else n.add(id);
      return n;
    });
  };

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Contact Sheet
            <span style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--fg-3)", fontWeight: 400, background: "var(--surface-3)", padding: "3px 9px", borderRadius: 100, border: "1px solid var(--border)", whiteSpace: "nowrap" }}>{leads.length} rows · last sweep 11:42 AM</span>
          </h1>
          <div className="page-sub">Autonomous enrichment of total addressable market contacts. Click any row to inspect.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="refresh" />Run now</button>
        </div>
      </div>

      <StatStrip leads={leads} />
      <FilterBar leads={leads} filters={filters} setFilters={setFilters} view={view} setView={setView} />

      <div className="sheet-wrap">
        <div className="sheet-scroll">
          <table className="sheet">
            <colgroup>
              <col style={{ width: 6 }} />
              <col style={{ width: 32 }} />
              <col style={{ width: 116 }} />
              <col style={{ width: 230 }} />
              <col style={{ width: 220 }} />
              <col style={{ width: 165 }} />
              <col style={{ width: 230 }} />
              <col style={{ width: 165 }} />
              <col style={{ width: 165 }} />
              <col style={{ width: 100 }} />
              <col style={{ width: 110 }} />
              <col style={{ width: 36 }} />
            </colgroup>
            <thead>
              <tr>
                <th style={{ padding: 0 }}></th>
                <th><span className="checkbox" /></th>
                <th>Fit</th>
                <th>Company</th>
                <th>Contact</th>
                <th>Industry</th>
                <th>Email</th>
                <th>Direct phone</th>
                <th>LinkedIn</th>
                <th>Confidence</th>
                <th>Enriched</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(l => (
                <tr key={l.id} className={selectedId === l.id ? "selected" : ""} onClick={() => onSelect(l.id)}>
                  <td className="cell-accent"><div className="strip" style={{ background: indColor(l.industry, "bar") }} /></td>
                  <td className="cell-checkbox">
                    <span className={"checkbox" + (checked.has(l.id) ? " checked" : "")} onClick={(e) => toggleCheck(l.id, e)} />
                  </td>
                  <td><FitScore value={l.fitScore} /></td>
                  <td>
                    <div className="company-cell">
                      <div className="company-mono" style={{ background: indColor(l.industry, "soft"), color: indColor(l.industry, "fg"), borderColor: indColor(l.industry, "border") }}>
                        {l.company.split(" ").map(w => w[0]).slice(0,2).join("")}
                      </div>
                      <div style={{ minWidth: 0, overflow: "hidden" }}>
                        <div className="company-name" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{l.company}</div>
                        <div className="company-domain">{l.domain}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div className="contact-cell">
                      <div className="contact-name" style={{ display: "flex", alignItems: "center", gap: 6 }}>
                        {l.contactName}
                        <SeniorityTag seniority={l.seniority} />
                      </div>
                      <div className="contact-title">{l.title}</div>
                    </div>
                  </td>
                  <td><IndustryTag industry={l.industry} /></td>
                  <td><FieldCell value={l.email} status={l.emailStatus} mono /></td>
                  <td><FieldCell value={l.directPhone} status={l.directStatus} mono /></td>
                  <td><FieldCell value={l.linkedin ? "/in/" + l.linkedin.split("/in/")[1] : null} status={l.linkedinStatus} mono /></td>
                  <td className="cell-confidence"><ConfidenceBar value={l.confidence} /></td>
                  <td><span className="cell-mono">{l.enrichedAt}</span></td>
                  <td className="cell-actions">
                    <button className="row-actions-btn" onClick={(e) => e.stopPropagation()}>
                      <Icon name="moreV" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="sheet-footer">
          <span>{filtered.length} of {leads.length}</span>
          <span className="sep" />
          <span>{checked.size} selected</span>
          <span className="sep" />
          <span>Sorted by Fit score ↓</span>
          <div style={{ flex: 1 }} />
          <span>Auto-refresh: 5m</span>
        </div>
      </div>
    </div>
  );
};

window.Rail = Rail;
window.Topbar = Topbar;
window.ContactSheet = ContactSheet;
window.FieldCell = FieldCell;
window.ConfidenceBar = ConfidenceBar;