// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Bienvenue.tsx: onboarding after account creation — role choice
//   "I'm looking for a rental" (tenant: saved rentals…) or "I manage rentals"
//   (manager: customizable page for their portfolio).
// -----------------------------------------------------------------------------
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" ? "/manage" : "/", { replace: true });
  };

  if (loaded && !me) {
    return (
      <div className="container profil">
        <span className="kicker">Welcome</span>
        <h1>First, create your <span className="hl">account</span>.</h1>
        <a className="btn btn-primary" href="/api/auth/ka/login">
          Sign in with KA ID
        </a>
      </div>
    );
  }

  return (
    <div className="container bienvenue">
      <span className="kicker">Welcome{me?.name ? `, ${me.name.split(" ")[0]}` : ""}</span>
      <h1>Which profile<br /><span className="hl">fits you</span>?</h1>
      <p className="lede">
        One last step: tell us how you'll use Rent-Ka.
        You can change your mind later in your profile.
      </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">I'm looking for a rental</span>
          <span className="role-desc">
            Prospective tenant — shop across rentals all over Canada.
          </span>
          <ul className="role-perks">
            <li><IcoHeart size={13} /> Save listings you love</li>
            <li><IcoSliders size={13} /> Filters and advanced search</li>
            <li>More tools coming (alerts…)</li>
          </ul>
          <span className="role-cta">{busy === "locataire" ? "One moment…" : "That's me →"}</span>
        </button>

        <button
          className="role-card"
          disabled={busy !== null}
          onClick={() => choose("gestionnaire")}
        >
          <span className="role-ico"><IcoBuilding size={30} /></span>
          <span className="role-title">I manage rentals</span>
          <span className="role-desc">
            Manager or owner whose rentals are displayed on Rent-Ka.
          </span>
          <ul className="role-perks">
            <li>Claim your management page</li>
            <li>Customize it: tagline, contact, logo</li>
            <li>Your inventory, linked automatically</li>
          </ul>
          <span className="role-cta">{busy === "gestionnaire" ? "One moment…" : "That's me →"}</span>
        </button>
      </div>
    </div>
  );
}