import { Disclosure } from '../ui/Disclosure';
import type { BacktestRecommendation } from '../../lib/types';

/**
 * The verdict, ahead of the tuning detail.
 *
 * All eight findings used to render as equal-weight bullets, so "does this
 * strategy work" sat in the same visual register as "which cutoff scored best".
 * `topic` splits them: the three that answer the question stay inline, the rest
 * collapse.
 *
 * No topic chips — every backend string already self-prefixes ("Gate: …",
 * "Robustness: …"), so a chip would render "GATE │ Gate: …", and stripping the
 * prefix would drop real information ("(3y)" carries the lookback, "Legacy"
 * qualifies the diagnostic).
 */
const PRIMARY_TOPICS = new Set(['production', 'benchmark', 'robustness']);

/**
 * Mirrors how the backend phrases a bad result — `_build_recommendation` emits
 * "Robustness WARNING: …" and "Book vs SPY: LAGS …". There is deliberately no
 * `severity` field on the payload; if that changes, this is the one place to fix.
 */
function isWarning(text: string): boolean {
  return text.includes('WARNING') || text.includes('LAGS');
}

export function BacktestRecommendationCard({
  recommendation,
}: {
  recommendation: BacktestRecommendation;
}) {
  const items = recommendation.items;
  if (items.length === 0) return null;

  // A warning is always visible, whatever its topic — burying "the edge
  // disappears without the top 5% of winners" behind a disclosure would defeat
  // the point of surfacing it at all.
  const primary = items.filter((i) => PRIMARY_TOPICS.has(i.topic) || isWarning(i.text));
  const secondary = items.filter((i) => !PRIMARY_TOPICS.has(i.topic) && !isWarning(i.text));
  const warningCount = items.filter((i) => isWarning(i.text)).length;

  return (
    <div className="space-y-2">
      <div className="glass border border-blue-400/20 p-4">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <p className="section-index">What this backtest recommends</p>
          {warningCount > 0 && (
            <span className="rounded-full border border-amber-400/40 bg-amber-400/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-300">
              ⚠ {warningCount} warning{warningCount > 1 ? 's' : ''}
            </span>
          )}
        </div>

        {recommendation.headline && (
          <p className="mt-1.5 text-sm font-semibold text-gray-100">{recommendation.headline}</p>
        )}

        {primary.length > 0 && (
          <ul className="mt-3 space-y-1.5 border-t border-white/[0.06] pt-3">
            {primary.map((item) => (
              <li
                key={item.topic + item.text}
                className={`text-xs ${isWarning(item.text) ? 'text-amber-400' : 'text-gray-300'}`}
              >
                {item.text}
              </li>
            ))}
          </ul>
        )}

        {recommendation.note && (
          <p className="mt-2 text-[11px] text-gray-600">{recommendation.note}</p>
        )}
      </div>

      {/* Outside the card body on purpose: Disclosure renders its own glass-sm
          panel, so nesting it inside the bordered card double-frames it. */}
      {secondary.length > 0 && (
        <Disclosure summary={`Gate, exit and cutoff detail (${secondary.length})`}>
          <ul className="space-y-1.5">
            {secondary.map((item) => (
              <li key={item.topic + item.text} className="text-xs text-gray-400">
                {item.text}
              </li>
            ))}
          </ul>
        </Disclosure>
      )}
    </div>
  );
}