'use client';

import { useState } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { 
  Trophy, 
  Users, 
  Eye,
  Search,
  Filter,
  Star,
  ChevronRight
} from 'lucide-react';

interface AvailableLeague {
  id: string;
  name: string;
  game: string;
  drivers: number;
  avgViewsPerRace: number;
  mainSponsorSlot: { available: boolean; price: number };
  secondarySlots: { available: number; total: number; price: number };
  rating: number;
  tier: 'premium' | 'standard' | 'starter';
}

const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
  {
    id: 'league-1',
    name: 'GT3 Masters Championship',
    game: 'iRacing',
    drivers: 48,
    avgViewsPerRace: 8200,
    mainSponsorSlot: { available: true, price: 1200 },
    secondarySlots: { available: 1, total: 2, price: 400 },
    rating: 4.8,
    tier: 'premium',
  },
  {
    id: 'league-2',
    name: 'Endurance Pro Series',
    game: 'ACC',
    drivers: 72,
    avgViewsPerRace: 12500,
    mainSponsorSlot: { available: false, price: 1500 },
    secondarySlots: { available: 2, total: 2, price: 500 },
    rating: 4.9,
    tier: 'premium',
  },
  {
    id: 'league-3',
    name: 'Formula Sim League',
    game: 'iRacing',
    drivers: 24,
    avgViewsPerRace: 5400,
    mainSponsorSlot: { available: true, price: 800 },
    secondarySlots: { available: 2, total: 2, price: 300 },
    rating: 4.5,
    tier: 'standard',
  },
  {
    id: 'league-4',
    name: 'Touring Car Masters',
    game: 'rFactor 2',
    drivers: 32,
    avgViewsPerRace: 3200,
    mainSponsorSlot: { available: true, price: 500 },
    secondarySlots: { available: 2, total: 2, price: 200 },
    rating: 4.2,
    tier: 'starter',
  },
  {
    id: 'league-5',
    name: 'LMP Challenge',
    game: 'Le Mans Ultimate',
    drivers: 36,
    avgViewsPerRace: 6800,
    mainSponsorSlot: { available: true, price: 900 },
    secondarySlots: { available: 1, total: 2, price: 350 },
    rating: 4.6,
    tier: 'standard',
  },
];

function LeagueCard({ league }: { league: AvailableLeague }) {
  const tierColors = {
    premium: 'bg-gradient-to-r from-yellow-500/20 to-amber-500/20 border-yellow-500/30',
    standard: 'bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border-blue-500/30',
    starter: 'bg-gradient-to-r from-gray-500/20 to-slate-500/20 border-gray-500/30',
  };

  const tierBadgeColors = {
    premium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
    standard: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    starter: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
  };

  return (
    <Card className={`overflow-hidden border ${tierColors[league.tier]}`}>
      <div className="p-4">
        <div className="flex items-start justify-between mb-3">
          <div>
            <div className="flex items-center gap-2 mb-1">
              <h3 className="font-semibold text-white">{league.name}</h3>
              <span className={`px-2 py-0.5 rounded text-xs font-medium capitalize border ${tierBadgeColors[league.tier]}`}>
                {league.tier}
              </span>
            </div>
            <p className="text-sm text-gray-400">{league.game}</p>
          </div>
          <div className="flex items-center gap-1">
            <Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
            <span className="text-sm text-white">{league.rating}</span>
          </div>
        </div>

        <div className="grid grid-cols-3 gap-3 mb-4">
          <div className="text-center p-2 bg-iron-gray/50 rounded">
            <div className="text-lg font-bold text-white">{league.drivers}</div>
            <div className="text-xs text-gray-500">Drivers</div>
          </div>
          <div className="text-center p-2 bg-iron-gray/50 rounded">
            <div className="text-lg font-bold text-white">{(league.avgViewsPerRace / 1000).toFixed(1)}k</div>
            <div className="text-xs text-gray-500">Avg Views</div>
          </div>
          <div className="text-center p-2 bg-iron-gray/50 rounded">
            <div className="text-lg font-bold text-white">${(league.mainSponsorSlot.price / league.avgViewsPerRace * 1000).toFixed(0)}</div>
            <div className="text-xs text-gray-500">CPM</div>
          </div>
        </div>

        <div className="space-y-2 mb-4">
          <div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
            <div className="flex items-center gap-2">
              <div className={`w-2 h-2 rounded-full ${league.mainSponsorSlot.available ? 'bg-performance-green' : 'bg-racing-red'}`} />
              <span className="text-sm text-gray-300">Main Sponsor</span>
            </div>
            <div className="text-sm">
              {league.mainSponsorSlot.available ? (
                <span className="text-white font-medium">${league.mainSponsorSlot.price}/season</span>
              ) : (
                <span className="text-gray-500">Taken</span>
              )}
            </div>
          </div>
          <div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
            <div className="flex items-center gap-2">
              <div className={`w-2 h-2 rounded-full ${league.secondarySlots.available > 0 ? 'bg-performance-green' : 'bg-racing-red'}`} />
              <span className="text-sm text-gray-300">Secondary Slots</span>
            </div>
            <div className="text-sm">
              {league.secondarySlots.available > 0 ? (
                <span className="text-white font-medium">{league.secondarySlots.available}/{league.secondarySlots.total} @ ${league.secondarySlots.price}</span>
              ) : (
                <span className="text-gray-500">Full</span>
              )}
            </div>
          </div>
        </div>

        <div className="flex gap-2">
          <Button variant="secondary" className="flex-1">
            View Details
          </Button>
          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
            <Button variant="primary" className="flex-1">
              Sponsor
            </Button>
          )}
        </div>
      </div>
    </Card>
  );
}

