'use client';

import { useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
  addPermission,
  fetchPermissionById,
  updatePermission,
} from '@/network/apis/dashboard/permissions/permissions.apis';
import { zodResolver } from '@hookform/resolvers/zod';
import { RiCheckboxCircleFill, RiErrorWarningFill } from '@remixicon/react';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { Alert, AlertIcon, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Spinner } from '@/components/ui/spinners';
import {
  PermissionAddSchema,
  PermissionAddSchemaType,
} from './permission-add-schema';
import useGetPermission from '../../hooks/useGetPermission';

export default function PermissionAdd() {
  const router = useRouter();
  const params = useParams();
  const id = params?.slug?.[0] ? String(params?.slug?.[0]) : undefined;
  const isEdit = !!id;

  const { data: permissionDetails } = useQuery({
    queryKey: ['permission_details', id],
    queryFn: async () => {
      if (!id) return;
      return fetchPermissionById(id);
    },
    enabled: isEdit,
  });
  const { data: permissionsAndSections, isLoading } = useGetPermission();

  // Extract unique sections from API data
  const sections = permissionsAndSections?.map((item: any) => ({
    en: item.section.en,
    ar: item.section.ar,
  })) || [];

  const form = useForm<PermissionAddSchemaType>({
    resolver: zodResolver(PermissionAddSchema),
    defaultValues: {
      name: '',
      name_en: '',
      name_ar: '',
      section_en: '',
      section_ar: '',
      panel_id: 1,
    },
    mode: 'onSubmit',
  });

  useEffect(() => {
    if (isEdit && permissionDetails) {
      const first = permissionDetails.permissions?.[0];
      form.reset({
        name: first?.name ?? '',
        name_en: first?.name_en ?? '',
        name_ar: first?.name_ar ?? '',
        section_en: permissionDetails.section?.en ?? '',
        section_ar: permissionDetails.section?.ar ?? '',
      });
    }
  }, [isEdit, permissionDetails, form]);

  const mutation = useMutation({
    mutationFn: async (values: PermissionAddSchemaType) => {
      const fd = new FormData();
      fd.append('name', values.name);
      fd.append('name_en', values.name_en);
      fd.append('name_ar', values.name_ar);
      fd.append('section_en', values.section_en);
      fd.append('section_ar', values.section_ar);
      fd.append('panel_id', values.panel_id.toString());

      if (isEdit) {
        await updatePermission(fd, id as string);
      } else {
        await addPermission(fd);
      }
    },
    onSuccess: () => {
      toast.custom(
        () => (
          <Alert variant="mono" icon="success" close={false}>
            <AlertIcon>
              <RiCheckboxCircleFill />
            </AlertIcon>
            <AlertTitle>
              {isEdit
                ? 'Permission updated successfully'
                : 'Permission added successfully'}
            </AlertTitle>
          </Alert>
        ),
        { position: 'top-center' },
      );
      router.push('/permissions');
    },
    onError: (error: Error) => {
      toast.custom(
        () => (
          <Alert variant="mono" icon="destructive" close={false}>
            <AlertIcon>
              <RiErrorWarningFill />
            </AlertIcon>
            <AlertTitle>{error.message}</AlertTitle>
          </Alert>
        ),
        { position: 'top-center' },
      );
    },
  });

  const isProcessing = mutation.status === 'pending';

  const handleSubmit = (values: PermissionAddSchemaType) => {
    mutation.mutate(values);
  };

  return (
    <div className="p-10">
      <Form {...form}>
        <form className="w-full" onSubmit={form.handleSubmit(handleSubmit)}>
          <div className="flex justify-between mb-5">
            <p className="font-bold text-2xl">
              {isEdit ? 'Update Permission' : 'Create Permission'}
            </p>
          </div>

          <div className="grid grid-cols-1  gap-4 mb-5">
              <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Name" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
            <FormField
              control={form.control}
              name="name_en"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name (EN)</FormLabel>
                  <FormControl>
                    <Input placeholder="English Name" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="name_ar"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name (AR)</FormLabel>
                  <FormControl>
                    <Input placeholder="Arabic Name" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>

          <div className="mb-5">
            <FormField
              control={form.control}
              name="section_en"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Section</FormLabel>
                  <Select
                    onValueChange={(value) => {
                      const selectedSection = sections.find(
                        (s: any) => s.en === value
                      );
                      if (selectedSection) {
                        form.setValue('section_en', selectedSection.en);
                        form.setValue('section_ar', selectedSection.ar);
                      }
                    }}
                    value={field.value}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select a section" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {sections.map((section: any, index: number) => (
                        <SelectItem key={index} value={section.en}>
                          {section.en} - {section.ar}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
            <FormField
              control={form.control}
              name="section_en"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Section (EN)</FormLabel>
                  <FormControl>
                    <Input placeholder="Section English Name" {...field} readOnly />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="section_ar"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Section (AR)</FormLabel>
                  <FormControl>
                    <Input placeholder="Section Arabic Name" {...field} readOnly />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>

          <div className="flex justify-end">
            <Button
              type="button"
              variant="outline"
              className="mx-3"
              onClick={() => router.push('/permissions')}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={isProcessing}>
              {isProcessing && <Spinner className="animate-spin" />}
              {isEdit ? 'Update' : 'Add'}
            </Button>
          </div>
        </form>
      </Form>
    </div>
  );
}