pn-new-crm/src/components/admin/qualification-criteria-admin.tsx

'use client';

import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import {
  DndContext,
  closestCenter,
  type DragEndEvent,
  PointerSensor,
  KeyboardSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import {
  SortableContext,
  arrayMove,
  sortableKeyboardCoordinates,
  useSortable,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { GripVertical, Plus, Save, Trash2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Switch } from '@/components/ui/switch';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';

interface CriterionRow {
  id: string;
  key: string;
  label: string;
  description: string | null;
  enabled: boolean;
  displayOrder: number;
}

interface ListResponse {
  data: CriterionRow[];
}

/**
 * Per-port qualification-criteria admin. Lists current criteria, add via
 * the dialog, toggle enabled inline, drag-to-reorder via dnd-kit (the
 * whole list ships in one PATCH so partial failure can't scramble the
 * order — see qualification.service.reorderCriteria).
 */
export function QualificationCriteriaAdmin() {
  const queryClient = useQueryClient();
  const [createOpen, setCreateOpen] = useState(false);
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

  const { data, isLoading } = useQuery<ListResponse>({
    queryKey: ['qualification-criteria'],
    queryFn: () => apiFetch('/api/v1/admin/qualification-criteria'),
  });
  const criteria = data?.data ?? [];

  const toggleEnabled = useMutation({
    mutationFn: async (vars: { id: string; enabled: boolean }) =>
      apiFetch(`/api/v1/admin/qualification-criteria/${vars.id}`, {
        method: 'PATCH',
        body: { enabled: vars.enabled },
      }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['qualification-criteria'] }),
    onError: (err) => toastError(err),
  });

  const reorder = useMutation<
    ListResponse,
    Error,
    string[],
    { previous: ListResponse | undefined }
  >({
    mutationFn: async (ids: string[]) =>
      apiFetch('/api/v1/admin/qualification-criteria/reorder', {
        method: 'POST',
        body: { ids },
      }),
    onMutate: async (ids: string[]) => {
      // Optimistic: rewrite the cache order before the round-trip so the
      // dropped row doesn't snap back to its old slot during the request.
      await queryClient.cancelQueries({ queryKey: ['qualification-criteria'] });
      const previous = queryClient.getQueryData<ListResponse>(['qualification-criteria']);
      if (previous) {
        const byId = new Map(previous.data.map((c) => [c.id, c] as const));
        const next = ids
          .map((id, idx) => {
            const c = byId.get(id);
            return c ? { ...c, displayOrder: idx } : null;
          })
          .filter((c): c is CriterionRow => c !== null);
        queryClient.setQueryData(['qualification-criteria'], { data: next });
      }
      return { previous };
    },
    onError: (err, _ids, ctx) => {
      // Roll back to the snapshot we took in onMutate.
      if (ctx?.previous) {
        queryClient.setQueryData(['qualification-criteria'], ctx.previous);
      }
      toastError(err);
    },
    onSettled: () => queryClient.invalidateQueries({ queryKey: ['qualification-criteria'] }),
  });

  const deleteCriterion = useMutation({
    mutationFn: async (id: string) =>
      apiFetch(`/api/v1/admin/qualification-criteria/${id}`, { method: 'DELETE' }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['qualification-criteria'] }),
    onError: (err) => toastError(err),
  });

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
    const oldIndex = criteria.findIndex((c) => c.id === active.id);
    const newIndex = criteria.findIndex((c) => c.id === over.id);
    if (oldIndex < 0 || newIndex < 0) return;
    const nextIds = arrayMove(criteria, oldIndex, newIndex).map((c) => c.id);
    reorder.mutate(nextIds);
  }

  if (isLoading) {
    return <div className="text-sm text-muted-foreground">Loading criteria…</div>;
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">
          {criteria.length} criteria configured · {criteria.filter((c) => c.enabled).length} enabled
        </p>
        <Button size="sm" onClick={() => setCreateOpen(true)} className="gap-1.5">
          <Plus className="size-4" aria-hidden />
          Add criterion
        </Button>
      </div>

      {criteria.length === 0 ? (
        <div className="rounded-lg border border-dashed bg-muted/20 p-8 text-center">
          <p className="text-sm font-medium">No criteria configured yet.</p>
          <p className="mt-1 text-xs text-muted-foreground">
            Add the first criterion the rep needs to confirm before a deal can be qualified.
          </p>
        </div>
      ) : (
        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
          <SortableContext items={criteria.map((c) => c.id)} strategy={verticalListSortingStrategy}>
            <ul className="divide-y divide-border rounded-lg border">
              {criteria.map((c) => (
                <SortableCriterionRow
                  key={c.id}
                  criterion={c}
                  onToggleEnabled={(enabled) => toggleEnabled.mutate({ id: c.id, enabled })}
                  onDelete={() => {
                    if (
                      confirm(
                        `Delete criterion "${c.label}"? Per-interest state rows for this key will become orphaned (hidden from the UI but kept in audit history).`,
                      )
                    ) {
                      deleteCriterion.mutate(c.id);
                    }
                  }}
                  deleteDisabled={deleteCriterion.isPending}
                />
              ))}
            </ul>
          </SortableContext>
        </DndContext>
      )}

      <CreateCriterionDialog open={createOpen} onOpenChange={setCreateOpen} />
    </div>
  );
}

