/* ─── Pages (window-scoped) ─────────────────── */

/* ─── ItemCard ─────────────────────────────────────────────── */
function ItemCard({ item, onClick, catMeta = CAT_META, feedback, onFeedback }) {
  const cat = catMeta[item.category];
  return (
    <div className={`rd-item${item.isNew ? " new-item" : ""}`} onClick={() => onClick(item)} data-screen-label={`Insight ${item.id}`}>
      <div className="rd-item-meta">
        <span className="rd-item-source" style={{ backgroundColor: item.sourceColor + "18", borderColor: item.sourceColor + "40", color: item.sourceColor }}>
          {item.source}
        </span>
        <span className="rd-item-cat" style={{ color: cat?.color, background: cat?.color + "12", padding: "3px 7px", borderRadius: 4 }}>
          {cat?.label || item.category}
        </span>
        {item.competitor && (
          <span className="rd-tag neutral" style={{ background: "rgba(200,35,30,0.08)", color: "var(--competitors)", borderColor: "rgba(200,35,30,0.22)" }}>
            <Icon name="swords" size={9} /> {item.competitor}
          </span>
        )}
        {item.isNew && <span className="rd-new-badge">NOVO</span>}
        {feedback === "relevant" && (
          <span className="rd-fb-flag up"><Icon name="brain" size={10} strokeWidth={2.4} /> Aprendendo</span>
        )}
        {feedback === "irrelevant" && (
          <span className="rd-fb-flag down"><Icon name="thumb-down" size={10} strokeWidth={2.4} /> Ruído</span>
        )}
        <span className={`rd-relevance-pill ${relScore(item.relevance)}`}>{item.relevance}%</span>
        <span className="rd-item-date">{relDate(item.publishedAt)}</span>
        {onFeedback && (
          <FeedbackButtons
            feedback={feedback}
            onChange={(v) => onFeedback(item.id, v)}
            persistent={!!feedback}
          />
        )}
      </div>
      <div className="rd-item-title">{item.title}</div>
      {item.description && <div className="rd-item-desc">{item.description}</div>}
      {item.tags && item.tags.length > 0 && (
        <div className="rd-item-tags">
          {item.tags.slice(0, 4).map(t => <span key={t} className="rd-tag">#{t}</span>)}
          {item.tags.length > 4 && <span className="rd-tag">+{item.tags.length - 4}</span>}
        </div>
      )}
    </div>
  );
}

/* ─── Dashboard Page ─────────────────────────────────────────────── */
function DashboardPage({ insights, category, searchQuery, setSearchQuery, onOpen, onRefresh, refreshing, workspace, catMeta = CAT_META, feedback = {}, onFeedback }) {
  const filtered = insights.filter(item => {
    if (category && category !== "all" && item.category !== category) return false;
    if (searchQuery && !`${item.title} ${item.description}`.toLowerCase().includes(searchQuery.toLowerCase())) return false;
    return true;
  });
  const new24h = insights.filter(i => Date.now() - new Date(i.fetchedAt).getTime() < 24 * 3600000).length;

  return (
    <div className="rd-page" data-screen-label="Dashboard">
      <div className="rd-stats-strip">
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Total ativo</span>
          <span className="rd-stat-value brand">{insights.length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Novos 24h</span>
          <span className="rd-stat-value brand">
            {new24h}
            <span className="delta up">+{Math.floor(new24h * 0.6)}</span>
          </span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Concorrentes</span>
          <span className="rd-stat-value comp">{insights.filter(i => i.category === "competitors").length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Mercado</span>
          <span className="rd-stat-value mkt">{insights.filter(i => i.category === "market").length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">{catMeta.vertical?.label || "Vertical"}</span>
          <span className="rd-stat-value port" style={{ color: catMeta.vertical?.color }}>{insights.filter(i => i.category === "vertical").length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Eventos</span>
          <span className="rd-stat-value evt">{insights.filter(i => i.category === "eventos").length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Alta relevância</span>
          <span className="rd-stat-value" style={{ color: "var(--success)" }}>
            {insights.filter(i => i.relevance >= 80).length}
          </span>
        </div>
      </div>

      <div className="rd-feed-toolbar">
        <span className="rd-tag neutral">
          <span className="radar-pulse" style={{ width: 8, height: 8 }}><span className="radar-dot" /></span>
          Última coleta: agora
        </span>
        <span style={{ fontSize: 12, color: "var(--ink-3)" }}>
          Ordenado por <strong style={{ color: "var(--ink-1)" }}>relevância × recência</strong>
        </span>
        <div className="grow" />
        <button className="rd-btn sm">
          <Icon name="filter" size={12} /> Filtros
        </button>
        <button className="rd-btn sm">
          <Icon name="download" size={12} /> Exportar
        </button>
      </div>

      <div className="rd-feed">
        {filtered.length === 0 ? (
          <div className="rd-empty">
            <div className="icon"><Icon name="radar" size={56} strokeWidth={1.2} /></div>
            <div className="title">Nada por aqui ainda</div>
            <div className="desc">Ajuste os filtros ou crie um novo trigger para começar a rastrear.</div>
          </div>
        ) : (
          filtered
            .sort((a, b) => (b.relevance - a.relevance) || (b.publishedAt - a.publishedAt))
            .map(item => <ItemCard key={item.id} item={item} onClick={onOpen} catMeta={catMeta} feedback={feedback[item.id]} onFeedback={onFeedback} />)
        )}
      </div>
    </div>
  );
}

/* ─── Triggers Page ─────────────────────────────────────────────── */
function TriggerCard({ trigger, onEdit, onToggle, onRun, onDuplicate, onDelete, catMeta = CAT_META }) {
  const cat = catMeta[trigger.category];
  const totalTerms = (trigger.keywords?.length || 0) + (trigger.competitors?.length || 0);

  return (
    <div className={`rd-trigger-card${trigger.enabled ? "" : " paused"}`}>
      <div className="rd-trigger-card-head">
        <div className="rd-trigger-card-icon" style={{ background: cat?.color || "var(--brand)" }}>
          <Icon name={cat?.icon || "radar"} size={16} strokeWidth={2.2} />
        </div>
        <div className="rd-trigger-card-title">
          <div className="rd-trigger-card-name">{trigger.name}</div>
          <div className="rd-trigger-card-desc">{trigger.description}</div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Toggle on={trigger.enabled} onChange={() => onToggle(trigger.id)} />
        </div>
      </div>

      <div className="rd-trigger-tags">
        {trigger.competitors?.slice(0, 4).map(c => (
          <span key={c} className="rd-chip comp" style={{ padding: "3px 9px", fontSize: 11 }}>
            <Icon name="swords" size={9} /> {c}
          </span>
        ))}
        {trigger.competitors?.length > 4 && (
          <span className="rd-chip neutral" style={{ padding: "3px 9px", fontSize: 11 }}>+{trigger.competitors.length - 4}</span>
        )}
        {trigger.products?.slice(0, 4).map(p => (
          <span key={p} className="rd-chip" style={{ padding: "3px 9px", fontSize: 11, background: "rgba(236, 72, 153, 0.1)", color: "#EC4899", borderColor: "rgba(236, 72, 153, 0.3)" }}>
            <Icon name="package" size={9} /> {p}
          </span>
        ))}
        {trigger.products?.length > 4 && (
          <span className="rd-chip neutral" style={{ padding: "3px 9px", fontSize: 11 }}>+{trigger.products.length - 4} produtos</span>
        )}
        {trigger.keywords?.slice(0, 3).map(k => (
          <span key={k} className="rd-chip" style={{ padding: "3px 9px", fontSize: 11 }}>#{k}</span>
        ))}
        {trigger.keywords?.length > 3 && (
          <span className="rd-chip neutral" style={{ padding: "3px 9px", fontSize: 11 }}>+{trigger.keywords.length - 3} keywords</span>
        )}
      </div>

      <div className="rd-trigger-card-stats">
        <div className="rd-trigger-card-stat">
          <div className="lbl">Frequência</div>
          <div className="val sm">{FREQ_LABEL[trigger.frequency]}</div>
        </div>
        <div className="rd-trigger-card-stat">
          <div className="lbl">Fontes</div>
          <div className="val">{trigger.sources?.length || 0}</div>
        </div>
        <div className="rd-trigger-card-stat">
          <div className="lbl">Insights / 24h</div>
          <div className="val" style={{ color: "var(--brand)" }}>{trigger.insights24h}</div>
        </div>
        <div className="rd-trigger-card-stat">
          <div className="lbl">Total</div>
          <div className="val">{trigger.totalInsights}</div>
        </div>
        <div className="rd-trigger-card-stat">
          <div className="lbl">{trigger.enabled ? "Última coleta" : "Pausado em"}</div>
          <div className="val sm">{relDate(trigger.lastRun)}</div>
        </div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 6, alignItems: "flex-end" }}>
          <button className="rd-btn sm" onClick={() => onRun(trigger.id)} disabled={!trigger.enabled}>
            <Icon name="play" size={11} /> Executar
          </button>
          <button className="rd-btn sm" onClick={() => onEdit(trigger)}>
            <Icon name="edit" size={11} /> Editar
          </button>
          <button className="rd-btn ghost sm icon" onClick={() => onDuplicate(trigger.id)} title="Duplicar">
            <Icon name="copy" size={11} />
          </button>
          <button className="rd-btn ghost sm icon" onClick={() => onDelete(trigger.id)} title="Excluir">
            <Icon name="trash" size={11} color="var(--danger)" />
          </button>
        </div>
      </div>
    </div>
  );
}

function TriggersPage({ triggers, onEdit, onToggle, onRun, onDuplicate, onDelete, onNew, workspace, catMeta = CAT_META }) {
  const active = triggers.filter(t => t.enabled);
  const paused = triggers.filter(t => !t.enabled);

  return (
    <div className="rd-page" data-screen-label="Triggers">
      <div className="rd-stats-strip">
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Total</span>
          <span className="rd-stat-value brand">{triggers.length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Ativos</span>
          <span className="rd-stat-value" style={{ color: "var(--success)" }}>{active.length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Pausados</span>
          <span className="rd-stat-value" style={{ color: "var(--ink-3)" }}>{paused.length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Concorrentes únicos</span>
          <span className="rd-stat-value comp">
            {new Set(triggers.flatMap(t => t.competitors || [])).size}
          </span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Insights coletados (24h)</span>
          <span className="rd-stat-value brand">
            {triggers.reduce((sum, t) => sum + t.insights24h, 0)}
          </span>
        </div>
      </div>

      <div className="rd-feed-toolbar">
        <div style={{ fontSize: 12, color: "var(--ink-2)" }}>
          O agente está monitorando ativamente {active.length} triggers
        </div>
        <div className="grow" />
        <button className="rd-btn primary" onClick={onNew}>
          <Icon name="plus" size={13} strokeWidth={2.4} />
          Novo trigger
        </button>
      </div>

      <div className="rd-feed">
        {active.length > 0 && (
          <>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", margin: "4px 0 4px", fontFamily: "var(--font-mono)", display: "flex", alignItems: "center", gap: 8 }}>
              <span className="radar-pulse" style={{ width: 8, height: 8 }}><span className="radar-dot" /></span>
              Ativos ({active.length})
            </div>
            {active.map(t => (
              <TriggerCard key={t.id} trigger={t} catMeta={catMeta}
                onEdit={onEdit} onToggle={onToggle} onRun={onRun}
                onDuplicate={onDuplicate} onDelete={onDelete} />
            ))}
          </>
        )}
        {paused.length > 0 && (
          <>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", margin: "12px 0 4px", fontFamily: "var(--font-mono)" }}>
              Pausados ({paused.length})
            </div>
            {paused.map(t => (
              <TriggerCard key={t.id} trigger={t} catMeta={catMeta}
                onEdit={onEdit} onToggle={onToggle} onRun={onRun}
                onDuplicate={onDuplicate} onDelete={onDelete} />
            ))}
          </>
        )}
      </div>
    </div>
  );
}

/* ─── Search Page ─────────────────────────────────────────────── */
function SearchPage({ insights, onOpen, catMeta = CAT_META, feedback = {}, onFeedback }) {
  const [q, setQ] = useState("");
  const [cats, setCats] = useState({ competitors: true, market: true, vertical: true, eventos: true, tech: true, regulatory: true });
  const [sources, setSources] = useState({});
  const [period, setPeriod] = useState("30d");
  const [minRel, setMinRel] = useState(40);
  const [sort, setSort] = useState("relevance");

  const periodMs = { "24h": 86400000, "7d": 7*86400000, "30d": 30*86400000, "all": Infinity }[period];
  const sourceList = Array.from(new Set(insights.map(i => i.source)));

  const results = useMemo(() => {
    let r = insights.filter(i => {
      if (!cats[i.category]) return false;
      if (Object.keys(sources).length > 0 && Object.values(sources).some(Boolean)) {
        if (!sources[i.source]) return false;
      }
      if (i.relevance < minRel) return false;
      if (Date.now() - new Date(i.publishedAt).getTime() > periodMs) return false;
      if (q && !`${i.title} ${i.description} ${(i.tags||[]).join(" ")}`.toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
    if (sort === "relevance") r.sort((a, b) => b.relevance - a.relevance);
    if (sort === "date") r.sort((a, b) => b.publishedAt - a.publishedAt);
    if (sort === "mentions") r.sort((a, b) => (b.mentions||0) - (a.mentions||0));
    return r;
  }, [insights, q, cats, sources, period, minRel, sort]);

  return (
    <div className="rd-page" data-screen-label="Search" style={{ overflow: "hidden", flex: 1 }}>
      <div className="rd-search-layout">
        <aside className="rd-filters">
          <div className="rd-filter-group">
            <div className="rd-filter-head">
              <Icon name="search" size={11} style={{ marginRight: 6 }}/>
              Termo de busca
            </div>
            <div className="rd-search" style={{ width: "auto" }}>
              <Icon name="search" size={13} />
              <input
                placeholder="ex: funding, Coursera…"
                value={q}
                onChange={(e) => setQ(e.target.value)}
              />
            </div>
          </div>

          <div className="rd-filter-group">
            <div className="rd-filter-head">Categoria</div>
            {Object.entries(catMeta).filter(([k]) => k !== "all").map(([k, m]) => (
              <Checkbox
                key={k}
                checked={!!cats[k]}
                onChange={(v) => setCats({ ...cats, [k]: v })}
                label={
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 50, background: m.color, display: "inline-block" }} />
                    {m.label}
                  </span>
                }
                count={insights.filter(i => i.category === k).length}
              />
            ))}
          </div>

          <div className="rd-filter-group">
            <div className="rd-filter-head">Período</div>
            <Segmented
              wide
              value={period}
              onChange={setPeriod}
              options={[
                { value: "24h", label: "24h" },
                { value: "7d",  label: "7d" },
                { value: "30d", label: "30d" },
                { value: "all", label: "Tudo" }
              ]}
            />
          </div>

          <div className="rd-filter-group">
            <div className="rd-filter-head">Fonte</div>
            {sourceList.map(s => (
              <Checkbox
                key={s}
                checked={!!sources[s]}
                onChange={(v) => setSources({ ...sources, [s]: v })}
                label={s}
                count={insights.filter(i => i.source === s).length}
              />
            ))}
          </div>

          <div className="rd-filter-group">
            <div className="rd-filter-head">Relevância mínima</div>
            <Slider value={minRel} onChange={setMinRel} />
          </div>

          <div className="rd-filter-group">
            <div className="rd-filter-head">Ordenar</div>
            <Segmented
              wide
              value={sort}
              onChange={setSort}
              options={[
                { value: "relevance", label: "Relevância" },
                { value: "date",      label: "Data" },
                { value: "mentions",  label: "Volume" }
              ]}
            />
          </div>
        </aside>

        <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
          <div className="rd-feed-toolbar" style={{ marginTop: 18 }}>
            <div style={{ fontSize: 13, color: "var(--ink-1)" }}>
              <strong style={{ color: "var(--ink-0)", fontSize: 14 }}>{results.length}</strong> resultados
              {q && <span style={{ color: "var(--ink-3)" }}> · busca por <strong style={{ color: "var(--brand)" }}>"{q}"</strong></span>}
            </div>
            <div className="grow"/>
            <button className="rd-btn sm">
              <Icon name="bookmark" size={11}/> Salvar busca
            </button>
            <button className="rd-btn sm">
              <Icon name="download" size={11}/> Exportar CSV
            </button>
          </div>
          <div className="rd-feed" style={{ flex: 1, overflowY: "auto" }}>
            {results.length === 0 ? (
              <div className="rd-empty">
                <div className="icon"><Icon name="search" size={48} strokeWidth={1.2}/></div>
                <div className="title">Sem resultados</div>
                <div className="desc">Ajuste os filtros — diminua a relevância mínima, amplie o período ou tire categorias.</div>
              </div>
            ) : results.map(i => <ItemCard key={i.id} item={i} onClick={onOpen} catMeta={catMeta} feedback={feedback[i.id]} onFeedback={onFeedback} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── Reports Page ─────────────────────────────────────────────── */
function VolumeChart({ insights }) {
  // Volume per day, last 14 days, by category
  const days14 = Array.from({ length: 14 }, (_, i) => {
    const d = new Date();
    d.setDate(d.getDate() - (13 - i));
    d.setHours(0, 0, 0, 0);
    return d;
  });
  const seed = (s) => { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return () => { h = (h * 1664525 + 1013904223) >>> 0; return (h >>> 0) / 4294967296; }; };
  const cats = ["competitors", "market", "vertical", "eventos", "tech", "regulatory"];
  const rand = seed("vol");
  const data = days14.map((d, i) => {
    return {
      date: d,
      values: cats.map(c => Math.floor(rand() * 18) + (c === "competitors" ? 6 : 2) + (i > 9 ? 5 : 0))
    };
  });
  const max = Math.max(...data.map(d => d.values.reduce((a, b) => a + b, 0))) * 1.2;
  const W = 520, H = 200, PAD = 28;
  const xScale = (i) => PAD + (i / (data.length - 1)) * (W - PAD * 2);
  const yScale = (v) => H - PAD - (v / max) * (H - PAD * 2);

  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: 240 }}>
      <defs>
        <linearGradient id="volGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1A56DB" stopOpacity="0.3"/>
          <stop offset="100%" stopColor="#1A56DB" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0, 0.25, 0.5, 0.75, 1].map(p => (
        <g key={p}>
          <line x1={PAD} x2={W - PAD} y1={yScale(max * p)} y2={yScale(max * p)} stroke="#E8EDF4" strokeDasharray="2 4"/>
          <text x={PAD - 6} y={yScale(max * p) + 4} fontSize="9" fill="#8FA3B4" textAnchor="end" fontFamily="var(--font-mono)" fontWeight="600">{Math.round(max * p)}</text>
        </g>
      ))}
      {/* Area for total */}
      <path
        d={`M ${xScale(0)} ${H - PAD} ` + data.map((d, i) => `L ${xScale(i)} ${yScale(d.values.reduce((a, b) => a + b, 0))}`).join(" ") + ` L ${xScale(data.length - 1)} ${H - PAD} Z`}
        fill="url(#volGrad)"
      />
      <path
        d={data.map((d, i) => `${i === 0 ? "M" : "L"} ${xScale(i)} ${yScale(d.values.reduce((a, b) => a + b, 0))}`).join(" ")}
        fill="none" stroke="#1A56DB" strokeWidth="2"
      />
      {data.map((d, i) => (
        <circle key={i} cx={xScale(i)} cy={yScale(d.values.reduce((a, b) => a + b, 0))} r={i === data.length - 1 ? 4 : 2.5} fill="#1A56DB" stroke="white" strokeWidth="2" />
      ))}
      {data.map((d, i) => (i % 2 === 0) && (
        <text key={i} x={xScale(i)} y={H - 8} fontSize="9" fill="#8FA3B4" textAnchor="middle" fontFamily="var(--font-mono)" fontWeight="600">
          {d.date.toLocaleDateString("pt-BR", { day: "2-digit", month: "short" })}
        </text>
      ))}
    </svg>
  );
}

function CategoryDonut({ insights, catMeta = CAT_META }) {
  const cats = ["competitors", "market", "vertical", "eventos", "tech", "regulatory"];
  const counts = cats.map(c => insights.filter(i => i.category === c).length).map(n => n || Math.floor(Math.random() * 12) + 4);
  const total = counts.reduce((a, b) => a + b, 0);
  let cum = 0;
  const R = 70, IR = 46, CX = 100, CY = 100;
  const slices = cats.map((c, i) => {
    const start = (cum / total) * Math.PI * 2 - Math.PI / 2;
    cum += counts[i];
    const end = (cum / total) * Math.PI * 2 - Math.PI / 2;
    const large = (end - start) > Math.PI ? 1 : 0;
    const x1 = CX + Math.cos(start) * R, y1 = CY + Math.sin(start) * R;
    const x2 = CX + Math.cos(end) * R, y2 = CY + Math.sin(end) * R;
    const x3 = CX + Math.cos(end) * IR, y3 = CY + Math.sin(end) * IR;
    const x4 = CX + Math.cos(start) * IR, y4 = CY + Math.sin(start) * IR;
    return { d: `M ${x1} ${y1} A ${R} ${R} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${IR} ${IR} 0 ${large} 0 ${x4} ${y4} Z`, color: catMeta[c]?.color || "#999", count: counts[i], label: catMeta[c]?.label || c };
  });
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
      <svg viewBox="0 0 200 200" style={{ width: 180, height: 180, flexShrink: 0 }}>
        {slices.map((s, i) => <path key={i} d={s.d} fill={s.color}/>)}
        <text x="100" y="96" textAnchor="middle" fontSize="22" fontWeight="800" fill="#0D1B2A">{total}</text>
        <text x="100" y="114" textAnchor="middle" fontSize="9" fill="#8FA3B4" fontFamily="var(--font-mono)" fontWeight="700" letterSpacing="0.15em">INSIGHTS</text>
      </svg>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7 }}>
        {slices.map((s, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
            <span style={{ width: 10, height: 10, borderRadius: 3, background: s.color, flexShrink: 0 }}/>
            <span style={{ color: "var(--ink-1)", flex: 1 }}>{s.label}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, color: "var(--ink-0)" }}>{s.count}</span>
            <span style={{ fontFamily: "var(--font-mono)", color: "var(--ink-3)", fontSize: 11, minWidth: 36, textAlign: "right" }}>{((s.count / total) * 100).toFixed(0)}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ReportsPage({ insights, catMeta = CAT_META }) {
  const competitorMentions = useMemo(() => {
    const counts = {};
    insights.forEach(i => { if (i.competitor) counts[i.competitor] = (counts[i.competitor] || 0) + (i.mentions || 1); });
    // pad with mock if light
    if (Object.keys(counts).length < 5) {
      const pad = { "Alura": 18, "Coursera": 14, "Docebo": 22, "Udemy": 11, "Cornerstone": 9, "edX": 6 };
      Object.entries(pad).forEach(([k, v]) => counts[k] = (counts[k] || 0) + v);
    }
    return Object.entries(counts).sort((a, b) => b[1] - a[1]);
  }, [insights]);
  const maxComp = competitorMentions[0]?.[1] || 1;

  const trending = [
    { name: "Funding round em ed-tech", val: "+156%" },
    { name: "Agentic AI in learning",  val: "+92%"  },
    { name: "Skill-based hiring",      val: "+78%"  },
    { name: "AI literacy programs",    val: "+64%"  },
    { name: "LXP marketplace",         val: "+45%"  },
    { name: "Microlearning ROI",       val: "+22%"  },
    { name: "MOOC enrollment",         val: "-18%"  }
  ];

  return (
    <div className="rd-page" data-screen-label="Reports">
      <div className="rd-feed-toolbar" style={{ marginTop: 16 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>Período:</span>
          <Segmented
            value="30d"
            onChange={() => {}}
            options={[
              { value: "7d",  label: "7 dias"  },
              { value: "30d", label: "30 dias" },
              { value: "90d", label: "90 dias" }
            ]}
          />
        </div>
        <div className="grow"/>
        <button className="rd-btn sm"><Icon name="share" size={11}/> Compartilhar</button>
        <button className="rd-btn sm"><Icon name="download" size={11}/> Exportar PDF</button>
      </div>

      <div className="rd-grid-2">
        <div className="rd-card">
          <div className="rd-card-title">
            <Icon name="trending" size={13} color="var(--brand)"/>
            Volume de insights por dia
            <span className="sub">últimos 14 dias</span>
          </div>
          <VolumeChart insights={insights}/>
        </div>
        <div className="rd-card">
          <div className="rd-card-title">
            <Icon name="filter" size={13} color="var(--brand)"/>
            Distribuição por categoria
          </div>
          <CategoryDonut insights={insights} catMeta={catMeta}/>
        </div>
      </div>

      <div className="rd-grid-3">
        <div className="rd-card">
          <div className="rd-card-title">
            <Icon name="swords" size={13} color="var(--competitors)"/>
            Concorrentes mais mencionados
          </div>
          {competitorMentions.slice(0, 7).map(([name, count], i) => (
            <div key={name} style={{ marginBottom: 8 }}>
              <div className="rd-rank-row" style={{ paddingBottom: 4, borderBottom: "none" }}>
                <span className="num">#{i+1}</span>
                <span className="name">{name}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: "var(--ink-2)" }}>{count}</span>
              </div>
              <div className="rd-rank-bar"><div className="fill" style={{ width: `${(count/maxComp)*100}%`, background: "var(--competitors)" }}/></div>
            </div>
          ))}
        </div>

        <div className="rd-card">
          <div className="rd-card-title">
            <Icon name="sparkles" size={13} color="var(--brand)"/>
            Tendências em alta
          </div>
          {trending.map((t, i) => (
            <div key={t.name} className="rd-rank-row">
              <span className="num">#{i+1}</span>
              <span className="name">{t.name}</span>
              <span className={`pct ${t.val.startsWith("+") ? "up" : "down"}`}>{t.val}</span>
            </div>
          ))}
        </div>

        <div className="rd-card">
          <div className="rd-card-title">
            <Icon name="globe" size={13} color="var(--market)"/>
            Performance por fonte
          </div>
          {[
            ["Google News", 142, "#4285F4"],
            ["LinkedIn",     98, "#0A66C2"],
            ["Crunchbase",   45, "#146AFF"],
            ["Gartner",      34, "#E76F00"],
            ["Eventbrite",   22, "#F05537"],
            ["Reddit",       18, "#FF4500"]
          ].map(([name, count, color], i) => (
            <div key={name} style={{ marginBottom: 8 }}>
              <div className="rd-rank-row" style={{ paddingBottom: 4, borderBottom: "none" }}>
                <span style={{ width: 10, height: 10, borderRadius: 3, background: color, flexShrink: 0 }}/>
                <span className="name" style={{ marginLeft: 4 }}>{name}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: "var(--ink-2)" }}>{count}</span>
              </div>
              <div className="rd-rank-bar"><div className="fill" style={{ width: `${(count/142)*100}%`, background: color }}/></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─── Settings Page ─────────────────────────────────────────────── */
function SettingsPage({ workspace, workspaces = [], onCreateWs }) {
  const [notif, setNotif] = useState({ slack: true, email: true, weekly: true, critical: true, mentions: false });

  return (
    <div className="rd-page" data-screen-label="Settings">
      <div className="rd-settings">
        {/* Workspace */}
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 4 }}>Workspace ativo</div>
        {workspace && (
          <div className="rd-set-row" style={{ alignItems: "flex-start" }}>
            <WorkspaceAvatar ws={workspace} size={44}/>
            <div className="body">
              <div className="lbl" style={{ fontSize: 14 }}>{workspace.name}</div>
              <div className="desc">{workspace.niche}</div>
              {workspace.description && (
                <div className="desc" style={{ marginTop: 6, color: "var(--ink-2)" }}>{workspace.description}</div>
              )}
              <div style={{ display: "flex", gap: 6, marginTop: 8, flexWrap: "wrap" }}>
                <span className="rd-tag">Plano: <strong style={{ color: "var(--ink-0)", marginLeft: 4 }}>{workspace.plan || "Starter"}</strong></span>
                <span className="rd-tag">{workspace.members || 1} {(workspace.members || 1) === 1 ? "membro" : "membros"}</span>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <button className="rd-btn sm">Editar workspace</button>
              <button className="rd-btn ghost sm" style={{ color: "var(--danger)" }}>Arquivar</button>
            </div>
          </div>
        )}

        {workspaces.length > 1 && (
          <>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 10 }}>
              Outros workspaces ({workspaces.length - 1})
            </div>
            {workspaces.filter(w => w.id !== workspace?.id).map(ws => (
              <div key={ws.id} className="rd-set-row">
                <WorkspaceAvatar ws={ws} size={36}/>
                <div className="body">
                  <div className="lbl">{ws.name}</div>
                  <div className="desc">{ws.niche}</div>
                </div>
                <span className="rd-tag">{ws.plan || "Starter"}</span>
                <button className="rd-btn sm">Trocar</button>
              </div>
            ))}
          </>
        )}

        <button
          onClick={onCreateWs}
          className="rd-set-row"
          style={{ cursor: "pointer", border: "1px dashed var(--line-md)", background: "transparent", fontFamily: "inherit", textAlign: "left" }}
        >
          <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--brand-dim)", border: "1px dashed var(--brand)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <Icon name="plus" size={16} color="var(--brand)" strokeWidth={2.4}/>
          </div>
          <div className="body">
            <div className="lbl" style={{ color: "var(--brand)" }}>Criar novo workspace</div>
            <div className="desc">Comece um radar isolado para outro produto ou nicho</div>
          </div>
          <Icon name="chevron" size={14} color="var(--brand)"/>
        </button>

        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 10 }}>Conta</div>
        <div className="rd-set-row">
          <div style={{ width: 40, height: 40, borderRadius: 50, background: "linear-gradient(135deg, #FBBF24, #F59E0B)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 14, flexShrink: 0 }}>W</div>
          <div className="body">
            <div className="lbl">Wilker · Marketing</div>
            <div className="desc">wilker@refatorando.com.br · Membro em {workspaces.length} {workspaces.length === 1 ? "workspace" : "workspaces"}</div>
          </div>
          <button className="rd-btn sm">Editar perfil</button>
        </div>

        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 10 }}>Notificações</div>
        {[
          { key: "slack",    icon: "slack",  lbl: "Slack",                          desc: "Alertas no canal #discovery-radar" },
          { key: "email",    icon: "mail",   lbl: "E-mail digest diário",           desc: "Resumo das 24h às 9h" },
          { key: "weekly",   icon: "calendar", lbl: "Relatório semanal",            desc: "Toda segunda às 8h" },
          { key: "critical", icon: "alert",  lbl: "Alertas críticos em tempo real", desc: "Insights com relevância ≥ 90%" },
          { key: "mentions", icon: "users",  lbl: "Mentions de Refatorando",        desc: "Push sempre que a marca for citada" }
        ].map(n => (
          <div key={n.key} className="rd-set-row">
            <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--bg-2)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name={n.icon} size={16} color="var(--ink-2)"/>
            </div>
            <div className="body">
              <div className="lbl">{n.lbl}</div>
              <div className="desc">{n.desc}</div>
            </div>
            <Toggle on={notif[n.key]} onChange={(v) => setNotif({ ...notif, [n.key]: v })}/>
          </div>
        ))}

        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 10 }}>Integrações</div>
        {[
          { icon: "slack", lbl: "Slack",          desc: "Workspace conectado: refatorando.slack.com",    on: true  },
          { icon: "code",  lbl: "Webhook saída",  desc: "POST para https://api.refatorando.com/hooks/…", on: true  },
          { icon: "mail",  lbl: "Gmail / Workspace",desc: "Conectar para enviar digest direto",          on: false },
          { icon: "list",  lbl: "Google Sheets",  desc: "Exportar feed semanal para planilha",           on: false },
          { icon: "external", lbl: "Notion",      desc: "Sync insights salvos como pages",               on: false }
        ].map((it, i) => (
          <div key={i} className="rd-set-row">
            <div style={{ width: 36, height: 36, borderRadius: 8, background: it.on ? "var(--brand-dim)" : "var(--bg-2)", border: `1px solid ${it.on ? "var(--brand-glow)" : "var(--line)"}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name={it.icon} size={16} color={it.on ? "var(--brand)" : "var(--ink-2)"}/>
            </div>
            <div className="body">
              <div className="lbl">{it.lbl}</div>
              <div className="desc">{it.desc}</div>
            </div>
            <button className={`rd-btn sm${it.on ? "" : ""}`}>{it.on ? "Configurar" : "Conectar"}</button>
          </div>
        ))}

        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 10 }}>Dados & privacidade</div>
        <div className="rd-set-row">
          <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--bg-2)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <Icon name="download" size={16} color="var(--ink-2)"/>
          </div>
          <div className="body">
            <div className="lbl">Exportar todos os dados</div>
            <div className="desc">Triggers + insights + configurações em formato JSON</div>
          </div>
          <button className="rd-btn sm">Baixar</button>
        </div>
        <div className="rd-set-row">
          <div style={{ width: 36, height: 36, borderRadius: 8, background: "rgba(239,68,68,0.08)", border: "1px solid rgba(239,68,68,0.22)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <Icon name="trash" size={16} color="var(--danger)"/>
          </div>
          <div className="body">
            <div className="lbl" style={{ color: "var(--danger)" }}>Apagar workspace</div>
            <div className="desc">Remove permanentemente todos os triggers, insights e histórico.</div>
          </div>
          <button className="rd-btn danger sm">Apagar</button>
        </div>

        <div style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-mono)", textAlign: "center", padding: "20px 0 30px" }}>
          Discovery Radar · v1.2.0 · Maio 2026
        </div>
      </div>
    </div>
  );
}

/* ─── Memory Page (Agent learning feed) ─────────────────────────────────────────────── */
function MemoryPage({ insights, feedback, notes, onFeedback, onNoteChange, onOpen, catMeta = CAT_META, workspace }) {
  const [tab, setTab] = useState("up"); // up | down

  const annotated = insights
    .filter(i => feedback[i.id])
    .map(i => ({ ...i, _fb: feedback[i.id], _note: notes[i.id] || "", _at: feedback[`${i.id}__at`] || i.fetchedAt }));

  const ups = annotated.filter(i => i._fb === "relevant");
  const downs = annotated.filter(i => i._fb === "irrelevant");

  // Pseudo-learning progress: each feedback contributes
  const total = annotated.length;
  const target = 20;
  const pct = Math.min(100, Math.round((total / target) * 100));
  const inFocus = tab === "up" ? ups : downs;

  return (
    <div className="rd-page" data-screen-label="Memory">
      <div className="rd-feed" style={{ padding: "20px 22px" }}>
        <div className="rd-memory-banner">
          <div className="icon-wrap">
            <Icon name="brain" size={22} strokeWidth={1.8} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="title">Memória do Discovery Agent</div>
            <div className="desc">
              {total === 0
                ? `Marque insights como relevantes (👍) ou ruído (👎) — o agente usa essas decisões para refinar a relevância das próximas descobertas em ${workspace?.name || "este workspace"}.`
                : `${total} sinais anotados${pct < 100 ? ` · próximo retreino em ~${Math.max(1, Math.round((target-total) * 1.5))}h.` : " · agente recalibrado e pronto."}`}
            </div>
          </div>
          <div className="progress">
            <div style={{ width: `${pct}%` }} />
          </div>
        </div>

        <div className="rd-stats-strip" style={{ border: "1px solid var(--line)", borderRadius: 12, marginBottom: 4 }}>
          <div className="rd-stat-chip" style={{ flex: 1 }}>
            <span className="rd-stat-label">Total anotado</span>
            <span className="rd-stat-value brand">{total}</span>
          </div>
          <div className="rd-stat-chip" style={{ flex: 1 }}>
            <span className="rd-stat-label">Relevantes</span>
            <span className="rd-stat-value" style={{ color: "var(--success)" }}>{ups.length}</span>
          </div>
          <div className="rd-stat-chip" style={{ flex: 1 }}>
            <span className="rd-stat-label">Ruído</span>
            <span className="rd-stat-value" style={{ color: "var(--danger)" }}>{downs.length}</span>
          </div>
          <div className="rd-stat-chip" style={{ flex: 1 }}>
            <span className="rd-stat-label">Calibração</span>
            <span className="rd-stat-value brand">{pct}<span style={{ fontSize: 13, fontWeight: 600 }}>%</span></span>
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", marginTop: 4, marginBottom: 6 }}>
          <Segmented
            value={tab}
            onChange={setTab}
            options={[
              { value: "up",   label: `Relevantes (${ups.length})`,   icon: "thumb-up" },
              { value: "down", label: `Ruído (${downs.length})`,      icon: "thumb-down" }
            ]}
          />
          <div style={{ marginLeft: "auto", fontSize: 12, color: "var(--ink-3)" }}>
            {tab === "up"
              ? "O agente prioriza padrões similares a estes."
              : "O agente despriorizará padrões similares."}
          </div>
        </div>

        {inFocus.length === 0 ? (
          <div className="rd-empty">
            <div className="icon"><Icon name={tab === "up" ? "thumb-up" : "thumb-down"} size={48} strokeWidth={1.4}/></div>
            <div className="title">
              {tab === "up" ? "Nenhum insight relevante ainda" : "Nenhum item marcado como ruído"}
            </div>
            <div className="desc">
              {tab === "up"
                ? "Marque insights com 👍 no Dashboard — eles aparecem aqui e treinam o agente para encontrar mais coisas parecidas."
                : "Marque com 👎 no Dashboard sinais que não interessam — o agente vai filtrar coisas similares."}
            </div>
          </div>
        ) : (
          inFocus.map(item => {
            const cat = catMeta[item.category];
            const noteValue = notes[item.id] || "";
            return (
              <div key={item.id} className={`rd-memory-item ${item._fb === "relevant" ? "up" : "down"}`}>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                  <Icon
                    name={item._fb === "relevant" ? "thumb-up" : "thumb-down"}
                    size={20}
                    color={item._fb === "relevant" ? "var(--success)" : "var(--danger)"}
                    strokeWidth={2}
                  />
                </div>
                <div className="body">
                  <div style={{ display: "flex", gap: 6, marginBottom: 4, flexWrap: "wrap", alignItems: "center" }}>
                    <span className="rd-item-cat" style={{ color: cat?.color, background: cat?.color + "12", padding: "2px 6px", borderRadius: 4 }}>
                      {cat?.label}
                    </span>
                    {item.competitor && (
                      <span className="rd-tag neutral" style={{ background: "rgba(200,35,30,0.08)", color: "var(--competitors)", borderColor: "rgba(200,35,30,0.22)", padding: "2px 7px", fontSize: 10.5 }}>
                        <Icon name="swords" size={9} /> {item.competitor}
                      </span>
                    )}
                    <span style={{ fontSize: 11, color: "var(--ink-3)", marginLeft: "auto" }}>{relDate(item.publishedAt)}</span>
                  </div>
                  <div className="title-row" onClick={() => onOpen(item)} style={{ cursor: "pointer" }}>
                    {item.title}
                  </div>
                  <textarea
                    className="rd-textarea"
                    placeholder="Adicione uma nota para o agente (opcional) — por que isso é relevante? o que destacar de parecido?"
                    value={noteValue}
                    onChange={(e) => onNoteChange(item.id, e.target.value)}
                    style={{ minHeight: 50, fontSize: 12, marginTop: 8 }}
                  />
                  {item._note && item._note === noteValue && noteValue && (
                    <div className="ts" style={{ marginTop: 4, color: "var(--success)", display: "inline-flex", alignItems: "center", gap: 4 }}>
                      <Icon name="check" size={10} strokeWidth={2.5}/> Nota salva no contexto do agente
                    </div>
                  )}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <button className="rd-btn ghost sm" onClick={() => onOpen(item)} title="Abrir detalhes">
                    <Icon name="external" size={11} />
                  </button>
                  <button className="rd-btn ghost sm" onClick={() => onFeedback(item.id, null)} title="Remover da memória">
                    <Icon name="x" size={11} />
                  </button>
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
}

/* ─── Launches Page (Product releases timeline) ─────────────────────────────────────────────── */
function LaunchesPage({ insights, triggers, workspace, catMeta = CAT_META, feedback = {}, onFeedback, onOpen }) {
  const [areaFilter, setAreaFilter] = useState("all");
  const [productFilter, setProductFilter] = useState("all");
  const [view, setView] = useState("timeline"); // timeline | grouped

  const launches = insights.filter(i => i.category === "launches");

  // All products extracted from launches + from launch triggers
  const productsInLaunches = Array.from(new Set(launches.map(l => l.product).filter(Boolean)));
  const productsInTriggers = Array.from(new Set(triggers.filter(t => t.category === "launches").flatMap(t => t.products || [])));
  const allProducts = Array.from(new Set([...productsInLaunches, ...productsInTriggers]));

  // Areas tally
  const areaTally = {};
  launches.forEach(l => (l.featureAreas || []).forEach(a => { areaTally[a] = (areaTally[a] || 0) + 1; }));

  // Apply filters
  const filtered = launches.filter(l => {
    if (productFilter !== "all" && l.product !== productFilter) return false;
    if (areaFilter !== "all" && !(l.featureAreas || []).includes(areaFilter)) return false;
    return true;
  }).sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt));

  // Group by product for grouped view
  const grouped = filtered.reduce((acc, l) => {
    const k = l.product || "Outros";
    acc[k] = acc[k] || [];
    acc[k].push(l);
    return acc;
  }, {});

  const launchTriggers = triggers.filter(t => t.category === "launches");

  return (
    <div className="rd-page" data-screen-label="Launches">
      <div className="rd-stats-strip">
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Lançamentos</span>
          <span className="rd-stat-value" style={{ color: "#EC4899" }}>{launches.length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Produtos rastreados</span>
          <span className="rd-stat-value brand">{allProducts.length}</span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Últimas 24h</span>
          <span className="rd-stat-value brand">
            {launches.filter(l => Date.now() - new Date(l.publishedAt).getTime() < 86400000).length}
          </span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Alta relevância</span>
          <span className="rd-stat-value" style={{ color: "var(--success)" }}>
            {launches.filter(l => l.relevance >= 80).length}
          </span>
        </div>
        <div className="rd-stat-chip">
          <span className="rd-stat-label">Triggers configurados</span>
          <span className="rd-stat-value brand">{launchTriggers.length}</span>
        </div>
      </div>

      <div className="rd-feed-toolbar">
        <div style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 12, color: "var(--ink-2)" }}>
          <Icon name="rocket" size={13} color="#EC4899" />
          Filtrar por produto:
        </div>
        <select
          className="rd-select"
          value={productFilter}
          onChange={(e) => setProductFilter(e.target.value)}
          style={{ width: 220, padding: "5px 10px", fontSize: 12, height: 30 }}
        >
          <option value="all">Todos os produtos ({allProducts.length})</option>
          {allProducts.map(p => <option key={p} value={p}>{p}</option>)}
        </select>
        <div className="grow" />
        <Segmented
          value={view}
          onChange={setView}
          options={[
            { value: "timeline", label: "Timeline", icon: "list" },
            { value: "grouped",  label: "Por produto", icon: "package" }
          ]}
        />
      </div>

      {/* Feature area filter chips */}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, padding: "0 22px", marginBottom: 8 }}>
        <button
          type="button"
          className="rd-chip"
          style={{ padding: "4px 10px", cursor: "pointer", fontSize: 11, background: areaFilter === "all" ? "var(--brand-dim)" : "var(--bg-2)", color: areaFilter === "all" ? "var(--brand)" : "var(--ink-2)", borderColor: areaFilter === "all" ? "var(--brand-glow)" : "var(--line-md)" }}
          onClick={() => setAreaFilter("all")}
        >
          Todas as áreas ({launches.length})
        </button>
        {FEATURE_AREAS.filter(fa => areaTally[fa.id]).map(fa => {
          const on = areaFilter === fa.id;
          return (
            <button
              key={fa.id}
              type="button"
              className="rd-chip"
              style={{
                padding: "4px 10px", cursor: "pointer", fontSize: 11,
                background: on ? fa.color + "1a" : "var(--bg-2)",
                color: on ? fa.color : "var(--ink-2)",
                borderColor: on ? fa.color + "55" : "var(--line-md)",
                fontWeight: on ? 700 : 600
              }}
              onClick={() => setAreaFilter(fa.id)}
            >
              {fa.label} <span style={{ opacity: 0.7, fontFamily: "var(--font-mono)" }}>· {areaTally[fa.id]}</span>
            </button>
          );
        })}
      </div>

      {launchTriggers.length === 0 && (
        <div style={{ margin: "0 22px 12px", padding: 14, background: "rgba(236,72,153,0.08)", border: "1px solid rgba(236,72,153,0.25)", borderRadius: 10, display: "flex", alignItems: "center", gap: 12 }}>
          <Icon name="info" size={18} color="#EC4899" />
          <div style={{ flex: 1, fontSize: 12.5, color: "var(--ink-1)", lineHeight: 1.5 }}>
            Esse workspace ainda não tem um trigger dedicado a lançamentos. <strong>Crie um trigger</strong> com categoria "Lançamentos", adicione os produtos a monitorar e selecione fontes como Product Hunt, GitHub e RSS de changelog.
          </div>
        </div>
      )}

      <div className="rd-feed">
        {filtered.length === 0 ? (
          <div className="rd-empty">
            <div className="icon"><Icon name="rocket" size={56} strokeWidth={1.2}/></div>
            <div className="title">Nenhum lançamento ainda</div>
            <div className="desc">Crie um trigger de lançamentos para começar a rastrear releases dos seus concorrentes.</div>
          </div>
        ) : view === "timeline" ? (
          <LaunchTimeline launches={filtered} catMeta={catMeta} feedback={feedback} onFeedback={onFeedback} onOpen={onOpen}/>
        ) : (
          Object.entries(grouped).map(([product, items]) => (
            <div key={product} style={{ marginBottom: 14 }}>
              <div style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "8px 4px", marginBottom: 6,
                borderBottom: "1px solid var(--line)"
              }}>
                <div style={{ width: 28, height: 28, borderRadius: 7, background: "linear-gradient(135deg, #EC4899, #BE185D)", color: "white", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="package" size={13} strokeWidth={2.2}/>
                </div>
                <div style={{ fontSize: 14, fontWeight: 700, color: "var(--ink-0)" }}>{product}</div>
                <span className="rd-tag">{items.length} {items.length === 1 ? "release" : "releases"}</span>
                <div style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-3)" }}>Última: {relDate(items[0].publishedAt)}</div>
              </div>
              {items.map(item => (
                <LaunchCard key={item.id} item={item} catMeta={catMeta} feedback={feedback[item.id]} onFeedback={onFeedback} onClick={onOpen}/>
              ))}
            </div>
          ))
        )}
      </div>
    </div>
  );
}

function LaunchTimeline({ launches, catMeta, feedback, onFeedback, onOpen }) {
  // Group by day
  const dayKey = (d) => d.toLocaleDateString("pt-BR", { day: "2-digit", month: "long" });
  const groups = launches.reduce((acc, l) => {
    const k = dayKey(new Date(l.publishedAt));
    acc[k] = acc[k] || [];
    acc[k].push(l);
    return acc;
  }, {});

  return (
    <div>
      {Object.entries(groups).map(([day, items]) => (
        <div key={day} style={{ marginBottom: 12 }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700,
            color: "var(--ink-3)", letterSpacing: "0.12em", textTransform: "uppercase",
            margin: "8px 0 6px"
          }}>
            <span style={{ width: 8, height: 8, borderRadius: 50, background: "#EC4899" }}/>
            {day}
            <span style={{ flex: 1, height: 1, background: "var(--line)" }}/>
            <span style={{ color: "var(--ink-2)", fontWeight: 600 }}>{items.length}</span>
          </div>
          {items.map(item => (
            <LaunchCard key={item.id} item={item} catMeta={catMeta} feedback={feedback[item.id]} onFeedback={onFeedback} onClick={onOpen}/>
          ))}
        </div>
      ))}
    </div>
  );
}

function LaunchCard({ item, catMeta, feedback, onFeedback, onClick }) {
  return (
    <div
      className="rd-item"
      onClick={() => onClick(item)}
      style={{ borderLeft: "3px solid #EC4899", paddingLeft: 16 }}
    >
      <div className="rd-item-meta">
        <span className="rd-item-source" style={{ backgroundColor: item.sourceColor + "18", borderColor: item.sourceColor + "40", color: item.sourceColor }}>
          {item.source}
        </span>
        {item.product && (
          <span className="rd-tag" style={{ background: "rgba(236,72,153,0.1)", color: "#EC4899", borderColor: "rgba(236,72,153,0.3)" }}>
            <Icon name="package" size={10} strokeWidth={2.2} /> {item.product}
          </span>
        )}
        {item.version && (
          <span className="rd-tag" style={{ background: "var(--bg-3)", color: "var(--ink-1)", fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 10.5 }}>
            {item.version}
          </span>
        )}
        {item.competitor && (
          <span className="rd-tag neutral" style={{ background: "rgba(200,35,30,0.08)", color: "var(--competitors)", borderColor: "rgba(200,35,30,0.22)" }}>
            <Icon name="swords" size={9} /> {item.competitor}
          </span>
        )}
        {item.isNew && <span className="rd-new-badge">NOVO</span>}
        {feedback === "relevant" && (
          <span className="rd-fb-flag up"><Icon name="brain" size={10} strokeWidth={2.4} /> Aprendendo</span>
        )}
        <span className={`rd-relevance-pill ${relScore(item.relevance)}`}>{item.relevance}%</span>
        <span className="rd-item-date">{relDate(item.publishedAt)}</span>
        {onFeedback && (
          <FeedbackButtons
            feedback={feedback}
            onChange={(v) => onFeedback(item.id, v)}
            persistent={!!feedback}
          />
        )}
      </div>
      <div className="rd-item-title">{item.title}</div>
      {item.description && <div className="rd-item-desc">{item.description}</div>}
      <div className="rd-item-tags">
        {(item.featureAreas || []).map(aid => {
          const fa = FEATURE_AREAS.find(f => f.id === aid);
          if (!fa) return null;
          return (
            <span key={aid} className="rd-tag" style={{ background: fa.color + "14", color: fa.color, borderColor: fa.color + "44" }}>
              {fa.label}
            </span>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, {
  ItemCard, DashboardPage, TriggersPage, SearchPage, ReportsPage, SettingsPage, MemoryPage, LaunchesPage
});