// -----------------------------------------------------------------------------
// Home-Ka — US real-estate aggregator (Groupe KA)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Sources.tsx : public registry of data sources (/api/sources)
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Source, fetchSources, registerSourceNames } from "../api";

function ago(ts: number | null): string {
  if (ts == null) return "never";
  const s = Math.max(0, Math.floor(Date.now() / 1000 - (ts > 1e12 ? ts / 1000 : ts)));
  if (s < 3600) return `${Math.round(s / 60)} min ago`;
  if (s < 172800) return `${Math.round(s / 3600)} h ago`;
  return `${Math.round(s / 86400)} d ago`;
}

export default function SourcesPage() {
  const [sources, setSources] = useState<Source[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchSources()
      .then((r) => { registerSourceNames(r.sources); setSources(r.sources); })
      .catch((e) => setError(String(e)));
  }, []);

  const totalListings = (sources ?? []).reduce((s, x) => s + x.active_listings, 0);
  const enabled = (sources ?? []).filter((s) => s.enabled).length;

  return (
    <div className="container sources">
      <span className="kicker">Registry — data sources</span>
      <h1>Data sources</h1>
      <p className="sub">
        Every listing on Home-Ka comes from a registered source — brokerage
        feeds, MLS/RESO APIs and listing platforms. Each source is synced by a
        dedicated connector and de-duplicated by MLS number and property match.
        Click a count to browse its homes.
      </p>

      {error && <div className="notice">{error}</div>}
      {!sources && !error && <div className="notice">Loading…</div>}

      {sources && (
        <>
          <p className="stats-foot" style={{ marginTop: 0 }}>
            <b>{totalListings.toLocaleString("en-US")}</b> active listings ·{" "}
            <b>{sources.length}</b> sources ·{" "}
            <b>{enabled}</b> enabled
          </p>

          <div className="q-table-wrap">
            <table className="q-table">
              <thead>
                <tr>
                  <th>Source</th><th>Connector</th><th>States</th>
                  <th>Active listings</th><th>Last sync</th>
                </tr>
              </thead>
              <tbody>
                {sources.map((s) => (
                  <tr key={s.id}>
                    <td>
                      {s.name || s.id}
                      {!s.enabled && <span className="adm-badge adm-off"> disabled</span>}
                    </td>
                    <td>{s.connector_type ?? "—"}</td>
                    <td>{s.states?.length ? s.states.join(", ") : "—"}</td>
                    <td className="num">
                      {s.active_listings > 0
                        ? <Link className="count-pill" to={`/?source=${encodeURIComponent(s.id)}`}>
                            {s.active_listings.toLocaleString("en-US")}
                          </Link>
                        : "0"}
                    </td>
                    <td>{ago(s.last_sync)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <p className="stats-foot">
            Listings published by more than one source are de-duplicated by MLS
            number and by matching the underlying property — no double counting.
          </p>
        </>
      )}
    </div>
  );
}