'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import type { ValuationHistoryItem } from '@/lib/valuation-api';

interface ValuationHistoryProps {
  items: ValuationHistoryItem[];
  total: number;
  page: number;
  onPageChange: (page: number) => void;
  onSelect: (id: string) => void;
  isLoading?: boolean;
}

function formatPrice(num: number): string {
  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(2)} ty`;
  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} trieu`;
  return num.toLocaleString('vi-VN');
}

const PROPERTY_TYPE_LABELS: Record<string, string> = {
  APARTMENT: 'Can ho',
  HOUSE: 'Nha rieng',
  VILLA: 'Biet thu',
  LAND: 'Dat nen',
  OFFICE: 'Van phong',
  SHOPHOUSE: 'Shophouse',
};

export function ValuationHistory({
  items,
  total,
  page,
  onPageChange,
  onSelect,
  isLoading,
}: ValuationHistoryProps) {
  const totalPages = Math.ceil(total / 10);

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">Lich su dinh gia</CardTitle>
        <CardDescription>
          {total} lan dinh gia truoc do
        </CardDescription>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="flex h-32 items-center justify-center text-muted-foreground">
            Dang tai...
          </div>
        ) : items.length === 0 ? (
          <div className="flex h-32 items-center justify-center text-muted-foreground">
            Chua co lich su dinh gia
          </div>
        ) : (
          <>
            <div className="space-y-2">
              {items.map((item) => (
                <button
                  key={item.id}
                  type="button"
                  onClick={() => onSelect(item.id)}
                  className="flex w-full items-center gap-4 rounded-lg border p-3 text-left transition-colors hover:bg-accent"
                >
                  <div className="min-w-0 flex-1">
                    <p className="font-medium">
                      {PROPERTY_TYPE_LABELS[item.propertyType] || item.propertyType}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      {item.district}, {item.city} &middot; {item.area} m2
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="font-semibold text-primary">
                      {formatPrice(item.estimatedPriceVND)}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      {new Date(item.createdAt).toLocaleDateString('vi-VN')}
                    </p>
                  </div>
                </button>
              ))}
            </div>

            {totalPages > 1 && (
              <div className="mt-4 flex items-center justify-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  disabled={page <= 1}
                  onClick={() => onPageChange(page - 1)}
                >
                  Truoc
                </Button>
                <span className="text-sm text-muted-foreground">
                  Trang {page}/{totalPages}
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={page >= totalPages}
                  onClick={() => onPageChange(page + 1)}
                >
                  Tiep
                </Button>
              </div>
            )}
          </>
        )}
      </CardContent>
    </Card>
  );
}