// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Passerelle.tsx: gateway page to the original listing.
//   Opened in a new tab by the listing CTAs: shows Rent-Ka → manager with a
//   progress bar, then redirects to the manager's ad after ~2.2 s.
//   Security: we receive a uid (never a raw URL) — the destination URL comes
//   from our API, not from the parameter. No open redirect 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>Listing not found</h2>
        <p>Could not find the original listing.</p>
        <Link className="btn btn-primary" to="/">Back to rentals</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">
            Rent<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>Gateway to the original listing</h1>
        <p className="pass-texte">
          {dest
            ? <>We are taking you to <b>{nom}</b> — prices, visits and
                signatures happen directly with the manager.</>
            : "Preparing the redirect…"}
        </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">
              Go now ↗
            </a>
          )}
          <button className="btn btn-ghost" onClick={() => window.close()}>
            Stay on Rent-Ka
          </button>
        </div>

        <div className="fine">
          Rent-Ka is an independent aggregator: every listing links back to
          the ad published by the property manager.
        </div>
      </div>
    </div>
  );
}