'use client';

import { useState } from 'react';
import Button from '../ui/Button';
import { useInject } from '@/lib/di/hooks/useInject';
import { RACE_RESULTS_SERVICE_TOKEN } from '@/lib/di/tokens';

interface ImportResultsFormProps {
  raceId: string;
  onSuccess: (results: any[]) => void;
  onError: (error: string) => void;
}

export default function ImportResultsForm({ raceId, onSuccess, onError }: ImportResultsFormProps) {
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const raceResultsService = useInject(RACE_RESULTS_SERVICE_TOKEN);

  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    setUploading(true);
    setError(null);

    try {
      const content = await file.text();
      const results = (raceResultsService as any).parseAndTransformCSV(content, raceId);
      onSuccess(results);
    } catch (err) {
      const errorMessage =
        err instanceof Error ? err.message : 'Failed to parse CSV file';
      setError(errorMessage);
      onError(errorMessage);
    } finally {
      setUploading(false);
      event.target.value = '';
    }
  };

  return (
    <>
      <div className="space-y-4">
        <div>
        <label className="block text-sm font-medium text-gray-400 mb-2">
          Upload Results CSV
        </label>
        <p className="text-xs text-gray-500 mb-3">
          CSV format: driverId, position, fastestLap, incidents, startPosition
        </p>
        
        <input
          type="file"
          accept=".csv"
          onChange={handleFileChange}
          disabled={uploading}
          className="block w-full text-sm text-gray-400
            file:mr-4 file:py-2 file:px-4
            file:rounded file:border-0
            file:text-sm file:font-semibold
            file:bg-primary-blue file:text-white
            file:cursor-pointer file:transition-colors
            hover:file:bg-primary-blue/80
            disabled:file:opacity-50 disabled:file:cursor-not-allowed"
        />
      </div>

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

      {uploading && (
        <div className="text-center text-gray-400 text-sm">
          Parsing CSV and importing results...
        </div>
      )}

      <div className="p-4 bg-iron-gray/20 rounded text-xs text-gray-500">
        <p className="font-semibold mb-2">CSV Example:</p>
        <pre className="text-gray-400">
{`driverId,position,fastestLap,incidents,startPosition
550e8400-e29b-41d4-a716-446655440001,1,92.456,0,3
550e8400-e29b-41d4-a716-446655440002,2,92.789,1,1
550e8400-e29b-41d4-a716-446655440003,3,93.012,2,2`}
        </pre>
        </div>
      </div>
    </>
  );
}