'use client';

import Link from 'next/link';
import { MapPin, Star } from 'lucide-react';
import { useTranslations } from 'next-intl';
import type { ServiceSummary } from '@/types/api';
import { formatPrice } from '@/lib/utils';
import { Badge, SmartImage } from '@/components/ui';
import { WishlistButton } from '@/components/ui/WishlistButton';
import { demoForServiceType } from '@/lib/demo-images';

const TYPE_BADGE: Record<string, 'warning' | 'success' | 'info'> = {
  rental: 'warning',
  sale: 'success',
  digital: 'info',
};

interface ServiceCardClientProps {
  service: ServiceSummary;
  locale: string;
}

export function ServiceCardClient({ service, locale }: ServiceCardClientProps) {
  const tProductTypes = useTranslations('product_types');
  const tService = useTranslations('service');
  const href = `/${locale}/services/${service.public_id}`;
  const badgeVariant = TYPE_BADGE[service.product_type] ?? 'neutral';
  const typeLabel = tProductTypes(service.product_type as Parameters<typeof tProductTypes>[0]);
  const fromLabel = tService('from');
  const newLabel = tService('new');

  return (
    <article
      aria-label={service.name}
      className="group rounded-xl border border-neutral-200 bg-white overflow-hidden transition-shadow hover:shadow-[0_4px_16px_-4px_rgb(0_0_0/0.12)]"
    >
      <div className="relative aspect-[4/3] bg-neutral-100 overflow-hidden">
        <Link href={href} tabIndex={-1} aria-hidden className="block h-full w-full">
          <SmartImage
            src={service.cover_image_url}
            alt={service.name}
            entity
            placeholderLabel={service.name}
            fallbackCategory={demoForServiceType(service.product_type, service.name)}
            fallbackSeed={service.public_id}
            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 280px"
            className="h-full w-full"
            imgClassName="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
          />
        </Link>
        <span className="absolute end-2 top-2 z-10">
          <Badge variant={badgeVariant} className="text-[10px] font-medium">
            {typeLabel}
          </Badge>
        </span>
        <span className="absolute start-2 top-2 z-10">
          <WishlistButton servicePublicId={service.public_id} locale={locale} />
        </span>
      </div>

      <div className="p-3">
        <Link
          href={href}
          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-600"
        >
          <p className="line-clamp-2 text-sm font-medium leading-snug text-neutral-900 text-start">
            {service.name}
          </p>
        </Link>

        {service.vendor ? (
          <Link
            href={`/${locale}/vendors/${service.vendor.public_id}`}
            className="mt-0.5 block truncate text-xs text-primary-600 hover:underline text-start"
          >
            {service.vendor.business_name}
          </Link>
        ) : null}

        <div className="mt-2 flex items-center gap-1 text-xs">
          {service.rating_avg !== null && service.rating_count > 0 ? (
            <>
              <Star className="h-3 w-3 fill-amber-400 text-amber-400 flex-shrink-0" aria-hidden />
              <span className="font-medium text-neutral-700">{service.rating_avg.toFixed(1)}</span>
              <span className="text-neutral-400">· {service.rating_count}</span>
            </>
          ) : (
            <span className="text-neutral-400">{newLabel}</span>
          )}
        </div>

        {service.service_area_hint ? (
          <p className="mt-1 truncate text-xs text-neutral-400 text-start flex items-center gap-1">
            <MapPin className="h-3 w-3 flex-shrink-0" aria-hidden />
            {service.service_area_hint}
          </p>
        ) : null}

        <p className="mt-2 text-sm font-semibold text-primary-700 text-start">
          {fromLabel}{' '}
          {formatPrice(service.price_from_minor, locale, service.currency)}
        </p>
      </div>
    </article>
  );
}