goodgo-platform/apps/web/components/khu-cong-nghiep/listing-search-client.tsx

'use client';

import { ArrowLeft, Factory, Search, X } from 'lucide-react';
import * as React from 'react';
import { IndustrialListingCard } from '@/components/khu-cong-nghiep/listing-card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Link } from '@/i18n/navigation';
import { useIndustrialListingsSearch } from '@/lib/hooks/use-khu-cong-nghiep';
import {
  type IndustrialLeaseType,
  type IndustrialPropertyType,
  type SearchIndustrialListingsParams,
  LEASE_TYPE_LABELS,
  PROPERTY_TYPE_LABELS,
} from '@/lib/khu-cong-nghiep-api';

const PAGE_SIZE = 12;

export function ListingSearchClient() {
  const [filters, setFilters] = React.useState<SearchIndustrialListingsParams>({
    page: 1,
    limit: PAGE_SIZE,
  });
  const [searchInput, setSearchInput] = React.useState('');

  const { data, isLoading, isError } = useIndustrialListingsSearch(filters);

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

  const updateFilter = (key: keyof SearchIndustrialListingsParams, value: string) => {
    setFilters((prev) => ({ ...prev, [key]: value || undefined, page: 1 }));
  };

  const updateNumericFilter = (key: keyof SearchIndustrialListingsParams, value: string) => {
    const num = value ? Number(value) : undefined;
    setFilters((prev) => ({ ...prev, [key]: num, page: 1 }));
  };

  const handlePageChange = (page: number) => {
    setFilters((prev) => ({ ...prev, page }));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleClear = () => {
    setSearchInput('');
    setFilters({ page: 1, limit: PAGE_SIZE });
  };

  const hasFilters = filters.q || filters.propertyType || filters.leaseType ||
    filters.minAreaM2 || filters.maxAreaM2 || filters.minPriceUsdM2 || filters.maxPriceUsdM2;

  return (
    <div className="mx-auto max-w-7xl px-4 py-6">
      {/* Header */}
      <div className="mb-6 flex items-center gap-3">
        <Link href="/khu-cong-nghiep">
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-5 w-5" />
          </Button>
        </Link>
        <div>
          <h1 className="text-2xl font-bold md:text-3xl">Cho Thuê Bất Động Sản Công Nghiệp</h1>
          <p className="mt-1 text-muted-foreground">
            Tìm nhà xưởng, kho bãi, đất công nghiệp cho thuê tại các KCN
          </p>
        </div>
      </div>

      {/* 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 theo tên, KCN, vị trí..."
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
            className="pl-9"
          />
        </div>
        <Button type="submit" size="sm">Tìm</Button>
      </form>

      {/* Filters */}
      <div className="mt-3 flex flex-wrap gap-2">
        <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 BĐS"
        >
          <option value="">Loại BĐS</option>
          {(Object.entries(PROPERTY_TYPE_LABELS) as [IndustrialPropertyType, string][]).map(
            ([value, label]) => (
              <option key={value} value={value}>{label}</option>
            ),
          )}
        </select>

        <select
          value={filters.leaseType ?? ''}
          onChange={(e) => updateFilter('leaseType', e.target.value)}
          className="rounded-md border bg-background px-3 py-1.5 text-sm"
          aria-label="Hình thức"
        >
          <option value="">Hình thức thuê</option>
          {(Object.entries(LEASE_TYPE_LABELS) as [IndustrialLeaseType, string][]).map(
            ([value, label]) => (
              <option key={value} value={value}>{label}</option>
            ),
          )}
        </select>

        <Input
          type="number"
          placeholder="Diện tích từ (m²)"
          value={filters.minAreaM2 ?? ''}
          onChange={(e) => updateNumericFilter('minAreaM2', e.target.value)}
          className="w-36 text-sm"
          aria-label="Diện tích tối thiểu"
        />

        <Input
          type="number"
          placeholder="Diện tích đến (m²)"
          value={filters.maxAreaM2 ?? ''}
          onChange={(e) => updateNumericFilter('maxAreaM2', e.target.value)}
          className="w-36 text-sm"
          aria-label="Diện tích tối đa"
        />

        <Input
          type="number"
          placeholder="Giá từ (USD/m²)"
          value={filters.minPriceUsdM2 ?? ''}
          onChange={(e) => updateNumericFilter('minPriceUsdM2', e.target.value)}
          className="w-36 text-sm"
          aria-label="Giá tối thiểu"
        />

        <Input
          type="number"
          placeholder="Giá đến (USD/m²)"
          value={filters.maxPriceUsdM2 ?? ''}
          onChange={(e) => updateNumericFilter('maxPriceUsdM2', e.target.value)}
          className="w-36 text-sm"
          aria-label="Giá tối đa"
        />

        {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>

      {/* Results */}
      <div className="mt-6">
        {isLoading ? (
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="h-64 animate-pulse rounded-lg bg-muted" />
            ))}
          </div>
        ) : isError ? (
          <div className="py-12 text-center">
            <p className="text-muted-foreground">
              Không thể tải danh sách tin cho thuê. Vui lòng thử lại.
            </p>
            <Button
              variant="outline"
              className="mt-4"
              onClick={() => setFilters({ ...filters })}
            >
              Thử lại
            </Button>
          </div>
        ) : data && data.data.length > 0 ? (
          <>
            <p className="mb-4 text-sm text-muted-foreground">
              {data.total} tin cho thuê được tìm thấy
            </p>

            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {data.data.map((listing) => (
                <IndustrialListingCard key={listing.id} listing={listing} />
              ))}
            </div>

            {/* Pagination */}
            {data.totalPages > 1 && (
              <div className="mt-8 flex items-center justify-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  disabled={filters.page === 1}
                  onClick={() => handlePageChange((filters.page || 1) - 1)}
                >
                  Trước
                </Button>
                <span className="text-sm text-muted-foreground">
                  Trang {data.page} / {data.totalPages}
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={data.page >= data.totalPages}
                  onClick={() => handlePageChange((filters.page || 1) + 1)}
                >
                  Sau
                </Button>
              </div>
            )}
          </>
        ) : (
          <div className="py-12 text-center">
            <Factory className="mx-auto h-12 w-12 text-muted-foreground/30" />
            <p className="mt-4 text-lg font-medium">Không tìm thấy tin cho thuê</p>
            <p className="mt-1 text-sm text-muted-foreground">
              Thử thay đổi bộ lọc để tìm kiếm nhiều hơn
            </p>
          </div>
        )}
      </div>
    </div>
  );
}