'use client';

import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
import { useRaceResultsPageData } from '@/hooks/race/useRaceResultsPageData';
import { RaceResultsDataTransformer } from '@/lib/view-models/RaceResultsDataTransformer';
import { useLeagueMemberships } from '@/hooks/league/useLeagueMemberships';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { useState } from 'react';
import { notFound, useRouter } from 'next/navigation';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import { Trophy } from 'lucide-react';

interface RaceResultsPageProps {
  params: {
    id: string;
  };
}

export default function RaceResultsPage({ params }: RaceResultsPageProps) {
  const router = useRouter();
  const raceId = params.id;
  
  if (!raceId) {
    notFound();
  }

  const currentDriverId = useEffectiveDriverId() || '';

  // Fetch data using domain hook
  const { data: queries, isLoading, error, refetch } = useRaceResultsPageData(raceId, currentDriverId);

  // Additional data - league memberships
  const leagueName = queries?.results?.league?.name || '';
  const { data: memberships } = useLeagueMemberships(leagueName, currentDriverId);

  // Transform data
  const data = queries?.results && queries?.sof
    ? RaceResultsDataTransformer.transform(
        queries.results,
        queries.sof,
        currentDriverId,
        memberships
      )
    : undefined;

  // UI State for import functionality
  const [importing, setImporting] = useState(false);
  const [importSuccess, setImportSuccess] = useState(false);
  const [importError, setImportError] = useState<string | null>(null);
  const [showImportForm, setShowImportForm] = useState(false);

  // Actions
  const handleBack = () => router.back();

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

    try {
      console.log('Import results:', importedResults);
      setImportSuccess(true);
      
      // Refetch data after import
      await refetch();
    } catch (err) {
      setImportError(err instanceof Error ? err.message : 'Failed to import results');
    } finally {
      setImporting(false);
    }
  };

  const handlePenaltyClick = (driver: { id: string; name: string }) => {
    console.log('Penalty click for:', driver);
  };

  // Determine admin status from memberships data
  const currentDriver = data?.results.find(r => r.isCurrentUser);
  const currentMembership = data?.memberships?.find(m => m.driverId === currentDriverId);
  const isAdmin = currentMembership 
    ? LeagueRoleUtility.isLeagueAdminOrHigherRole(currentMembership.role) 
    : false;

  return (
    <StatefulPageWrapper
      data={data}
      isLoading={isLoading}
      error={error as Error | null}
      retry={refetch}
      Template={({ data }) => (
        <RaceResultsTemplate
          raceTrack={data.raceTrack}
          raceScheduledAt={data.raceScheduledAt}
          totalDrivers={data.totalDrivers}
          leagueName={data.leagueName}
          raceSOF={data.raceSOF}
          results={data.results}
          penalties={data.penalties}
          pointsSystem={data.pointsSystem}
          fastestLapTime={data.fastestLapTime}
          currentDriverId={currentDriverId}
          isAdmin={isAdmin}
          isLoading={false}
          error={null}
          onBack={handleBack}
          onImportResults={handleImportResults}
          onPenaltyClick={handlePenaltyClick}
          importing={importing}
          importSuccess={importSuccess}
          importError={importError}
          showImportForm={showImportForm}
          setShowImportForm={setShowImportForm}
        />
      )}
      loading={{ variant: 'skeleton', message: 'Loading race results...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        icon: Trophy,
        title: 'No results available',
        description: 'Race results will appear here once the race is completed',
        action: { label: 'Back to Race', onClick: handleBack }
      }}
    />
  );
}