import FormRenderer from '@/components/common/form-renderer';
import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import { Separator } from '@/components/ui/separator';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import { createRequest } from '@/data/request/create-request';
import { TRole } from '@/types/admin/staff-type';
import { zodResolver } from '@hookform/resolvers/zod';
import { PlusIcon } from '@phosphor-icons/react';
import { useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { z } from 'zod';

export const StaffSchema = z.object({
  first_name: z.string().min(1, 'First name is required'),
  last_name: z.string().min(1, 'Last name is required'),
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
  role: z.string().min(1, 'Role is required'),
});

export type TStaffData = z.infer<typeof StaffSchema>;

export default function AddUser({
  roles,
  isStaff = false,
  refresh,
}: {
  roles: TRole[];
  isStaff?: boolean;
  refresh: () => void;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();

  const form = useForm<TStaffData>({
    resolver: zodResolver(StaffSchema),
    defaultValues: {
      first_name: '',
      last_name: '',
      email: '',
      password: '',
      role: '',
    },
  });

  const addStaffForm = [
    {
      id: 1,
      key: 'first_name',
      name: 'first_name',
      label: t('First Name'),
      placeholder: t('Enter first name'),
      type: 'text',
    },
    {
      id: 2,
      key: 'last_name',
      name: 'last_name',
      label: t('Last Name'),
      placeholder: t('Enter last name'),
      type: 'text',
    },
    {
      id: 3,
      key: 'email',
      name: 'email',
      label: t('Email Address'),
      placeholder: t('Enter email'),
      type: 'email',
    },
    {
      id: 4,
      key: 'password',
      name: 'password',
      label: t('Password'),
      placeholder: t('Enter password'),
      type: 'password',
    },
    {
      id: 5,
      key: 'role',
      name: 'role',
      label: t('Role'),
      placeholder: t('Select staff role'),
      type: 'select',
      options:
        roles?.map((role: TRole) => ({
          label: role.name,
          value: role.name,
        })) ?? [],
    },
  ];

  const onSubmit = (data: TStaffData) => {
    startTransition(async () => {
      const res = await createRequest({
        url: isStaff ? '/api/admin/staffs' : '/api/admin/users',
        formData: data,
      });
      if (res?.success) {
        toast.success(t(res?.message));
        refresh();
        form.reset();
        setIsOpen(false);
      }
    });
  };

  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetTrigger asChild>
        <Button variant="default">
          <PlusIcon size={16} />
          {t('Add New')} {isStaff ? t('Staff') : t('User')}
        </Button>
      </SheetTrigger>
      <SheetContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex h-full flex-col justify-between"
          >
            <SheetHeader>
              <SheetTitle>
                {t('Add New')} {isStaff ? t('Staff') : t('User')}
              </SheetTitle>
            </SheetHeader>
            <div className="mx-4 space-y-4 rounded-xl border border-black/5 p-4">
              <h4 className="text-lg font-medium">
                {isStaff ? t('Staff') : t('User')} {t('Details')}
              </h4>
              <Separator />
              {addStaffForm.map((item) => (
                <FormRenderer form={form} key={item.id} item={item} />
              ))}
            </div>
            <SheetFooter>
              <Button type="submit" loading={isPending} disabled={isPending}>
                {t('Add')} {isStaff ? t('Staff') : t('User')}
              </Button>
              <SheetClose asChild>
                <Button variant="outline">{t('Close')}</Button>
              </SheetClose>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
}