'use client';

import React, { useState, useRef, useEffect, useMemo } from 'react';

export const BANGLADESH_DISTRICTS: string[] = [
  'Bagerhat',
  'Bandarban',
  'Barguna',
  'Barishal',
  'Bhola',
  'Bogura',
  'Brahmanbaria',
  'Chandpur',
  'Chapainawabganj',
  'Chattogram',
  'Chuadanga',
  "Cox's Bazar",
  'Cumilla',
  'Dhaka',
  'Dinajpur',
  'Faridpur',
  'Feni',
  'Gaibandha',
  'Gazipur',
  'Gopalganj',
  'Habiganj',
  'Jamalpur',
  'Jashore',
  'Jhalokathi',
  'Jhenaidah',
  'Joypurhat',
  'Khagrachhari',
  'Khulna',
  'Kishoreganj',
  'Kurigram',
  'Kushtia',
  'Lakshmipur',
  'Lalmonirhat',
  'Madaripur',
  'Magura',
  'Manikganj',
  'Meherpur',
  'Moulvibazar',
  'Munshiganj',
  'Mymensingh',
  'Naogaon',
  'Narail',
  'Narayanganj',
  'Narsingdi',
  'Natore',
  'Netrokona',
  'Nilphamari',
  'Noakhali',
  'Pabna',
  'Panchagarh',
  'Patuakhali',
  'Pirojpur',
  'Rajbari',
  'Rajshahi',
  'Rangamati',
  'Rangpur',
  'Satkhira',
  'Shariatpur',
  'Sherpur',
  'Sirajganj',
  'Sunamganj',
  'Sylhet',
  'Tangail',
  'Thakurgaon',
];

// Alternate spellings to make search effortless
const DISTRICT_ALIASES: Record<string, string[]> = {
  Barishal: ['barisal'],
  Chattogram: ['chittagong', 'ctg'],
  Cumilla: ['comilla'],
  Bogura: ['bogra'],
  Jashore: ['jessore'],
  "Cox's Bazar": ['coxs bazar', 'coxsbazar'],
  Chapainawabganj: ['chapai', 'nawabganj', 'chapai nawabganj'],
  Jhalokathi: ['jhalakati'],
  Netrokona: ['netrakona'],
  Moulvibazar: ['moulvibazar', 'maulvibazar'],
};

interface DistrictSelectProps {
  value: string;
  onChange: (district: string) => void;
  error?: string;
  id?: string;
  name?: string;
  placeholder?: string;
  required?: boolean;
}

export default function DistrictSelect({
  value,
  onChange,
  error,
  id = 'fCity',
  name = 'city',
  placeholder = 'Select district',
  required = false,
}: DistrictSelectProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const containerRef = useRef<HTMLDivElement | null>(null);
  const searchInputRef = useRef<HTMLInputElement | null>(null);

  // Filter districts by query with alias support
  const filteredDistricts = useMemo(() => {
    const q = searchQuery.toLowerCase().trim();
    if (!q) return BANGLADESH_DISTRICTS;

    return BANGLADESH_DISTRICTS.filter((district) => {
      if (district.toLowerCase().includes(q)) return true;
      const aliases = DISTRICT_ALIASES[district];
      if (aliases && aliases.some((alias) => alias.includes(q))) return true;
      return false;
    });
  }, [searchQuery]);

  // Handle click outside to close
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen]);

  // Focus search input when opened
  useEffect(() => {
    if (isOpen) {
      setTimeout(() => {
        searchInputRef.current?.focus();
      }, 50);
    } else {
      setSearchQuery('');
    }
  }, [isOpen]);

  // Keyboard navigation (Escape to close)
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      setIsOpen(false);
    }
  };

  const handleSelect = (district: string) => {
    onChange(district);
    setIsOpen(false);
    setSearchQuery('');
  };

  return (
    <div
      ref={containerRef}
      className={`district-select-container ${isOpen ? 'open' : ''} ${error ? 'has-error' : ''}`}
      onKeyDown={handleKeyDown}
      style={{ position: 'relative', width: '100%' }}
    >
      {/* Hidden input for form serialization */}
      <input
        type="hidden"
        id={id}
        name={name}
        value={value}
        required={required}
      />

      {/* Select Trigger Box */}
      <button
        type="button"
        id={`${id}-trigger`}
        className="district-trigger"
        onClick={() => setIsOpen((prev) => !prev)}
        aria-haspopup="listbox"
        aria-expanded={isOpen}
      >
        <span className={`district-trigger-text ${!value ? 'placeholder' : ''}`}>
          {value || placeholder}
        </span>
        <span className="district-arrow" aria-hidden="true">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            style={{
              transition: 'transform 0.2s ease',
              transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
            }}
          >
            <polyline points="6 9 12 15 18 9" />
          </svg>
        </span>
      </button>

      {/* Dropdown with Search & 64 Districts List */}
      {isOpen && (
        <div className="district-dropdown" role="listbox">
          {/* Search Input Bar */}
          <div className="district-search-bar">
            <svg
              className="district-search-icon"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <circle cx="11" cy="11" r="8" />
              <line x1="21" y1="21" x2="16.65" y2="16.65" />
            </svg>
            <input
              ref={searchInputRef}
              type="text"
              className="district-search-input"
              placeholder="Search district..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onClick={(e) => e.stopPropagation()}
            />
            {searchQuery && (
              <button
                type="button"
                className="district-search-clear"
                onClick={() => setSearchQuery('')}
                aria-label="Clear search"
              >
                ✕
              </button>
            )}
          </div>

          {/* Districts List */}
          <ul className="district-options-list">
            {filteredDistricts.length === 0 ? (
              <li className="district-no-results">No district found</li>
            ) : (
              filteredDistricts.map((district) => {
                const isSelected = value === district;
                return (
                  <li
                    key={district}
                    className={`district-option ${isSelected ? 'selected' : ''}`}
                    role="option"
                    aria-selected={isSelected}
                    onClick={() => handleSelect(district)}
                  >
                    <span>{district}</span>
                    {isSelected && (
                      <span className="district-check" aria-hidden="true">
                        ✓
                      </span>
                    )}
                  </li>
                );
              })
            )}
          </ul>
        </div>
      )}
    </div>
  );
}