'use client';

import { Search, X } from 'lucide-react';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { type IndustrialParkStatus, type SearchIndustrialParksParams, type VietnamRegion, PARK_STATUS_LABELS, REGION_LABELS  } from '@/lib/khu-cong-nghiep-api';

interface ParkFilterBarProps {
  params: SearchIndustrialParksParams;
  onChange: (params: SearchIndustrialParksParams) => void;
}

const PROVINCES = [
  'Bắc Ninh', 'Bình Dương', 'Đồng Nai', 'Hà Nội', 'Hải Phòng', 'Hưng Yên',
  'Long An', 'Bà Rịa - Vũng Tàu', 'Bình Phước', 'Hải Dương', 'Nghệ An',
  'Quảng Nam', 'TP. Hồ Chí Minh',
];

export function ParkFilterBar({ params, onChange }: ParkFilterBarProps) {
  const [searchInput, setSearchInput] = React.useState(params.q ?? '');

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    onChange({ ...params, q: searchInput.trim() || undefined, page: 1 });
  };

  const updateFilter = (key: keyof SearchIndustrialParksParams, value: string) => {
    onChange({ ...params, [key]: value || undefined, page: 1 });
  };

  const handleClear = () => {
    setSearchInput('');
    onChange({ page: 1, limit: params.limit });
  };

  const hasFilters = params.q || params.region || params.province || params.status;

  return (
    <div className="space-y-3">
      {/* Search bar */}
      <form onSubmit={handleSearch} className="flex gap-2">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="Tìm kiếm KCN theo tên, chủ đầu tư, tỉnh..."
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
            className="pl-9"
          />
        </div>
        <Button type="submit" size="sm">Tìm</Button>
      </form>

      {/* Filters */}
      <div className="flex flex-wrap gap-2">
        <select
          value={params.region ?? ''}
          onChange={(e) => updateFilter('region', e.target.value)}
          className="rounded-md border bg-background px-3 py-1.5 text-sm"
          aria-label="Vùng miền"
        >
          <option value="">Vùng miền</option>
          {(Object.entries(REGION_LABELS) as [VietnamRegion, string][]).map(([value, label]) => (
            <option key={value} value={value}>{label}</option>
          ))}
        </select>

        <select
          value={params.province ?? ''}
          onChange={(e) => updateFilter('province', e.target.value)}
          className="rounded-md border bg-background px-3 py-1.5 text-sm"
          aria-label="Tỉnh/TP"
        >
          <option value="">Tỉnh/TP</option>
          {PROVINCES.map((p) => (
            <option key={p} value={p}>{p}</option>
          ))}
        </select>

        <select
          value={params.status ?? ''}
          onChange={(e) => updateFilter('status', e.target.value)}
          className="rounded-md border bg-background px-3 py-1.5 text-sm"
          aria-label="Trạng thái"
        >
          <option value="">Trạng thái</option>
          {(Object.entries(PARK_STATUS_LABELS) as [IndustrialParkStatus, string][]).map(([value, label]) => (
            <option key={value} value={value}>{label}</option>
          ))}
        </select>

        {hasFilters && (
          <Button variant="ghost" size="sm" onClick={handleClear} className="gap-1">
            <X className="h-3.5 w-3.5" />
            Xóa bộ lọc
          </Button>
        )}
      </div>
    </div>
  );
}
