'use client';

import { Header } from '@/components/ui/Header';
import { Footer } from '@/components/ui/Footer';
import { MatchCard } from '@/components/ui/MatchCard';
import { useState } from 'react';

// Mock data
const allMatches = [
  {
    id: 1,
    matchCode: 'FF001',
    title: 'দৈনিক স্কোয়াড টুর্নামেন্ট - শুক্রবার',
    categoryId: 4,
    gameMode: 'Battle Royale',
    matchType: 'Squad',
    teamType: 'Squad',
    entryFee: '50',
    prizePool: '10000',
    firstPrize: '5000',
    secondPrize: '3000',
    thirdPrize: '2000',
    totalSlots: 64,
    availableSlots: 12,
    maxTeamMembers: 4,
    minTeamMembers: 4,
    registrationStartAt: new Date(Date.now() - 3600000),
    registrationDeadlineAt: new Date(Date.now() + 7200000),
    matchStartAt: new Date(Date.now() + 10800000),
    isFeatured: true,
    status: 'registration_open',
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: 2,
    matchCode: 'FF002',
    title: '1v1 Clash Squad - সপ্তাহিক',
    categoryId: 3,
    gameMode: 'Clash Squad',
    matchType: '1v1',
    teamType: 'Individual',
    entryFee: '20',
    prizePool: '5000',
    firstPrize: '3000',
    secondPrize: '1500',
    thirdPrize: '500',
    totalSlots: 32,
    availableSlots: 8,
    maxTeamMembers: 1,
    minTeamMembers: 1,
    registrationStartAt: new Date(Date.now() - 3600000),
    registrationDeadlineAt: new Date(Date.now() + 14400000),
    matchStartAt: new Date(Date.now() + 21600000),
    isFeatured: false,
    status: 'registration_open',
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: 3,
    matchCode: 'FF003',
    title: 'প্রিমিয়াম দল প্রতিযোগিতা',
    categoryId: 1,
    gameMode: 'Battle Royale',
    matchType: 'Team',
    teamType: 'Squad',
    entryFee: '200',
    prizePool: '50000',
    firstPrize: '30000',
    secondPrize: '15000',
    thirdPrize: '5000',
    totalSlots: 16,
    availableSlots: 4,
    maxTeamMembers: 4,
    minTeamMembers: 4,
    registrationStartAt: new Date(Date.now() + 86400000),
    registrationDeadlineAt: new Date(Date.now() + 172800000),
    matchStartAt: new Date(Date.now() + 259200000),
    isFeatured: true,
    status: 'upcoming',
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: 4,
    matchCode: 'FF004',
    title: 'নতুনদের জন্য বিনামূল্যে টুর্নামেন্ট',
    categoryId: 2,
    gameMode: 'Battle Royale',
    matchType: 'Duo',
    teamType: 'Duo',
    entryFee: '0',
    prizePool: '3000',
    firstPrize: '1500',
    secondPrize: '1000',
    thirdPrize: '500',
    totalSlots: 50,
    availableSlots: 20,
    maxTeamMembers: 2,
    minTeamMembers: 2,
    registrationStartAt: new Date(Date.now() - 1800000),
    registrationDeadlineAt: new Date(Date.now() + 5400000),
    matchStartAt: new Date(Date.now() + 7200000),
    isFeatured: false,
    status: 'registration_open',
    createdAt: new Date(),
    updatedAt: new Date(),
  },
];

export default function TournamentsPage() {
  const [filter, setFilter] = useState('all');
  const [search, setSearch] = useState('');

  const filteredMatches = allMatches.filter((match) => {
    const matchesFilter =
      filter === 'all' ||
      (filter === 'open' && match.status === 'registration_open') ||
      (filter === 'upcoming' && match.status === 'upcoming') ||
      (filter === 'free' && match.entryFee === '0');

    const matchesSearch = match.title.toLowerCase().includes(search.toLowerCase());

    return matchesFilter && matchesSearch;
  });

  return (
    <div className="flex flex-col min-h-screen">
      <Header appName="Gaming Tournament" />

      <main className="flex-1 py-12">
        <div className="container-max">
          {/* Header */}
          <div className="mb-12">
            <h1 className="text-4xl font-bold mb-4">সব টুর্নামেন্ট</h1>
            <p className="text-slate-400">নিজের জন্য উপযুক্ত টুর্নামেন্ট খুঁজুন এবং যোগ দিন</p>
          </div>

          {/* Search and Filters */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            {/* Search */}
            <div className="md:col-span-2">
              <input
                type="text"
                placeholder="টুর্নামেন্ট খুঁজুন..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="w-full"
              />
            </div>

            {/* Filter Buttons */}
            <div className="md:col-span-2 flex gap-2 flex-wrap">
              {[
                { label: 'সব', value: 'all' },
                { label: 'খোলা', value: 'open' },
                { label: 'আসন্ন', value: 'upcoming' },
                { label: 'বিনামূল্যে', value: 'free' },
              ].map((option) => (
                <button
                  key={option.value}
                  onClick={() => setFilter(option.value)}
                  className={`px-4 py-2 rounded-lg transition ${
                    filter === option.value
                      ? 'btn btn-primary'
                      : 'btn btn-secondary'
                  }`}
                >
                  {option.label}
                </button>
              ))}
            </div>
          </div>

          {/* Results Count */}
          <p className="text-slate-400 mb-6">
            মোট টুর্নামেন্ট: <span className="font-bold text-orange-500">{filteredMatches.length}</span>
          </p>

          {/* Tournaments Grid */}
          {filteredMatches.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredMatches.map((match) => (
                <MatchCard key={match.id} match={match} />
              ))}
            </div>
          ) : (
            <div className="card text-center py-12">
              <div className="text-6xl mb-4">🔍</div>
              <h3 className="text-xl font-bold mb-2">কোনো টুর্নামেন্ট পাওয়া যায়নি</h3>
              <p className="text-slate-400">অন্যান্য ফিল্টার চেষ্টা করুন বা পরে আবার আসুন।</p>
            </div>
          )}
        </div>
      </main>

      <Footer appName="Gaming Tournament" />
    </div>
  );
}