lcbp3/frontend/app/(dashboard)/circulation/new/page.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useQuery, useMutation } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

import { circulationService } from '@/lib/services/circulation.service';
import { userService } from '@/lib/services/user.service';
import { correspondenceService } from '@/lib/services/correspondence.service';
import { CreateCirculationDto } from '@/types/circulation';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Check, ChevronsUpDown, X } from 'lucide-react';
import Link from 'next/link';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';

// Force dynamic rendering to prevent build-time prerendering issues
export const dynamic = 'force-dynamic';

// Ensure this page is never statically generated
export const fetchCache = 'force-no-store';

// Form validation schema
const formSchema = z.object({
  correspondenceId: z.string().min(1, 'Please select a document'),
  subject: z.string().min(1, 'Subject is required'),
  assigneeIds: z.array(z.string()).min(1, 'At least one assignee is required'),
  remarks: z.string().optional(),
});

type FormData = z.infer<typeof formSchema>;

export default function CreateCirculationPage() {
  const router = useRouter();
  const [assigneeOpen, setAssigneeOpen] = useState(false);
  const [docOpen, setDocOpen] = useState(false);

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      subject: '',
      assigneeIds: [],
      remarks: '',
    },
  });

  // Fetch users for assignee selection
  const { data: users = [] } = useQuery({
    queryKey: ['users'],
    queryFn: () => userService.getAll(),
  });

  // Fetch correspondences for document selection
  const { data: correspondences } = useQuery({
    queryKey: ['correspondences-dropdown'],
    queryFn: () => correspondenceService.getAll({ limit: 100 }),
  });

  const createMutation = useMutation({
    mutationFn: (data: CreateCirculationDto) => circulationService.create(data),
    onSuccess: (result) => {
      toast.success('Circulation created successfully');
      router.push(`/circulation/${result.uuid}`);
    },
    onError: () => {
      toast.error('Failed to create circulation');
    },
  });

  const onSubmit = (data: FormData) => {
    createMutation.mutate(data);
  };

  const selectedAssignees = form.watch('assigneeIds');
  const selectedDocId = form.watch('correspondenceId');

  const selectedDoc = correspondences?.data?.find((c: { uuid: string }) => c.uuid === selectedDocId);

  const toggleAssignee = (userUuid: string) => {
    const current = form.getValues('assigneeIds');
    if (current.includes(userUuid)) {
      form.setValue(
        'assigneeIds',
        current.filter((id) => id !== userUuid)
      );
    } else {
      form.setValue('assigneeIds', [...current, userUuid]);
    }
  };

  return (
    <section className="space-y-6 max-w-2xl">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Link href="/circulation">
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div>
          <h1 className="text-2xl font-bold">Create Circulation</h1>
          <p className="text-muted-foreground">Create a new internal document circulation</p>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Circulation Details</CardTitle>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              {/* Document Selection */}
              <FormField
                control={form.control}
                name="correspondenceId"
                render={({ field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>Document</FormLabel>
                    <Popover open={docOpen} onOpenChange={setDocOpen}>
                      <PopoverTrigger asChild>
                        <FormControl>
                          <Button
                            variant="outline"
                            role="combobox"
                            className={cn('justify-between', !field.value && 'text-muted-foreground')}
                          >
                            {selectedDoc ? selectedDoc.correspondenceNumber : 'Select document...'}
                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent className="w-full p-0">
                        <Command>
                          <CommandInput placeholder="Search documents..." />
                          <CommandList>
                            <CommandEmpty>No document found.</CommandEmpty>
                            <CommandGroup>
                              {correspondences?.data?.map((doc: { uuid: string; correspondenceNumber: string }) => (
                                <CommandItem
                                  key={doc.uuid}
                                  value={doc.correspondenceNumber}
                                  onSelect={() => {
                                    form.setValue('correspondenceId', doc.uuid);
                                    setDocOpen(false);
                                  }}
                                >
                                  <Check
                                    className={cn(
                                      'mr-2 h-4 w-4',
                                      doc.uuid === field.value ? 'opacity-100' : 'opacity-0'
                                    )}
                                  />
                                  {doc.correspondenceNumber}
                                </CommandItem>
                              ))}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Subject */}
              <FormField
                control={form.control}
                name="subject"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Subject</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter circulation subject" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Assignees Multi-select */}
              <FormField
                control={form.control}
                name="assigneeIds"
                render={({ field: _field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>Assignees</FormLabel>
                    <Popover open={assigneeOpen} onOpenChange={setAssigneeOpen}>
                      <PopoverTrigger asChild>
                        <FormControl>
                          <Button variant="outline" role="combobox" className="justify-between h-auto min-h-10">
                            {selectedAssignees.length > 0 ? (
                              <div className="flex flex-wrap gap-1">
                                {selectedAssignees.map((userUuid) => {
                                  const user = users.find((u) => u.uuid === userUuid);
                                  return user ? (
                                    <Badge key={userUuid} variant="secondary" className="mr-1">
                                      {user.firstName || user.username}
                                      <X
                                        className="ml-1 h-3 w-3 cursor-pointer"
                                        onClick={(e) => {
                                          e.stopPropagation();
                                          toggleAssignee(userUuid);
                                        }}
                                      />
                                    </Badge>
                                  ) : null;
                                })}
                              </div>
                            ) : (
                              <span className="text-muted-foreground">Select assignees...</span>
                            )}
                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent className="w-full p-0">
                        <Command>
                          <CommandInput placeholder="Search users..." />
                          <CommandList>
                            <CommandEmpty>No user found.</CommandEmpty>
                            <CommandGroup>
                              {users.map((user) => (
                                <CommandItem
                                  key={user.uuid}
                                  value={user.username}
                                  onSelect={() => toggleAssignee(user.uuid)}
                                >
                                  <Check
                                    className={cn(
                                      'mr-2 h-4 w-4',
                                      selectedAssignees.includes(user.uuid) ? 'opacity-100' : 'opacity-0'
                                    )}
                                  />
                                  {user.firstName && user.lastName
                                    ? `${user.firstName} ${user.lastName}`
                                    : user.username}
                                </CommandItem>
                              ))}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Remarks */}
              <FormField
                control={form.control}
                name="remarks"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Remarks (Optional)</FormLabel>
                    <FormControl>
                      <Textarea placeholder="Additional notes..." className="resize-none" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Actions */}
              <div className="flex justify-end gap-2">
                <Link href="/circulation">
                  <Button variant="outline" type="button">
                    Cancel
                  </Button>
                </Link>
                <Button type="submit" disabled={createMutation.isPending}>
                  {createMutation.isPending ? 'Creating...' : 'Create Circulation'}
                </Button>
              </div>
            </form>
          </Form>
        </CardContent>
      </Card>
    </section>
  );
}