import type { BaseRates } from '../../lib/baseRates';

/**
 * What actually happens to trades like this one, measured under the real exit
 * policy in the backtest. This is the honest replacement for the per-target
 * "probability", which estimates the odds of touching a level the trade never
 * exits at. Note `target` is absent from the exit mix — by construction.
 */
export function BaseRatesPanel({ rates }: { rates: BaseRates }) {
  return (
    <details className="rounded-xl border border-white/[0.07] bg-white/[0.02] px-3 py-2">
      <summary className="cursor-pointer text-[11px] font-medium text-gray-500 transition-colors hover:text-gray-300">
        What usually happens · {rates.trades} backtested trades ({rates.lookbackLabel})
      </summary>

      <div className="mt-2.5 flex flex-wrap gap-x-5 gap-y-1.5 text-[11.5px]">
        <span className="text-gray-500">
          Win rate <span className="num text-gray-200">{rates.winRate.toFixed(0)}%</span>
        </span>
        {rates.avgHoldDays != null && (
          <span className="text-gray-500">
            Avg hold <span className="num text-gray-200">{rates.avgHoldDays.toFixed(0)}d</span>
          </span>
        )}
        {rates.bestR != null && (
          <span className="text-gray-500">
            Best <span className="num text-emerald-300">+{rates.bestR.toFixed(1)}R</span>
          </span>
        )}
        {rates.worstR != null && (
          <span className="text-gray-500">
            Worst <span className="num text-red-300">{rates.worstR.toFixed(1)}R</span>
          </span>
        )}
      </div>

      <p className="mt-2 text-[11px] leading-relaxed text-gray-500">
        Most trades lose a little; a few win big. That asymmetry <em>is</em> the edge — which is why
        there is no take-profit.
      </p>

      {rates.exits.length > 0 && (
        <div className="mt-2.5 border-t border-white/[0.05] pt-2">
          <p className="num mb-1.5 text-[10px] uppercase tracking-[0.16em] text-gray-500">how they ended</p>
          <div className="flex h-1.5 overflow-hidden rounded-full bg-white/[0.05]">
            {rates.exits.map((e) => (
              <div
                key={e.reason}
                style={{ width: `${e.share * 100}%` }}
                className={
                  e.reason === 'stop'
                    ? 'bg-red-400/60'
                    : e.reason === 'trailing_stop'
                      ? 'bg-emerald-400/60'
                      : 'bg-gray-500/60'
                }
                title={`${e.label}: ${e.count} trades`}
              />
            ))}
          </div>
          <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-gray-500">
            {rates.exits.map((e) => (
              <span key={e.reason}>
                {e.label} <span className="num text-gray-300">{(e.share * 100).toFixed(0)}%</span>
              </span>
            ))}
            <span className="text-gray-600">target 0%</span>
          </div>
        </div>
      )}
    </details>
  );
}
