// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Passerelle.tsx : page de transition vers l'annonce originale
//   (« passerelle » à la Centris). Ouverte dans un nouvel onglet par les CTA
//   de la fiche : affiche Lou-Ka → gestionnaire avec une barre de progression,
//   puis redirige vers l'annonce chez le gestionnaire après ~2,2 s.
//   Sécurité : on reçoit un uid (jamais une URL brute) — l'URL de destination
//   vient de notre API, pas du paramètre. Aucune redirection ouverte possible.
// -----------------------------------------------------------------------------
import { useEffect, useRef, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { fetchListing, fetchSources, registerSourceNames, sourceName } from "../api";

const DELAI_MS = 2200;

export default function PasserellePage() {
  const { uid } = useParams<{ uid: string }>();
  const [dest, setDest] = useState<{ url: string; source: string } | null>(null);
  const [error, setError] = useState(false);
  const timer = useRef<number | null>(null);

  useEffect(() => {
    if (!uid) return;
    let cancelled = false;
    Promise.all([fetchSources(), fetchListing(uid)])
      .then(([src, l]) => {
        if (cancelled) return;
        registerSourceNames(src.sources);
        if (!l.url || !/^https?:\/\//.test(l.url)) { setError(true); return; }
        setDest({ url: l.url, source: l.source });
        timer.current = window.setTimeout(() => {
          window.location.replace(l.url);
        }, DELAI_MS);
      })
      .catch(() => !cancelled && setError(true));
    return () => {
      cancelled = true;
      if (timer.current) window.clearTimeout(timer.current);
    };
  }, [uid]);

  if (error)
    return (
      <div className="notice container">
        <div className="big">⚠️</div>
        <h2>Annonce introuvable</h2>
        <p>Impossible de retrouver l'annonce originale.</p>
        <Link className="btn btn-primary" to="/">Retour aux logements</Link>
      </div>
    );

  const nom = dest ? sourceName(dest.source) : "…";

  return (
    <div className="passerelle" role="status" aria-live="polite">
      <div className="pass-card">
        <div className="pass-brands">
          <span className="pass-brand">
            Lou<span className="ka">Ka</span>
          </span>
          <span className="pass-trajet" aria-hidden="true">
            <span className="pass-dot" /><span className="pass-dot" /><span className="pass-dot" />
            <span className="pass-fleche">➔</span>
          </span>
          <span className="pass-gestionnaire">
            <span className="pass-gest-ico" aria-hidden="true">🏢</span>
            {nom}
          </span>
        </div>

        <h1>Passerelle vers l'annonce originale</h1>
        <p className="pass-texte">
          {dest
            ? <>Nous vous amenons chez <b>{nom}</b> — les prix, visites et
                signatures se passent directement chez le gestionnaire.</>
            : "Préparation de la redirection…"}
        </p>

        <div className="pass-progress" aria-hidden="true">
          <span className={`pass-progress-fill ${dest ? "go" : ""}`} />
        </div>

        <div className="pass-actions">
          {dest && (
            <a className="btn btn-primary" href={dest.url} rel="noopener noreferrer">
              Y aller maintenant ↗
            </a>
          )}
          <button className="btn btn-ghost" onClick={() => window.close()}>
            Rester sur Lou-Ka
          </button>
        </div>

        <div className="fine">
          Lou-Ka est un agrégateur indépendant : chaque fiche renvoie à
          l'annonce publiée par le gestionnaire immobilier.
        </div>
      </div>
    </div>
  );
}