"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { get } from "@/lib/api";
import { Notice, Spinner } from "@/components/ui";
import { DataGrid, type ColDef } from "@/components/DataGrid";
import { Modal } from "@/components/Modal";
import { StatusBadge } from "@/components/processingStatus";
import { InfoIcon } from "@/components/icons";

type LogEvent = {
  productId: string;
  sku: string | null;
  step: string;
  detail: string;
  outcome: string | null;
  occurredAt: string;
};

function InfoCell(p: any) {
  return (
    <button
      type="button"
      className="rounded-sm p-1 text-slate-400 hover:bg-slate-100 hover:text-brand"
      aria-label="Event details"
      onClick={() => p.context.onInfo(p.data)}
    >
      <InfoIcon className="h-4 w-4" />
    </button>
  );
}

export default function ProcessingLogPanel() {
  const [events, setEvents] = useState<LogEvent[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [selected, setSelected] = useState<LogEvent | null>(null);

  const load = useCallback(async () => {
    try {
      const d = await get<{ events: LogEvent[] }>("processing-log?limit=500");
      setEvents(d.events);
      setError(null);
    } catch (e) {
      setError((e as Error).message);
    }
  }, []);

  useEffect(() => {
    load();
    const t = setInterval(load, 5000); // local read — keep the log live
    return () => clearInterval(t);
  }, [load]);

  const columnDefs = useMemo<ColDef[]>(
    () => [
      { field: "occurredAt", headerName: "When", width: 180, valueFormatter: (p: any) => new Date(p.value).toLocaleString() },
      { field: "sku", headerName: "SKU", width: 150, valueFormatter: (p: any) => p.value || "—" },
      { field: "productId", headerName: "Product", flex: 1, minWidth: 150 },
      { field: "step", headerName: "Step", width: 170, cellRenderer: (p: any) => <StatusBadge status={String(p.value)} /> },
      { field: "outcome", headerName: "Outcome", width: 120, valueFormatter: (p: any) => p.value || "—" },
      { field: "detail", headerName: "Detail", flex: 2, minWidth: 220, tooltipField: "detail" },
      { headerName: "", colId: "info", width: 70, sortable: false, filter: false, cellRenderer: InfoCell, cellClass: "flex items-center" },
    ],
    [],
  );

  if (error) return <Notice kind="error">Could not load the processing log: {error}</Notice>;
  if (!events) return <Spinner label="Loading processing log…" />;

  return (
    <>
      <p className="mb-3 text-sm text-slate-600">
        Every processing step for every product the system runs — claim, research, images, scoring, push and the final
        outcome. Newest first; auto-refreshes every 5s.
      </p>

      <DataGrid rowData={events} columnDefs={columnDefs} height={560} context={{ onInfo: (e: LogEvent) => setSelected(e) }} />

      <Modal open={!!selected} onClose={() => setSelected(null)} title="Processing event">
        {selected && (
          <dl className="space-y-3 text-sm">
            <Row label="When" value={new Date(selected.occurredAt).toLocaleString()} />
            <Row label="Product" value={selected.productId} mono />
            <Row label="SKU" value={selected.sku || "—"} />
            <div>
              <dt className="text-xs font-medium uppercase tracking-wide text-slate-400">Step</dt>
              <dd className="mt-1"><StatusBadge status={selected.step} /> {selected.outcome ? <span className="ml-1 text-slate-500">→ {selected.outcome}</span> : null}</dd>
            </div>
            <div>
              <dt className="text-xs font-medium uppercase tracking-wide text-slate-400">Detail</dt>
              <dd className="mt-1 whitespace-pre-wrap rounded-md bg-slate-50 p-3 text-slate-700">{selected.detail || "—"}</dd>
            </div>
          </dl>
        )}
      </Modal>
    </>
  );
}

function Row({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
  return (
    <div>
      <dt className="text-xs font-medium uppercase tracking-wide text-slate-400">{label}</dt>
      <dd className={`mt-0.5 text-slate-800 ${mono ? "break-all font-mono text-xs" : ""}`}>{value}</dd>
    </div>
  );
}