'use client';

import Card from '../ui/Card';
import RankBadge from './RankBadge';
import { getDriverStats, getAllDriverRankings, getLeagueRankings } from '@/lib/di-container';

interface ProfileStatsProps {
  driverId?: string;
  stats?: {
    totalRaces: number;
    wins: number;
    podiums: number;
    dnfs: number;
    avgFinish: number;
    completionRate: number;
  };
}

export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
  const driverStats = driverId ? getDriverStats(driverId) : null;
  const allRankings = getAllDriverRankings();
  const leagueRank = driverId ? getLeagueRankings(driverId, 'league-1') : null;
  
  const defaultStats = stats || (driverStats ? {
    totalRaces: driverStats.totalRaces,
    wins: driverStats.wins,
    podiums: driverStats.podiums,
    dnfs: driverStats.dnfs,
    avgFinish: driverStats.avgFinish,
    completionRate: ((driverStats.totalRaces - driverStats.dnfs) / driverStats.totalRaces) * 100
  } : {
    totalRaces: 147,
    wins: 23,
    podiums: 56,
    dnfs: 12,
    avgFinish: 5.8,
    completionRate: 91.8
  });

  const winRate = ((defaultStats.wins / defaultStats.totalRaces) * 100).toFixed(1);
  const podiumRate = ((defaultStats.podiums / defaultStats.totalRaces) * 100).toFixed(1);

  const getTrendIndicator = (value: number) => {
    if (value > 0) return '↑';
    if (value < 0) return '↓';
    return '→';
  };

  const getPercentileLabel = (percentile: number) => {
    if (percentile >= 90) return 'Top 10%';
    if (percentile >= 75) return 'Top 25%';
    if (percentile >= 50) return 'Top 50%';
    return `${(100 - percentile).toFixed(0)}th percentile`;
  };

  const getPercentileColor = (percentile: number) => {
    if (percentile >= 90) return 'text-green-400';
    if (percentile >= 75) return 'text-primary-blue';
    if (percentile >= 50) return 'text-warning-amber';
    return 'text-gray-400';
  };

  return (
    <div className="space-y-6">
      {driverStats && (
        <Card>
          <h3 className="text-xl font-semibold text-white mb-6">Rankings Dashboard</h3>
          
          <div className="space-y-4">
            <div className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-3">
                  <RankBadge rank={driverStats.overallRank} size="lg" />
                  <div>
                    <div className="text-white font-medium text-lg">Overall Ranking</div>
                    <div className="text-sm text-gray-400">
                      {driverStats.overallRank} of {allRankings.length} drivers
                    </div>
                  </div>
                </div>
                <div className="text-right">
                  <div className={`text-sm font-medium ${getPercentileColor(driverStats.percentile)}`}>
                    {getPercentileLabel(driverStats.percentile)}
                  </div>
                  <div className="text-xs text-gray-500">Global Percentile</div>
                </div>
              </div>
              
              <div className="grid grid-cols-3 gap-4 pt-3 border-t border-charcoal-outline">
                <div className="text-center">
                  <div className="text-2xl font-bold text-primary-blue">{driverStats.rating}</div>
                  <div className="text-xs text-gray-400">Rating</div>
                </div>
                <div className="text-center">
                  <div className="text-lg font-bold text-green-400">
                    {getTrendIndicator(5)} {winRate}%
                  </div>
                  <div className="text-xs text-gray-400">Win Rate</div>
                </div>
                <div className="text-center">
                  <div className="text-lg font-bold text-warning-amber">
                    {getTrendIndicator(2)} {podiumRate}%
                  </div>
                  <div className="text-xs text-gray-400">Podium Rate</div>
                </div>
              </div>
            </div>

            {leagueRank && leagueRank.totalDrivers > 0 && (
              <div className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <RankBadge rank={leagueRank.rank} size="md" />
                    <div>
                      <div className="text-white font-medium">European GT Championship</div>
                      <div className="text-sm text-gray-400">
                        {leagueRank.rank} of {leagueRank.totalDrivers} drivers
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className={`text-sm font-medium ${getPercentileColor(leagueRank.percentile)}`}>
                      {getPercentileLabel(leagueRank.percentile)}
                    </div>
                    <div className="text-xs text-gray-500">League Percentile</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </Card>
      )}

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { label: 'Total Races', value: defaultStats.totalRaces, color: 'text-primary-blue' },
          { label: 'Wins', value: defaultStats.wins, color: 'text-green-400' },
          { label: 'Podiums', value: defaultStats.podiums, color: 'text-warning-amber' },
          { label: 'DNFs', value: defaultStats.dnfs, color: 'text-red-400' },
          { label: 'Avg Finish', value: defaultStats.avgFinish.toFixed(1), color: 'text-white' },
          { label: 'Completion', value: `${defaultStats.completionRate.toFixed(1)}%`, color: 'text-green-400' },
          { label: 'Win Rate', value: `${winRate}%`, color: 'text-primary-blue' },
          { label: 'Podium Rate', value: `${podiumRate}%`, color: 'text-warning-amber' }
        ].map((stat, index) => (
          <Card key={index} className="text-center">
            <div className="text-sm text-gray-400 mb-1">{stat.label}</div>
            <div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
          </Card>
        ))}
      </div>

      <Card>
        <h3 className="text-lg font-semibold text-white mb-4">Performance by Car Class</h3>
        <div className="space-y-3 text-sm">
          <PerformanceRow label="GT3" races={45} wins={12} podiums={23} avgFinish={4.2} />
          <PerformanceRow label="Formula" races={38} wins={7} podiums={15} avgFinish={6.1} />
          <PerformanceRow label="LMP2" races={32} wins={4} podiums={11} avgFinish={7.3} />
          <PerformanceRow label="Other" races={32} wins={0} podiums={7} avgFinish={8.5} />
        </div>
      </Card>

      <Card className="bg-charcoal-200/50 border-primary-blue/30">
        <div className="flex items-center gap-3 mb-3">
          <div className="text-2xl">📊</div>
          <h3 className="text-lg font-semibold text-white">Coming Soon</h3>
        </div>
        <p className="text-gray-400 text-sm">
          Performance trends, track-specific stats, head-to-head comparisons vs friends, and league member comparisons will be available in production.
        </p>
      </Card>
    </div>
  );
}

function PerformanceRow({ label, races, wins, podiums, avgFinish }: { 
  label: string; 
  races: number; 
  wins: number; 
  podiums: number; 
  avgFinish: number;
}) {
  const winRate = ((wins / races) * 100).toFixed(0);
  
  return (
    <div className="flex items-center justify-between p-3 rounded bg-deep-graphite border border-charcoal-outline">
      <div className="flex-1">
        <div className="text-white font-medium">{label}</div>
        <div className="text-gray-500 text-xs">{races} races</div>
      </div>
      <div className="flex items-center gap-6 text-xs">
        <div>
          <div className="text-gray-500">Wins</div>
          <div className="text-green-400 font-medium">{wins} ({winRate}%)</div>
        </div>
        <div>
          <div className="text-gray-500">Podiums</div>
          <div className="text-warning-amber font-medium">{podiums}</div>
        </div>
        <div>
          <div className="text-gray-500">Avg</div>
          <div className="text-white font-medium">{avgFinish.toFixed(1)}</div>
        </div>
      </div>
    </div>
  );
}