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 { Plus, Trash2, ChevronUp, ChevronDown, Save } 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';
import { cn } from '@/lib/utils';

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-style reorder via up/down buttons
 * (keeps the UI simple for v1; can swap to a real DnD later if reps want it).
 */
export function QualificationCriteriaAdmin() {
  const queryClient = useQueryClient();
  const [createOpen, setCreateOpen] = useState(false);

  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({
    mutationFn: async (vars: { id: string; displayOrder: number }) =>
      apiFetch(`/api/v1/admin/qualification-criteria/${vars.id}`, {
        method: 'PATCH',
        body: { displayOrder: vars.displayOrder },
      }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['qualification-criteria'] }),
    onError: (err) => toastError(err),
  });

  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),
  });

  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>
      ) : (
        <ul className="divide-y divide-border rounded-lg border">
          {criteria.map((c, idx) => {
            const isFirst = idx === 0;
            const isLast = idx === criteria.length - 1;
            return (
              <li key={c.id} className="flex items-start gap-3 p-3">
                <div className="flex flex-col gap-0.5">
                  <button
                    type="button"
                    aria-label="Move up"
                    disabled={isFirst || reorder.isPending}
                    onClick={() =>
                      reorder.mutate({ id: c.id, displayOrder: Math.max(0, c.displayOrder - 1) })
                    }
                    className={cn(
                      'rounded p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30',
                    )}
                  >
                    <ChevronUp className="size-3.5" aria-hidden />
                  </button>
                  <button
                    type="button"
                    aria-label="Move down"
                    disabled={isLast || reorder.isPending}
                    onClick={() => reorder.mutate({ id: c.id, displayOrder: c.displayOrder + 1 })}
                    className={cn(
                      'rounded p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30',
                    )}
                  >
                    <ChevronDown className="size-3.5" aria-hidden />
                  </button>
                </div>
                <CriterionEditableRow
                  criterion={c}
                  onToggleEnabled={(enabled) => toggleEnabled.mutate({ id: c.id, enabled })}
                />
                <button
                  type="button"
                  aria-label="Delete criterion"
                  disabled={deleteCriterion.isPending}
                  onClick={() => {
                    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);
                    }
                  }}
                  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>
            );
          })}
        </ul>
      )}

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

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>
  );
}