"use client";

import Link from "next/link";
import { useMemo } from "react";
import type { EventDTO } from "@dci/core";
import { Badge, Button, EmptyState, EventBadge, RelativeTime, SkeletonRows } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { fmtInt, fmtValue } from "@/lib/format";
import { EVENT_LABEL } from "@/lib/labels";
import { entityHref } from "@/lib/routes";
import { ErrorNote, ExtLink, Input, Pager, RefreshButton, ReviewBadge, Segmented, Select } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useToast } from "./toast";
import { useAdminMutation, useAdminQuery } from "./use-admin-query";
import { useUrlState } from "./use-url-state";

const REVIEW = ["all", "pending", "approved", "auto"] as const;
type Review = (typeof REVIEW)[number];
const PER_PAGE = 50;

export function EventsReview() {
  const [params, setParams] = useUrlState();
  const review = (REVIEW.includes(params.review as Review) ? params.review : "all") as Review;
  const page = Math.max(1, Number(params.page ?? 1) || 1);
  const type = params.type ?? "";
  const minSig = params.min_significance ?? "";
  const q = useAdminQuery<EventDTO[]>("v1/events", { query: { type: type || undefined, min_significance: minSig || undefined, page, per_page: PER_PAGE }, refreshMs: 60_000 });
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const total = Number(q.meta?.total ?? 0);
  const rows = useMemo(() => (q.data ?? []).filter((e) => review === "all" || e.reviewStatus === review), [q.data, review]);
  const counts = useMemo(() => {
    const c: Record<string, number> = {};
    for (const e of q.data ?? []) c[e.reviewStatus] = (c[e.reviewStatus] ?? 0) + 1;
    return c;
  }, [q.data]);

  const setStatus = async (e: EventDTO, reviewStatus: "approved" | "rejected" | "pending") => {
    const prev = e.reviewStatus;
    q.mutate((list) => list?.map((x) => (x.id === e.id ? { ...x, reviewStatus } : x)) ?? list);
    const r = await run<{ id: string; reviewStatus: string }>(`${e.id}:${reviewStatus}`, `events/${encodeURIComponent(e.id)}`, { method: "PATCH", body: { reviewStatus } });
    if (r.ok) toast({ tone: "ok", title: `Event ${reviewStatus}`, description: e.title });
    else {
      q.mutate((list) => list?.map((x) => (x.id === e.id ? { ...x, reviewStatus: prev } : x)) ?? list);
      toast({ tone: "danger", title: "Review not saved", description: r.error });
    }
  };

  return (
    <div>
      <AdminPageHeader title="Events review" description="Recent change-feed events with their review state. Rejected events disappear from the public feed (and from this list, which reads the public endpoint)." aside={<RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} />} />
      <ErrorNote error={q.error && !q.data ? q.error : null} onRetry={() => void q.refresh()} className="mb-3" />
      <div className="mb-3 flex flex-col gap-2 lg:flex-row lg:items-center">
        <Segmented label="Review" value={review} onChange={(v) => setParams({ review: v === "all" ? null : v })} options={REVIEW.map((r) => ({ value: r, label: r === "all" ? "All (page)" : r[0]!.toUpperCase() + r.slice(1), count: r === "all" ? (q.data?.length ?? null) : (counts[r] ?? 0) }))} />
        <div className="flex flex-1 gap-2">
          <Select value={type} onChange={(e) => setParams({ type: e.target.value || null, page: null })} className="sm:w-[220px]" aria-label="Event type">
            <option value="">All event types</option>
            {Object.entries(EVENT_LABEL).map(([k, v]) => (
              <option key={k} value={k}>
                {v}
              </option>
            ))}
          </Select>
          <Input type="number" min={0} max={100} value={minSig} onChange={(e) => setParams({ min_significance: e.target.value || null, page: null })} placeholder="min significance" className="w-[150px]" mono />
        </div>
      </div>

      {q.loading && !q.data ? (
        <SkeletonRows rows={10} />
      ) : rows.length === 0 ? (
        <EmptyState compact title="No events" description={review !== "all" ? "No events with this review state on the current page." : undefined} />
      ) : (
        <div className="rounded-sm border border-hair bg-surface">
          <ul className="divide-y divide-hair">
            {rows.map((e) => (
              <li key={e.id} className="flex flex-col gap-2 px-3 py-2.5 sm:flex-row sm:items-start">
                <div className="flex w-full shrink-0 flex-wrap items-center gap-1.5 sm:w-[210px] sm:flex-col sm:items-start">
                  <EventBadge type={e.eventType} size="xs" />
                  <ReviewBadge status={e.reviewStatus} />
                  <span className="text-[11.5px] text-ink-3">
                    <RelativeTime iso={e.detectedAt} />
                  </span>
                  <span className={cn("figure text-[11.5px]", e.significance >= 60 ? "text-accent" : "text-ink-4")}>sig {e.significance}</span>
                </div>
                <div className="min-w-0 flex-1 text-[13px]">
                  <div className="font-medium text-ink">{e.title}</div>
                  {e.summary && <p className="mt-0.5 line-clamp-2 text-[12.5px] text-ink-2">{e.summary}</p>}
                  <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] text-ink-3">
                    {e.entity && (
                      <Link href={entityHref(e.entityType, e.entity.slug, e.entity.name)} target="_blank" className="text-ink-2 hover:text-accent hover:underline">
                        {e.entity.name}
                      </Link>
                    )}
                    {e.operator && <span>{e.operator.name}</span>}
                    {e.countryIso2 && <Badge size="xs">{e.countryIso2}</Badge>}
                    <span>{e.sourceName}</span>
                    <ExtLink href={e.url} />
                    {(e.oldValue !== null && e.oldValue !== undefined) || (e.newValue !== null && e.newValue !== undefined) ? (
                      <span className="figure">
                        {e.oldValue !== null && e.oldValue !== undefined && <span className="text-danger">{fmtValue(e.oldValue)}</span>}
                        {e.oldValue !== null && e.oldValue !== undefined && " → "}
                        <span className="text-st-operational">{fmtValue(e.newValue)}</span>
                      </span>
                    ) : null}
                  </div>
                </div>
                <div className="flex shrink-0 gap-1">
                  <Button size="xs" variant={e.reviewStatus === "approved" ? "primary" : "secondary"} onClick={() => void setStatus(e, "approved")} disabled={busy !== null || e.reviewStatus === "approved"}>
                    Approve
                  </Button>
                  <Button size="xs" variant="ghost" onClick={() => void setStatus(e, "pending")} disabled={busy !== null || e.reviewStatus === "pending"}>
                    Pending
                  </Button>
                  <Button size="xs" variant="danger" onClick={() => void setStatus(e, "rejected")} disabled={busy !== null}>
                    Reject
                  </Button>
                </div>
              </li>
            ))}
          </ul>
          <div className="px-3">
            <Pager page={page} perPage={PER_PAGE} total={total} onPage={(p) => setParams({ page: p === 1 ? null : p })} />
          </div>
        </div>
      )}
      <p className="mt-2 text-[11.5px] text-ink-4">{fmtInt(total)} events match the type / significance filters. The review filter applies to the current page.</p>
    </div>
  );
}