// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Gestion.tsx : tableau de bord gestionnaire — réclamer SA page (source)
//   puis la personnaliser (accroche, description, coordonnées, logo). La page
//   publique correspondante vit sur /g/{source}.
// -----------------------------------------------------------------------------
import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import {
  Source, claimOrg, fetchMyOrg, fetchSources, updateOrg,
} from "../api";
import { useAccount } from "../account";
import { IcoBuilding } from "../components/Icons";

interface OrgMine {
  source: string | null;
  name?: string;
  active_listings?: number;
  profile?: Record<string, string>;
}

export default function GestionPage() {
  const { me, loaded, refresh } = useAccount();
  const [org, setOrg] = useState<OrgMine | null>(null);
  const [sources, setSources] = useState<Source[]>([]);
  const [pick, setPick] = useState("");
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState("");
  const [form, setForm] = useState({
    tagline: "", description: "", website: "", phone: "", email: "", logo_url: "",
  });

  useEffect(() => {
    if (me) fetchMyOrg().then((o) => {
      setOrg(o);
      const p = o.profile ?? {};
      setForm({
        tagline: p.tagline ?? "", description: p.description ?? "",
        website: p.website ?? "", phone: p.phone ?? "",
        email: p.email ?? "", logo_url: p.logo_url ?? "",
      });
    }).catch(() => setOrg({ source: null }));
  }, [me]);

  useEffect(() => {
    if (me && org && !org.source) {
      fetchSources().then((r) => setSources(r.sources)).catch(() => {});
    }
  }, [me, org]);

  const claimable = useMemo(
    () => sources
      .filter((s) => s.connector && s.active_listings > 0)
      .sort((a, b) => a.name.localeCompare(b.name, "fr")),
    [sources]);

  if (loaded && !me) {
    return (
      <div className="container profil">
        <span className="kicker">Espace gestionnaire</span>
        <h1>Connectez-vous pour gérer <span className="hl">votre page</span>.</h1>
        <a className="btn btn-primary" href="/api/auth/ka/login">
          Se connecter avec KA ID
        </a>
      </div>
    );
  }

  if (me && me.role !== "gestionnaire") {
    return (
      <div className="container profil">
        <span className="kicker">Espace gestionnaire</span>
        <h1>Réservé aux <span className="hl">gestionnaires</span>.</h1>
        <p className="lede">
          Votre compte est en mode locataire. Si vous gérez des logements
          affichés sur Lou-Ka, changez de profil.
        </p>
        <Link className="btn btn-primary" to="/bienvenue">Changer de profil</Link>
      </div>
    );
  }

  const doClaim = async () => {
    if (!pick) return;
    setError("");
    const res = await claimOrg(pick);
    if (!res.ok) {
      setError(res.status === 409
        ? "Cette page est déjà réclamée par un autre compte."
        : "Impossible de réclamer cette page.");
      return;
    }
    refresh();
    const o = await fetchMyOrg();
    setOrg(o);
  };

  const doSave = async () => {
    setSaving(true);
    setError("");
    const res = await updateOrg(form);
    setSaving(false);
    if (!res.ok) { setError("Enregistrement impossible — réessayez."); return; }
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  return (
    <div className="container profil">
      <span className="kicker">Espace gestionnaire</span>

      {org && !org.source && (
        <>
          <h1>Réclamez la page de <span className="hl">votre gestion</span>.</h1>
          <p className="lede">
            Choisissez votre organisation parmi les sources affichées sur
            Lou-Ka. Vous pourrez ensuite personnaliser sa page publique —
            votre inventaire y est déjà relié automatiquement.
          </p>
          <div className="claim-row">
            <select value={pick} onChange={(e) => setPick(e.target.value)}>
              <option value="">— Votre gestion immobilière —</option>
              {claimable.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.name} ({s.active_listings} logements)
                </option>
              ))}
            </select>
            <button className="btn btn-primary" disabled={!pick} onClick={doClaim}>
              Réclamer cette page
            </button>
          </div>
          {error && <p className="claim-error">{error}</p>}
          <p className="profil-note">
            Vous ne trouvez pas votre organisation ? Écrivez-nous à{" "}
            <a href="mailto:contact@groupe-ka.com">contact@groupe-ka.com</a> et
            nous ajouterons votre site comme source.
          </p>
        </>
      )}

      {org && org.source && (
        <>
          <h1><span className="hl">{org.name}</span></h1>
          <div className="org-head">
            <span className="org-stat">
              <IcoBuilding size={15} /> <b>{org.active_listings ?? 0}</b> logements actifs reliés
            </span>
            <Link className="btn btn-ghost" to={`/g/${org.source}`}>
              Voir ma page publique ↗
            </Link>
          </div>

          <section className="org-form">
            <h3>Personnaliser ma page</h3>
            <label>
              <span>Accroche (140 caractères)</span>
              <input
                value={form.tagline} maxLength={140}
                placeholder="Ex. Des logements bien entretenus à Québec depuis 1998"
                onChange={(e) => setForm({ ...form, tagline: e.target.value })}
              />
            </label>
            <label>
              <span>Description</span>
              <textarea
                value={form.description} rows={5} maxLength={2000}
                placeholder="Présentez votre gestion : secteurs, services, valeurs…"
                onChange={(e) => setForm({ ...form, description: e.target.value })}
              />
            </label>
            <div className="org-form-row">
              <label>
                <span>Site web</span>
                <input
                  value={form.website} placeholder="https://…"
                  onChange={(e) => setForm({ ...form, website: e.target.value })}
                />
              </label>
              <label>
                <span>Téléphone</span>
                <input
                  value={form.phone} placeholder="418 555-0123"
                  onChange={(e) => setForm({ ...form, phone: e.target.value })}
                />
              </label>
            </div>
            <div className="org-form-row">
              <label>
                <span>Courriel public</span>
                <input
                  value={form.email} placeholder="location@…"
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                />
              </label>
              <label>
                <span>Logo (URL d'image)</span>
                <input
                  value={form.logo_url} placeholder="https://…/logo.png"
                  onChange={(e) => setForm({ ...form, logo_url: e.target.value })}
                />
              </label>
            </div>
            {error && <p className="claim-error">{error}</p>}
            <button
              className={`btn btn-primary ${saved ? "pc-copy ok" : ""}`}
              disabled={saving} onClick={doSave}
            >
              {saved ? "✓ Enregistré" : saving ? "Enregistrement…" : "Enregistrer"}
            </button>
          </section>
        </>
      )}
    </div>
  );
}