"use client";

import { useState } from "react";
import { useApi } from "@/lib/api";
import { fmtDate } from "@/lib/format";
import { Empty, Panel, Skeleton, Table, Tag } from "@/components/ui";

interface Schema {
  platform: string;
  shape_hash: string;
  fingerprint: { hostname: string; path_pattern: string; method: string; graphql_operation?: string; observed_entity_types?: string[] };
  schema: { candidate_entity_types: { type: string; confidence: number; path: string }[]; fields: { path: string; semantic?: { kind: string; confidence: number }; example?: string; types?: string[] }[]; object_count: number; repeated_object_paths: string[] };
  observed_count: number;
  sample_url: string;
  first_seen: string;
  last_seen: string;
}

export default function Schemas() {
  const [platform, setPlatform] = useState("");
  const { data, loading } = useApi<Schema[]>(`/schemas${platform ? `?platform=${platform}` : ""}`, { refreshMs: 15_000 });
  const platforms = [...new Set((data ?? []).map((s) => s.platform))];
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end gap-3">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Runtime APIs</h1>
          <p className="text-sm text-fg-2 max-w-2xl">Response shapes the browser received while a human-like session unfolded. Endpoints are fingerprinted by (host, path pattern, method, structure hash) and their fields are semantically inferred — nothing here was written by hand.</p>
        </div>
        <select value={platform} onChange={(e) => setPlatform(e.target.value)} className="ml-auto rounded-lg bg-bg-2 border border-line-2 px-2 py-1.5 text-sm">
          <option value="">all platforms</option>
          {["youtube", "reddit", ...platforms.filter((p) => !["youtube", "reddit"].includes(p))].map((p) => (
            <option key={p} value={p}>
              {p}
            </option>
          ))}
        </select>
      </div>
      {loading ? (
        <Skeleton rows={8} />
      ) : data?.length ? (
        <div className="space-y-3">
          {data.map((sc) => (
            <details key={sc.platform + sc.shape_hash} className="panel open:glow-cyan/30">
              <summary className="cursor-pointer px-4 py-3 flex flex-wrap items-center gap-2 text-sm">
                <Tag>{sc.platform}</Tag>
                <Tag color="#9d7bff">{sc.fingerprint.method}</Tag>
                <span className="mono">
                  {sc.fingerprint.hostname}
                  <span className="text-fg-2">{sc.fingerprint.path_pattern}</span>
                </span>
                {sc.fingerprint.graphql_operation && <Tag color="#ff7ad9">{sc.fingerprint.graphql_operation}</Tag>}
                <span className="ml-auto flex gap-1 flex-wrap">
                  {sc.schema.candidate_entity_types.slice(0, 5).map((c) => (
                    <Tag key={c.type + c.path} color="#38e1ff" title={c.path}>
                      {c.type} {Number(c.confidence).toFixed(2)}
                    </Tag>
                  ))}
                </span>
                <span className="mono text-xs text-dim whitespace-nowrap">
                  seen {sc.observed_count}× · {sc.schema.object_count} objects · #{sc.shape_hash.slice(0, 8)}
                </span>
              </summary>
              <div className="px-4 pb-4 space-y-3">
                <div className="text-[11px] text-dim mono break-all">
                  sample {sc.sample_url} · first {fmtDate(sc.first_seen)} · last {fmtDate(sc.last_seen)}
                </div>
                {sc.schema.repeated_object_paths?.length ? (
                  <div className="text-xs text-fg-2">
                    repeated object arrays (entity lists): <span className="mono">{sc.schema.repeated_object_paths.slice(0, 5).join(" · ")}</span>
                  </div>
                ) : null}
                <Table head={["field path", "inferred semantic", "conf", "types", "example"]} dense>
                  {sc.schema.fields.slice(0, 80).map((f) => (
                    <tr key={f.path}>
                      <td className="mono text-[11px] text-fg-2 max-w-[560px] truncate" title={f.path}>
                        {f.path}
                      </td>
                      <td>{f.semantic ? <Tag color={f.semantic.kind === "identifier" ? "#ffb347" : f.semantic.kind.includes("url") ? "#ff7ad9" : "#43e69a"}>{f.semantic.kind}</Tag> : "—"}</td>
                      <td className="mono text-[11px]">{f.semantic ? Number(f.semantic.confidence).toFixed(2) : ""}</td>
                      <td className="mono text-[11px] text-dim">{f.types?.join("|")}</td>
                      <td className="mono text-[11px] text-dim max-w-[320px] truncate">{f.example}</td>
                    </tr>
                  ))}
                </Table>
              </div>
            </details>
          ))}
        </div>
      ) : (
        <Panel>
          <Empty>No schemas discovered yet.</Empty>
        </Panel>
      )}
    </div>
  );
}