// -----------------------------------------------------------------------------
// Lou-Ka — Location court terme
// pages/CourtTermeFiche.tsx : fiche d'un hébergement court terme.
//   Ordre DOM = ordre visuel, identique mobile ET desktop (standard Groupe Ka
//   « Ordre des sections — pages détail ») : galerie → prix + titre + chips +
//   CTA → description → commodités → détails pratiques → carte.
// -----------------------------------------------------------------------------
import { lazy, Suspense, useEffect, useRef, useState } from "react";
import { Link, useParams } from "react-router-dom";
import {
  CtContext, CtListing, ctSourceCategory, ctSourceName, fetchCtContext,
  fetchCtListing, fetchCtSources, fmtNight, registerCtSourceNames,
} from "../ctapi";
import SmartImg from "../components/SmartImg";
import CtListingCard from "../components/CtListingCard";
import CtPriceAnalysis, { ctDealBadge } from "../components/CtPriceAnalysis";
import { IcoAlert } from "../components/Icons";

const CtFicheMap = lazy(() => import("../components/CtFicheMap"));

const NBSP = " ";

const PETS_LABEL: Record<string, string> = {
  oui: "Animaux acceptés", non: "Animaux refusés", conditions: "Animaux sous conditions",
};

const DETAIL_LABELS: Record<string, string> = {
  spa: "Spa", pool: "Piscine", waterfront: "Bord de l'eau", sauna: "Sauna",
  wifi: "Wi-Fi", fireplace: "Foyer", ev_charger: "Borne de recharge",
};

function Galerie({ images, titre, typeLabel }:
                 { images: string[]; titre: string; typeLabel?: string }) {
  const [idx, setIdx] = useState(0);
  const track = useRef<HTMLDivElement>(null);

  const onScroll = () => {
    const el = track.current;
    if (el) setIdx(Math.round(el.scrollLeft / el.clientWidth));
  };
  const goto = (i: number) =>
    track.current?.scrollTo({ left: i * track.current.clientWidth, behavior: "smooth" });

  if (images.length === 0)
    return (
      <div className="carousel">
        <SmartImg src={null} fallbackLabel={typeLabel}
                  alt="Aucune photo fournie par la source" />
      </div>
    );

  return (
    <>
      <div className="carousel">
        <div className="carousel-track" ref={track} onScroll={onScroll}>
          {images.map((u, i) => (
            <SmartImg
              key={u} src={u} width_={800} fallbackLabel={typeLabel}
              loading={i === 0 ? "eager" : "lazy"} decoding="async"
              alt={`${titre} — photo ${i + 1} de ${images.length}`}
            />
          ))}
        </div>
        <span className="carousel-count" aria-live="polite">{idx + 1}/{images.length}</span>
        {idx > 0 && (
          <button className="carousel-nav prev" aria-label="Photo précédente" onClick={() => goto(idx - 1)}>‹</button>
        )}
        {idx < images.length - 1 && (
          <button className="carousel-nav next" aria-label="Photo suivante" onClick={() => goto(idx + 1)}>›</button>
        )}
      </div>
      {images.length > 1 && (
        <div className="thumbs">
          {images.map((u, i) => (
            <button key={u} className={i === idx ? "on" : ""} onClick={() => goto(i)}
                    aria-label={`Photo ${i + 1}`}>
              <SmartImg src={u} width_={160} alt="" loading="lazy" decoding="async" />
            </button>
          ))}
        </div>
      )}
    </>
  );
}

