'use client';

import { useState } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { Paintbrush, Upload, Car, Download, Trash2, Edit } from 'lucide-react';
import Link from 'next/link';

interface DriverLiveryItem {
  id: string;
  carId: string;
  carName: string;
  thumbnailUrl: string;
  uploadedAt: Date;
  isValidated: boolean;
}

export default function DriverLiveriesPage() {
  const [liveries] = useState<DriverLiveryItem[]>([]);

  return (
    <div className="max-w-4xl mx-auto py-12">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div className="flex items-center gap-3">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
            <Paintbrush className="w-6 h-6 text-primary-blue" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-white">My Liveries</h1>
            <p className="text-sm text-gray-400">Manage your car liveries across leagues</p>
          </div>
        </div>
        <Link href="/profile/liveries/upload">
          <Button variant="primary">
            <Upload className="w-4 h-4 mr-2" />
            Upload Livery
          </Button>
        </Link>
      </div>

      {/* Livery Collection */}
      {liveries.length === 0 ? (
        <Card>
          <div className="text-center py-16">
            <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-iron-gray/50 flex items-center justify-center">
              <Car className="w-10 h-10 text-gray-500" />
            </div>
            <h3 className="text-xl font-medium text-white mb-3">No Liveries Yet</h3>
            <p className="text-sm text-gray-400 max-w-md mx-auto mb-6">
              Upload your first livery. Use the same livery across multiple leagues or create custom ones for each.
            </p>
            <Link href="/profile/liveries/upload">
              <Button variant="primary">
                <Upload className="w-4 h-4 mr-2" />
                Upload Your First Livery
              </Button>
            </Link>
          </div>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {liveries.map((livery) => (
            <Card key={livery.id} className="overflow-hidden hover:border-primary-blue/50 transition-colors">
              {/* Livery Preview */}
              <div className="aspect-video bg-deep-graphite rounded-lg mb-4 flex items-center justify-center border border-charcoal-outline">
                <Car className="w-16 h-16 text-gray-600" />
              </div>

              {/* Livery Info */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-white">{livery.carName}</h3>
                  {livery.isValidated ? (
                    <span className="px-2 py-0.5 text-xs bg-performance-green/10 text-performance-green border border-performance-green/30 rounded-full">
                      Validated
                    </span>
                  ) : (
                    <span className="px-2 py-0.5 text-xs bg-warning-amber/10 text-warning-amber border border-warning-amber/30 rounded-full">
                      Pending
                    </span>
                  )}
                </div>

                <p className="text-xs text-gray-500">
                  Uploaded {new Date(livery.uploadedAt).toLocaleDateString()}
                </p>

                {/* Actions */}
                <div className="flex gap-2 pt-2">
                  <Button variant="secondary" className="flex-1 px-3 py-1.5">
                    <Edit className="w-4 h-4 mr-1" />
                    Edit
                  </Button>
                  <Button variant="secondary" className="px-3 py-1.5">
                    <Download className="w-4 h-4" />
                  </Button>
                  <Button variant="danger" className="px-3 py-1.5">
                    <Trash2 className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {/* Info Section */}
      <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <h3 className="text-lg font-semibold text-white mb-3">Livery Requirements</h3>
          <ul className="space-y-2 text-sm text-gray-400">
            <li className="flex items-start gap-2">
              <span className="text-primary-blue mt-0.5">•</span>
              PNG or DDS format, max 5MB
            </li>
            <li className="flex items-start gap-2">
              <span className="text-primary-blue mt-0.5">•</span>
              No logos or text allowed on base livery
            </li>
            <li className="flex items-start gap-2">
              <span className="text-primary-blue mt-0.5">•</span>
              Sponsor decals are added by league admins
            </li>
            <li className="flex items-start gap-2">
              <span className="text-primary-blue mt-0.5">•</span>
              Your driver name and number are added automatically
            </li>
          </ul>
        </Card>

        <Card>
          <h3 className="text-lg font-semibold text-white mb-3">How It Works</h3>
          <ol className="space-y-2 text-sm text-gray-400">
            <li className="flex items-start gap-2">
              <span className="text-primary-blue font-semibold">1.</span>
              Upload your base livery for each car you race
            </li>
            <li className="flex items-start gap-2">
              <span className="text-primary-blue font-semibold">2.</span>
              Position your name and number decals
            </li>
            <li className="flex items-start gap-2">
              <span className="text-primary-blue font-semibold">3.</span>
              League admins add sponsor logos
            </li>
            <li className="flex items-start gap-2">
              <span className="text-primary-blue font-semibold">4.</span>
              Download the final pack with all decals burned in
            </li>
          </ol>
        </Card>
      </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 management is demonstration-only.
          In production, liveries are stored in cloud storage and composited with sponsor decals.
        </p>
      </div>
    </div>
  );
}