// SignalsView.jsx — the signature dense-list page with left filter rail, AI Top Picks card,
// and expandable rows that mirror the FocusSignal rich detail.

const { useState: useStateSV, useMemo: useMemoSV } = React;

const SEVERITY_LABEL = { critical: "Critical", high: "High", medium: "Medium", low: "Low" };
const CATEGORY_LABEL = { risk: "Risk", upsell: "Upsell", crosssell: "Cross-sell", action: "Action" };

function SignalsView({ onOpenAccount, onAskAI }) {
  const { SIGNALS, ACCOUNTS } = window.GT_DATA;
  const [severity, setSeverity] = useStateSV("all");
  const [category, setCategory] = useStateSV("all");
  const [expandedId, setExpandedId] = useStateSV("s1");
  const [selected, setSelected] = useStateSV(new Set());
  const [dismissedIds, setDismissedIds] = useStateSV(new Set());

  const accountById = useMemoSV(() => {
    const m = {};
    ACCOUNTS.forEach(a => { m[a.id] = a; });
    return m;
  }, [ACCOUNTS]);

  const visibleSignals = SIGNALS.filter(s => {
    if (dismissedIds.has(s.id)) return false;
    if (severity !== "all" && s.severity !== severity) return false;
    if (category !== "all" && s.category !== category) return false;
    return true;
  });

  const sevCounts = useMemoSV(() => {
    const m = {};
    SIGNALS.forEach(s => { if (!dismissedIds.has(s.id)) m[s.severity] = (m[s.severity] || 0) + 1; });
    return m;
  }, [SIGNALS, dismissedIds]);

  const catCounts = useMemoSV(() => {
    const m = {};
    SIGNALS.forEach(s => { if (!dismissedIds.has(s.id)) m[s.category] = (m[s.category] || 0) + 1; });
    return m;
  }, [SIGNALS, dismissedIds]);

  const topPicks = visibleSignals.slice(0, 3);

  function toggleSel(id) {
    const next = new Set(selected);
    next.has(id) ? next.delete(id) : next.add(id);
    setSelected(next);
  }

  function dismiss(id) {
    const next = new Set(dismissedIds);
    next.add(id);
    setDismissedIds(next);
    if (expandedId === id) setExpandedId(null);
  }

  return (
    <div className="page-enter" style={{ display: "flex", gap: 20 }}>
      <FilterRail
        severity={severity} setSeverity={setSeverity}
        category={category} setCategory={setCategory}
        sevCounts={sevCounts} catCounts={catCounts}
        totalCount={SIGNALS.length - dismissedIds.size}
      />

      <div className="flex-1" style={{ minWidth: 0 }}>
        <div className="row gap-3 mb-4">
          <div>
            <h1 className="h1">Signals</h1>
            <div className="text-xs muted">
              <span style={{ color: "var(--foreground)", fontWeight: 500 }} className="num">{visibleSignals.length}</span>
              <span> of {SIGNALS.length - dismissedIds.size}</span>
            </div>
          </div>
          <span className="spacer" />
          <Input icon="search" placeholder="Search signals…" />
          <Button variant="outline" size="sm">
            <Icon name="layoutList" size={12} /> List
          </Button>
        </div>

        {/* AI Top Picks */}
        {topPicks.length > 0 && (
          <div className="top-picks">
            <div className="tp-head">
              <Icon name="sparkles" size={16} />
              <span className="title">AI Top Picks</span>
              <span className="count">{topPicks.length} of {visibleSignals.length}</span>
            </div>
            <div className="tp-subhead">Three signals worth your morning</div>
            {topPicks.map(s => {
              const acct = accountById[s.accountId];
              return (
                <div key={s.id} className="tp-item" onClick={() => setExpandedId(s.id)}>
                  <SevDot severity={s.severity} />
                  <span className="acct">{acct.name}</span>
                  <span className="stub">— {s.headline.toLowerCase()}{s.due ? `, ${s.due.toLowerCase()}` : ""}</span>
                  <span className="amt num">{fmtCurrency(s.amount)}</span>
                </div>
              );
            })}
          </div>
        )}

        <div className="label mb-2" style={{ paddingLeft: 4 }}>All signals</div>

        <div className="card list-card stagger">
          {visibleSignals.length === 0 && (
            <div style={{ padding: 48, textAlign: "center" }} className="muted">
              <Icon name="check" size={36} className="mb-3" />
              <div className="h3">All clear</div>
              <div className="text-sm mt-2">No signals match these filters. Clear a filter or check back later.</div>
            </div>
          )}
          {visibleSignals.map(s => (
            <SignalRow
              key={s.id}
              signal={s}
              account={accountById[s.accountId]}
              selected={selected.has(s.id)}
              expanded={expandedId === s.id}
              onToggleSel={() => toggleSel(s.id)}
              onToggleExp={() => setExpandedId(expandedId === s.id ? null : s.id)}
              onOpenAccount={() => onOpenAccount(s.accountId)}
              onAskAI={() => onAskAI(s)}
              onDismiss={() => dismiss(s.id)}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

/* -----------------------------------------------------------------
 * Left filter rail
 * ----------------------------------------------------------------- */
function FilterRail({ severity, setSeverity, category, setCategory, sevCounts, catCounts, totalCount }) {
  return (
    <aside className="filter-rail">
      <div className="rail-section">
        <div className="rail-title">Severity</div>
        <RailItem active={severity === "all"} label="All" count={totalCount}
                  onClick={() => setSeverity("all")} dot={null} />
        {["critical", "high", "medium", "low"].map(sev => (
          <RailItem
            key={sev}
            active={severity === sev}
            label={SEVERITY_LABEL[sev]}
            count={sevCounts[sev] || 0}
            onClick={() => setSeverity(sev)}
            dotColor={`var(--severity-${sev === "at_risk" ? "critical" : sev})`}
          />
        ))}
      </div>
      <div className="rail-section">
        <div className="rail-title">Category</div>
        <RailItem active={category === "all"} label="All" count={totalCount}
                  onClick={() => setCategory("all")} dot={null} />
        {["risk", "upsell", "crosssell", "action"].map(cat => (
          <RailItem
            key={cat}
            active={category === cat}
            label={CATEGORY_LABEL[cat]}
            count={catCounts[cat] || 0}
            onClick={() => setCategory(cat)}
            dotColor={`var(--signal-${cat})`}
          />
        ))}
      </div>
      <div className="rail-section">
        <div className="rail-title">Saved views</div>
        <div className="rail-item">
          <Icon name="sparkles" size={11} />
          <span>My morning queue</span>
        </div>
        <div className="rail-item">
          <Icon name="alertTri" size={11} />
          <span>Renewals at risk</span>
        </div>
      </div>
    </aside>
  );
}

function RailItem({ active, label, count, onClick, dotColor }) {
  return (
    <div className={`rail-item ${active ? "active" : ""}`} onClick={onClick}>
      {dotColor && <span className="ico" style={{ background: dotColor }} />}
      <span>{label}</span>
      <span className="rail-count num">{count}</span>
    </div>
  );
}

/* -----------------------------------------------------------------
 * Dense row (collapsed + expanded)
 * ----------------------------------------------------------------- */
function SignalRow({ signal, account, selected, expanded, onToggleSel, onToggleExp, onOpenAccount, onAskAI, onDismiss }) {
  return (
    <React.Fragment>
      <div
        className={`dense-row ${selected ? "selected" : ""} ${expanded ? "expanded" : ""}`}
        onClick={onToggleExp}
      >
        <div className="checkbox-wrap" onClick={(e) => { e.stopPropagation(); }}>
          <Checkbox checked={selected} onChange={onToggleSel} />
        </div>
        <SevDot severity={signal.severity} pulse={signal.severity === "critical"} />
        <div className="headline">
          <span className="headline-text">{signal.headline}</span>
          <sup className="headline-cat" style={{ color: `var(--signal-${signal.category})` }}>
            {CATEGORY_LABEL[signal.category]}
          </sup>
          <span className="headline-sep">·</span>
          <span className="headline-acct">{account.name}</span>
        </div>
        {signal.due && <span className="meta-time">{signal.due}</span>}
        <span className="meta-amt num">{fmtCurrency(signal.amount)}</span>
        <span className="chev">
          <Icon name={expanded ? "chevronUp" : "chevronDown"} size={14} />
        </span>
        <Button size="sm" variant="primary" onClick={(e) => { e.stopPropagation(); onAskAI(signal); }}>
          <Icon name={signal.verbIcon || "send"} size={13} />
          <span>{signal.verbLabel || "Take action"}</span>
        </Button>
      </div>

      {expanded && (
        <div className="signal-expand">
          <div className="meta-row">
            <Pill category={signal.category} />
            {signal.due && (
              <span style={{
                fontSize: 10.5, fontWeight: 600,
                textTransform: "uppercase", letterSpacing: "0.1em",
                color: "var(--signal-risk)"
              }}>{signal.due}</span>
            )}
            <span className="muted text-xs">Updated {signal.updated}</span>
          </div>
          <h3>{signal.headline}</h3>
          <div className="acct-line">
            <Icon name="building" size={12} /> <span>{account.name}</span>
            <span>·</span>
            <span>{signal.contact}, {signal.contactRole}</span>
            <span>·</span>
            <span className="num">{fmtCurrency(signal.amount)}</span>
          </div>

          <div className="why">
            <Icon name="sparkles" size={16} />
            <div className="why-text">{signal.why}</div>
          </div>

          <div className="section-label">Recommended next step</div>
          <p style={{ margin: 0 }}>{signal.recommended}</p>

          <div className="section-label">Evidence</div>
          <ul className="evidence-list">
            {signal.evidence.map((e, i) => (
              <li key={i}>
                <Icon name={e.ic} size={13} />
                <span>{e.t}</span>
              </li>
            ))}
          </ul>

          <div className="actions-row">
            <Button onClick={() => onAskAI(signal)}>
              <Icon name={signal.verbIcon || "send"} size={13} />
              {signal.verbLabel}
            </Button>
            <Button variant="ai" onClick={() => onAskAI(signal)}>
              <Icon name="sparkles" size={13} /> Ask AI
            </Button>
            <Button variant="outline" onClick={onOpenAccount}>
              <Icon name="building" size={13} /> View account
            </Button>
            <span className="spacer" />
            <Button variant="ghost" size="sm">
              <Icon name="clock" size={12} /> Snooze
            </Button>
            <Button variant="ghost" size="sm" onClick={onDismiss}>
              <Icon name="x" size={12} /> Not relevant
            </Button>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

window.SignalsView = SignalsView;
window.SignalRow = SignalRow;
window.GT_CATEGORY_LABEL = CATEGORY_LABEL;