import type { BacktestResult } from '../types/backtest.types';
import { MetricsCard } from './MetricsCard';

interface BacktestMetricsProps {
  result: BacktestResult | null;
  isLoading: boolean;
}

// Full detailed metrics view - can be used as a separate page/view if needed
export function BacktestMetrics({ result, isLoading }: BacktestMetricsProps) {
  if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {[...Array(6)].map((_, i) => (
          <div key={i} className="bg-surface-secondary rounded-lg border border-border p-4 h-24 animate-pulse">
            <div className="h-4 bg-surface rounded w-1/2 mb-2"></div>
            <div className="h-6 bg-surface rounded w-3/4"></div>
          </div>
        ))}
      </div>
    );
  }

  if (!result) {
    return (
      <div className="bg-surface-secondary rounded-lg border border-border p-8 text-center">
        <p className="text-text-secondary">Run a backtest to see performance metrics.</p>
      </div>
    );
  }

  const { metrics } = result;

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <MetricsCard
          title="Total Return"
          value={`${((metrics.totalReturn ?? 0) * 100).toFixed(2)}%`}
          color={(metrics.totalReturn ?? 0) >= 0 ? 'success' : 'error'}
        />
        <MetricsCard
          title="Sharpe Ratio"
          value={(metrics.sharpeRatio ?? 0).toFixed(2)}
          color={(metrics.sharpeRatio ?? 0) > 1 ? 'success' : (metrics.sharpeRatio ?? 0) > 0 ? 'warning' : 'error'}
        />
        <MetricsCard
          title="Max Drawdown"
          value={`${((metrics.maxDrawdown ?? 0) * 100).toFixed(2)}%`}
          color={(metrics.maxDrawdown ?? 0) > -0.2 ? 'warning' : 'error'}
        />
        <MetricsCard
          title="Win Rate"
          value={`${((metrics.winRate ?? 0) * 100).toFixed(1)}%`}
          color={(metrics.winRate ?? 0) > 0.5 ? 'success' : 'warning'}
        />
        <MetricsCard
          title="Total Trades"
          value={(metrics.totalTrades ?? 0).toString()}
        />
        <MetricsCard
          title="Profit Factor"
          value={(metrics.profitFactor ?? 0).toFixed(2)}
          color={(metrics.profitFactor ?? 0) > 1.5 ? 'success' : (metrics.profitFactor ?? 0) > 1 ? 'warning' : 'error'}
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="bg-surface-secondary rounded-lg border border-border p-4">
          <h4 className="text-sm font-medium text-text-secondary mb-3">Trade Statistics</h4>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span className="text-text-secondary text-sm">Profitable Trades</span>
              <span className="text-text-primary text-sm font-medium">{metrics.profitableTrades ?? 0}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-text-secondary text-sm">Average Win</span>
              <span className="text-success text-sm font-medium">${(metrics.avgWin ?? 0).toFixed(2)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-text-secondary text-sm">Average Loss</span>
              <span className="text-error text-sm font-medium">${Math.abs(metrics.avgLoss ?? 0).toFixed(2)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-text-secondary text-sm">Expectancy</span>
              <span className={`text-sm font-medium ${(metrics.expectancy ?? 0) >= 0 ? 'text-success' : 'text-error'}`}>
                ${(metrics.expectancy ?? 0).toFixed(2)}
              </span>
            </div>
          </div>
        </div>

        <div className="bg-surface-secondary rounded-lg border border-border p-4">
          <h4 className="text-sm font-medium text-text-secondary mb-3">Risk Metrics</h4>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span className="text-text-secondary text-sm">Calmar Ratio</span>
              <span className="text-text-primary text-sm font-medium">{(metrics.calmarRatio ?? 0).toFixed(2)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-text-secondary text-sm">Sortino Ratio</span>
              <span className="text-text-primary text-sm font-medium">{(metrics.sortinoRatio ?? 0).toFixed(2)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-text-secondary text-sm">Exposure Time</span>
              <span className="text-text-primary text-sm font-medium">
                {result.analytics?.exposureTime ? `${(result.analytics.exposureTime * 100).toFixed(1)}%` : 'N/A'}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}