"use client";
import * as React from "react";
import { Plus, Trophy, X } from "lucide-react";
import { PromptDialog } from "@/components/common/prompt-dialog";
import { Tooltip } from "@/components/ui/tooltip";
import { useLocalStorage } from "@/lib/client/hooks";
import { BUILTIN_CRITERIA, customCriterion, type Criterion } from "@/lib/arena/scoring";
import { cn } from "@/lib/utils";

export const CRITERIA_STORAGE_KEY = "polyllm:arena-criteria";

/** Custom criteria persisted in localStorage (`polyllm:arena-criteria`). */
export function useCustomCriteria() {
  const [stored, setStored] = useLocalStorage<{ id: string; label: string }[]>(CRITERIA_STORAGE_KEY, []);
  const custom = React.useMemo<Criterion[]>(() => stored.map((c) => customCriterion(c.label) ?? { id: c.id, label: c.label, short: c.label, ratingKey: "bestCustom", custom: true }).filter((c) => c.id), [stored]);
  const add = React.useCallback(
    (label: string): Criterion | null => {
      const c = customCriterion(label);
      if (!c) return null;
      setStored((prev) => (prev.some((p) => p.id === c.id) ? prev : [...prev, { id: c.id, label: c.label }].slice(0, 12)));
      return c;
    },
    [setStored],
  );
  const remove = React.useCallback((id: string) => setStored((prev) => prev.filter((p) => p.id !== id)), [setStored]);
  const all = React.useMemo(() => [...BUILTIN_CRITERIA, ...custom], [custom]);
  return { custom, all, add, remove };
}

interface Props {
  criteria: Criterion[];
  /** Criterion ids won by this response. */
  won: ReadonlySet<string>;
  onToggle: (criterionId: string, on: boolean) => void;
  onAddCriterion?: (label: string) => void;
  onRemoveCriterion?: (id: string) => void;
  busy?: boolean;
  disabled?: boolean;
  className?: string;
}

/** Criteria chips under a response. One vote per criterion per session — voting here moves the vote. */
export function VotePanel({ criteria, won, onToggle, onAddCriterion, onRemoveCriterion, busy, disabled, className }: Props) {
  const [adding, setAdding] = React.useState(false);
  return (
    <div className={cn("flex flex-wrap items-center gap-1", className)} role="group" aria-label="Vote for this response">
      {criteria.map((c) => {
        const on = won.has(c.id);
        return (
          <span key={c.id} className="group/chip relative inline-flex">
            <Tooltip content={on ? `Retract “${c.label}”` : c.label}>
              <button
                type="button"
                disabled={busy || disabled}
                aria-pressed={on}
                onClick={() => onToggle(c.id, !on)}
                className={cn(
                  "tap inline-flex h-7 items-center gap-1 rounded-md border px-2 text-[11.5px] font-medium transition-colors disabled:opacity-50",
                  on ? "border-accent bg-accent-soft text-accent" : "border-border text-fg-muted hover:border-border-strong hover:text-fg",
                  c.custom && onRemoveCriterion && "pr-5",
                )}
              >
                {c.id === "best" ? <Trophy className="size-3" /> : null}
                {c.short}
              </button>
            </Tooltip>
            {c.custom && onRemoveCriterion ? (
              <button type="button" onClick={() => onRemoveCriterion(c.id)} className="hover-reveal absolute right-0.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-fg-subtle hover:text-danger" aria-label={`Remove criterion ${c.label}`}>
                <X className="size-3" />
              </button>
            ) : null}
          </span>
        );
      })}
      {onAddCriterion ? (
        <>
          <Tooltip content="Add a custom criterion">
            <button type="button" disabled={disabled} onClick={() => setAdding(true)} className="tap inline-flex h-7 items-center gap-1 rounded-md border border-dashed border-border px-2 text-[11.5px] font-medium text-fg-subtle transition-colors hover:border-border-strong hover:text-fg" aria-label="Add criterion">
              <Plus className="size-3" /> Criterion
            </button>
          </Tooltip>
          <PromptDialog
            open={adding}
            onOpenChange={setAdding}
            title="New criterion"
            description="Name what you are judging — e.g. “Best tone”, “Most concise”, “Follows format”. Saved on this device."
            label="Criterion"
            placeholder="Most concise"
            confirmLabel="Add"
            maxLength={40}
            onSubmit={(v) => {
              onAddCriterion(v);
            }}
          />
        </>
      ) : null}
    </div>
  );
}