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

'use client';

import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
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 { getLeagueRankings, getGetDriverTeamUseCase, getGetProfileOverviewUseCase } from '@/lib/di-container';
import { DriverTeamPresenter } from '@/lib/presenters/DriverTeamPresenter';
import { getPrimaryLeagueIdForDriver } from '@/lib/leagueMembership';
import type { ProfileOverviewViewModel } from '@gridpilot/racing/application/presenters/IProfileOverviewPresenter';
import type { DriverTeamViewModel } from '@gridpilot/racing/application/presenters/IDriverTeamPresenter';

interface DriverProfileProps {
  driver: DriverDTO;
  isOwnProfile?: boolean;
  onEditClick?: () => void;
}
 
interface DriverProfileStatsViewModel {
  rating: number;
  wins: number;
  podiums: number;
  dnfs: number;
  totalRaces: number;
  avgFinish: number;
  bestFinish: number;
  worstFinish: number;
  consistency: number;
  percentile: number;
  overallRank?: number;
}

type DriverProfileOverviewViewModel = ProfileOverviewViewModel | null;

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

  useEffect(() => {
    const load = async () => {
      // Load profile data using GetProfileOverviewUseCase
      const profileUseCase = getGetProfileOverviewUseCase();
      const profileViewModel = await profileUseCase.execute({ driverId: driver.id });
      setProfileData(profileViewModel);

      // Load team data using caller-owned presenter
      const teamUseCase = getGetDriverTeamUseCase();
      const driverTeamPresenter = new DriverTeamPresenter();
      await teamUseCase.execute({ driverId: driver.id }, driverTeamPresenter);
      const teamResult = driverTeamPresenter.getViewModel();
      setTeamData(teamResult ?? null);
    };
    void load();
  }, [driver.id]);

  const driverStats = profileData?.stats || null;
  const primaryLeagueId = getPrimaryLeagueIdForDriver(driver.id);
  const leagueRank = primaryLeagueId
    ? getLeagueRankings(driver.id, primaryLeagueId)
    : { rank: 0, totalDrivers: 0, percentile: 0 };
  const globalRank = profileData?.currentDriver?.globalRank ?? null;
  const totalDrivers = profileData?.currentDriver?.totalDrivers ?? 0;

  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,
    },
    {
      type: 'league' as const,
      name: 'Primary League',
      rank: leagueRank.rank,
      totalDrivers: leagueRank.totalDrivers,
      percentile: leagueRank.percentile,
      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>
  );
}