'use client';

import * as React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import { PROPERTY_TYPES, TRANSACTION_TYPES } from '@/lib/validations/listings';

export interface SearchFilters {
  transactionType: string;
  propertyType: string;
  city: string;
  district: string;
  minPrice: string;
  maxPrice: string;
  minArea: string;
  maxArea: string;
  bedrooms: string;
  sort: string;
}

const CITIES = [
  'Hồ Chí Minh',
  'Hà Nội',
  'Đà Nẵng',
  'Nha Trang',
  'Cần Thơ',
  'Hải Phòng',
  'Bình Dương',
  'Đồng Nai',
  'Long An',
  'Bà Rịa - Vũng Tàu',
];

const PRICE_RANGES = [
  { label: 'Dưới 1 tỷ', min: '0', max: '1000000000' },
  { label: '1 - 3 tỷ', min: '1000000000', max: '3000000000' },
  { label: '3 - 5 tỷ', min: '3000000000', max: '5000000000' },
  { label: '5 - 10 tỷ', min: '5000000000', max: '10000000000' },
  { label: '10 - 20 tỷ', min: '10000000000', max: '20000000000' },
  { label: 'Trên 20 tỷ', min: '20000000000', max: '' },
];

interface FilterBarProps {
  filters: SearchFilters;
  onChange: (filters: SearchFilters) => void;
  onSearch: () => void;
  layout?: 'horizontal' | 'sidebar';
}

export function FilterBar({ filters, onChange, onSearch, layout = 'horizontal' }: FilterBarProps) {
  const update = (key: keyof SearchFilters, value: string) => {
    onChange({ ...filters, [key]: value });
  };

  const handlePriceRange = (value: string) => {
    if (!value) {
      onChange({ ...filters, minPrice: '', maxPrice: '' });
      return;
    }
    const range = PRICE_RANGES[Number(value)];
    if (range) {
      onChange({ ...filters, minPrice: range.min, maxPrice: range.max });
    }
  };

  const currentPriceIdx = PRICE_RANGES.findIndex(
    (r) => r.min === filters.minPrice && r.max === filters.maxPrice,
  );

  const isSidebar = layout === 'sidebar';

  return (
    <div className={isSidebar ? 'space-y-4' : 'space-y-3'}>
      {isSidebar && <h3 className="font-semibold">Bộ lọc</h3>}

      <div className={isSidebar ? 'space-y-3' : 'flex flex-wrap gap-3'}>
        <Select
          value={filters.transactionType}
          onChange={(e) => update('transactionType', e.target.value)}
          className={isSidebar ? 'w-full' : 'w-40'}
        >
          <option value="">Tất cả giao dịch</option>
          {TRANSACTION_TYPES.map((t) => (
            <option key={t.value} value={t.value}>
              {t.label}
            </option>
          ))}
        </Select>

        <Select
          value={filters.propertyType}
          onChange={(e) => update('propertyType', e.target.value)}
          className={isSidebar ? 'w-full' : 'w-44'}
        >
          <option value="">Tất cả loại BĐS</option>
          {PROPERTY_TYPES.map((t) => (
            <option key={t.value} value={t.value}>
              {t.label}
            </option>
          ))}
        </Select>

        <Select
          value={filters.city}
          onChange={(e) => update('city', e.target.value)}
          className={isSidebar ? 'w-full' : 'w-44'}
        >
          <option value="">Tất cả khu vực</option>
          {CITIES.map((c) => (
            <option key={c} value={c}>
              {c}
            </option>
          ))}
        </Select>

        <Select
          value={currentPriceIdx >= 0 ? String(currentPriceIdx) : ''}
          onChange={(e) => handlePriceRange(e.target.value)}
          className={isSidebar ? 'w-full' : 'w-40'}
        >
          <option value="">Tất cả mức giá</option>
          {PRICE_RANGES.map((r, i) => (
            <option key={i} value={String(i)}>
              {r.label}
            </option>
          ))}
        </Select>

        {isSidebar && (
          <>
            <div>
              <label className="mb-1 block text-sm text-muted-foreground">Diện tích (m²)</label>
              <div className="flex gap-2">
                <Input
                  type="number"
                  placeholder="Từ"
                  value={filters.minArea}
                  onChange={(e) => update('minArea', e.target.value)}
                  className="w-full"
                />
                <Input
                  type="number"
                  placeholder="Đến"
                  value={filters.maxArea}
                  onChange={(e) => update('maxArea', e.target.value)}
                  className="w-full"
                />
              </div>
            </div>

            <Select
              value={filters.bedrooms}
              onChange={(e) => update('bedrooms', e.target.value)}
              className="w-full"
            >
              <option value="">Số phòng ngủ</option>
              {[1, 2, 3, 4, 5].map((n) => (
                <option key={n} value={String(n)}>
                  {n}+ PN
                </option>
              ))}
            </Select>

            <Input
              placeholder="Quận/huyện"
              value={filters.district}
              onChange={(e) => update('district', e.target.value)}
              className="w-full"
            />
          </>
        )}

        {!isSidebar && (
          <Select
            value={filters.bedrooms}
            onChange={(e) => update('bedrooms', e.target.value)}
            className="w-36"
          >
            <option value="">Phòng ngủ</option>
            {[1, 2, 3, 4, 5].map((n) => (
              <option key={n} value={String(n)}>
                {n}+ PN
              </option>
            ))}
          </Select>
        )}
      </div>

      {isSidebar && (
        <Button onClick={onSearch} className="w-full">
          Tìm kiếm
        </Button>
      )}
    </div>
  );
}
