function StageTag({ stageKey }) {
  const s = STAGE_BY_KEY[stageKey];
  if (!s) return null;
  return (
    <span className="cm-tag" style={{ color: s.tintFg, background: s.tintBg, borderColor: s.tintBd }}>
      <span className="cm-tag__dot" style={{ background: s.color }} />{s.label}
    </span>
  );
}

function PipelineCard({ c, onOpen }) {
  return (
    <div className={"cm-card " + (c.overdue ? "is-overdue" : "")} onClick={() => onOpen(c.id)}>
      <div className="cm-card__top">
        <span className="cm-card__name">{c.name}</span>
      </div>
      <div className="cm-card__meta">
        <i data-lucide="map-pin" className="cm-icon-xs"></i>{c.city}
        {c.rating > 0 && (
          <span style={{ marginLeft: "auto", display:"inline-flex", alignItems:"center", gap:4 }}>
            <i data-lucide="star" className="cm-icon-xs" style={{ color:"#f2c94c" }}></i>{c.rating}
          </span>
        )}
      </div>
      {c.siteUrl && (
        <div className="cm-card__meta" style={{ overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
          <i data-lucide="globe" className="cm-icon-xs"></i>
          <span style={{ overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{c.siteUrl}</span>
        </div>
      )}
      <div className={"cm-card__foot " + (c.overdue ? "is-overdue" : "")}>
        {c.overdue ? (
          <><i data-lucide="alert-circle" className="cm-icon-xs"></i>Overdue · {c.nextCall}</>
        ) : c.nextCall ? (
          <><i data-lucide="phone" className="cm-icon-xs"></i>{c.nextCall}</>
        ) : c.deployed ? (
          <><i data-lucide="rocket" className="cm-icon-xs"></i>Deployed {c.deployed}</>
        ) : c.built ? (
          <><i data-lucide="hammer" className="cm-icon-xs"></i>Built {c.built}</>
        ) : (
          <><i data-lucide="clock" className="cm-icon-xs"></i>Awaiting build</>
        )}
        {c.mrr > 0 && <span className="cm-card__mrr">${c.mrr}/mo</span>}
      </div>
    </div>
  );
}

function Pipeline({ onOpenClient, onAddClient, search, onSearch, clients, overdueOnly, pipelineTab, onPipelineTab, stageFilter }) {
  const src = clients || CLIENTS;
  const q = (search || "").toLowerCase().trim();

  function matchesTab(c) {
    if (pipelineTab === "won")     return c.stage === "closed";
    if (pipelineTab === "archive") return c.stage === "archive";
    return c.stage !== "closed" && c.stage !== "archive"; // active: in-progress only
  }

  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 matchesOverdue = !overdueOnly || c.overdue;
    const matchesStageSidebar = !stageFilter || c.stage === stageFilter;
    return matchesQ && matchesOverdue && matchesStageSidebar && matchesTab(c);
  });

  const visibleStages = pipelineTab === "won"
    ? STAGES.filter(s => s.key === "closed")
    : pipelineTab === "archive"
    ? STAGES.filter(s => s.key === "archive")
    : STAGES.filter(s => s.key !== "closed" && s.key !== "archive");

  return (
    <div className="cm-page">
      <div className="cm-bar">
        <div className="cm-bar__l">
          <span className="cm-bar__crumb">Pipeline <span className="cm-bar__crumbSep">/</span> <span className="cm-bar__crumbMuted">Kanban</span></span>
          <div className="cm-bar__tabs">
            {[["active","Active"],["won","Won"],["archive","Archive"]].map(([k,l]) => (
              <span key={k} className={"cm-bar__tab " + (pipelineTab===k?"is-active":"")} onClick={() => onPipelineTab && onPipelineTab(k)}>{l}</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 => onSearch && onSearch(e.target.value)}
            />
            {(search || "").trim() && (
              <span style={{ cursor:"pointer", fontSize:13, color:"var(--color-ink-subtle)" }}
                onClick={() => onSearch && onSearch("")}>✕</span>
            )}
            {!(search || "").trim() && <span className="cm-search__kbd">⌘K</span>}
          </div>
          <button className="cm-btn cm-btn--primary" onClick={onAddClient}>
            <i data-lucide="plus" className="cm-icon-xs"></i>Add client
          </button>
        </div>
      </div>

      {pipelineTab === "archive" && filtered.length === 0 ? (
        <div style={{ display:"flex", alignItems:"center", justifyContent:"center", flex:1, color:"var(--color-ink-subtle)", fontSize:13 }}>
          Archive is empty — move cold leads here via the stage bar in their detail view.
        </div>
      ) : (
        <div className="cm-kanban">
          {visibleStages.map(s => {
            const cards = filtered.filter(c => c.stage === s.key);
            return (
              <div key={s.key} className="cm-col">
                <div className="cm-col__head">
                  <span className="cm-col__dot" style={{ background: s.color }} />
                  <span className="cm-col__name">{s.label}</span>
                  <span className="cm-col__count">{cards.length}</span>
                </div>
                <div className="cm-col__body">
                  {cards.map(c => <PipelineCard key={c.id} c={c} onOpen={onOpenClient} />)}
                  {cards.length === 0 && (
                    <div style={{ padding: "20px 12px", textAlign: "center", color: "var(--color-ink-tertiary)", fontSize: 12 }}>
                      {q || stageFilter ? "No results" : "Empty"}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}
window.Pipeline = Pipeline;
window.StageTag = StageTag;