// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/GestionPublic.tsx: public page of a property management — /g/{source}
//   Banner customized by the manager (tagline, description, contact, logo)
//   + automatically linked inventory (12/page, pagination).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { Listing, OrgProfile, fetchListings, fetchOrg } from "../api";
import ListingCard from "../components/ListingCard";
import Pager from "../components/Pager";
import { IcoCompass, IcoPin } from "../components/Icons";

const PAGE_SIZE = 12;

export default function GestionPublicPage() {
  const { sourceId = "" } = useParams();
  const [org, setOrg] = useState<OrgProfile | null | undefined>(undefined);
  const [listings, setListings] = useState<Listing[] | null>(null);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);

  useEffect(() => {
    fetchOrg(sourceId).then(setOrg).catch(() => setOrg(null));
    setPage(1);
  }, [sourceId]);

  useEffect(() => {
    setListings(null);
    fetchListings({ source: sourceId }, PAGE_SIZE, (page - 1) * PAGE_SIZE)
      .then((r) => { setListings(r.listings); setTotal(r.total); })
      .catch(() => setListings([]));
  }, [sourceId, page]);

  if (org === undefined) {
    return <div className="container profil"><div className="notice">Loading…</div></div>;
  }
  if (org === null) {
    return (
      <div className="container notice">
        <div className="big"><IcoCompass size={40} /></div>
        <h2>Page not found</h2>
        <p>This management does not exist on Rent-Ka.</p>
        <Link className="btn btn-primary" to="/">Explore rentals</Link>
      </div>
    );
  }

  return (
    <div className="container profil orgpub">
      <div className="orgpub-head">
        {org.logo_url && (
          <img className="orgpub-logo" src={org.logo_url} alt="" referrerPolicy="no-referrer" />
        )}
        <div className="orgpub-id">
          <span className="kicker">Property management</span>
          <h1>{org.name}</h1>
          {org.tagline && <p className="orgpub-tagline">{org.tagline}</p>}
          <div className="orgpub-meta">
            <span className="stat-chip"><b>{org.active_listings}</b> active rentals</span>
            {org.claimed && <span className="stat-chip orgpub-verified">Page managed by the organization</span>}
            {org.phone && <a className="stat-chip" href={`tel:${org.phone}`}>{org.phone}</a>}
            {org.email && <a className="stat-chip" href={`mailto:${org.email}`}>{org.email}</a>}
            {org.website && (
              <a className="stat-chip" href={org.website} target="_blank" rel="noopener noreferrer">
                Website ↗
              </a>
            )}
          </div>
        </div>
      </div>

      {org.description && <p className="orgpub-desc">{org.description}</p>}

      <div className="results-head">
        <h2><IcoPin size={16} /> Available rentals</h2>
        <div className="results-tools">
          {listings && <span>{total} result{total > 1 ? "s" : ""}</span>}
        </div>
      </div>

      {listings === null && (
        <div className="grid" aria-busy="true">
          {Array.from({ length: 4 }).map((_, i) => (
            <div className="skel" key={i}>
              <div className="sk-img" /><div className="sk-line" /><div className="sk-line short" />
            </div>
          ))}
        </div>
      )}

      {listings !== null && (
        <>
          <div className="grid">
            {listings.map((l) => <ListingCard key={l.uid} l={l} />)}
          </div>
          <Pager page={page} pageSize={PAGE_SIZE} total={total} onPage={(p) => {
            setPage(p);
            window.scrollTo({ top: 0, behavior: "smooth" });
          }} />
        </>
      )}
    </div>
  );
}