// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Bienvenue.tsx : intégration après la création du compte — choix du rôle
//   « Je cherche un logement » (locataire : favoris…) ou « Je gère des
//   logements » (gestionnaire : page personnalisable de sa gestion).
// -----------------------------------------------------------------------------
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { setRole } from "../api";
import { useAccount } from "../account";
import { IcoBuilding, IcoHeart, IcoHouse, IcoSliders } from "../components/Icons";

export default function BienvenuePage() {
  const { me, loaded, refresh } = useAccount();
  const [busy, setBusy] = useState<"locataire" | "gestionnaire" | null>(null);
  const nav = useNavigate();

  const choose = async (role: "locataire" | "gestionnaire") => {
    setBusy(role);
    await setRole(role);
    refresh();
    nav(role === "gestionnaire" ? "/gestion" : "/", { replace: true });
  };

  if (loaded && !me) {
    return (
      <div className="container profil">
        <span className="kicker">Bienvenue</span>
        <h1>Créez d'abord votre <span className="hl">compte</span>.</h1>
        <a className="btn btn-primary" href="/api/auth/ka/login">
          Se connecter avec KA ID
        </a>
      </div>
    );
  }

  return (
    <div className="container bienvenue">
      <span className="kicker">Bienvenue{me?.name ? `, ${me.name.split(" ")[0]}` : ""}</span>
      <h1>Vous êtes plutôt<br /><span className="hl">quel profil</span> ?</h1>
      <p className="lede">
        Une dernière étape : dites-nous comment vous utiliserez Lou-Ka.
        Vous pourrez changer d'avis plus tard dans votre profil.
      </p>

      <div className="role-grid">
        <button
          className="role-card"
          disabled={busy !== null}
          onClick={() => choose("locataire")}
        >
          <span className="role-ico"><IcoHouse size={30} /></span>
          <span className="role-title">Je cherche un logement</span>
          <span className="role-desc">
            Locataire potentiel — magasinez parmi tous les logements du Québec.
          </span>
          <ul className="role-perks">
            <li><IcoHeart size={13} /> Favoris sur les annonces</li>
            <li><IcoSliders size={13} /> Filtres et recherche avancée</li>
            <li>Et d'autres outils à venir (alertes…)</li>
          </ul>
          <span className="role-cta">{busy === "locataire" ? "Un instant…" : "C'est moi →"}</span>
        </button>

        <button
          className="role-card"
          disabled={busy !== null}
          onClick={() => choose("gestionnaire")}
        >
          <span className="role-ico"><IcoBuilding size={30} /></span>
          <span className="role-title">Je gère des logements</span>
          <span className="role-desc">
            Gestionnaire ou propriétaire dont les logements sont affichés sur Lou-Ka.
          </span>
          <ul className="role-perks">
            <li>Réclamez la page de votre gestion</li>
            <li>Personnalisez-la : accroche, contact, logo</li>
            <li>Votre inventaire, relié automatiquement</li>
          </ul>
          <span className="role-cta">{busy === "gestionnaire" ? "Un instant…" : "C'est moi →"}</span>
        </button>
      </div>
    </div>
  );
}