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 { handleApiError } from '@/lib/error-handler';
import { request } from '@/lib/fetcher';
import { zodResolver } from '@hookform/resolvers/zod';
import { KeyIcon, LockKeyIcon } from '@phosphor-icons/react';
import { useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { z } from 'zod';

const PasswordSchema = z
  .object({
    current_password: z.string().min(1, 'Current password is required'),
    password: z.string().min(8, 'Password must be at least 8 characters'),
    password_confirmation: z.string().min(1, 'Please confirm your password'),
  })
  .refine((d) => d.password === d.password_confirmation, {
    message: 'Passwords do not match',
    path: ['password_confirmation'],
  });

type PasswordFormValues = z.infer<typeof PasswordSchema>;

export default function PasswordSection() {
  const { t } = useTranslation();
  const [isPending, startTransition] = useTransition();

  const form = useForm<PasswordFormValues>({
    resolver: zodResolver(PasswordSchema),
    defaultValues: {
      current_password: '',
      password: '',
      password_confirmation: '',
    },
  });

  const onSubmit = (values: PasswordFormValues) => {
    startTransition(async () => {
      try {
        await request.put('/api/admin/profile/password', values);
        toast.success(t('Password updated successfully'));
        form.reset();
      } catch (error) {
        handleApiError(error);
      }
    });
  };

  const FIELDS = [
    {
      id: 1,
      key: 'current_password',
      name: 'current_password',
      label: t('Current Password'),
      placeholder: t('Enter current password'),
      type: 'password',
    },
    {
      id: 2,
      key: 'password',
      name: 'password',
      label: t('New Password'),
      placeholder: t('Min. 8 characters'),
      type: 'password',
    },
    {
      id: 3,
      key: 'password_confirmation',
      name: 'password_confirmation',
      label: t('Confirm New Password'),
      placeholder: t('Repeat new password'),
      type: 'password',
    },
  ];

  return (
    <>
      <div className="mb-4 flex items-center gap-3">
        <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-black/5 text-black/50">
          <KeyIcon weight="bold" className="size-4" />
        </div>
        <div>
          <p className="font-medium">{t('Change Password')}</p>
          <p className="text-sm text-black/50">
            {t("Use a strong password that you don't use elsewhere.")}
          </p>
        </div>
      </div>

      <Separator className="mb-4" />

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          <div className="space-y-4">
            {FIELDS.map((item) => (
              <FormRenderer key={item.id} form={form} item={item} />
            ))}
          </div>
          <div className="flex justify-end">
            <Button type="submit" loading={isPending} disabled={isPending}>
              <LockKeyIcon weight="bold" className="size-4" />
              {t('Update Password')}
            </Button>
          </div>
        </form>
      </Form>
    </>
  );
}