polaris-task-force/src/components/frontend/helpdesk/EditTicketDialog.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { PencilIcon } from "lucide-react";
import { toast } from "sonner";
import type { Ticket } from "@/payload-types";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { editTicket } from "@/app/(frontend)/helpdesk/actions";
import {
  TICKET_CATEGORIES,
  TICKET_PRIORITIES,
  type TicketCategory,
  type TicketPriority,
} from "@/lib/tickets/ticketMeta";

interface EditTicketDialogProps {
  readonly ticket: Ticket;
  readonly description: string;
}

function isTicketCategory(value: string): value is TicketCategory {
  return TICKET_CATEGORIES.some((option) => option.value === value);
}

function isTicketPriority(value: string): value is TicketPriority {
  return TICKET_PRIORITIES.some((option) => option.value === value);
}

export function EditTicketDialog({ ticket, description }: EditTicketDialogProps) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState(ticket.title);
  const [details, setDetails] = useState(description);
  const [category, setCategory] = useState<TicketCategory>(ticket.category);
  const [priority, setPriority] = useState<TicketPriority>(ticket.priority);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit() {
    setPending(true);
    setError(null);
    const result = await editTicket({
      ticketId: ticket.id,
      title,
      description: details,
      category,
      priority,
    });
    setPending(false);

    if (!result.success) {
      setError(result.error ?? "Could not edit the ticket.");
      return;
    }

    setOpen(false);
    toast.success("Ticket updated");
    router.refresh();
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button type="button" size="sm" variant="outline">
          <PencilIcon data-icon="inline-start" />
          Edit
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit ticket</DialogTitle>
          <DialogDescription>
            Update the request details. The previous and new values are retained in the audit trail.
          </DialogDescription>
        </DialogHeader>
        <form
          className="flex flex-col gap-4"
          onSubmit={(event) => {
            event.preventDefault();
            void handleSubmit();
          }}
        >
          <div className="flex flex-col gap-1.5">
            <Label htmlFor={`ticket-${ticket.id}-edit-title`}>Title</Label>
            <Input
              id={`ticket-${ticket.id}-edit-title`}
              value={title}
              maxLength={200}
              disabled={pending}
              onChange={(event) => setTitle(event.target.value)}
            />
          </div>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div className="flex flex-col gap-1.5">
              <Label htmlFor={`ticket-${ticket.id}-edit-category`}>Category</Label>
              <Select
                value={category}
                disabled={pending}
                onValueChange={(value) => {
                  if (isTicketCategory(value)) setCategory(value);
                }}
              >
                <SelectTrigger id={`ticket-${ticket.id}-edit-category`} className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    {TICKET_CATEGORIES.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectGroup>
                </SelectContent>
              </Select>
            </div>
            <div className="flex flex-col gap-1.5">
              <Label htmlFor={`ticket-${ticket.id}-edit-priority`}>Priority</Label>
              <Select
                value={priority}
                disabled={pending}
                onValueChange={(value) => {
                  if (isTicketPriority(value)) setPriority(value);
                }}
              >
                <SelectTrigger id={`ticket-${ticket.id}-edit-priority`} className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    {TICKET_PRIORITIES.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectGroup>
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className="flex flex-col gap-1.5">
            <Label htmlFor={`ticket-${ticket.id}-edit-description`}>Description</Label>
            <Textarea
              id={`ticket-${ticket.id}-edit-description`}
              rows={6}
              value={details}
              disabled={pending}
              onChange={(event) => setDetails(event.target.value)}
            />
          </div>
          {error && (
            <p role="alert" className="text-sm text-destructive">
              {error}
            </p>
          )}
          <DialogFooter>
            <Button type="button" variant="outline" disabled={pending} onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={pending}>
              {pending ? "Saving..." : "Save changes"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}