'use client';

import React from 'react';
import { AlertTriangle, TestTube, CheckCircle2 } from 'lucide-react';
import Button from '@/components/ui/Button';

interface EndRaceModalProps {
  raceId: string;
  raceName: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function EndRaceModal({ raceId, raceName, onConfirm, onCancel }: EndRaceModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
      <div className="w-full max-w-md bg-iron-gray rounded-xl border border-charcoal-outline shadow-2xl">
        <div className="p-6">
          {/* Header */}
          <div className="flex items-center gap-3 mb-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-warning-amber/10 border border-warning-amber/20">
              <TestTube className="w-6 h-6 text-warning-amber" />
            </div>
            <div>
              <h2 className="text-xl font-bold text-white">Development Test Function</h2>
              <p className="text-sm text-gray-400">End Race & Process Results</p>
            </div>
          </div>

          {/* Content */}
          <div className="space-y-4 mb-6">
            <div className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
              <div className="flex items-start gap-3">
                <AlertTriangle className="w-5 h-5 text-warning-amber mt-0.5 flex-shrink-0" />
                <div>
                  <h3 className="text-sm font-semibold text-white mb-1">Development Only Feature</h3>
                  <p className="text-sm text-gray-300 leading-relaxed">
                    This is a development/testing function to simulate ending a race and processing results.
                    It will generate realistic race results, update driver ratings, and calculate final standings.
                  </p>
                </div>
              </div>
            </div>

            <div className="p-4 rounded-lg bg-performance-green/10 border border-performance-green/20">
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-performance-green mt-0.5 flex-shrink-0" />
                <div>
                  <h3 className="text-sm font-semibold text-white mb-1">What This Does</h3>
                  <ul className="text-sm text-gray-300 space-y-1">
                    <li>• Marks the race as completed</li>
                    <li>• Generates realistic finishing positions</li>
                    <li>• Updates driver ratings based on performance</li>
                    <li>• Calculates championship points</li>
                    <li>• Updates league standings</li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="text-center">
              <p className="text-sm text-gray-400">
                Race: <span className="text-white font-medium">{raceName}</span>
              </p>
              <p className="text-xs text-gray-500 mt-1">
                ID: {raceId}
              </p>
            </div>
          </div>

          {/* Actions */}
          <div className="flex gap-3">
            <Button
              variant="secondary"
              onClick={onCancel}
              className="flex-1"
            >
              Cancel
            </Button>
            <Button
              variant="primary"
              onClick={onConfirm}
              className="flex-1 bg-performance-green hover:bg-performance-green/80"
            >
              <TestTube className="w-4 h-4 mr-2" />
              Run Test
            </Button>
          </div>

          {/* Footer */}
          <div className="mt-4 pt-4 border-t border-charcoal-outline">
            <p className="text-xs text-gray-500 text-center">
              This action cannot be undone. Use only for testing purposes.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}