// Vrai-Prix — carte d'annonce (liste « À vendre », voisines, comparables en vente).
"use client";
import Link from "next/link";
import type { ListingCard } from "@/lib/immoka";
import { TYPE_GROUPS } from "@/lib/listing-types";
import { money, num, pct, sqftToM2 } from "./fmt";

export function groupLabel(key: string, fr: boolean): string {
  const g = TYPE_GROUPS.find((x) => x.key === key);
  return g ? (fr ? g.fr : g.en) : key;
}

/** Pastille écart estimation vs prix demandé (encre = au-dessus, rouge = en-dessous). */
export function RatioPill({ ratio, fr, size = "sm" }: { ratio: number | null; fr: boolean; size?: "sm" | "md" }) {
  const cls = size === "md" ? "px-2.5 py-1 text-[11px]" : "px-1.5 py-0.5 text-[9.5px]";
  if (ratio == null)
    return (
      <span className={`vp-mono inline-block border border-[var(--line)] uppercase tracking-[0.06em] text-ink-3 ${cls}`}>
        {fr ? "non évaluée" : "not evaluated"}
      </span>
    );
  const d = (ratio - 1) * 100;
  const tone =
    Math.abs(d) < 5
      ? "border-[var(--line-strong)] text-ink"
      : d > 0
        ? "border-ink bg-ink text-paper"
        : "border-[var(--danger)] text-[var(--danger)]";
  return (
    <span className={`vp-mono inline-block border font-bold uppercase tracking-[0.06em] ${tone} ${cls}`} title={fr ? "Estimation Vrai-Prix vs prix demandé" : "Vrai-Prix estimate vs asking price"}>
      {fr ? "éval." : "est."} {pct(d, fr ? "fr" : "en")}
    </span>
  );
}

/** Badge « Coût IA » — affiché seulement quand une analyse IA complète existe pour l'annonce (jamais avant). */
export function AiCostBadge({ rcn, fr }: { rcn: number | null; fr: boolean }) {
  return (
    <span className="vp-mono inline-block border border-[var(--accent)] px-1.5 py-0.5 text-[9.5px] font-bold uppercase tracking-[0.06em] text-[var(--accent-deep)]" title={fr ? "Analyse IA du bâtiment disponible" : "AI building analysis available"}>
      {rcn ? `RCN ${fr ? "estimé" : "est."} ${Math.round(rcn / 1000)} k$` : fr ? "Coût IA disponible" : "AI cost available"}
    </span>
  );
}

export default function ListingCardView({ c, fr, compact = false, ai = null }: { c: ListingCard; fr: boolean; compact?: boolean; ai?: { rcn: number | null } | null }) {
  const lang = fr ? "fr" : "en";
  const area = sqftToM2(c.areaSqft);
  const facts = [
    c.bedrooms != null ? `${c.bedrooms} ${fr ? "ch." : "bd"}` : null,
    c.bathrooms != null ? `${c.bathrooms} ${fr ? "sdb" : "ba"}` : null,
    area ? `${num(area, lang)} m²` : null,
    c.yearBuilt ? `${c.yearBuilt}` : null,
  ].filter((x): x is string => x != null);
  return (
    <Link
      href={`/a-vendre/${encodeURIComponent(c.uid)}`}
      className="group flex flex-col border border-[var(--line)] bg-surface transition-colors hover:border-[var(--line-strong)]"
    >
      <div className={`relative w-full overflow-hidden bg-[var(--surface-2)] ${compact ? "aspect-[4/3]" : "aspect-[3/2]"}`}>
        {c.image ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={c.image}
            alt=""
            loading="lazy"
            referrerPolicy="no-referrer"
            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.02]"
          />
        ) : (
          <div className="vp-mono flex h-full w-full items-center justify-center text-[10px] uppercase tracking-[0.1em] text-ink-3">
            {fr ? "sans photo" : "no photo"}
          </div>
        )}
        <span className="vp-mono absolute left-2 top-2 bg-paper/95 px-1.5 py-0.5 text-[9.5px] uppercase tracking-[0.08em] text-ink-2">
          {groupLabel(c.group, fr)}
        </span>
        {c.nImages > 1 && (
          <span className="vp-mono absolute bottom-2 right-2 bg-ink/80 px-1.5 py-0.5 text-[9.5px] text-paper">
            {c.nImages} 📷
          </span>
        )}
      </div>
      <div className="flex flex-1 flex-col p-3">
        <div className="flex items-baseline justify-between gap-2">
          <p className="vp-display text-[19px] font-bold leading-none tracking-[-0.02em]">{money(c.price, lang)}</p>
          <span className="flex flex-wrap items-center justify-end gap-1">
            {ai ? <AiCostBadge rcn={ai.rcn} fr={fr} /> : null}
            <RatioPill ratio={c.ratio} fr={fr} />
          </span>
        </div>
        <p className="mt-2 truncate text-[13.5px] font-semibold leading-snug">{c.address || c.propertyType || "—"}</p>
        <p className="truncate text-[12px] text-ink-2">
          {[c.sector, c.municipalite ?? c.city].filter(Boolean).join(" · ")}
        </p>
        <p className="vp-mono mt-2 text-[10px] uppercase tracking-[0.05em] text-ink-3">
          {facts.length ? facts.join(" · ") : c.propertyType ?? ""}
          {c.distanceM != null ? ` · ${c.distanceM < 1000 ? `${c.distanceM} m` : `${(c.distanceM / 1000).toFixed(1)} km`}` : ""}
        </p>
        {c.est != null && (
          <p className="vp-mono mt-auto pt-2 text-[10px] uppercase tracking-[0.05em] text-ink-2">
            {fr ? "Vrai-Prix" : "Vrai-Prix"} <b className="text-ink">{money(c.est, lang)}</b>
            {c.confidence ? ` · ${fr ? "conf." : "conf."} ${c.confidence}` : ""}
          </p>
        )}
      </div>
    </Link>
  );
}