gridpilot.gg/apps/website/components/drivers/DriverProfile.tsx

'use client';

import { DriverDTO } from '@gridpilot/racing/application/mappers/EntityMappers';
import Card from '../ui/Card';
import ProfileHeader from '../profile/ProfileHeader';
import ProfileStats from './ProfileStats';
import CareerHighlights from './CareerHighlights';
import DriverRankings from './DriverRankings';
import PerformanceMetrics from './PerformanceMetrics';
import { getDriverTeam } from '@gridpilot/racing/application';
import { getDriverStats, getLeagueRankings } from '@/lib/di-container';

interface DriverProfileProps {
  driver: DriverDTO;
}

export default function DriverProfile({ driver }: DriverProfileProps) {
  const driverStats = getDriverStats(driver.id);
  const leagueRank = getLeagueRankings(driver.id, 'league-1');

  const performanceStats = driverStats ? {
    winRate: (driverStats.wins / driverStats.totalRaces) * 100,
    podiumRate: (driverStats.podiums / driverStats.totalRaces) * 100,
    dnfRate: (driverStats.dnfs / driverStats.totalRaces) * 100,
    avgFinish: driverStats.avgFinish,
    consistency: driverStats.consistency,
    bestFinish: driverStats.bestFinish,
    worstFinish: driverStats.worstFinish,
  } : null;

  const rankings = driverStats ? [
    {
      type: 'overall' as const,
      name: 'Overall Ranking',
      rank: driverStats.overallRank,
      totalDrivers: 850,
      percentile: driverStats.percentile,
      rating: driverStats.rating,
    },
    {
      type: 'league' as const,
      name: 'European GT Championship',
      rank: leagueRank.rank,
      totalDrivers: leagueRank.totalDrivers,
      percentile: leagueRank.percentile,
      rating: driverStats.rating,
    },
  ] : [];

  return (
    <div className="space-y-6">
      <Card>
        <ProfileHeader driver={driver} isOwnProfile={false} />
      </Card>

      {driver.bio && (
        <Card>
          <h3 className="text-lg font-semibold text-white mb-4">About</h3>
          <p className="text-gray-300 leading-relaxed">{driver.bio}</p>
        </Card>
      )}

      {driverStats && (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
              <div className="grid grid-cols-2 gap-4">
                <StatCard label="Rating" value={driverStats.rating.toString()} color="text-primary-blue" />
                <StatCard label="Total Races" value={driverStats.totalRaces.toString()} color="text-white" />
                <StatCard label="Wins" value={driverStats.wins.toString()} color="text-green-400" />
                <StatCard label="Podiums" value={driverStats.podiums.toString()} color="text-warning-amber" />
              </div>
            </Card>

            {performanceStats && <PerformanceMetrics stats={performanceStats} />}
          </div>

          <DriverRankings rankings={rankings} />
        </div>
      )}

      {!driverStats && (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <Card className="lg:col-span-2">
            <h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
            <div className="grid grid-cols-2 gap-4">
              <StatCard label="Rating" value="1450" color="text-primary-blue" />
              <StatCard label="Total Races" value="147" color="text-white" />
              <StatCard label="Wins" value="23" color="text-green-400" />
              <StatCard label="Podiums" value="56" color="text-warning-amber" />
            </div>
          </Card>

        <Card>
          <h3 className="text-lg font-semibold text-white mb-4">Team</h3>
          {(() => {
            const teamData = getDriverTeam(driver.id);
            
            if (teamData) {
              const { team, membership } = teamData;
              return (
                <div className="flex items-center gap-4 p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
                  <div className="w-12 h-12 rounded-lg bg-primary-blue/20 flex items-center justify-center text-xl font-bold text-white">
                    {team.tag}
                  </div>
                  <div>
                    <div className="text-white font-medium">{team.name}</div>
                    <div className="text-sm text-gray-400">
                      {membership.role.charAt(0).toUpperCase() + membership.role.slice(1)} • Joined {new Date(membership.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                    </div>
                  </div>
                </div>
              );
            }
            
            return (
              <div className="text-center py-4 text-gray-400 text-sm">
                Not on a team
              </div>
            );
          })()}
        </Card>
      </div>
      )}

      <Card>
        <h3 className="text-lg font-semibold text-white mb-4">Performance by Class</h3>
        <ProfileStats 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
        } : undefined} />
      </Card>

      <CareerHighlights />

      <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">Private Information</h3>
        </div>
        <p className="text-gray-400 text-sm">
          Detailed race history, settings, and preferences are only visible to the driver.
        </p>
      </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">
          Per-car statistics, per-track performance, and head-to-head comparisons will be available in production.
        </p>
      </Card>
    </div>
  );
}

function StatCard({ label, value, color }: { label: string; value: string; color: string }) {
  return (
    <div className="text-center p-4 rounded bg-deep-graphite border border-charcoal-outline">
      <div className="text-sm text-gray-400 mb-1">{label}</div>
      <div className={`text-2xl font-bold ${color}`}>{value}</div>
    </div>
  );
}