'use client';

import { districtToDivision } from '@/lib/db/seats';
import { useMemo, useState } from 'react';
import { Seat } from '../../seat.type';
import { EmptyState } from './EmptyState';
import { SeatCard } from './SeatCard';
import { SeatsFilters } from './SeatsFilters';
import { SeatsHeader } from './SeatsHeader';

interface SeatsClientProps {
  seats: Seat[];
  districts: string[];
}

export function SeatsClient({ seats, districts }: SeatsClientProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const [districtFilter, setDistrictFilter] = useState('');
  const [divisionFilter, setDivisionFilter] = useState('');

  const filteredSeats = useMemo(() => {
    return seats.filter((seat) => {
      // Normalize Search
      const query = searchQuery.toLowerCase().trim();
      const seatName = seat.name.toLowerCase();
      const districtName = seat.district.toLowerCase();

      // English Check (similar to home.js)
      const bnToEnMap: { [key: string]: string } = {
        '০': '0',
        '১': '1',
        '২': '2',
        '৩': '3',
        '৪': '4',
        '৫': '5',
        '৬': '6',
        '৭': '7',
        '৮': '8',
        '৯': '9',
      };
      let seatEn = seat.name
        .split('')
        .map((char: string) => bnToEnMap[char] || char)
        .join('')
        .toLowerCase();

      seatEn = seatEn
        .replace('ঢাকা', 'dhaka')
        .replace('চট্টগ্রাম', 'chattogram')
        .replace('রাজশাহী', 'rajshahi')
        .replace('খুলনা', 'khulna')
        .replace('বরিশাল', 'barishal')
        .replace('সিলেট', 'sylhet')
        .replace('রংপুর', 'rangpur')
        .replace('ময়মনসিংহ', 'mymensingh');

      const matchesSearch =
        seatName.includes(query) || districtName.includes(query) || seatEn.includes(query);

      const matchesDistrict = districtFilter === '' || seat.district === districtFilter;
      const matchesDivision =
        divisionFilter === '' || districtToDivision[seat.district] === divisionFilter;
      return matchesSearch && matchesDistrict && matchesDivision;
    });
  }, [seats, searchQuery, districtFilter, divisionFilter]);

  const handleReset = () => {
    setSearchQuery('');
    setDistrictFilter('');
    setDivisionFilter('');
  };

  return (
    <>
      <SeatsHeader />

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
        <SeatsFilters
          searchQuery={searchQuery}
          districtFilter={districtFilter}
          divisionFilter={divisionFilter}
          districts={districts}
          onSearchChange={setSearchQuery}
          onDistrictChange={setDistrictFilter}
          onDivisionChange={setDivisionFilter}
          onReset={handleReset}
        />

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredSeats.length === 0 ? (
            <EmptyState />
          ) : (
            filteredSeats.map((seat) => <SeatCard key={seat.name} seat={seat} />)
          )}
        </div>
      </main>
    </>
  );
}