export default function CourtTermeFichePage() {
  const { uid } = useParams<{ uid: string }>();
  const [l, setL] = useState<CtListing | null>(null);
  const [ctx, setCtx] = useState<CtContext | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchCtSources().then((r) => registerCtSourceNames(r.sources)).catch(() => {});
    if (!uid) return;
    setCtx(null);
    fetchCtListing(uid).then(setL).catch((e) => setError(String(e)));
    fetchCtContext(uid).then(setCtx).catch(() => setCtx(null));
    window.scrollTo(0, 0);
  }, [uid]);

  if (error)
    return (
      <div className="notice container">
        <div className="big"><IcoAlert size={40} /></div>
        <h2>Hébergement introuvable</h2>
        <p>{error}</p>
        <Link className="btn btn-primary" to="/court-terme">Retour au court terme</Link>
      </div>
    );

  if (!l)
    return (
      <div className="container detail">
        <div className="fiche" aria-busy="true">
          <div className="skel"><div className="sk-img" /></div>
          <div className="skel"><div className="sk-line" /><div className="sk-line" /><div className="sk-line short" /></div>
        </div>
      </div>
    );

  const chips: string[] = [];
  if (l.property_type) chips.push(l.property_type);
  if (l.capacity) chips.push(`${l.capacity} personnes`);
  if (l.bedrooms) chips.push(`${l.bedrooms} chambre${l.bedrooms > 1 ? "s" : ""}`);
  if (l.beds) chips.push(`${l.beds} lit${l.beds > 1 ? "s" : ""}`);
  if (l.bathrooms) chips.push(`${l.bathrooms} salle${l.bathrooms > 1 ? "s" : ""} de bain`);
  if (l.pets) chips.push(PETS_LABEL[l.pets] ?? l.pets);
  if (l.citq) chips.push(`CITQ ${l.citq}`);

  const flags = Object.entries(DETAIL_LABELS)
    .filter(([k]) => l.details?.[k] === true || l.details?.[k] === 1)
    .map(([, label]) => label);
  const autres = l.amenities.filter(
    (a) => !flags.some((b) => b.toLowerCase() === a.toLowerCase()));

  const ctaLabel = ctSourceCategory(l.source) === "hotels"
    ? "Réserver en direct à l'hôtel"
    : `Réserver chez ${ctSourceName(l.source)}`;

  const synced = l.last_seen
    ? new Date(l.last_seen * 1000).toLocaleDateString("fr-CA", {
        day: "numeric", month: "long", year: "numeric" }) : null;

  return (
    <div className="container detail">
      <nav className="crumbs" aria-label="Fil d'Ariane">
        <Link to="/court-terme">Court terme</Link> ›
        {l.region && <span>{l.region}</span>} ›
        <span>{l.title}</span>
      </nav>

      <div className="fiche">
        <div className="f-col">
          <section className="f-bloc f-galerie" aria-label="Photos">
            <Galerie images={l.images ?? []} titre={l.title}
                     typeLabel={l.property_type || "Séjour"} />
          </section>

          <section className="f-bloc f-hero">
            <div className="price">
              {fmtNight(l.price_night, l.price_label)}
              {l.price_night != null && <small> /{NBSP}nuit</small>}
            </div>
            {(() => {
              const badge = ctDealBadge(ctx?.price ?? null);
              return badge && (
                <div className={`deal-badge ${badge.cls}`}>{badge.txt}</div>
              );
            })()}
            {l.rating != null && (
              <div className="deal-badge deal-ok">
                ★ {l.rating.toLocaleString("fr-CA", { maximumFractionDigits: 1 })} / 5
                {l.reviews ? ` · ${l.reviews} avis` : ""}
              </div>
            )}
            <h1>{l.title}</h1>
            <div className="loc">
              {[l.address, l.city, l.region].filter(Boolean).join(" · ")}
            </div>
            <div className="chips-scroll" role="list" aria-label="Caractéristiques clés">
              {chips.map((c) => <span className="chip-key" role="listitem" key={c}>{c}</span>)}
            </div>
            <a className="cta cta-desktop" href={l.url}
               target="_blank" rel="noopener noreferrer">
              {ctaLabel} ↗
            </a>
          </section>

          <section className="f-bloc f-desc" id="description">
            <h2>Description</h2>
            {l.description
              ? <p style={{ color: "var(--ink-2)", whiteSpace: "pre-line" }}>{l.description}</p>
              : <p className="fine">La source ne fournit pas de description pour cet hébergement.</p>}
          </section>

          <section className="f-bloc f-incl" id="commodites">
            <h2>Commodités</h2>
            <div className="amenity-row">
              {flags.map((b) => (
                <span className="amenity confirmed" key={`c-${b}`}>✓ {b}</span>
              ))}
              {autres.map((a) => (
                <span className="amenity unconfirmed" key={a}>{a}</span>
              ))}
            </div>
            {flags.length === 0 && autres.length === 0 && (
              <p className="fine">La source ne précise pas les commodités.</p>
            )}
          </section>

          <section className="f-bloc f-pratique">
            <h2>Détails pratiques</h2>
            <div className="kv">
              <div className="cell"><div className="k">Plateforme</div><div className="v">{ctSourceName(l.source)}</div></div>
              {l.price_label && (
                <div className="cell"><div className="k">Prix affiché</div><div className="v">{l.price_label}</div></div>
              )}
              {l.citq && (
                <div className="cell"><div className="k">Enregistrement CITQ</div><div className="v">{l.citq}</div></div>
              )}
              {synced && (
                <div className="cell"><div className="k">Synchronisé</div><div className="v">{synced}</div></div>
              )}
            </div>
            {!l.citq && (
              <p className="fine">
                Au Québec, tout séjour de 31 nuits ou moins doit être offert par un
                établissement détenant un numéro d'enregistrement CITQ. Vérifiez le
                numéro affiché sur l'annonce originale avant de réserver.
              </p>
            )}
          </section>
        </div>

        <div className="f-col">
          <CtPriceAnalysis p={ctx?.price ?? null} price={l.price_night} />
          {l.lat != null && l.lng != null && (
            <section className="f-bloc f-carte" id="emplacement">
              <h2>Emplacement</h2>
              <Suspense fallback={<div className="lmap3d lmap3d-skel" aria-busy="true" />}>
                <CtFicheMap l={l} />
              </Suspense>
              <p className="fine">
                Position approximative selon les coordonnées fournies par la source.
              </p>
            </section>
          )}
        </div>
      </div>

      {ctx && ctx.similar.length > 0 && (
        <section className="f-bloc f-similaires" aria-label="Hébergements similaires">
          <h2>
            {l.lat != null && ctx.similar[0]?.distance_km != null
              ? "Hébergements similaires à proximité"
              : `Hébergements similaires — ${l.region || "même région"}`}
          </h2>
          <div className="grid">
            {ctx.similar.map((s) => <CtListingCard key={s.uid} l={s} />)}
          </div>
        </section>
      )}

      <div className="fine f-foot">
        {synced && <>Dernière synchronisation : {synced}. </>}
        Les prix et disponibilités sont ceux affichés par la source — chaque fiche
        renvoie à l'annonce originale pour réserver.
      </div>

      <div className="cta-sticky">
        <span className="cta-sticky-prix">
          {fmtNight(l.price_night, l.price_label)}
          {l.price_night != null && <small>/nuit</small>}
        </span>
        <a className="cta" href={l.url} target="_blank" rel="noopener noreferrer">
          {ctaLabel} ↗
        </a>
      </div>
    </div>
  );
}