'use client';

import React, { useState, useCallback } from 'react';
import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
import { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
import { useRouter } from 'next/navigation';

interface Props {
  data: RaceResultsViewData;
}

export default function RaceResultsPageClient({ data: viewData }: Props) {
  const router = useRouter();
  const [importing, setImporting] = useState(false);
  const [importSuccess, setImportSuccess] = useState(false);
  const [importError, setImportError] = useState<string | null>(null);
  const [showImportForm, setShowImportForm] = useState(false);

  const handleBack = useCallback(() => {
    router.back();
  }, [router]);

  const handleImportResults = useCallback(async () => {
    setImporting(true);
    setImportError(null);
    try {
      // Mock import
      await new Promise(resolve => setTimeout(resolve, 1000));
      setImportSuccess(true);
    } catch (err) {
      setImportError('Failed to import results');
    } finally {
      setImporting(false);
    }
  }, []);

  const handlePenaltyClick = useCallback(() => {
    console.log('Penalty click');
  }, []);

  return (
    <RaceResultsTemplate
      viewData={viewData}
      isAdmin={false}
      isLoading={false}
      error={null}
      onBack={handleBack}
      onImportResults={handleImportResults}
      onPenaltyClick={handlePenaltyClick}
      importing={importing}
      importSuccess={importSuccess}
      importError={importError}
      showImportForm={showImportForm}
      setShowImportForm={setShowImportForm}
    />
  );
}