// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   components/RestoCard.tsx
// Desc:   Carte de restaurant (grille de résultats) — même patron que la
//         ListingCard de Lou·Ka : prix en tête, badge de contexte de prix
//         TOUJOURS affiché (CLAUDE.md §6.2), source en pied de carte.
// ==============================================================================
import { Link } from "react-router-dom";
import {
  CONTEXT_SHORT, Restaurant, cuisineLabel, fmtPrice, sourceName, typeLabel,
} from "../api";
import { FavButton } from "../favorites";
import { IcoPlate } from "./Icons";

export default function RestoCard({ r }: { r: Restaurant }) {
  const ms = r.menu_summary;
  const img = ms?.image || (r.images ?? [])[1] || null;   // photo de plat d'abord
  const logo = (r.images ?? [])[0] || null;
  return (
    <Link to={`/resto/${encodeURIComponent(r.uid)}`} className="card">
      <div className="card-img">
        {img ? (
          <img src={img} alt={r.name} loading="lazy" />
        ) : logo ? (
          <div className="noimg"><img className="card-logo" src={logo} alt={r.name} loading="lazy" /></div>
        ) : (
          <div className="noimg"><IcoPlate size={38} strokeWidth={1.6} /></div>
        )}
        {r.price_range && <span className="badge type">{r.price_range}</span>}
        {r.ka_reco && (
          <span
            className="badge ka-reco"
            title="Correspond à vos préférences KA ID — gérez-les sur groupe-ka.com/mon-ka"
          >
            Recommandé pour vous
          </span>
        )}
        {ms && (
          <span className={`badge right ctx ctx-${ms.price_context}`}>
            {CONTEXT_SHORT[ms.price_context] ?? ms.price_context}
          </span>
        )}
        <FavButton r={r} />
      </div>
      <div className="card-body">
        <div className="card-price">
          {ms?.price_median != null ? (
            <>
              {fmtPrice(ms.price_median)} <small>plat médian</small>
            </>
          ) : (
            <span className="no-menu">Menu à venir</span>
          )}
        </div>
        <div className="card-title">{r.name}</div>
        <div className="card-meta">
          <span>{typeLabel(r.establishment_type)}</span>
          {r.cuisines.slice(0, 2).map((c) => (
            <span key={c}>
              <span className="sep" /> {cuisineLabel(c)}
            </span>
          ))}
        </div>
        <div className="card-meta">
          {r.city && <span>{r.city}</span>}
          {r.city && r.region && <span className="sep" />}
          {r.region && <span>{r.region}</span>}
        </div>
        <div className="card-foot">
          <span className="source-tag">{sourceName(r.source)}</span>
          {ms && <span className="avail">{ms.item_count} plats au menu</span>}
        </div>
      </div>
    </Link>
  );
}