'use client';

import { Eye, MapPin, Package } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Link } from '@/i18n/navigation';
import {
  type TransferListingListItem,
  CATEGORY_ICONS,
  CATEGORY_LABELS,
  STATUS_LABELS,
} from '@/lib/chuyen-nhuong-api';

interface TransferListingCardProps {
  listing: TransferListingListItem;
}

function formatVND(value: string): string {
  return new Intl.NumberFormat('vi-VN').format(Number(value)) + ' \u20ab';
}

export function TransferListingCard({ listing }: TransferListingCardProps) {
  const statusColor =
    listing.status === 'ACTIVE' ? 'bg-green-100 text-green-800' :
    listing.status === 'RESERVED' ? 'bg-amber-100 text-amber-800' :
    listing.status === 'SOLD' ? 'bg-red-100 text-red-800' :
    'bg-gray-100 text-gray-800';

  return (
    <Link href={`/chuyen-nhuong/${listing.id}`}>
      <Card className="group h-full transition-shadow hover:shadow-lg">
        <CardContent className="p-5">
          {/* Header */}
          <div className="mb-3 flex items-start justify-between gap-2">
            <div className="min-w-0 flex-1">
              <h3 className="line-clamp-2 font-semibold text-foreground group-hover:text-primary">
                {listing.title}
              </h3>
            </div>
            <Badge className={statusColor} variant="secondary">
              {STATUS_LABELS[listing.status]}
            </Badge>
          </div>

          {/* Category */}
          <div className="mb-3">
            <Badge variant="outline" className="inline-flex items-center gap-1 text-xs">
              {(() => {
                const Icon = CATEGORY_ICONS[listing.category];
                return <Icon className="h-3.5 w-3.5" aria-hidden="true" />;
              })()}
              {CATEGORY_LABELS[listing.category]}
            </Badge>
          </div>

          {/* Location */}
          <div className="mb-3 flex items-center gap-1 text-sm text-muted-foreground">
            <MapPin className="h-3.5 w-3.5 shrink-0" />
            <span className="line-clamp-1">{listing.district}, {listing.city}</span>
          </div>

          {/* Price */}
          <div className="mb-3">
            <p className="text-lg font-bold text-primary">
              {formatVND(listing.askingPriceVND)}
            </p>
            {listing.isNegotiable && (
              <span className="text-xs text-muted-foreground">Thương lượng</span>
            )}
          </div>

          {/* Stats grid */}
          <div className="mb-3 grid grid-cols-3 gap-2">
            <div className="rounded-md bg-muted p-2 text-center">
              <div className="text-xs text-muted-foreground">Món</div>
              <div className="flex items-center justify-center gap-1 font-semibold">
                <Package className="h-3 w-3" />
                {listing.itemCount}
              </div>
            </div>
            <div className="rounded-md bg-muted p-2 text-center">
              <div className="text-xs text-muted-foreground">Lượt xem</div>
              <div className="flex items-center justify-center gap-1 font-semibold">
                <Eye className="h-3 w-3" />
                {listing.viewCount}
              </div>
            </div>
            {listing.areaM2 && (
              <div className="rounded-md bg-muted p-2 text-center">
                <div className="text-xs text-muted-foreground">Diện tích</div>
                <div className="font-semibold">{listing.areaM2} m&sup2;</div>
              </div>
            )}
          </div>

          {/* Footer */}
          {listing.publishedAt && (
            <div className="border-t pt-3 text-xs text-muted-foreground">
              Đăng {new Date(listing.publishedAt).toLocaleDateString('vi-VN')}
            </div>
          )}
        </CardContent>
      </Card>
    </Link>
  );
}