/* ─── Insight Detail Modal (window-scoped) ─────────────────── */

function InsightDetailModal({ insight, onClose, onToast, catMeta = CAT_META, feedback, note, onFeedback, onNoteChange }) {
  if (!insight) return null;
  const cat = catMeta[insight.category];
  const trendUp = (insight.trend || 0) >= 0;
  const fb = feedback;

  return (
    <div className="rd-modal-overlay" onClick={onClose}>
      <div className="rd-modal lg" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 780 }}>
        <div className="rd-modal-header" style={{ background: "var(--bg-1)" }}>
          <div className="rd-detail-meta">
            <span className="rd-item-source" style={{ backgroundColor: insight.sourceColor + "18", borderColor: insight.sourceColor + "40", color: insight.sourceColor }}>
              {insight.source}
            </span>
            <span className="rd-item-cat" style={{ color: cat?.color, background: cat?.color + "12", borderRadius: 4 }}>
              {cat?.label || insight.category}
            </span>
            {insight.isNew && <span className="rd-new-badge">NOVO</span>}
            <span className={`rd-relevance-pill ${relScore(insight.relevance)}`}>
              {insight.relevance}% relevância
            </span>
            <span className="rd-item-date">{relDate(insight.publishedAt)}</span>
          </div>
          <button className="rd-modal-close" onClick={onClose}>
            <Icon name="x" size={14} />
          </button>
        </div>

        <div className="rd-modal-body" style={{ background: "var(--bg-1)" }}>
          {/* Title & summary */}
          <div className="rd-detail-section">
            <div className="rd-detail-title">{insight.title}</div>
            <div className="rd-detail-summary">{insight.summary || insight.description}</div>
          </div>

          {/* AI analysis */}
          <div className="rd-detail-section">
            <div className="rd-detail-section-title">
              <Icon name="sparkles" size={12} color="var(--brand)" />
              Análise do Discovery Agent
            </div>
            <div className="rd-analysis-grid">
              <div className="rd-analysis-stat">
                <div className="lbl">Relevância</div>
                <div className="val" style={{ color: insight.relevance >= 80 ? "var(--success)" : insight.relevance >= 60 ? "var(--warning)" : "var(--danger)" }}>
                  {insight.relevance}%
                </div>
                <div className="sub">{insight.relevance >= 80 ? "Alta" : insight.relevance >= 60 ? "Média" : "Baixa"}</div>
              </div>
              <div className="rd-analysis-stat">
                <div className="lbl">Impacto</div>
                <div className="val" style={{ textTransform: "capitalize" }}>{insight.impact}</div>
                <div className="sub">para o time</div>
              </div>
              <div className="rd-analysis-stat">
                <div className="lbl">Fontes citando</div>
                <div className="val">{insight.sources?.length || 1}</div>
                <div className="sub">cross-validado</div>
              </div>
              <div className="rd-analysis-stat">
                <div className="lbl">Tendência</div>
                <div className="val" style={{ color: trendUp ? "var(--success)" : "var(--danger)", display: "inline-flex", alignItems: "center", gap: 4 }}>
                  <Icon name={trendUp ? "arrow-up" : "arrow-down"} size={14} strokeWidth={2.4} />
                  {Math.abs(insight.trend || 0)}%
                </div>
                <div className="sub">vs 30d</div>
              </div>
            </div>

            {insight.tags && insight.tags.length > 0 && (
              <div style={{ marginTop: 14 }}>
                <div className="rd-detail-section-title" style={{ marginBottom: 8 }}>
                  <Icon name="tag" size={12} />
                  Tags identificadas
                </div>
                <div className="rd-item-tags">
                  {insight.tags.map(t => (
                    <span key={t} className="rd-tag brand">#{t}</span>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Context memory */}
          <div className="rd-detail-section" style={{ background: "var(--bg-2)" }}>
            <div className="rd-detail-section-title">
              <Icon name="cpu" size={12} color="var(--brand)" />
              Context Memory
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
              <div>
                <div style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-mono)", fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>Histórico</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-0)" }}>
                  {insight.mentions || 1} {insight.mentions === 1 ? "menção" : "menções"} em 30d
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-mono)", fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>Trigger</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--brand)" }}>
                  {insight.triggerName}
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-mono)", fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>Coletado</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-0)" }}>
                  {relDate(insight.fetchedAt)}
                </div>
              </div>
            </div>
          </div>

          {/* Train agent */}
          <div className="rd-detail-section" style={{ background: fb === "relevant" ? "rgba(16,185,129,0.06)" : fb === "irrelevant" ? "rgba(239,68,68,0.05)" : "var(--bg-1)" }}>
            <div className="rd-detail-section-title">
              <Icon name="brain" size={12} color="var(--brand)" />
              Treinar o agente
              {fb === "relevant" && <span className="rd-fb-flag up" style={{ marginLeft: 6 }}><Icon name="check" size={10} strokeWidth={2.5}/> Marcado como relevante</span>}
              {fb === "irrelevant" && <span className="rd-fb-flag down" style={{ marginLeft: 6 }}><Icon name="check" size={10} strokeWidth={2.5}/> Marcado como ruído</span>}
            </div>

            <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
              <button
                className={`rd-btn${fb === "relevant" ? " primary" : ""}`}
                style={fb === "relevant" ? {} : { borderColor: "rgba(16,185,129,0.4)", color: "var(--success)" }}
                onClick={() => {
                  const next = fb === "relevant" ? null : "relevant";
                  onFeedback?.(insight.id, next);
                  if (next) onToast("Anotado · o agente vai priorizar conteúdo parecido");
                }}
              >
                <Icon name="thumb-up" size={12} strokeWidth={fb === "relevant" ? 2.4 : 1.8}/>
                {fb === "relevant" ? "Marcado como relevante" : "Marcar como relevante"}
              </button>
              <button
                className="rd-btn"
                style={fb === "irrelevant" ? { borderColor: "var(--danger)", color: "var(--danger)", background: "rgba(239,68,68,0.08)" } : { borderColor: "rgba(239,68,68,0.35)", color: "var(--danger)" }}
                onClick={() => {
                  const next = fb === "irrelevant" ? null : "irrelevant";
                  onFeedback?.(insight.id, next);
                  if (next) onToast("Anotado · o agente vai despriorizar conteúdo parecido");
                }}
              >
                <Icon name="thumb-down" size={12} strokeWidth={fb === "irrelevant" ? 2.4 : 1.8}/>
                {fb === "irrelevant" ? "Marcado como ruído" : "Marcar como ruído"}
              </button>
            </div>

            <div style={{ fontSize: 11.5, color: "var(--ink-2)", marginBottom: 6, fontWeight: 600 }}>
              Nota de contexto para o agente <span style={{ color: "var(--ink-3)", fontWeight: 400 }}>(opcional)</span>
            </div>
            <textarea
              className="rd-textarea"
              placeholder="ex: 'Funding rounds em concorrentes diretos são prioridade máxima. Foque em rounds Series B+ no Brasil.'"
              value={note || ""}
              onChange={(e) => onNoteChange?.(insight.id, e.target.value)}
              style={{ minHeight: 64, fontSize: 12.5 }}
              disabled={!fb}
            />
            <div className="rd-hint" style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 5 }}>
              <Icon name="info" size={11}/>
              {fb
                ? "Esta nota é anexada ao prompt do agente em todas as buscas futuras deste workspace."
                : "Marque como relevante ou ruído primeiro para adicionar uma nota de contexto."}
            </div>
          </div>

          {/* Sources */}
          {insight.sources && insight.sources.length > 0 && (
            <div className="rd-detail-section">
              <div className="rd-detail-section-title">
                <Icon name="external" size={12} />
                Fontes ({insight.sources.length})
              </div>
              {insight.sources.map((s, i) => (
                <a key={i} className="rd-source-row" href={insight.url} target="_blank" rel="noopener noreferrer">
                  <div style={{ width: 24, height: 24, borderRadius: 5, background: "var(--bg-3)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-2)" }}>
                    <Icon name="external" size={12} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="src-name">{s.name}</div>
                    <div className="src-url">{s.url}</div>
                  </div>
                  <Icon name="chevron" size={14} color="var(--ink-3)" />
                </a>
              ))}
            </div>
          )}
        </div>

        <div className="rd-modal-footer">
          <div className="left">
            <button className="rd-btn sm" onClick={() => onToast("Insight salvo na biblioteca")}>
              <Icon name="bookmark" size={12} />
              Salvar
            </button>
            <button className="rd-btn sm" onClick={() => onToast("Insight fixado no topo")}>
              <Icon name="pin" size={12} />
              Fixar
            </button>
            <button className="rd-btn sm" onClick={() => onToast("Link copiado")}>
              <Icon name="share" size={12} />
              Compartilhar
            </button>
          </div>
          <div className="right">
            <a className="rd-btn primary" href={insight.url} target="_blank" rel="noopener noreferrer">
              <Icon name="external" size={12} />
              Abrir fonte
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

window.InsightDetailModal = InsightDetailModal;