'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 {
  PROJECT_PROPERTY_TYPE_LABELS,
  PROJECT_STATUS_LABELS,
  type ProjectPropertyType,
  type ProjectStatus,
  type SearchProjectsParams,
} from '@/lib/du-an-api';

interface ProjectFilterBarProps {
  filters: SearchProjectsParams;
  onFilterChange: (filters: SearchProjectsParams) => void;
}

export function ProjectFilterBar({ filters, onFilterChange }: ProjectFilterBarProps) {
  const [search, setSearch] = React.useState(filters.q || '');

  const updateFilter = (key: keyof SearchProjectsParams, value: string) => {
    onFilterChange({ ...filters, [key]: value || undefined, page: 1 });
  };

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    updateFilter('q', search.trim());
  };

  const hasFilters = filters.city || filters.district || filters.status || filters.propertyType || filters.minPrice || filters.maxPrice || filters.q;

  const clearAll = () => {
    setSearch('');
    onFilterChange({ page: 1, limit: filters.limit });
  };

  return (
    <div className="space-y-3">
      {/* Search bar */}
      <form onSubmit={handleSearchSubmit} 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 dự án theo tên, khu vực..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="pl-9"
          />
        </div>
        <Button type="submit" size="sm">
          Tìm
        </Button>
      </form>

      {/* Filter row */}
      <div className="flex flex-wrap gap-2">
        <select
          value={filters.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(PROJECT_STATUS_LABELS) as [ProjectStatus, string][]).map(
            ([value, label]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ),
          )}
        </select>

        <select
          value={filters.propertyType || ''}
          onChange={(e) => updateFilter('propertyType', e.target.value)}
          className="rounded-md border bg-background px-3 py-1.5 text-sm"
          aria-label="Loại hình"
        >
          <option value="">Loại hình</option>
          {(
            Object.entries(PROJECT_PROPERTY_TYPE_LABELS) as [ProjectPropertyType, string][]
          ).map(([value, label]) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </select>

        <Input
          placeholder="Thành phố"
          value={filters.city || ''}
          onChange={(e) => updateFilter('city', e.target.value)}
          className="w-32"
          aria-label="Thành phố"
        />

        <Input
          placeholder="Quận/Huyện"
          value={filters.district || ''}
          onChange={(e) => updateFilter('district', e.target.value)}
          className="w-32"
          aria-label="Quận/Huyện"
        />

        <Input
          type="number"
          placeholder="Giá từ (tỷ)"
          value={filters.minPrice ? String(Number(filters.minPrice) / 1_000_000_000) : ''}
          onChange={(e) => {
            const val = e.target.value;
            updateFilter('minPrice', val ? String(Number(val) * 1_000_000_000) : '');
          }}
          className="w-28"
          aria-label="Giá tối thiểu"
          min={0}
          step={0.1}
        />

        <Input
          type="number"
          placeholder="Giá đến (tỷ)"
          value={filters.maxPrice ? String(Number(filters.maxPrice) / 1_000_000_000) : ''}
          onChange={(e) => {
            const val = e.target.value;
            updateFilter('maxPrice', val ? String(Number(val) * 1_000_000_000) : '');
          }}
          className="w-28"
          aria-label="Giá tối đa"
          min={0}
          step={0.1}
        />

        <select
          value={filters.sort || ''}
          onChange={(e) => updateFilter('sort', e.target.value)}
          className="rounded-md border bg-background px-3 py-1.5 text-sm"
          aria-label="Sắp xếp"
        >
          <option value="">Sắp xếp</option>
          <option value="price_asc">Giá thấp → cao</option>
          <option value="price_desc">Giá cao → thấp</option>
          <option value="newest">Mới nhất</option>
        </select>

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