goodgo-platform/apps/web/components/search/search-results.tsx

'use client';

import * as React from 'react';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import type { ListingDetail, PaginatedResult } from '@/lib/listings-api';
import { PropertyCard } from './property-card';

interface SearchResultsProps {
  result: PaginatedResult<ListingDetail> | null;
  loading: boolean;
  error?: boolean;
  onRetry?: () => void;
  page: number;
  sort: string;
  onPageChange: (page: number) => void;
  onSortChange: (sort: string) => void;
}

export function SearchResults({
  result,
  loading,
  error,
  onRetry,
  page,
  sort,
  onPageChange,
  onSortChange,
}: SearchResultsProps) {
  if (loading) {
    return (
      <div className="flex min-h-[400px] items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex min-h-[400px] flex-col items-center justify-center gap-3 text-muted-foreground">
        <p className="text-lg font-medium">Không thể tải kết quả tìm kiếm</p>
        <p className="text-sm">Đã xảy ra lỗi. Vui lòng thử lại.</p>
        {onRetry && (
          <Button variant="outline" size="sm" onClick={onRetry}>
            Thử lại
          </Button>
        )}
      </div>
    );
  }

  if (!result || result.data.length === 0) {
    return (
      <div className="flex min-h-[400px] flex-col items-center justify-center text-muted-foreground">
        <svg
          className="mb-4 h-16 w-16 text-muted-foreground/50"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
          />
        </svg>
        <p className="text-lg font-medium">Không tìm thấy kết quả</p>
        <p className="mt-1 text-sm">Hãy thử thay đổi bộ lọc để tìm kiếm rộng hơn</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-sm text-muted-foreground">
          {result.total} kết quả
        </p>
        <Select
          value={sort}
          onChange={(e) => onSortChange(e.target.value)}
          className="w-full sm:w-48"
        >
          <option value="">Mới nhất</option>
          <option value="price_asc">Giá: Thấp đến cao</option>
          <option value="price_desc">Giá: Cao đến thấp</option>
          <option value="area_asc">Diện tích: Nhỏ đến lớn</option>
          <option value="area_desc">Diện tích: Lớn đến nhỏ</option>
        </Select>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {result.data.map((listing) => (
          <PropertyCard key={listing.id} listing={listing} />
        ))}
      </div>

      {result.totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 pt-4">
          <Button
            variant="outline"
            size="sm"
            disabled={page <= 1}
            onClick={() => onPageChange(page - 1)}
          >
            Trước
          </Button>
          <div className="flex gap-1">
            {Array.from({ length: Math.min(result.totalPages, 5) }, (_, i) => {
              let pageNum: number;
              if (result.totalPages <= 5) {
                pageNum = i + 1;
              } else if (page <= 3) {
                pageNum = i + 1;
              } else if (page >= result.totalPages - 2) {
                pageNum = result.totalPages - 4 + i;
              } else {
                pageNum = page - 2 + i;
              }
              return (
                <Button
                  key={pageNum}
                  variant={pageNum === page ? 'default' : 'outline'}
                  size="sm"
                  className="w-9"
                  onClick={() => onPageChange(pageNum)}
                >
                  {pageNum}
                </Button>
              );
            })}
          </div>
          <Button
            variant="outline"
            size="sm"
            disabled={page >= result.totalPages}
            onClick={() => onPageChange(page + 1)}
          >
            Tiếp
          </Button>
        </div>
      )}
    </div>
  );
}