// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Sources.tsx: registry of aggregated sources — property managers
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Source, fetchSources } from "../api";

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

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

  return (
    <div className="container sources">
      <span className="kicker">Registry — aggregated sources</span>
      <h1>Aggregated sources</h1>
      <p className="sub">
        All the sources tracked by Rent-Ka: property managers and rental
        platforms across Canada (outside Québec). Every "connected" source is
        synced periodically by a dedicated connector.
      </p>

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

      {sources && (
        <>
        <h2 style={{ marginTop: 28 }}>Monthly rentals — property managers</h2>
        <p className="sub">
          Property managers across Canada; sources without a connector are
          pending.
        </p>
        <div className="src-wrap">
        <table className="src-table">
          <thead>
            <tr>
              <th>Manager</th>
              <th>Areas</th>
              <th>Status</th>
              <th style={{ textAlign: "right" }}>Active listings</th>
              <th>Last sync</th>
            </tr>
          </thead>
          <tbody>
            {sources.map((s) => (
              <tr key={s.id}>
                <td>
                  <a href={s.url} target="_blank" rel="noopener noreferrer">{s.name}</a>
                </td>
                <td style={{ color: "var(--ink-2)", maxWidth: 380 }}>{s.sectors}</td>
                <td>
                  {s.connector ? (
                    <span className="pill ok">connected</span>
                  ) : (
                    <span className="pill todo">{s.status}</span>
                  )}
                </td>
                <td style={{ textAlign: "right" }}>
                  <span className="count-pill">{s.active_listings || "—"}</span>
                </td>
                <td style={{ color: "var(--ink-3)" }}>
                  {s.last_sync
                    ? new Date(s.last_sync * 1000).toLocaleString("en-CA")
                    : "—"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
        </>
      )}
    </div>
  );
}