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

'use client';

import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import type { DriverProfileStatsViewModel } from '@/lib/view-models/DriverProfileViewModel';
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 { useEffect, useState } from 'react';
import { useServices } from '@/lib/services/ServiceProvider';

interface DriverProfileProps {
  driver: DriverViewModel;
  isOwnProfile?: boolean;
  onEditClick?: () => void;
}

interface DriverTeamViewModel {
  team: {
    name: string;
    tag: string;
  };
}

export default function DriverProfile({ driver, isOwnProfile = false, onEditClick }: DriverProfileProps) {
  const { driverService } = useServices();
  const [profileData, setProfileData] = useState<DriverProfileStatsViewModel | null>(null);
  const [teamData, setTeamData] = useState<DriverTeamViewModel | null>(null);

  useEffect(() => {
    const load = async () => {
      try {
        // Load driver profile
        const profile = await driverService.getDriverProfile(driver.id);
        
        // Extract stats from profile
        if (profile.stats) {
          setProfileData(profile.stats);
        }
        
        // Load team data if available
        if (profile.teamMemberships && profile.teamMemberships.length > 0) {
          const currentTeam = profile.teamMemberships.find(m => m.isCurrent) || profile.teamMemberships[0];
          setTeamData({
            team: {
              name: currentTeam.teamName,
              tag: currentTeam.teamTag ?? ''
            }
          });
        }
      } catch (error) {
        console.error('Failed to load driver profile data:', error);
      }
    };
    void load();
  }, [driver.id, driverService]);

  const driverStats = profileData;
  const globalRank = profileData?.overallRank ?? null;
  const totalDrivers = 1000; // Placeholder

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

  const rankings = driverStats ? [
    {
      type: 'overall' as const,
      name: 'Overall Ranking',
      rank: globalRank ?? driverStats.overallRank ?? 0,
      totalDrivers,
      percentile: driverStats.percentile ?? 0,
      rating: driverStats.rating ?? 0,
    },
  ] : [];

  return (
    <div className="space-y-6">
      <Card>
        <ProfileHeader
          driver={driver}
          rating={driverStats?.rating ?? null}
          rank={driverStats?.overallRank ?? null}
          isOwnProfile={isOwnProfile}
          onEditClick={onEditClick ?? (() => {})}
          teamName={teamData?.team.name ?? null}
          teamTag={teamData?.team.tag ?? null}
        />
      </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 ?? 0).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-3">
            <h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
            <p className="text-gray-400 text-sm">
              No statistics available yet. Compete in races to start building your record.
            </p>
          </Card>
        </div>
      )}

      <Card>
        <h3 className="text-lg font-semibold text-white mb-4">Performance by Class</h3>
        {driverStats && (
          <ProfileStats
            stats={{
              totalRaces: driverStats.totalRaces,
              wins: driverStats.wins,
              podiums: driverStats.podiums,
              dnfs: driverStats.dnfs,
              avgFinish: driverStats.avgFinish ?? 0,
              completionRate:
                driverStats.totalRaces > 0
                  ? ((driverStats.totalRaces - driverStats.dnfs) / driverStats.totalRaces) * 100
                  : 0,
            }}
          />
        )}
      </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>
  );
}