// Compare picker — the lineup builder. Used from any politician card and
// from the ballot view to build a comparison of 2+ politicians.

function ComparePicker({ open, anchor, lineup, onChange, onClose, onCompare }) {
  const [query, setQuery] = React.useState("");
  const inputRef = React.useRef(null);
  const allPols = window.CV_DATA.POLITICIANS;
  const lineupIds = lineup.map(p => p.id || p);
  const lineupPols = lineupIds.map(id => allPols[id]).filter(Boolean);

  // Suggestions: opponents in same race → same state → same chamber → rest.
  // We treat the anchor (first politician in the lineup) as the focal point.
  const anchorPol = anchor ? allPols[anchor] : lineupPols[0];

  const suggested = React.useMemo(() => {
    if (!anchorPol) return [];
    const pool = Object.values(allPols)
      .filter(p => !lineupIds.includes(p.id) && p.id !== anchorPol.id);
    // Same state, same office level
    const sameRace = pool.filter(p =>
      p.state === anchorPol.state &&
      (p.district === anchorPol.district || (!p.district && !anchorPol.district))
    );
    const sameState = pool.filter(p => p.state === anchorPol.state && !sameRace.includes(p));
    const sameChamber = pool.filter(p => p.chamber === anchorPol.chamber && !sameRace.includes(p) && !sameState.includes(p));
    return [
      { label: "Opponent / same race", items: sameRace.slice(0, 4) },
      { label: "Same state",           items: sameState.slice(0, 4) },
      { label: "Same chamber",         items: sameChamber.slice(0, 4) },
    ].filter(g => g.items.length > 0);
  }, [anchorPol?.id, lineupIds.join(",")]);

  const searchResults = React.useMemo(() => {
    if (!query.trim()) return [];
    const q = query.trim().toLowerCase();
    return Object.values(allPols)
      .filter(p => !lineupIds.includes(p.id))
      .filter(p =>
        p.name.toLowerCase().includes(q) ||
        (p.state || "").toLowerCase().includes(q) ||
        (p.party || "").toLowerCase().includes(q)
      )
      .slice(0, 6);
  }, [query, lineupIds.join(",")]);

  React.useEffect(() => {
    if (!open) return;
    const esc = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", esc);
    // Focus the search input after a tick
    const t = setTimeout(() => inputRef.current?.focus(), 50);
    return () => { document.removeEventListener("keydown", esc); clearTimeout(t); };
  }, [open, onClose]);

  if (!open) return null;

  const add = (id) => {
    if (lineupIds.includes(id)) return;
    onChange([...lineupIds, id]);
    setQuery("");
  };
  const remove = (id) => onChange(lineupIds.filter(x => x !== id));

  const canCompare = lineupIds.length >= 2;

  return ReactDOM.createPortal(
    <div className="cv-picker-backdrop" onMouseDown={onClose}>
      <div
        className="cv-picker"
        onMouseDown={(e) => e.stopPropagation()}
        role="dialog"
        aria-label="Comparison lineup"
      >
        <header className="cv-picker-hd">
          <div>
            <div className="cv-picker-eyebrow">Comparison lineup</div>
            <div className="cv-picker-title">
              {lineupIds.length === 0
                ? "Pick politicians to compare"
                : `Compare ${lineupIds.length} politician${lineupIds.length === 1 ? "" : "s"}`}
            </div>
          </div>
          <button className="cv-pop-x" onClick={onClose} aria-label="Close">×</button>
        </header>

        <div className="cv-picker-lineup">
          {lineupPols.map((p, i) => (
            <div key={p.id} className="cv-picker-chip">
              <Avatar photo={p.photo} name={p.name} size={28} shape="circle" party={p.party}/>
              <span className="cv-picker-chip-name">{p.short || p.name}</span>
              <PartyTag party={p.party}/>
              <button
                className="cv-picker-chip-x"
                onClick={() => remove(p.id)}
                aria-label={`Remove ${p.name}`}
              >×</button>
            </div>
          ))}
          {lineupIds.length === 0 && (
            <div className="cv-picker-empty">No politicians yet. Pick one below.</div>
          )}
        </div>

        <div className="cv-picker-search">
          <SearchIconLg/>
          <input
            ref={inputRef}
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Add another — search by name, state, or party"
          />
        </div>

        <div className="cv-picker-body">
          {query.trim() ? (
            <div className="cv-picker-group">
              <div className="cv-picker-group-l">Search results</div>
              {searchResults.length === 0 ? (
                <div className="cv-picker-empty">No matches for "{query}".</div>
              ) : (
                searchResults.map(p => <PickerRow key={p.id} pol={p} onAdd={() => add(p.id)}/>)
              )}
            </div>
          ) : (
            suggested.map((g, i) => (
              <div key={i} className="cv-picker-group">
                <div className="cv-picker-group-l">{g.label}</div>
                {g.items.map(p => <PickerRow key={p.id} pol={p} onAdd={() => add(p.id)}/>)}
              </div>
            ))
          )}
        </div>

        <footer className="cv-picker-ft">
          <div className="cv-picker-ft-l">
            {!canCompare && "Pick at least 2 to compare."}
            {canCompare && lineupIds.length === 2 && "Side-by-side comparison."}
            {canCompare && lineupIds.length > 2 && `Spreadsheet view, ${lineupIds.length} columns.`}
          </div>
          <CVButton variant="primary" onClick={() => canCompare && onCompare(lineupIds)}>
            Compare {lineupIds.length || ""} <span aria-hidden="true">→</span>
          </CVButton>
        </footer>
      </div>
    </div>,
    document.body
  );
}

function PickerRow({ pol, onAdd }) {
  const dist = pol.district ? `${pol.state}-${pol.district}` : pol.state;
  return (
    <button type="button" className="cv-picker-row" onClick={onAdd}>
      <Avatar photo={pol.photo} name={pol.name} size={32} shape="circle" party={pol.party}/>
      <span className="cv-picker-row-meta">
        <span className="cv-picker-row-name">{pol.name}</span>
        <span className="cv-picker-row-sub">
          <PartyTag party={pol.party}/>
          {pol.office} · {dist}
        </span>
      </span>
      <span className="cv-picker-row-add" aria-hidden="true">+</span>
    </button>
  );
}

function SearchIconLg() {
  return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.6"/><line x1="11" y1="11" x2="14.5" y2="14.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/></svg>;
}

Object.assign(window, { ComparePicker });