'use client';

import Breadcrumbs from '@/components/layout/Breadcrumbs';
import QuickPenaltyModal from '@/components/leagues/QuickPenaltyModal';
import ImportResultsForm from '@/components/races/ImportResultsForm';
import RaceResultsHeader from '@/components/races/RaceResultsHeader';
import ResultsTable from '@/components/races/ResultsTable';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import type { RaceResultsDetailViewModel } from '@/lib/view-models';
import { ArrowLeft, Calendar, Trophy, Users, Zap } from 'lucide-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function RaceResultsPage() {
  const router = useRouter();
  const params = useParams();
  const raceId = params.id as string;
  const currentDriverId = useEffectiveDriverId();

  const { data: raceData, isLoading: loading, error } = useRaceResultsDetail(raceId, currentDriverId);
  const { data: sofData } = useRaceWithSOF(raceId);
  const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);

  const [importing, setImporting] = useState(false);
  const [importSuccess, setImportSuccess] = useState(false);
  const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);
  const [preSelectedDriver, setPreSelectedDriver] = useState<{ id: string; name: string } | undefined>(undefined);

  const raceSOF = sofData?.strengthOfField || null;
  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;

  const handleImportSuccess = async (importedResults: any[]) => {
    setImporting(true);
    setError(null);

    try {
      await raceResultsService.importRaceResults(raceId, {
        resultsFileContent: JSON.stringify(importedResults), // Assuming the API expects JSON string
      });

      setImportSuccess(true);
      await loadData();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to import results');
    } finally {
      setImporting(false);
    }
  };

  const handleImportError = (errorMessage: string) => {
    setError(errorMessage);
  };

  const handlePenaltyClick = (driver: { id: string; name: string }) => {
    setPreSelectedDriver(driver);
    setShowQuickPenaltyModal(true);
  };

  const handleCloseQuickPenaltyModal = () => {
    setShowQuickPenaltyModal(false);
    setPreSelectedDriver(undefined);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <div className="text-center text-gray-400">Loading results...</div>
        </div>
      </div>
    );
  }

  if (error && !raceData) {
    return (
      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <Card className="text-center py-12">
            <div className="text-warning-amber mb-4">
              {error || 'Race not found'}
            </div>
            <Button
              variant="secondary"
              onClick={() => router.push('/races')}
            >
              Back to Races
            </Button>
          </Card>

          {showQuickPenaltyModal && (
            <QuickPenaltyModal
              {...({
                raceId,
                drivers: raceData?.drivers as any,
                onClose: handleCloseQuickPenaltyModal,
                preSelectedDriver: preSelectedDriver as any,
                adminId: currentDriverId,
                races: undefined,
              } as any)}
            />
          )}
        </div>
      </div>
    );
  }

  const hasResults = raceData?.results.length ?? 0 > 0;

  const breadcrumbItems = [
    { label: 'Races', href: '/races' },
    ...(raceData?.league ? [{ label: raceData.league.name, href: `/leagues/${raceData.league.id}` }] : []),
    ...(raceData?.race ? [{ label: raceData.race.track, href: `/races/${raceData.race.id}` }] : []),
    { label: 'Results' },
  ];

  return (
    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto space-y-6">
        <div className="flex items-center justify-between">
          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
          <Button
            variant="secondary"
            onClick={() => router.back()}
            className="flex items-center gap-2 text-sm"
          >
            <ArrowLeft className="w-4 h-4" />
            Back
          </Button>
        </div>

        <RaceResultsHeader
          raceTrack={raceData?.race?.track}
          raceScheduledAt={raceData?.race?.scheduledAt}
          totalDrivers={raceData?.stats.totalDrivers}
          leagueName={raceData?.league?.name}
          raceSOF={raceSOF}
        />

        {importSuccess && (
          <div className="p-4 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
            <strong>Success!</strong> Results imported and standings updated.
          </div>
        )}

        {error && (
          <div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded-lg text-warning-amber">
            <strong>Error:</strong> {error}
          </div>
        )}

        <Card>
          {hasResults && raceData ? (
            <ResultsTable
              results={raceData.resultsByPosition}
              drivers={raceData.drivers}
              pointsSystem={raceData.pointsSystem ?? {}}
              fastestLapTime={raceData.fastestLapTime ?? 0}
              penalties={raceData.penalties}
              currentDriverId={raceData.currentDriverId ?? ''}
              isAdmin={isAdmin}
              onPenaltyClick={handlePenaltyClick}
            />
          ) : (
            <>
              <h2 className="text-xl font-semibold text-white mb-6">Import Results</h2>
              <p className="text-gray-400 text-sm mb-6">
                No results imported. Upload CSV to test the standings system.
              </p>
              {importing ? (
                <div className="text-center py-8 text-gray-400">
                  Importing results and updating standings...
                </div>
              ) : (
                <ImportResultsForm
                  raceId={raceId}
                  onSuccess={handleImportSuccess}
                  onError={handleImportError}
                />
              )}
            </>
          )}
        </Card>
      </div>
    </div>
  );
}