function SortableCriterionRow({
  criterion,
  onToggleEnabled,
  onDelete,
  deleteDisabled,
}: {
  criterion: CriterionRow;
  onToggleEnabled: (enabled: boolean) => void;
  onDelete: () => void;
  deleteDisabled: boolean;
}) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: criterion.id,
  });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <li ref={setNodeRef} style={style} className="flex items-start gap-3 p-3">
      <button
        type="button"
        aria-label="Drag to reorder"
        {...attributes}
        {...listeners}
        className="cursor-grab touch-none rounded p-1 text-muted-foreground hover:text-foreground active:cursor-grabbing"
      >
        <GripVertical className="size-4" aria-hidden />
      </button>
      <CriterionEditableRow criterion={criterion} onToggleEnabled={onToggleEnabled} />
      <button
        type="button"
        aria-label="Delete criterion"
        disabled={deleteDisabled}
        onClick={onDelete}
        className="ml-auto rounded p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
      >
        <Trash2 className="size-4" aria-hidden />
      </button>
    </li>
  );
}

function CriterionEditableRow({
  criterion,
  onToggleEnabled,
}: {
  criterion: CriterionRow;
  onToggleEnabled: (enabled: boolean) => void;
}) {
  const queryClient = useQueryClient();
  const [label, setLabel] = useState(criterion.label);
  const [description, setDescription] = useState(criterion.description ?? '');
  const isDirty =
    label.trim() !== criterion.label || (description.trim() || null) !== criterion.description;

  const save = useMutation({
    mutationFn: async () =>
      apiFetch(`/api/v1/admin/qualification-criteria/${criterion.id}`, {
        method: 'PATCH',
        body: { label: label.trim(), description: description.trim() || null },
      }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['qualification-criteria'] }),
    onError: (err) => toastError(err),
  });

  return (
    <div className="flex-1 space-y-1.5">
      <div className="flex items-center gap-2">
        <Input
          value={label}
          onChange={(e) => setLabel(e.target.value)}
          className="h-7 max-w-md text-sm font-medium"
        />
        <code className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
          {criterion.key}
        </code>
        <div className="ml-auto flex items-center gap-2">
          {isDirty ? (
            <Button
              size="sm"
              variant="outline"
              className="h-7 px-2 text-xs"
              disabled={save.isPending || label.trim().length === 0}
              onClick={() => save.mutate()}
            >
              <Save className="size-3" aria-hidden />
              Save
            </Button>
          ) : null}
          <Switch
            checked={criterion.enabled}
            onCheckedChange={onToggleEnabled}
            aria-label={criterion.enabled ? 'Disable' : 'Enable'}
          />
        </div>
      </div>
      <Textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        rows={2}
        placeholder="Optional helper text shown under the checkbox on the interest detail page."
        className="text-xs"
      />
    </div>
  );
}

function CreateCriterionDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
}) {
  const queryClient = useQueryClient();
  const [key, setKey] = useState('');
  const [label, setLabel] = useState('');
  const [description, setDescription] = useState('');
  const [enabled, setEnabled] = useState(true);

  const mutation = useMutation({
    mutationFn: async () =>
      apiFetch('/api/v1/admin/qualification-criteria', {
        method: 'POST',
        body: {
          key: key.trim(),
          label: label.trim(),
          description: description.trim() || null,
          enabled,
          displayOrder: 999,
        },
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['qualification-criteria'] });
      onOpenChange(false);
      setKey('');
      setLabel('');
      setDescription('');
      setEnabled(true);
    },
    onError: (err) => toastError(err),
  });

  const canSubmit =
    key.trim().length > 0 &&
    /^[a-z][a-z0-9_]*$/.test(key.trim()) &&
    label.trim().length > 0 &&
    !mutation.isPending;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Add qualification criterion</DialogTitle>
          <DialogDescription>
            The <strong>key</strong> is a stable identifier code references (lowercase alphanumeric
            + underscores). It can&apos;t be changed once created — per-interest state rows
            reference it.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3 py-1">
          <div className="space-y-1">
            <Label htmlFor="qc-key">Key</Label>
            <Input
              id="qc-key"
              value={key}
              onChange={(e) => setKey(e.target.value.toLowerCase())}
              placeholder="e.g. budget_confirmed"
            />
            {key && !/^[a-z][a-z0-9_]*$/.test(key) ? (
              <p className="text-[11px] text-rose-700">
                Must start with a letter; lowercase alphanumeric and underscores only.
              </p>
            ) : null}
          </div>
          <div className="space-y-1">
            <Label htmlFor="qc-label">Label</Label>
            <Input
              id="qc-label"
              value={label}
              onChange={(e) => setLabel(e.target.value)}
              placeholder="e.g. Budget confirmed"
            />
          </div>
          <div className="space-y-1">
            <Label htmlFor="qc-desc">Description (optional)</Label>
            <Textarea
              id="qc-desc"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={2}
              placeholder="Shown under the checkbox on the interest detail page."
            />
          </div>
          <label className="flex items-center gap-2 text-sm">
            <Switch checked={enabled} onCheckedChange={setEnabled} />
            Enabled by default
          </label>
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={mutation.isPending}
          >
            Cancel
          </Button>
          <Button disabled={!canSubmit} onClick={() => mutation.mutate()}>
            {mutation.isPending ? 'Adding…' : 'Add criterion'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}