"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Loader2Icon, ArrowLeftIcon } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/src/components/ui/button"
import { Input } from "@/src/components/ui/input"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/src/components/ui/form"
import { useAddMenuItemMutation } from "@/src/state/menu"
import { useUploadFileMutation } from "@/src/state/upload"
import { extractErrorMessage } from "../../utils"
import { CategoryCombobox } from "../../category-combobox"
import { IngredientInput } from "../../ingredient-input"
import { MenuImageUpload } from "../../menu-image-upload"

const schema = z.object({
  categoryId: z.string().min(1, "Veuillez sélectionner une catégorie"),
  name: z.string().min(2, "Le nom doit contenir au moins 2 caractères"),
  price: z.coerce.number().positive("Le prix doit être positif"),
  description: z.string().optional(),
  ingredients: z.array(z.string()).optional(),
  preparationTime: z.coerce.number().int().positive().optional().or(z.literal("")),
  isAvailable: z.boolean().optional(),
})

type FormValues = z.infer<typeof schema>

type ImageField = "thumbnailImage" | "descriptiveImage"

export default function AddMenuItemForm() {
  const router = useRouter()
  const [addMenuItem, { isLoading }] = useAddMenuItemMutation()
  const [uploadFile] = useUploadFileMutation()

  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null)
  const [descriptiveUrl, setDescriptiveUrl] = useState<string | null>(null)
  const [uploadingField, setUploadingField] = useState<ImageField | null>(null)

  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: {
      categoryId: "",
      name: "",
      price: 0,
      description: "",
      ingredients: [],
      preparationTime: "",
      isAvailable: true,
    },
  })

  const handleImageUpload = async (field: ImageField, file: File) => {
    setUploadingField(field)
    try {
      const formData = new FormData()
      formData.append("file", file)
      formData.append("fileType", "image")
      const res = await uploadFile(formData).unwrap()
      if (field === "thumbnailImage") setThumbnailUrl(res.data.url)
      else setDescriptiveUrl(res.data.url)
    } catch {
      toast.error("Erreur lors de l'envoi de l'image")
    } finally {
      setUploadingField(null)
    }
  }

  const handleImageDelete = (field: ImageField) => {
    if (field === "thumbnailImage") setThumbnailUrl(null)
    else setDescriptiveUrl(null)
    return Promise.resolve()
  }

  const handleSubmit = async (values: FormValues) => {
    try {
      await addMenuItem({
        categoryId: values.categoryId,
        name: values.name,
        price: values.price,
        description: values.description || undefined,
        ingredients: values.ingredients,
        thumbnailImage: thumbnailUrl || undefined,
        descriptiveImage: descriptiveUrl || undefined,
        isAvailable: values.isAvailable,
        preparationTime: values.preparationTime ? Number(values.preparationTime) : undefined,
      }).unwrap()
      toast.success("Article ajouté au menu")
      router.push("/menu/items")
    } catch (err) {
      toast.error(extractErrorMessage(err, "Une erreur est survenue"))
    }
  }

  return (
    <div className="max-w-5xl mx-auto px-4 py-8 space-y-8">
      <div className="flex items-center gap-3">
        <Button
          type="button"
          variant="ghost"
          size="icon"
          onClick={() => router.push("/menu/items")}
        >
          <ArrowLeftIcon className="size-4" />
        </Button>
        <div>
          <h1 className="text-xl font-semibold">Nouvel article</h1>
          <p className="text-sm text-muted-foreground mt-0.5">
            Ajoutez un nouveau plat à votre menu
          </p>
        </div>
      </div>

      <Form {...form}>
        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
          <section className="space-y-4 rounded-xl border bg-white p-5">
            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
              Informations générales
            </h2>

            <FormField
              control={form.control}
              name="categoryId"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Catégorie</FormLabel>
                  <FormControl>
                    <CategoryCombobox
                      value={field.value}
                      onChange={field.onChange}
                      disabled={isLoading}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="grid gap-4 sm:grid-cols-2">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Nom du plat</FormLabel>
                    <FormControl>
                      <Input placeholder="Ex: Burger Classic" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="price"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Prix (FCFA)</FormLabel>
                    <FormControl>
                      <Input type="number" min={0} placeholder="0" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <FormField
              control={form.control}
              name="description"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>
                    Description{" "}
                    <span className="text-muted-foreground font-normal">(optionnel)</span>
                  </FormLabel>
                  <FormControl>
                    <textarea
                      className="flex min-h-[80px] w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
                      placeholder="Décrivez le plat…"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </section>

          <section className="space-y-4 rounded-xl border bg-white p-5">
            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
              Ingrédients &amp; préparation
            </h2>

            <FormField
              control={form.control}
              name="ingredients"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>
                    Ingrédients{" "}
                    <span className="text-muted-foreground font-normal">(optionnel)</span>
                  </FormLabel>
                  <FormControl>
                    <IngredientInput
                      value={field.value ?? []}
                      onChange={field.onChange}
                      disabled={isLoading}
                    />
                  </FormControl>
                  <p className="text-xs text-muted-foreground">
                    Appuyez sur Entrée ou virgule pour ajouter un ingrédient
                  </p>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="preparationTime"
              render={({ field }) => (
                <FormItem className="sm:max-w-[200px]">
                  <FormLabel>
                    Temps de préparation (min){" "}
                    <span className="text-muted-foreground font-normal">(optionnel)</span>
                  </FormLabel>
                  <FormControl>
                    <Input type="number" min={1} placeholder="15" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </section>

          <section className="space-y-4 rounded-xl border bg-white p-5">
            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
              Images
            </h2>

            <div className="grid gap-6 sm:grid-cols-2">
              <MenuImageUpload
                label="Image miniature"
                hint="Ratio 4:3 recommandé"
                currentUrl={thumbnailUrl}
                aspectRatio="4/3"
                isUploading={uploadingField === "thumbnailImage"}
                onUpload={(file) => handleImageUpload("thumbnailImage", file)}
                onDelete={() => handleImageDelete("thumbnailImage")}
              />

              <MenuImageUpload
                label="Image descriptive"
                hint="Ratio 4:3 recommandé"
                currentUrl={descriptiveUrl}
                aspectRatio="4/3"
                isUploading={uploadingField === "descriptiveImage"}
                onUpload={(file) => handleImageUpload("descriptiveImage", file)}
                onDelete={() => handleImageDelete("descriptiveImage")}
              />
            </div>
          </section>

          <div className="flex justify-end gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => router.push("/menu/items")}
              disabled={isLoading}
            >
              Annuler
            </Button>
            <Button type="submit" disabled={isLoading} className="min-w-32">
              {isLoading && <Loader2Icon className="animate-spin" />}
              Ajouter l&apos;article
            </Button>
          </div>
        </form>
      </Form>
    </div>
  )
}