// -----------------------------------------------------------------------------
// Home-Ka — US real-estate aggregator (Groupe KA)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Admin.tsx : back-office (/admin/sources, /admin/connectors,
//   /admin/brokerages) — reachable by URL only, not linked in the nav.
//   Optional token (X-Admin-Token) stored in localStorage (homeka_admin_token).
// -----------------------------------------------------------------------------
import { useCallback, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import {
  AdminOverview, AdminSource, Brokerage, BrokerageFilters, ConnectorFamily,
  CustomConnector, PARTNERSHIP_STATUSES,
  fetchAdminBrokerages, fetchAdminConnectors, fetchAdminOverview,
  fetchAdminSources, getAdminToken, inspectBrokerage, runDiscovery,
  setAdminToken, setBrokerageStatus, sourceName,
} from "../api";
import { Ico } from "../components/Icons";

const BROK_PAGE = 50;

const n = (x: number | null | undefined) =>
  x == null ? "—" : Math.round(x).toLocaleString("en-US");

function ago(ts: number | null | undefined): 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`;
}

// --- Token bar -----------------------------------------------------------------
function TokenBar({ onChange }: { onChange: () => void }) {
  const [token, setToken] = useState(getAdminToken());
  const [saved, setSaved] = useState(false);
  return (
    <div className="adm-token">
      <label htmlFor="adm-token-input">Admin token</label>
      <input
        id="adm-token-input"
        type="password"
        placeholder="X-Admin-Token (leave empty if the API is open)"
        value={token}
        onChange={(e) => { setToken(e.target.value); setSaved(false); }}
        autoComplete="off"
      />
      <button
        className="btn btn-ghost"
        onClick={() => { setAdminToken(token.trim()); setSaved(true); onChange(); }}
      >
        {saved ? "Saved ✓" : "Save"}
      </button>
    </div>
  );
}

// --- Overview cards --------------------------------------------------------------
function Overview({ ov, error }: { ov: AdminOverview | null; error: string | null }) {
  if (error) return <div className="notice">Overview unavailable — {error}</div>;
  if (!ov) return <div className="notice">Loading overview…</div>;
  return (
    <section className="tiles adm-tiles" aria-label="Overview">
      <div className="tile">
        <div className="tile-v">{n(ov.active_listings)}</div>
        <div className="tile-k">Active listings</div>
      </div>
      <div className="tile">
        <div className="tile-v">{n(ov.properties)}</div>
        <div className="tile-k">Properties</div>
      </div>
      <div className="tile">
        <div className="tile-v">{n(ov.enabled_sources)}</div>
        <div className="tile-k">Enabled sources</div>
      </div>
      <div className="tile">
        <div className="tile-v">{n(ov.errors_24h)}</div>
        <div className="tile-k">Errors (24 h)</div>
      </div>
      <div className="tile">
        <div className="tile-v">{ago(ov.last_successful_sync)}</div>
        <div className="tile-k">Last successful sync</div>
      </div>
      <div className="tile adm-tile-wide">
        <div className="tile-k" style={{ marginBottom: 6 }}>Brokerages by partnership status</div>
        <div className="adm-status-row">
          {ov.brokerages_by_status.length === 0 && <span>—</span>}
          {ov.brokerages_by_status.map((b) => (
            <span key={b.partnership_status} className="adm-badge">
              {b.partnership_status || "unknown"} <b>{n(b.n)}</b>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Sources tab -------------------------------------------------------------------
function SourcesTab({ reloadKey }: { reloadKey: number }) {
  const [rows, setRows] = useState<AdminSource[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setRows(null); setError(null);
    fetchAdminSources().then((r) => setRows(r.sources)).catch((e) => setError(String(e)));
  }, [reloadKey]);

  if (error) return <div className="notice">Could not load sources — {error}</div>;
  if (!rows) return <div className="notice">Loading sources…</div>;
  return (
    <div className="q-table-wrap">
      <table className="q-table adm-table">
        <thead>
          <tr>
            <th>Source</th><th>Type</th><th>States</th>
            <th>Active</th><th>Published</th><th>Last sync</th>
            <th>Freshness</th><th>Errors 7d</th><th>Last message</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((s) => (
            <tr key={s.id}>
              <td>
                <b>{s.name || s.id}</b>
                {!s.enabled && <span className="adm-badge adm-off"> disabled</span>}
                <div className="adm-sub">{s.id}</div>
              </td>
              <td>{s.connector_type ?? "—"}</td>
              <td>{s.states?.length ? s.states.join(", ") : "—"}</td>
              <td className="num">{n(s.active_listings)}</td>
              <td className="num">{n(s.published)}</td>
              <td>
                {s.last_sync != null ? ago(s.last_sync) : "never"}{" "}
                {s.last_sync != null && (
                  s.last_ok
                    ? <span className="adm-badge adm-ok">OK</span>
                    : <span className="adm-badge adm-err">Error</span>
                )}
              </td>
              <td className="num">{s.freshness_hours != null ? `${s.freshness_hours} h` : "—"}</td>
              <td className="num">{n(s.errors_7d)}</td>
              <td className="adm-msg" title={s.last_message ?? ""}>{s.last_message ?? "—"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// --- Connectors tab ------------------------------------------------------------------
function ConnectorsTab({ reloadKey }: { reloadKey: number }) {
  const [families, setFamilies] = useState<ConnectorFamily[] | null>(null);
  const [custom, setCustom] = useState<CustomConnector[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setFamilies(null); setError(null);
    fetchAdminConnectors()
      .then((r) => { setFamilies(r.families); setCustom(r.custom); })
      .catch((e) => setError(String(e)));
  }, [reloadKey]);

  if (error) return <div className="notice">Could not load connectors — {error}</div>;
  if (!families) return <div className="notice">Loading connectors…</div>;
  return (
    <>
      <div className="adm-cards">
        {families.map((f) => (
          <div className="adm-card" key={f.family}>
            <div className="adm-card-head">
              <b>{f.family}</b>
              <span className="adm-badge">{n(f.instances)} instance{f.instances !== 1 ? "s" : ""}</span>
            </div>
            <div className="adm-sub">{f.class} · {f.module}</div>
            <p>{f.doc || "—"}</p>
          </div>
        ))}
      </div>
      {custom.length > 0 && (
        <>
          <h2 style={{ marginTop: 22 }}>Custom connectors</h2>
          <div className="q-table-wrap">
            <table className="q-table">
              <thead><tr><th>Source</th><th>Class</th><th>Module</th></tr></thead>
              <tbody>
                {custom.map((c) => (
                  <tr key={c.source_id}>
                    <td>{sourceName(c.source_id)} <span className="adm-sub">{c.source_id}</span></td>
                    <td>{c.class}</td>
                    <td>{c.module}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </>
  );
}

// --- Brokerages tab ---------------------------------------------------------------------
function BrokeragesTab({ reloadKey }: { reloadKey: number }) {
  const [rows, setRows] = useState<Brokerage[] | null>(null);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState<Record<number, boolean>>({});
  const [discovering, setDiscovering] = useState(false);

  // filters
  const [q, setQ] = useState("");
  const [state, setState] = useState("");
  const [status, setStatus] = useState("");
  const [feedType, setFeedType] = useState("");
  const [minPriority, setMinPriority] = useState("");
  const [inspected, setInspected] = useState("");
  const [sort, setSort] = useState("priority");

  const filters: BrokerageFilters = {
    q, state, status, feed_type: feedType,
    min_priority: minPriority, inspected, sort,
  };
  const filterKey = JSON.stringify(filters);

  const load = useCallback((p: number) => {
    setRows(null); setError(null);
    fetchAdminBrokerages(JSON.parse(filterKey) as BrokerageFilters, BROK_PAGE, (p - 1) * BROK_PAGE)
      .then((r) => { setRows(r.brokerages); setTotal(r.total); })
      .catch((e) => setError(String(e)));
  }, [filterKey]);

  useEffect(() => { setPage(1); }, [filterKey]);
  useEffect(() => { load(page); }, [load, page, reloadKey]);

  const totalPages = Math.max(1, Math.ceil(total / BROK_PAGE));

  const onStatus = async (b: Brokerage, next: string) => {
    setBusy((x) => ({ ...x, [b.id]: true }));
    try {
      await setBrokerageStatus(b.id, next);
      setRows((rs) => rs?.map((r) => r.id === b.id ? { ...r, partnership_status: next } : r) ?? null);
    } catch (e) {
      alert(`Status update failed: ${e}`);
    } finally {
      setBusy((x) => ({ ...x, [b.id]: false }));
    }
  };

  const onInspect = async (b: Brokerage) => {
    setBusy((x) => ({ ...x, [b.id]: true }));
    try {
      await inspectBrokerage(b.id);
      // refresh the page to pick up the newly inspected row
      load(page);
    } catch (e) {
      alert(`Inspection failed: ${e}`);
      setBusy((x) => ({ ...x, [b.id]: false }));
    }
  };

  const onDiscover = async () => {
    setDiscovering(true);
    try {
      await runDiscovery();
      alert("Discovery batch started in the background.");
    } catch (e) {
      alert(`Discovery failed to start: ${e}`);
    } finally {
      setDiscovering(false);
    }
  };

  const contacts = (b: Brokerage): { label: string; email: string }[] => {
    const out: { label: string; email: string }[] = [];
    if (b.partnership_contact && b.partnership_contact.includes("@"))
      out.push({ label: "partnership", email: b.partnership_contact });
    if (b.technical_contact && b.technical_contact.includes("@"))
      out.push({ label: "technical", email: b.technical_contact });
    return out;
  };

  return (
    <>
      <div className="adm-controls">
        <input
          placeholder="Search name or website…"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          aria-label="Search brokerages"
        />
        <input
          placeholder="State (e.g. TX)"
          value={state}
          maxLength={2}
          style={{ width: 90 }}
          onChange={(e) => setState(e.target.value.toUpperCase())}
          aria-label="State"
        />
        <select value={status} onChange={(e) => setStatus(e.target.value)} aria-label="Partnership status">
          <option value="">Any status</option>
          {PARTNERSHIP_STATUSES.map((s) => <option key={s} value={s}>{s}</option>)}
        </select>
        <select value={feedType} onChange={(e) => setFeedType(e.target.value)} aria-label="Feed type">
          <option value="">Any feed</option>
          {["reso", "rets", "json-api", "xml", "csv", "idx-partner", "crawl"].map((f) => (
            <option key={f} value={f}>{f}</option>
          ))}
        </select>
        <input
          type="number"
          placeholder="Min priority"
          value={minPriority}
          style={{ width: 110 }}
          onChange={(e) => setMinPriority(e.target.value)}
          aria-label="Minimum priority score"
        />
        <select value={inspected} onChange={(e) => setInspected(e.target.value)} aria-label="Inspected">
          <option value="">Inspected or not</option>
          <option value="1">Inspected</option>
          <option value="0">Not inspected</option>
        </select>
        <select value={sort} onChange={(e) => setSort(e.target.value)} aria-label="Sort">
          <option value="priority">Sort: priority</option>
          <option value="feed">Sort: feed probability</option>
          <option value="name">Sort: name</option>
          <option value="inspected">Sort: last inspected</option>
        </select>
        <button className="btn btn-primary" onClick={onDiscover} disabled={discovering}>
          {discovering ? "Starting…" : "Run discovery batch"}
        </button>
      </div>

      {error && <div className="notice">Could not load brokerages — {error}</div>}
      {!rows && !error && <div className="notice">Loading brokerages…</div>}

      {rows && (
        <>
          <p className="stats-foot" style={{ marginTop: 0 }}>
            <b>{n(total)}</b> brokerage{total !== 1 ? "s" : ""} — page {page} / {totalPages}
          </p>
          <div className="q-table-wrap">
            <table className="q-table adm-table">
              <thead>
                <tr>
                  <th>Brokerage</th><th>States</th><th>Agents</th><th>Listings</th>
                  <th>IDX provider</th><th>Feed</th><th>Feed %</th><th>Priority</th>
                  <th>Status</th><th>Contacts</th><th>Inspected</th><th></th>
                </tr>
              </thead>
              <tbody>
                {rows.map((b) => (
                  <tr key={b.id}>
                    <td>
                      {b.website
                        ? <a href={b.website} target="_blank" rel="noopener noreferrer"><b>{b.name}</b> <Ico name="external" size={11} /></a>
                        : <b>{b.name}</b>}
                      {b.mls_affiliations?.length > 0 && (
                        <div className="adm-sub">{b.mls_affiliations.join(", ")}</div>
                      )}
                    </td>
                    <td>{b.states?.length ? b.states.join(", ") : "—"}</td>
                    <td className="num">{n(b.estimated_agents)}</td>
                    <td className="num">{n(b.estimated_listings)}</td>
                    <td>
                      {b.idx_provider ?? "—"}
                      {b.reso_detected ? <span className="adm-badge adm-ok"> RESO</span> : null}
                    </td>
                    <td>{b.possible_feed_type ?? "—"}</td>
                    <td className="num">{b.feed_probability_score != null ? Math.round(b.feed_probability_score) : "—"}</td>
                    <td className="num">{b.priority_score != null ? Math.round(b.priority_score) : "—"}</td>
                    <td>
                      <select
                        className="adm-status-select"
                        value={b.partnership_status || "prospect"}
                        disabled={!!busy[b.id]}
                        onChange={(e) => onStatus(b, e.target.value)}
                        aria-label={`Partnership status — ${b.name}`}
                      >
                        {PARTNERSHIP_STATUSES.map((s) => <option key={s} value={s}>{s}</option>)}
                      </select>
                    </td>
                    <td>
                      {contacts(b).length === 0 && "—"}
                      {contacts(b).map((c) => (
                        <div key={c.email}>
                          <a href={`mailto:${c.email}`} title={c.label}>{c.email}</a>
                        </div>
                      ))}
                    </td>
                    <td>
                      {b.last_inspected != null ? ago(b.last_inspected) : "never"}
                      {b.inspect_error && (
                        <span className="adm-badge adm-err" title={b.inspect_error}> err</span>
                      )}
                    </td>
                    <td>
                      <button
                        className="btn btn-ghost adm-inspect"
                        disabled={!!busy[b.id]}
                        onClick={() => onInspect(b)}
                      >
                        {busy[b.id] ? "…" : "Inspect"}
                      </button>
                    </td>
                  </tr>
                ))}
                {rows.length === 0 && (
                  <tr><td colSpan={12}>No brokerage matches these filters.</td></tr>
                )}
              </tbody>
            </table>
          </div>
          {totalPages > 1 && (
            <nav className="pager" aria-label="Brokerage pagination">
              <button className="pager-btn" onClick={() => setPage(page - 1)} disabled={page <= 1}>‹ Prev</button>
              <span className="pager-info">Page {page} / {totalPages}</span>
              <button className="pager-btn" onClick={() => setPage(page + 1)} disabled={page >= totalPages}>Next ›</button>
            </nav>
          )}
        </>
      )}
    </>
  );
}

// --- Page ------------------------------------------------------------------------
export type AdminTab = "sources" | "connectors" | "brokerages";

export default function AdminPage({ tab }: { tab: AdminTab }) {
  const [ov, setOv] = useState<AdminOverview | null>(null);
  const [ovError, setOvError] = useState<string | null>(null);
  const [reloadKey, setReloadKey] = useState(0);

  const loadOverview = useCallback(() => {
    setOv(null); setOvError(null);
    fetchAdminOverview().then(setOv).catch((e) => setOvError(String(e)));
  }, []);
  useEffect(() => { loadOverview(); }, [loadOverview, reloadKey]);

  const tabs: { id: AdminTab; label: string }[] = [
    { id: "sources", label: "Sources" },
    { id: "connectors", label: "Connectors" },
    { id: "brokerages", label: "Brokerages" },
  ];

  return (
    <div className="container admin">
      <span className="kicker">Back office</span>
      <h1>Home-Ka admin</h1>
      <p className="sub">
        Operational view of the aggregation pipeline — sources, connector
        families and the brokerage partnership funnel.
      </p>

      <TokenBar onChange={() => setReloadKey((k) => k + 1)} />

      <Overview ov={ov} error={ovError} />

      <nav className="adm-tabs" aria-label="Admin sections">
        {tabs.map((t) => (
          <Link
            key={t.id}
            to={`/admin/${t.id}`}
            className={tab === t.id ? "on" : ""}
          >
            {t.label}
          </Link>
        ))}
      </nav>

      {tab === "sources" && <SourcesTab reloadKey={reloadKey} />}
      {tab === "connectors" && <ConnectorsTab reloadKey={reloadKey} />}
      {tab === "brokerages" && <BrokeragesTab reloadKey={reloadKey} />}
    </div>
  );
}