'use client';

import { Package, Search, X } from 'lucide-react';
import * as React from 'react';
import { TransferListingCard } from '@/components/chuyen-nhuong/transfer-listing-card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  type SearchTransferListingsParams,
  type TransferCategory,
  type TransferListingStatus,
  CATEGORY_ICONS,
  CATEGORY_LABELS,
  STATUS_LABELS,
} from '@/lib/chuyen-nhuong-api';
import { useTransferListingsSearch } from '@/lib/hooks/use-chuyen-nhuong';
import { HCM_DISTRICTS } from '@/lib/vietnam-geo';

const PAGE_SIZE = 12;

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

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

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setFilters((prev) => ({ ...prev, q: searchInput.trim() || undefined, page: 1 }));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleCategoryChange = (category: TransferCategory | undefined) => {
    setFilters((prev) => ({ ...prev, category, page: 1 }));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const updateFilter = (key: keyof SearchTransferListingsParams, value: string) => {
    setFilters((prev) => ({ ...prev, [key]: value || undefined, 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.category || filters.status || filters.district;

  return (
    <div className="mx-auto max-w-7xl px-4 py-6">
      {/* Page header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold md:text-3xl">Chuyển Nhượng</h1>
        <p className="mt-1 text-muted-foreground">
          Tìm kiếm nội thất, thiết bị và mặt bằng chuyển nhượng
        </p>
      </div>

      {/* Search bar */}
      <div className="space-y-3">
        <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, quận, loại hì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={filters.district ?? ''}
            onChange={(e) => updateFilter('district', e.target.value)}
            className="rounded-md border bg-background px-3 py-1.5 text-sm"
            aria-label="Quận/Huyện"
          >
            <option value="">Quận/Huyện</option>
            {HCM_DISTRICTS.map((d) => (
              <option key={d} value={d}>{d}</option>
            ))}
          </select>

          <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(STATUS_LABELS) as [TransferListingStatus, 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>

      {/* Category tabs */}
      <div className="mt-4 flex gap-1 overflow-x-auto border-b" role="tablist">
        <button
          role="tab"
          aria-selected={!filters.category}
          className={`shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
            !filters.category
              ? 'border-primary text-primary'
              : 'border-transparent text-muted-foreground hover:text-foreground'
          }`}
          onClick={() => handleCategoryChange(undefined)}
        >
          Tất cả
        </button>
        {(Object.entries(CATEGORY_LABELS) as [TransferCategory, string][]).map(([key, label]) => {
          const Icon = CATEGORY_ICONS[key];
          return (
            <button
              key={key}
              role="tab"
              aria-selected={filters.category === key}
              className={`inline-flex shrink-0 items-center gap-1.5 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
                filters.category === key
                  ? 'border-primary text-primary'
                  : 'border-transparent text-muted-foreground hover:text-foreground'
              }`}
              onClick={() => handleCategoryChange(key)}
            >
              <Icon className="h-4 w-4" aria-hidden="true" />
              {label}
            </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-72 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 chuyển nhượng. 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 chuyển nhượng được tìm thấy
            </p>

            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {data.data.map((listing) => (
                <TransferListingCard 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">
            <Package 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 chuyển nhượng</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>
  );
}