'use client';

import { useState, useRef, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { Upload, Paintbrush, Move, ZoomIn, Check, X, AlertTriangle, Car, RotateCw, Gamepad2 } from 'lucide-react';

interface DecalPosition {
  id: string;
  type: 'name' | 'number' | 'rank';
  x: number;
  y: number;
  width: number;
  height: number;
  rotation: number;
}

interface GameOption {
  id: string;
  name: string;
}

interface CarOption {
  id: string;
  name: string;
  manufacturer: string;
  gameId: string;
}

// Mock data - in production these would come from API
const GAMES: GameOption[] = [
  { id: 'iracing', name: 'iRacing' },
  { id: 'acc', name: 'Assetto Corsa Competizione' },
  { id: 'ac', name: 'Assetto Corsa' },
  { id: 'rf2', name: 'rFactor 2' },
  { id: 'ams2', name: 'Automobilista 2' },
  { id: 'lmu', name: 'Le Mans Ultimate' },
];

const CARS: CarOption[] = [
  // iRacing cars
  { id: 'ir-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'iracing' },
  { id: 'ir-ferrari-296-gt3', name: '296 GT3', manufacturer: 'Ferrari', gameId: 'iracing' },
  { id: 'ir-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'iracing' },
  { id: 'ir-mercedes-amg-gt3', name: 'AMG GT3 Evo', manufacturer: 'Mercedes-AMG', gameId: 'iracing' },
  { id: 'ir-audi-r8-gt3', name: 'R8 LMS GT3 Evo II', manufacturer: 'Audi', gameId: 'iracing' },
  { id: 'ir-dallara-f3', name: 'F3', manufacturer: 'Dallara', gameId: 'iracing' },
  { id: 'ir-dallara-ir18', name: 'IR-18', manufacturer: 'Dallara', gameId: 'iracing' },
  // ACC cars
  { id: 'acc-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'acc' },
  { id: 'acc-ferrari-296-gt3', name: '296 GT3', manufacturer: 'Ferrari', gameId: 'acc' },
  { id: 'acc-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'acc' },
  { id: 'acc-mercedes-amg-gt3', name: 'AMG GT3 Evo', manufacturer: 'Mercedes-AMG', gameId: 'acc' },
  { id: 'acc-lamborghini-huracan-gt3', name: 'Huracán GT3 Evo2', manufacturer: 'Lamborghini', gameId: 'acc' },
  { id: 'acc-aston-martin-v8-gt3', name: 'V8 Vantage GT3', manufacturer: 'Aston Martin', gameId: 'acc' },
  // AC cars
  { id: 'ac-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'ac' },
  { id: 'ac-ferrari-488-gt3', name: '488 GT3', manufacturer: 'Ferrari', gameId: 'ac' },
  { id: 'ac-lotus-exos', name: 'Exos 125', manufacturer: 'Lotus', gameId: 'ac' },
  // rFactor 2 cars
  { id: 'rf2-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'rf2' },
  { id: 'rf2-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'rf2' },
  // AMS2 cars
  { id: 'ams2-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'ams2' },
  { id: 'ams2-mclaren-720s-gt3', name: '720S GT3', manufacturer: 'McLaren', gameId: 'ams2' },
  // LMU cars
  { id: 'lmu-porsche-963', name: '963 LMDh', manufacturer: 'Porsche', gameId: 'lmu' },
  { id: 'lmu-ferrari-499p', name: '499P', manufacturer: 'Ferrari', gameId: 'lmu' },
  { id: 'lmu-toyota-gr010', name: 'GR010', manufacturer: 'Toyota', gameId: 'lmu' },
];

export default function LiveryUploadPage() {
  const router = useRouter();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [selectedGame, setSelectedGame] = useState<string>('');
  const [selectedCar, setSelectedCar] = useState<string>('');
  const [filteredCars, setFilteredCars] = useState<CarOption[]>([]);
  const [decals, setDecals] = useState<DecalPosition[]>([
    { id: 'name', type: 'name', x: 0.1, y: 0.8, width: 0.2, height: 0.05, rotation: 0 },
    { id: 'number', type: 'number', x: 0.8, y: 0.1, width: 0.15, height: 0.15, rotation: 0 },
    { id: 'rank', type: 'rank', x: 0.05, y: 0.1, width: 0.1, height: 0.1, rotation: 0 },
  ]);
  const [activeDecal, setActiveDecal] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  // Filter cars when game changes
  useEffect(() => {
    if (selectedGame) {
      const cars = CARS.filter(car => car.gameId === selectedGame);
      setFilteredCars(cars);
      setSelectedCar(''); // Reset car selection when game changes
    } else {
      setFilteredCars([]);
      setSelectedCar('');
    }
  }, [selectedGame]);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setUploadedFile(file);
      const url = URL.createObjectURL(file);
      setPreviewUrl(url);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    const file = e.dataTransfer.files?.[0];
    if (file) {
      setUploadedFile(file);
      const url = URL.createObjectURL(file);
      setPreviewUrl(url);
    }
  };

  const handleSubmit = async () => {
    if (!uploadedFile || !selectedGame || !selectedCar) return;

    setSubmitting(true);

    try {
      // Alpha: In-memory only
      console.log('Livery upload:', {
        file: uploadedFile.name,
        gameId: selectedGame,
        carId: selectedCar,
        decals,
      });

      await new Promise(resolve => setTimeout(resolve, 1000));

      alert('Livery uploaded successfully.');
      router.push('/profile/liveries');
    } catch (err) {
      console.error('Upload failed:', err);
      alert('Upload failed. Try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="max-w-4xl mx-auto py-12">
      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
            <Upload className="w-6 h-6 text-primary-blue" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-white">Upload Livery</h1>
            <p className="text-sm text-gray-400">Add a new livery to your collection</p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Upload Section */}
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4">Livery File</h2>

          {/* Game Selection */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-300 mb-2">
              <div className="flex items-center gap-2">
                <Gamepad2 className="w-4 h-4" />
                Select Game
              </div>
            </label>
            <select
              value={selectedGame}
              onChange={(e) => setSelectedGame(e.target.value)}
              className="w-full rounded-lg border border-charcoal-outline bg-iron-gray px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none"
            >
              <option value="">Choose a game...</option>
              {GAMES.map((game) => (
                <option key={game.id} value={game.id}>
                  {game.name}
                </option>
              ))}
            </select>
          </div>

          {/* Car Selection */}
          <div className="mb-6">
            <label className="block text-sm font-medium text-gray-300 mb-2">
              <div className="flex items-center gap-2">
                <Car className="w-4 h-4" />
                Select Car
              </div>
            </label>
            <select
              value={selectedCar}
              onChange={(e) => setSelectedCar(e.target.value)}
              disabled={!selectedGame}
              className="w-full rounded-lg border border-charcoal-outline bg-iron-gray px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <option value="">{selectedGame ? 'Choose a car...' : 'Select a game first...'}</option>
              {filteredCars.map((car) => (
                <option key={car.id} value={car.id}>
                  {car.manufacturer} {car.name}
                </option>
              ))}
            </select>
            {selectedGame && filteredCars.length === 0 && (
              <p className="text-xs text-gray-500 mt-1">No cars available for this game</p>
            )}
          </div>

          {/* File Upload */}
          <div
            onClick={() => fileInputRef.current?.click()}
            onDrop={handleDrop}
            onDragOver={(e) => e.preventDefault()}
            className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
              previewUrl
                ? 'border-performance-green/50 bg-performance-green/5'
                : 'border-charcoal-outline hover:border-primary-blue/50 hover:bg-primary-blue/5'
            }`}
          >
            <input
              ref={fileInputRef}
              type="file"
              accept=".png,.dds"
              onChange={handleFileChange}
              className="hidden"
            />

            {previewUrl ? (
              <div className="space-y-3">
                <Check className="w-12 h-12 text-performance-green mx-auto" />
                <p className="text-sm text-white font-medium">{uploadedFile?.name}</p>
                <p className="text-xs text-gray-500">Click to replace</p>
              </div>
            ) : (
              <div className="space-y-3">
                <Upload className="w-12 h-12 text-gray-500 mx-auto" />
                <p className="text-sm text-gray-400">
                  Drop your livery here or click to browse
                </p>
                <p className="text-xs text-gray-500">PNG or DDS, max 5MB</p>
              </div>
            )}
          </div>

          {/* Validation Warning */}
          <div className="mt-4 p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
            <div className="flex items-start gap-2">
              <AlertTriangle className="w-4 h-4 text-warning-amber shrink-0 mt-0.5" />
              <p className="text-xs text-gray-400">
                <strong className="text-warning-amber">No logos or text allowed.</strong>{' '}
                Your base livery must be clean. Sponsor logos are added by league admins.
              </p>
            </div>
          </div>
        </Card>

        {/* Decal Editor */}
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4">Position Decals</h2>
          <p className="text-sm text-gray-400 mb-4">
            Drag to position your driver name, number, and rank badge.
          </p>

          {/* Preview Canvas */}
          <div className="relative aspect-video bg-deep-graphite rounded-lg border border-charcoal-outline overflow-hidden mb-4">
            {previewUrl ? (
              <img
                src={previewUrl}
                alt="Livery preview"
                className="w-full h-full object-cover"
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center">
                <Car className="w-20 h-20 text-gray-600" />
              </div>
            )}

            {/* Decal Placeholders */}
            {decals.map((decal) => (
              <div
                key={decal.id}
                onClick={() => setActiveDecal(decal.id === activeDecal ? null : decal.id)}
                className={`absolute cursor-move border-2 rounded flex items-center justify-center text-xs font-medium transition-all ${
                  activeDecal === decal.id
                    ? 'border-primary-blue bg-primary-blue/20 text-primary-blue'
                    : 'border-white/30 bg-black/30 text-white/70'
                }`}
                style={{
                  left: `${decal.x * 100}%`,
                  top: `${decal.y * 100}%`,
                  width: `${decal.width * 100}%`,
                  height: `${decal.height * 100}%`,
                  transform: `rotate(${decal.rotation}deg)`,
                }}
              >
                {decal.type === 'name' && 'NAME'}
                {decal.type === 'number' && '#'}
                {decal.type === 'rank' && 'RANK'}
              </div>
            ))}
          </div>

          {/* Decal Controls */}
          <div className="grid grid-cols-3 gap-3">
            {decals.map((decal) => (
              <button
                key={decal.id}
                onClick={() => setActiveDecal(decal.id === activeDecal ? null : decal.id)}
                className={`p-3 rounded-lg border text-center transition-all ${
                  activeDecal === decal.id
                    ? 'border-primary-blue bg-primary-blue/10 text-primary-blue'
                    : 'border-charcoal-outline bg-iron-gray/30 text-gray-400 hover:border-primary-blue/50'
                }`}
              >
                <div className="text-xs font-medium capitalize mb-1">{decal.type}</div>
                <div className="text-xs text-gray-500">
                  {Math.round(decal.x * 100)}%, {Math.round(decal.y * 100)}%
                </div>
                <div className="text-xs text-gray-600">
                  {decal.rotation}°
                </div>
              </button>
            ))}
          </div>

          {/* Rotation Controls */}
          {activeDecal && (
            <div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
              <div className="flex items-center justify-between mb-2">
                <span className="text-xs font-medium text-gray-300 capitalize">
                  {decals.find(d => d.id === activeDecal)?.type} Rotation
                </span>
                <span className="text-xs text-gray-500">
                  {decals.find(d => d.id === activeDecal)?.rotation}°
                </span>
              </div>
              <div className="flex items-center gap-2">
                <input
                  type="range"
                  min="0"
                  max="360"
                  step="15"
                  value={decals.find(d => d.id === activeDecal)?.rotation ?? 0}
                  onChange={(e) => {
                    const rotation = parseInt(e.target.value, 10);
                    setDecals(decals.map(d =>
                      d.id === activeDecal ? { ...d, rotation } : d
                    ));
                  }}
                  className="flex-1 h-2 bg-charcoal-outline rounded-lg appearance-none cursor-pointer accent-primary-blue"
                />
                <button
                  onClick={() => {
                    setDecals(decals.map(d =>
                      d.id === activeDecal ? { ...d, rotation: (d.rotation + 90) % 360 } : d
                    ));
                  }}
                  className="p-2 rounded-lg border border-charcoal-outline bg-iron-gray/30 hover:bg-iron-gray/50 transition-colors"
                  title="Rotate 90°"
                >
                  <RotateCw className="w-4 h-4 text-gray-400" />
                </button>
              </div>
            </div>
          )}

          <p className="text-xs text-gray-500 mt-4">
            Click a decal above, then drag on preview to reposition. Use the slider or button to rotate.
          </p>
        </Card>
      </div>

      {/* Actions */}
      <div className="mt-6 flex gap-3">
        <Button
          variant="primary"
          onClick={handleSubmit}
          disabled={!uploadedFile || !selectedGame || !selectedCar || submitting}
        >
          {submitting ? 'Uploading...' : 'Upload Livery'}
        </Button>
        <Button
          variant="secondary"
          onClick={() => router.back()}
          disabled={submitting}
        >
          Cancel
        </Button>
      </div>

      {/* Alpha Notice */}
      <div className="mt-6 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
        <p className="text-xs text-gray-400">
          <strong className="text-warning-amber">Alpha Note:</strong> Livery upload is demonstration-only.
          Decal positioning and image validation are not functional in this preview.
        </p>
      </div>
    </div>
  );
}