"use client";

import { useState } from "react";
import { Search } from "lucide-react";
import { useApi } from "@/lib/api";
import { fmtNum } from "@/lib/format";
import { Empty, Panel, Skeleton } from "@/components/ui";
import { EntityTable, type EntityRow } from "@/components/EntityTable";

const TYPES = ["", "video", "channel", "profile", "post", "comment", "community", "hashtag", "page"];
const PLATFORMS = ["", "youtube", "reddit", "facebook", "instagram", "tiktok", "x"];

export default function Entities() {
  const [q, setQ] = useState("");
  const [type, setType] = useState("");
  const [platform, setPlatform] = useState("");
  const [sort, setSort] = useState("last_seen");
  const [page, setPage] = useState(0);
  const limit = 50;
  const params = new URLSearchParams({ limit: String(limit), offset: String(page * limit), sort });
  if (q) params.set("q", q);
  if (type) params.set("type", type);
  if (platform) params.set("platform", platform);
  const { data, loading } = useApi<{ rows: EntityRow[]; total: number }>(`/entities?${params}`);
  const sel = "rounded-lg bg-bg-2 border border-line-2 px-2 py-1.5 text-sm text-fg outline-none focus:border-cyan/60";
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end gap-3">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Entities</h1>
          <p className="text-sm text-fg-2">Canonical entities with per-field evidence. {data ? <span className="mono">{fmtNum(data.total)} match</span> : null}</p>
        </div>
        <div className="ml-auto flex flex-wrap gap-2 items-center">
          <label className="relative">
            <Search className="h-4 w-4 absolute left-2 top-2 text-dim" />
            <input
              value={q}
              onChange={(e) => {
                setQ(e.target.value);
                setPage(0);
              }}
              placeholder="search name, text, author, id…"
              className={`${sel} pl-8 w-72 mono`}
            />
          </label>
          <select value={type} onChange={(e) => (setType(e.target.value), setPage(0))} className={sel}>
            {TYPES.map((t) => (
              <option key={t} value={t}>
                {t || "all types"}
              </option>
            ))}
          </select>
          <select value={platform} onChange={(e) => (setPlatform(e.target.value), setPage(0))} className={sel}>
            {PLATFORMS.map((p) => (
              <option key={p} value={p}>
                {p || "all platforms"}
              </option>
            ))}
          </select>
          <select value={sort} onChange={(e) => setSort(e.target.value)} className={sel}>
            <option value="last_seen">recently seen</option>
            <option value="seen">most observed</option>
            <option value="views">most views</option>
          </select>
        </div>
      </div>
      <Panel pad={false}>
        <div className="p-4">{loading ? <Skeleton rows={10} /> : data?.rows.length ? <EntityTable rows={data.rows} showPlatform /> : <Empty>Nothing matches.</Empty>}</div>
        {data && data.total > limit && (
          <div className="flex items-center gap-3 px-4 py-3 border-t border-line text-xs">
            <button disabled={page === 0} onClick={() => setPage((p) => p - 1)} className="px-2 py-1 rounded border border-line disabled:opacity-40 hover:border-cyan/50">
              ← prev
            </button>
            <span className="mono text-dim">
              {page * limit + 1}–{Math.min(data.total, (page + 1) * limit)} of {data.total}
            </span>
            <button disabled={(page + 1) * limit >= data.total} onClick={() => setPage((p) => p + 1)} className="px-2 py-1 rounded border border-line disabled:opacity-40 hover:border-cyan/50">
              next →
            </button>
          </div>
        )}
      </Panel>
    </div>
  );
}