/**
 * AccuracyMetrics Component
 * Displays ML model accuracy and performance metrics
 */

import React from 'react';
import {
  ChartBarIcon,
  TrophyIcon,
  ShieldCheckIcon,
  ArrowTrendingUpIcon,
  ArrowTrendingDownIcon,
  ScaleIcon,
} from '@heroicons/react/24/solid';

interface ModelMetrics {
  overall_accuracy: number;
  win_rate: number;
  total_signals: number;
  successful_signals: number;
  failed_signals: number;
  avg_risk_reward: number;
  avg_confidence: number;
  best_performing_phase?: string;
  sharpe_ratio?: number;
  profit_factor?: number;
}

interface AccuracyMetricsProps {
  metrics: ModelMetrics;
  period?: string;
  className?: string;
}

export const AccuracyMetrics: React.FC<AccuracyMetricsProps> = ({
  metrics,
  period = 'Last 30 days',
  className = '',
}) => {
  // Get color for metric value
  const getMetricColor = (value: number, threshold: { good: number; medium: number }) => {
    if (value >= threshold.good) return 'text-green-400';
    if (value >= threshold.medium) return 'text-yellow-400';
    return 'text-red-400';
  };

  // Get accuracy color
  const getAccuracyColor = (accuracy: number) => {
    return getMetricColor(accuracy, { good: 70, medium: 50 });
  };

  // Get win rate color
  const getWinRateColor = (winRate: number) => {
    return getMetricColor(winRate, { good: 60, medium: 45 });
  };

  return (
    <div className={`card p-6 ${className}`}>
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h3 className="text-lg font-bold text-white">Model Performance</h3>
          <p className="text-sm text-gray-400">{period}</p>
        </div>
        <ChartBarIcon className="w-6 h-6 text-blue-400" />
      </div>

      {/* Main Metrics */}
      <div className="grid grid-cols-2 gap-4 mb-6">
        {/* Overall Accuracy */}
        <div className="p-4 bg-gradient-to-br from-blue-500/10 to-blue-500/5 border border-blue-500/20 rounded-lg">
          <div className="flex items-center gap-2 mb-2">
            <TrophyIcon className="w-5 h-5 text-blue-400" />
            <span className="text-sm text-gray-400">Accuracy</span>
          </div>
          <div className={`text-3xl font-bold ${getAccuracyColor(metrics.overall_accuracy)}`}>
            {metrics.overall_accuracy.toFixed(1)}%
          </div>
        </div>

        {/* Win Rate */}
        <div className="p-4 bg-gradient-to-br from-green-500/10 to-green-500/5 border border-green-500/20 rounded-lg">
          <div className="flex items-center gap-2 mb-2">
            <ShieldCheckIcon className="w-5 h-5 text-green-400" />
            <span className="text-sm text-gray-400">Win Rate</span>
          </div>
          <div className={`text-3xl font-bold ${getWinRateColor(metrics.win_rate)}`}>
            {metrics.win_rate.toFixed(1)}%
          </div>
        </div>
      </div>

      {/* Signals Stats */}
      <div className="mb-6 p-4 bg-gray-800 rounded-lg">
        <h4 className="text-sm font-medium text-gray-400 mb-3">Signal Statistics</h4>
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-400">Total Signals</span>
            <span className="text-white font-bold">{metrics.total_signals}</span>
          </div>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1.5">
              <ArrowTrendingUpIcon className="w-4 h-4 text-green-400" />
              <span className="text-sm text-gray-400">Successful</span>
            </div>
            <span className="text-green-400 font-bold">{metrics.successful_signals}</span>
          </div>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1.5">
              <ArrowTrendingDownIcon className="w-4 h-4 text-red-400" />
              <span className="text-sm text-gray-400">Failed</span>
            </div>
            <span className="text-red-400 font-bold">{metrics.failed_signals}</span>
          </div>
        </div>
      </div>

      {/* Additional Metrics */}
      <div className="grid grid-cols-2 gap-3 mb-6">
        <div className="p-3 bg-gray-800 rounded-lg">
          <div className="flex items-center gap-1.5 mb-1">
            <ScaleIcon className="w-4 h-4 text-purple-400" />
            <span className="text-xs text-gray-400">Avg R:R</span>
          </div>
          <div className="text-xl font-bold text-white">
            {metrics.avg_risk_reward.toFixed(1)}
          </div>
        </div>

        <div className="p-3 bg-gray-800 rounded-lg">
          <div className="flex items-center gap-1.5 mb-1">
            <ChartBarIcon className="w-4 h-4 text-blue-400" />
            <span className="text-xs text-gray-400">Avg Confidence</span>
          </div>
          <div className="text-xl font-bold text-white">
            {metrics.avg_confidence.toFixed(0)}%
          </div>
        </div>
      </div>

      {/* Advanced Metrics */}
      {(metrics.sharpe_ratio !== undefined || metrics.profit_factor !== undefined) && (
        <div className="grid grid-cols-2 gap-3 mb-6">
          {metrics.sharpe_ratio !== undefined && (
            <div className="p-3 bg-gray-800 rounded-lg">
              <span className="text-xs text-gray-400 block mb-1">Sharpe Ratio</span>
              <div className={`text-xl font-bold ${getMetricColor(metrics.sharpe_ratio, { good: 1.5, medium: 1 })}`}>
                {metrics.sharpe_ratio.toFixed(2)}
              </div>
            </div>
          )}

          {metrics.profit_factor !== undefined && (
            <div className="p-3 bg-gray-800 rounded-lg">
              <span className="text-xs text-gray-400 block mb-1">Profit Factor</span>
              <div className={`text-xl font-bold ${getMetricColor(metrics.profit_factor, { good: 1.5, medium: 1 })}`}>
                {metrics.profit_factor.toFixed(2)}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Best Performing Phase */}
      {metrics.best_performing_phase && (
        <div className="p-4 bg-gradient-to-r from-amber-500/10 to-amber-500/5 border border-amber-500/20 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-gray-400 mb-1">Best Phase</p>
              <p className="text-lg font-bold text-amber-400 capitalize">
                {metrics.best_performing_phase}
              </p>
            </div>
            <TrophyIcon className="w-8 h-8 text-amber-400" />
          </div>
        </div>
      )}

      {/* Performance Bar */}
      <div className="mt-6">
        <div className="flex items-center justify-between text-xs text-gray-400 mb-2">
          <span>Success Rate</span>
          <span>{metrics.win_rate.toFixed(1)}%</span>
        </div>
        <div className="h-2 bg-gray-700 rounded-full overflow-hidden">
          <div
            className={`h-full transition-all duration-500 ${
              metrics.win_rate >= 60
                ? 'bg-green-500'
                : metrics.win_rate >= 45
                ? 'bg-yellow-500'
                : 'bg-red-500'
            }`}
            style={{ width: `${metrics.win_rate}%` }}
          />
        </div>
      </div>
    </div>
  );
};

export default AccuracyMetrics;
