"use client";
import Link from "next/link";
import { useState } from "react";
import type { ListingCard as Card } from "@/lib/types";
import { fmtPrice, fmtArea, fmtInt } from "@/lib/format";
import { CATEGORY_LABEL } from "@/lib/normalize";
import { useCompare, useFavorites } from "@/lib/favorites";
import { IconHeart, IconCompare } from "./icons";
import { VerdictPill } from "./verdict-pill";

export function listingHref(c: { uid: string }) { return `/annonce/${encodeURIComponent(c.uid)}`; }

export function ListingCardView({ c, compact = false, priority = false }: { c: Card; compact?: boolean; priority?: boolean }) {
  const fav = useFavorites(); const cmp = useCompare();
  const [imgOk, setImgOk] = useState(true);
  const rent = c.market === "rent";
  const sub = [c.typeLabel && !rent ? CATEGORY_LABEL[c.category] ?? c.typeLabel : c.typeLabel ?? CATEGORY_LABEL[c.category], c.bedrooms != null ? `${fmtInt(c.bedrooms)} ch.` : null, c.bathrooms != null ? `${fmtInt(c.bathrooms)} sdb` : null, c.areaSqft ? fmtArea(c.areaSqft) : null].filter(Boolean).join(" · ");
  return (
    <article className={`tv-card overflow-hidden group relative ${compact ? "flex gap-3" : ""}`}>
      <Link href={listingHref(c)} className={`block relative bg-surface-2 ${compact ? "w-28 h-24 shrink-0" : "aspect-[4/3]"}`} aria-label={`${c.address ?? "Propriété"}, ${c.city ?? ""}`}>
        {c.image && imgOk ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={c.image} alt="" className="absolute inset-0 w-full h-full object-cover transition group-hover:scale-[1.02]" loading={priority ? "eager" : "lazy"} referrerPolicy="no-referrer" onError={() => setImgOk(false)} />
        ) : (
          <div className="absolute inset-0 grid place-items-center text-ink-3 text-xs">Photo non disponible</div>
        )}
        {!compact && c.imageCount > 1 && <span className="absolute bottom-2 right-2 tv-badge bg-black/55 text-white backdrop-blur">{c.imageCount} photos</span>}
        {!compact && <span className="absolute top-2 left-2 tv-badge bg-white/90 text-ink-2">{rent ? "À louer" : "À vendre"}</span>}
      </Link>
      {!compact && (
        <div className="absolute top-2 right-2 flex gap-1">
          <button type="button" onClick={() => cmp.toggle(c.uid)} className={`p-1.5 rounded-full bg-white/90 hover:bg-white shadow ${cmp.has(c.uid) ? "text-brand" : "text-ink-2"}`} aria-pressed={cmp.has(c.uid)} aria-label="Comparer" title="Ajouter au comparateur"><IconCompare width={16} height={16} /></button>
          <button type="button" onClick={() => fav.toggle(c.uid)} className={`p-1.5 rounded-full bg-white/90 hover:bg-white shadow ${fav.has(c.uid) ? "text-brand" : "text-ink-2"}`} aria-pressed={fav.has(c.uid)} aria-label={fav.has(c.uid) ? "Retirer des favoris" : "Ajouter aux favoris"}><IconHeart width={16} height={16} filled={fav.has(c.uid)} /></button>
        </div>
      )}
      <div className={`p-3 ${compact ? "min-w-0 flex-1" : ""}`}>
        <div className="flex flex-wrap items-center justify-between gap-x-2 gap-y-1">
          <p className={`tv-price text-ink whitespace-nowrap ${compact ? "text-base" : "text-[17px] sm:text-lg"}`}>{fmtPrice(c.price, { rent })}</p>
          {!compact && <VerdictPill verdict={c.verdict} ratio={c.ratio} confidence={c.confidence} small />}
        </div>
        <Link href={listingHref(c)} className="block mt-0.5 text-sm font-medium text-ink truncate hover:underline">{c.address ?? "Adresse non précisée"}</Link>
        <p className="text-xs text-ink-2 truncate">{c.city}{c.region && c.region !== c.city ? `, ${c.region}` : ""}</p>
        <p className="mt-1 text-xs text-ink-3 truncate">{sub}</p>
      </div>
    </article>
  );
}