// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Gestion.tsx: manager dashboard — claim YOUR page (source) then
//   customize it (tagline, description, contact info, logo). The matching
//   public page lives at /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, "en")),
    [sources]);

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

  if (me && me.role !== "gestionnaire") {
    return (
      <div className="container profil">
        <span className="kicker">Manager space</span>
        <h1>Reserved for <span className="hl">managers</span>.</h1>
        <p className="lede">
          Your account is in tenant mode. If you manage rentals displayed on
          Rent-Ka, switch profiles.
        </p>
        <Link className="btn btn-primary" to="/welcome">Change profile</Link>
      </div>
    );
  }

  const doClaim = async () => {
    if (!pick) return;
    setError("");
    const res = await claimOrg(pick);
    if (!res.ok) {
      setError(res.status === 409
        ? "This page is already claimed by another account."
        : "Could not claim this 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("Could not save — try again."); return; }
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  return (
    <div className="container profil">
      <span className="kicker">Manager space</span>

      {org && !org.source && (
        <>
          <h1>Claim the page of <span className="hl">your management</span>.</h1>
          <p className="lede">
            Pick your organization among the sources displayed on Rent-Ka.
            You'll then be able to customize its public page — your inventory
            is already linked automatically.
          </p>
          <div className="claim-row">
            <select value={pick} onChange={(e) => setPick(e.target.value)}>
              <option value="">— Your property management —</option>
              {claimable.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.name} ({s.active_listings} rentals)
                </option>
              ))}
            </select>
            <button className="btn btn-primary" disabled={!pick} onClick={doClaim}>
              Claim this page
            </button>
          </div>
          {error && <p className="claim-error">{error}</p>}
          <p className="profil-note">
            Can't find your organization? Write to us at{" "}
            <a href="mailto:contact@groupe-ka.com">contact@groupe-ka.com</a> and
            we'll add your site as a 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> active linked rentals
            </span>
            <Link className="btn btn-ghost" to={`/g/${org.source}`}>
              See my public page ↗
            </Link>
          </div>

          <section className="org-form">
            <h3>Customize my page</h3>
            <label>
              <span>Tagline (140 characters)</span>
              <input
                value={form.tagline} maxLength={140}
                placeholder="E.g. Well-maintained rentals in Ottawa since 1998"
                onChange={(e) => setForm({ ...form, tagline: e.target.value })}
              />
            </label>
            <label>
              <span>Description</span>
              <textarea
                value={form.description} rows={5} maxLength={2000}
                placeholder="Introduce your management: areas, services, values…"
                onChange={(e) => setForm({ ...form, description: e.target.value })}
              />
            </label>
            <div className="org-form-row">
              <label>
                <span>Website</span>
                <input
                  value={form.website} placeholder="https://…"
                  onChange={(e) => setForm({ ...form, website: e.target.value })}
                />
              </label>
              <label>
                <span>Phone</span>
                <input
                  value={form.phone} placeholder="416 555-0123"
                  onChange={(e) => setForm({ ...form, phone: e.target.value })}
                />
              </label>
            </div>
            <div className="org-form-row">
              <label>
                <span>Public email</span>
                <input
                  value={form.email} placeholder="location@…"
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                />
              </label>
              <label>
                <span>Logo (image URL)</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 ? "✓ Saved" : saving ? "Saving…" : "Save"}
            </button>
          </section>
        </>
      )}
    </div>
  );
}