/* eslint-disable */
const { useEffect: useEffectP } = React;

const SourceTags = ({ sources }) => (
  <div className="src">
    {sources.map((s, i) => <span key={i} className="src-tag">{s}</span>)}
  </div>
);

const KV = ({ label, icon, value, status, mono, sources }) => {
  const empty = !value || status === "missing";
  return (
    <div className={"kv" + (empty ? " kv-empty" : "")}>
      <div className="kv-label">
        {icon && <Icon name={icon} className="ico" />}
        {label}
        {!empty && <span className={"dot " + status} title={status} style={{ marginLeft: "auto" }} />}
      </div>
      <div className={"kv-value" + (mono ? " mono" : "")}>
        <span className="val">{empty ? "Not found" : value}</span>
      </div>
      {!empty && sources && sources.length > 0 && <SourceTags sources={sources} />}
    </div>
  );
};

const LeadPanel = ({ lead, open, onClose }) => {
  if (!lead) return null;
  return (
    <>
      <div className={"scrim" + (open ? " open" : "")} onClick={onClose} />
      <aside className={"panel" + (open ? " open" : "")} role="dialog" aria-label="Lead record">
        <div className="panel-head">
          <span className="panel-head-id">{lead.id}</span>
          <span style={{ fontSize: 12, color: "var(--fg-3)" }}>Lead record</span>
          <div className="panel-head-spacer" />
          <button className="icon-btn" title="Previous"><Icon name="chevron" className="ico" style={{ transform: "rotate(180deg)" }} /></button>
          <button className="icon-btn" title="Next"><Icon name="chevron" /></button>
          <button className="icon-btn" title="More"><Icon name="moreH" /></button>
          <button className="panel-close" onClick={onClose} title="Close"><Icon name="x" /></button>
        </div>

        <div className="panel-hero">
          <div className="panel-hero-mono">{lead.contactFirst[0]}{lead.contactLast[0]}</div>
          <div className="panel-hero-body">
            <h2 className="panel-hero-name">{lead.contactName}</h2>
            <div className="panel-hero-meta">
              <span>{lead.title}</span>
              <span className="sep">·</span>
              <span style={{ fontWeight: 500, color: "var(--fg)" }}>{lead.company}</span>
              <span className="sep">·</span>
              <span>{lead.industry}</span>
            </div>
            <div className="panel-hero-meta" style={{ marginTop: 6, fontSize: 12 }}>
              <span><Icon name="building" className="ico" style={{ width: 12, height: 12, marginRight: 4, verticalAlign: -2 }} />{lead.size} employees</span>
              <span className="sep">·</span>
              <span>HQ {lead.hq}</span>
            </div>
          </div>
          <div className="panel-hero-side">
            <div className="panel-hero-conf">{lead.confidence}% <small>conf.</small></div>
            <div style={{ width: 100 }}><ConfidenceBar value={lead.confidence} /></div>
            <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "var(--mono)", marginTop: 2 }}>last enriched {lead.enrichedAt}</div>
          </div>
        </div>

        <div className="panel-body">
          <div className="panel-section">
            <div className="best-path">
              <div className="best-path-icon">
                <Icon name={lead.bestPath === "Email" ? "mail" : lead.bestPath.includes("phone") ? "phone" : lead.bestPath.includes("LinkedIn") ? "link" : "globe"} />
              </div>
              <div className="best-path-body">
                <div className="best-path-label">Best contact path (agent recommendation)</div>
                <div className="best-path-val">{lead.bestPath}</div>
              </div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent-fg)" }}>
                based on {lead.sources.length} sources
              </div>
            </div>
          </div>

          <div className="panel-section">
            <div className="panel-section-title">Contact information<span className="count">5</span></div>
            <div className="kv-grid">
              <KV label="Email" icon="mail" value={lead.email} status={lead.emailStatus} mono sources={lead.email ? lead.sources.slice(0,2) : null} />
              <KV label="Direct phone" icon="phone" value={lead.directPhone} status={lead.directStatus} mono sources={lead.directPhone ? lead.sources.slice(1,3) : null} />
              <KV label="Company phone" icon="phone" value={lead.companyPhone} status={lead.companyPhoneStatus} mono sources={["Company website"]} />
              <KV label="LinkedIn" icon="link" value={lead.linkedin} status={lead.linkedinStatus} mono sources={lead.linkedin ? ["LinkedIn"] : null} />
            </div>
            <div style={{ height: 8 }} />
            <div className="kv-grid">
              <KV label="Website" icon="globe" value={lead.website} status="verified" mono sources={["Company website"]} />
              <KV label="Best path" icon="target" value={lead.bestPath} status="verified" />
            </div>
          </div>

          <div className="panel-section">
            <div className="panel-section-title">Company<span className="count">4</span></div>
            <div className="kv-grid">
              <KV label="Company" icon="building" value={lead.company} status="verified" />
              <KV label="Industry" icon="db" value={lead.industry} status="verified" />
              <KV label="Headcount" value={lead.size + " employees"} status="verified" mono />
              <KV label="Headquarters" value={lead.hq} status="verified" />
            </div>
          </div>

          <div className="panel-section">
            <div className="panel-section-title">Enrichment timeline<span className="count">4</span></div>
            <div className="timeline">
              <div className="timeline-item dot-accent">
                <span className="ts">{lead.enrichedAt.toUpperCase()} · AGENT</span>
                <b>Refreshed contact info</b> — pulled from {lead.sources.slice(0,2).join(", ")}. {lead.confidence}% confidence.
              </div>
              <div className="timeline-item">
                <span className="ts">12D AGO · AGENT</span>
                Verified email deliverability via Hunter.io — <b>passed</b>.
              </div>
              <div className="timeline-item">
                <span className="ts">21D AGO · AGENT</span>
                Title change detected on LinkedIn (was "Senior Manager, Operations"). Updated.
              </div>
              <div className="timeline-item">
                <span className="ts">38D AGO · IMPORT</span>
                Added to TAM list <b>Manufacturing — North America</b> by Wesley M.
              </div>
            </div>
          </div>

          <div className="panel-section">
            <div className="panel-section-title">Tracking notes</div>
            <div className={"notes-box" + (lead.notes ? "" : " empty")}>
              {lead.notes || "No notes yet. Click to add a tracking note for this lead."}
            </div>
          </div>

          <div className="panel-section">
            <div className="panel-section-title">Sources<span className="count">{lead.sources.length}</span></div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {lead.sources.map((s, i) => (
                <div key={i} style={{ border: "1px solid var(--border)", borderRadius: 4, padding: "4px 9px", fontSize: 11.5, fontFamily: "var(--mono)", color: "var(--fg-2)", background: "var(--surface-2)" }}>{s}</div>
              ))}
            </div>
          </div>
        </div>

        <div className="panel-foot">
          <button className="btn"><Icon name="refresh" />Re-enrich now</button>
          <button className="btn"><Icon name="flag" />Flag stale</button>
          <div style={{ flex: 1 }} />
          <button className="btn-ghost btn">Open in CRM</button>
          <button className="btn btn-primary"><Icon name="check" />Mark reviewed</button>
        </div>
      </aside>
    </>
  );
};

window.LeadPanel = LeadPanel;