'use client';

import { Building2, MapPin } from 'lucide-react';
import Image from 'next/image';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Link } from '@/i18n/navigation';
import { formatPrice } from '@/lib/currency';
import {
  PROJECT_PROPERTY_TYPE_LABELS,
  PROJECT_STATUS_COLORS,
  PROJECT_STATUS_LABELS,
  type ProjectSummary,
} from '@/lib/du-an-api';
import { cn } from '@/lib/utils';

interface ProjectCardProps {
  project: ProjectSummary;
}

export function ProjectCard({ project }: ProjectCardProps) {
  const statusLabel = PROJECT_STATUS_LABELS[project.status];
  const statusColor = PROJECT_STATUS_COLORS[project.status];
  const propertyLabels = project.propertyTypes
    .map((t) => PROJECT_PROPERTY_TYPE_LABELS[t])
    .join(', ');

  return (
    <Link href={`/du-an/${project.slug}`}>
      <Card className="group overflow-hidden transition-shadow hover:shadow-lg">
        {/* Thumbnail */}
        <div className="relative aspect-[16/10] overflow-hidden bg-muted">
          {project.thumbnailUrl ? (
            <Image
              src={project.thumbnailUrl}
              alt={project.name}
              fill
              className="object-cover transition-transform group-hover:scale-105"
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            />
          ) : (
            <div className="flex h-full items-center justify-center">
              <Building2 className="h-12 w-12 text-muted-foreground/30" />
            </div>
          )}
          <Badge
            className={cn('absolute left-3 top-3 text-xs', statusColor)}
            variant="secondary"
          >
            {statusLabel}
          </Badge>
        </div>

        <CardContent className="p-4">
          <h3 className="line-clamp-1 text-base font-semibold group-hover:text-primary">
            {project.name}
          </h3>

          <div className="mt-1 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">
              {project.district}, {project.city}
            </span>
          </div>

          <div className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
            <Building2 className="h-3 w-3 shrink-0" />
            <span>{propertyLabels}</span>
          </div>

          {/* Developer */}
          <p className="mt-2 text-xs text-muted-foreground">
            {project.developer.name}
          </p>

          {/* Price range */}
          <div className="mt-3 flex items-baseline justify-between">
            {project.minPrice ? (
              <p className="text-sm font-bold text-primary">
                {formatPrice(project.minPrice)}
                {project.maxPrice && project.maxPrice !== project.minPrice && (
                  <span> – {formatPrice(project.maxPrice)}</span>
                )}
              </p>
            ) : (
              <p className="text-sm text-muted-foreground">Liên hệ</p>
            )}
            <span className="text-xs text-muted-foreground">
              {project.totalUnits} căn
            </span>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}