goodgo-platform/apps/web/app/(dashboard)/listings/page.tsx

'use client';

import * as React from 'react';
import Link from 'next/link';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Select } from '@/components/ui/select';
import { ListingStatusBadge } from '@/components/listings/listing-status-badge';
import { listingsApi, type ListingDetail, type PaginatedResult } from '@/lib/listings-api';
import { PROPERTY_TYPES, TRANSACTION_TYPES } from '@/lib/validations/listings';

function formatPrice(priceVND: string): string {
  const num = Number(priceVND);
  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} triệu`;
  return num.toLocaleString('vi-VN');
}

export default function ListingsPage() {
  const [result, setResult] = React.useState<PaginatedResult<ListingDetail> | null>(null);
  const [loading, setLoading] = React.useState(true);
  const [filters, setFilters] = React.useState({
    transactionType: '',
    propertyType: '',
    page: 1,
  });

  React.useEffect(() => {
    setLoading(true);
    const params: Record<string, string | number> = { page: filters.page, limit: 12 };
    if (filters.transactionType) params['transactionType'] = filters.transactionType;
    if (filters.propertyType) params['propertyType'] = filters.propertyType;

    listingsApi
      .search(params)
      .then(setResult)
      .catch(() => setResult(null))
      .finally(() => setLoading(false));
  }, [filters]);

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <h1 className="text-2xl font-bold">Tin đăng</h1>
        <Link href="/listings/new">
          <Button>Đăng tin mới</Button>
        </Link>
      </div>

      {/* Filters */}
      <div className="flex flex-wrap gap-3">
        <Select
          value={filters.transactionType}
          onChange={(e) => setFilters((f) => ({ ...f, transactionType: e.target.value, page: 1 }))}
          className="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) => setFilters((f) => ({ ...f, propertyType: e.target.value, page: 1 }))}
          className="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>
      </div>

      {/* Listing grid */}
      {loading ? (
        <div className="flex min-h-[300px] items-center justify-center">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
        </div>
      ) : !result || result.data.length === 0 ? (
        <div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
          <p>Chưa có tin đăng nào</p>
          <Link href="/listings/new" className="mt-2">
            <Button variant="outline" size="sm">
              Đăng tin đầu tiên
            </Button>
          </Link>
        </div>
      ) : (
        <>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {result.data.map((listing) => (
              <Link key={listing.id} href={`/listings/${listing.id}`}>
                <Card className="h-full overflow-hidden transition-shadow hover:shadow-md">
                  <div className="relative aspect-[4/3] bg-muted">
                    {listing.property.media.length > 0 ? (
                      <img
                        src={listing.property.media[0]?.url}
                        alt={listing.property.title}
                        className="h-full w-full object-cover"
                      />
                    ) : (
                      <div className="flex h-full items-center justify-center text-muted-foreground">
                        Chưa có ảnh
                      </div>
                    )}
                    <div className="absolute left-2 top-2">
                      <ListingStatusBadge status={listing.status} />
                    </div>
                  </div>
                  <CardContent className="p-4">
                    <p className="text-lg font-bold text-primary">
                      {formatPrice(listing.priceVND)} VNĐ
                    </p>
                    <h3 className="mt-1 line-clamp-1 font-medium">{listing.property.title}</h3>
                    <p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
                      {listing.property.district}, {listing.property.city}
                    </p>
                    <div className="mt-3 flex flex-wrap gap-1.5">
                      <Badge variant="secondary" className="text-xs">
                        {listing.property.areaM2} m²
                      </Badge>
                      {listing.property.bedrooms != null && (
                        <Badge variant="secondary" className="text-xs">
                          {listing.property.bedrooms} PN
                        </Badge>
                      )}
                      {listing.property.bathrooms != null && listing.property.bathrooms > 0 && (
                        <Badge variant="secondary" className="text-xs">
                          {listing.property.bathrooms} PT
                        </Badge>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>

          {/* Pagination */}
          {result.totalPages > 1 && (
            <div className="flex items-center justify-center gap-2">
              <Button
                variant="outline"
                size="sm"
                disabled={filters.page <= 1}
                onClick={() => setFilters((f) => ({ ...f, page: f.page - 1 }))}
              >
                Trước
              </Button>
              <span className="text-sm text-muted-foreground">
                Trang {result.page} / {result.totalPages}
              </span>
              <Button
                variant="outline"
                size="sm"
                disabled={filters.page >= result.totalPages}
                onClick={() => setFilters((f) => ({ ...f, page: f.page + 1 }))}
              >
                Tiếp
              </Button>
            </div>
          )}
        </>
      )}
    </div>
  );
}