export default function SponsorLeaguesPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [tierFilter, setTierFilter] = useState<'all' | 'premium' | 'standard' | 'starter'>('all');
  const [availabilityFilter, setAvailabilityFilter] = useState<'all' | 'main' | 'secondary'>('all');

  const filteredLeagues = MOCK_AVAILABLE_LEAGUES.filter(league => {
    if (searchQuery && !league.name.toLowerCase().includes(searchQuery.toLowerCase())) {
      return false;
    }
    if (tierFilter !== 'all' && league.tier !== tierFilter) {
      return false;
    }
    if (availabilityFilter === 'main' && !league.mainSponsorSlot.available) {
      return false;
    }
    if (availabilityFilter === 'secondary' && league.secondarySlots.available === 0) {
      return false;
    }
    return true;
  });

  return (
    <div className="max-w-7xl mx-auto py-8 px-4">
      {/* Breadcrumb */}
      <div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
        <a href="/sponsor/dashboard" className="hover:text-white">Dashboard</a>
        <ChevronRight className="w-4 h-4" />
        <span className="text-white">Browse Leagues</span>
      </div>

      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-white mb-2">Find Leagues to Sponsor</h1>
        <p className="text-gray-400">Discover racing leagues looking for sponsors and grow your brand</p>
      </div>

      {/* Filters */}
      <div className="flex flex-col md:flex-row gap-4 mb-6">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
          <input
            type="text"
            placeholder="Search leagues..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-10 pr-4 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
          />
        </div>
        <div className="flex gap-2">
          <select
            value={tierFilter}
            onChange={(e) => setTierFilter(e.target.value as typeof tierFilter)}
            className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
          >
            <option value="all">All Tiers</option>
            <option value="premium">Premium</option>
            <option value="standard">Standard</option>
            <option value="starter">Starter</option>
          </select>
          <select
            value={availabilityFilter}
            onChange={(e) => setAvailabilityFilter(e.target.value as typeof availabilityFilter)}
            className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
          >
            <option value="all">All Slots</option>
            <option value="main">Main Available</option>
            <option value="secondary">Secondary Available</option>
          </select>
        </div>
      </div>

      {/* Stats Banner */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <Card className="p-4 text-center">
          <div className="text-2xl font-bold text-white">{MOCK_AVAILABLE_LEAGUES.length}</div>
          <div className="text-sm text-gray-400">Available Leagues</div>
        </Card>
        <Card className="p-4 text-center">
          <div className="text-2xl font-bold text-performance-green">
            {MOCK_AVAILABLE_LEAGUES.filter(l => l.mainSponsorSlot.available).length}
          </div>
          <div className="text-sm text-gray-400">Main Slots Open</div>
        </Card>
        <Card className="p-4 text-center">
          <div className="text-2xl font-bold text-primary-blue">
            {MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.secondarySlots.available, 0)}
          </div>
          <div className="text-sm text-gray-400">Secondary Slots Open</div>
        </Card>
        <Card className="p-4 text-center">
          <div className="text-2xl font-bold text-white">
            {MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.drivers, 0)}
          </div>
          <div className="text-sm text-gray-400">Total Drivers</div>
        </Card>
      </div>

      {/* League Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredLeagues.map((league) => (
          <LeagueCard key={league.id} league={league} />
        ))}
      </div>

      {filteredLeagues.length === 0 && (
        <div className="text-center py-12">
          <Trophy className="w-12 h-12 text-gray-500 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-white mb-2">No leagues found</h3>
          <p className="text-gray-400">Try adjusting your filters to see more results</p>
        </div>
      )}

      {/* Alpha Notice */}
      <div className="mt-8 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> League sponsorship marketplace is demonstration-only.
          Actual sponsorship purchases will be available when the payment system is fully implemented.
        </p>
      </div>
    </div>
  );
}