import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { createTicket } from '@/data/user/ticket/create-ticket';
import { zodResolver } from '@hookform/resolvers/zod';
import { PaperclipIcon, XIcon } from '@phosphor-icons/react';
import { useCallback, useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import z from 'zod';

const CreateTicketSchema = z.object({
  subject: z.string().min(3, 'Subject must be at least 3 characters'),
  message: z.string().min(10, 'Message must be at least 10 characters'),
});

type CreateTicketForm = z.infer<typeof CreateTicketSchema>;

interface CreateSupportTicketProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess: (ticketId: number) => void;
  onRefreshList: () => void;
}

export default function CreateSupportTicket({
  open,
  onOpenChange,
  onSuccess,
  onRefreshList,
}: CreateSupportTicketProps) {
  const [attachments, setAttachments] = useState<File[]>([]);
  const [isCreating, startCreating] = useTransition();
  const { t } = useTranslation();

  const form = useForm<CreateTicketForm>({
    resolver: zodResolver(CreateTicketSchema),
    defaultValues: { subject: '', message: '' },
  });

  const handleCreate = useCallback(
    (data: CreateTicketForm) => {
      startCreating(async () => {
        const res = await createTicket({
          subject: data.subject,
          message: data.message,
          attachments: attachments.length > 0 ? attachments : undefined,
        });

        if (res?.success) {
          toast.success(t(res.message));
          form.reset();
          setAttachments([]);
          onOpenChange(false);
          onRefreshList();
          onSuccess(res.ticket.id);
        }
      });
    },
    [attachments, form, onOpenChange, onRefreshList, onSuccess, t],
  );

  const handleClose = () => {
    onOpenChange(false);
    form.reset();
    setAttachments([]);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-[95vw] overflow-hidden rounded-2xl border border-black/5 border-white/5 p-6 sm:w-auto sm:min-w-3xl sm:p-8">
        <div className="relative z-10 flex flex-col gap-6 px-4">
          <DialogHeader>
            <DialogTitle>{t('Create New Ticket')}</DialogTitle>
          </DialogHeader>

          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(handleCreate)}
              className="space-y-4"
            >
              <FormField
                control={form.control}
                name="subject"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('Subject')}</FormLabel>
                    <FormControl>
                      <Input
                        className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                        placeholder={t('Brief description of your issue')}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="message"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('Message')}</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder={t('Describe your issue in detail...')}
                        className="min-h-28 resize-none rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <div>
                <Input
                  type="file"
                  multiple
                  onChange={(e) => {
                    if (e.target.files?.length) {
                      setAttachments((prev) => [
                        ...prev,
                        ...Array.from(e.target.files!),
                      ]);
                    }
                  }}
                  className="hidden"
                  id="create-attachments"
                />
                <Button
                  type="button"
                  variant="secondary"
                  size="sm"
                  onClick={() =>
                    document.getElementById('create-attachments')?.click()
                  }
                >
                  <PaperclipIcon size={16} />
                  <span>{t('Attach Files')}</span>
                </Button>
                {attachments.length > 0 && (
                  <div className="mt-2 flex flex-wrap gap-2">
                    {attachments.map((file, index) => (
                      <span
                        key={`${file.name}-${index}`}
                        className="inline-flex items-center gap-1 rounded-md bg-black/5 px-2 py-1 text-xs dark:bg-white/10"
                      >
                        {file.name}
                        <button
                          type="button"
                          onClick={() =>
                            setAttachments((prev) =>
                              prev.filter((_, i) => i !== index),
                            )
                          }
                          className="ml-1 cursor-pointer rounded hover:bg-black/10"
                          aria-label={t('Remove file')}
                        >
                          <XIcon />
                        </button>
                      </span>
                    ))}
                  </div>
                )}
              </div>

              <div className="flex justify-end gap-2 pt-2">
                <Button type="button" variant="secondary" onClick={handleClose}>
                  {t('Cancel')}
                </Button>
                <Button
                  type="submit"
                  variant="primary"
                  loading={isCreating}
                  disabled={isCreating}
                >
                  {t('Submit Ticket')}
                </Button>
              </div>
            </form>
          </Form>
        </div>
      </DialogContent>
    </Dialog>
  );
}