"use client"
import React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useCreateBooking } from "@/lib/react-query/hooks/bookings"
import { useGetStylistsByService, useGetStylistById } from "@/lib/react-query/hooks/stylists"
import { useGetOffersByClientId } from "@/lib/react-query/hooks/offers"
import type { CreateBookingPayload } from "@/types/bookings"
import { BookingDateTimeFields } from "./BookingDateTimeFields"
import { Autocomplete } from "@/components/common/Autocomplete"
import { useToaster } from "@/context/ToasterContext"
import { TimeSuggestions } from "./TimeSuggestions"
import { useTranslations } from "next-intl"
import { transformAvailabilityToSuggestions } from "@/lib/utils"

const errorInputClass = "h-12 border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200 px-2 py-4 text-base"
const normalInputClass = "h-12 border-gray-300 focus:border-primary-blue focus:ring-2 focus:ring-primary-blue/20 px-2 py-4 text-base"

interface AddBookingModalProps {
  open: boolean
  setOpen: (open: boolean) => void
  services?: { value: string; label: string; description: string }[]
  clients?: { value: string; label: string; description: string }[]
  onSuccess?: () => void
}

export default function AddBookingModal({ open, setOpen, services, clients, onSuccess }: AddBookingModalProps) {
  const createBookingMutation = useCreateBooking()
  const toast = useToaster()
  const t = useTranslations()

  const bookingSchema = z.object({
    serviceId: z.string().min(1, t("calendar.validation.serviceRequired")),
    clientId: z.string().min(1, t("calendar.validation.clientRequired")),
    stylistId: z.string().optional(),
    offerId: z.string().optional()
  })

  const form = useForm({
    resolver: zodResolver(bookingSchema),
    defaultValues: {
      serviceId: "",
      clientId: "",
      stylistId: "",
      offerId: ""
    }
  })

  const watchedServiceId = form.watch("serviceId")
  const watchedClientId = form.watch("clientId")
  const watchedStylistId = form.watch("stylistId") || ""
  const { data: stylistsData, isLoading: isLoadingStylists } = useGetStylistsByService(watchedServiceId)
  const { data: offersData, isLoading: isLoadingOffers } = useGetOffersByClientId(watchedClientId)
  const { data: stylistDetail } = useGetStylistById(watchedStylistId)

  const stylistOptions = React.useMemo(() => {
    return stylistsData?.map(stylist => ({
      value: stylist._id,
      label: stylist.name,
      description: stylist.role || ""
    })) || []
  }, [stylistsData])

  const offerOptions = React.useMemo(() => {
    return offersData?.offers?.map(offer => ({
      value: offer._id,
      label: offer.title,
      description: `${offer.description} (${offer.discountValue}${offer.discountType === "percentage" ? "%" : "€"})`
    })) || []
  }, [offersData?.offers])

  // Clear stylist selection when service changes
  React.useEffect(() => {
    form.setValue("stylistId", "")
  }, [watchedServiceId, form])

  // Clear offer when client changes
  React.useEffect(() => {
    form.setValue("offerId", "")
  }, [watchedClientId, form])

  const [dateTimeFields, setDateTimeFields] = React.useState<{
    date: Date | undefined
    startTime: string
  }>({
    date: undefined,
    startTime: ""
  })
  const [dateTimeError, setDateTimeError] = React.useState<string>("")
  const [timeSuggestions, setTimeSuggestions] = React.useState<{
    message: string
    suggestions: any[]
  } | null>(null)
  const handleSelectSuggestedTime = (date: Date, startTime: string, stylistId: string) => {
    // Update both the date and time fields with the selected suggestion
    setDateTimeFields({
      date,
      startTime
    })
    // Update stylistId in form
    if (stylistId) {
      form.setValue("stylistId", stylistId)
    }
    // Clear suggestions
    setTimeSuggestions(null)
    // Clear any previous errors
    setDateTimeError("")
  }

  const handleCancelSuggestions = () => {
    setTimeSuggestions(null)
  }

  function onSubmit(data: { serviceId: string; clientId: string; stylistId?: string; offerId?: string }) {
    // Validate date and time fields
    if (!dateTimeFields.date || !dateTimeFields.startTime) {
      setDateTimeError(t("calendar.validation.selectDateTime"))
      return
    }
    setDateTimeError("")

    const bookingData: CreateBookingPayload = {
      serviceId: data.serviceId,
      clientId: data.clientId,
      requestedStart: {
        date: `${dateTimeFields.date.getFullYear()}-${String(dateTimeFields.date.getMonth() + 1).padStart(2, "0")}-${String(dateTimeFields.date.getDate()).padStart(2, "0")}`, // YYYY-MM-DD format using local date
        time: dateTimeFields.startTime
      }
    }

    if (data.stylistId) {
      bookingData.stylistId = data.stylistId
    }

    if (data.offerId) {
      bookingData.offerId = data.offerId
    }

    // Find client and service names for the toast message
    const selectedClient = clients?.find(client => client.value === data.clientId)
    const selectedService = services?.find(service => service.value === data.serviceId)

    createBookingMutation.mutate(bookingData, {
      onSuccess: (response) => {
        // Check if this is a "time not available" response with suggestions
        if (response?.suggestions) {
          const suggestions = response.suggestions
          const message = response.message || t("calendar.timeSuggestions.description")

          // Show info toast with the message
          toast.showInfo(message)

          // Set suggestions to show in UI
          setTimeSuggestions({
            message,
            suggestions
          })

          return
        }

        // Normal success case
        const clientName = selectedClient?.label || "Unknown Client"
        const serviceName = selectedService?.label || "Unknown Service"
        toast.showSuccess(`Booking created successfully for ${clientName} - ${serviceName}!`)

        setOpen(false)
        form.reset()
        // Reset dateTimeFields and error state
        setDateTimeFields({
          date: undefined,
          startTime: ""
        })
        setDateTimeError("")
        setTimeSuggestions(null)
        onSuccess?.()
      },
      onError: (error: any) => {
        const data = error.response?.data
        if (data?.reason === "SLOT_NOT_AVAILABLE" && data?.availability) {
          const suggestions = transformAvailabilityToSuggestions(data.availability)
          setTimeSuggestions({
            message: t("calendar.timeSuggestions.description"),
            suggestions
          })
          return
        }
      }
    })
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="w-[689px]! sm:max-w-[689px] bg-white border-0 max-h-[90vh] overflow-y-auto [&>button]:top-5 [&>button]:right-5 [&>button]:text-white [&>button]:hover:text-gray-200 [&>button>svg]:stroke-[4px]">
        <DialogHeader className="bg-primary-gradient -m-6 mb-0 px-6 py-3 rounded-t-lg">
          <DialogTitle className="text-white text-lg font-medium">{t("calendar.modals.addBooking")}</DialogTitle>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="overflow-y-auto px-1 max-h-[70vh]">
            <div className="space-y-4">
              {/* Client & Service */}
              <div className="grid grid-cols-2 gap-4 mt-4">
                <div className="group">
                  <FormField
                    name="clientId"
                    control={form.control}
                    render={({ field, fieldState }) => (
                      <FormItem>
                        <FormLabel className="group-focus-within:text-primary-blue">{t("calendar.form.client")}</FormLabel>
                        <FormControl>
                          <Autocomplete
                            options={clients || []}
                            value={field.value}
                            onChange={field.onChange}
                            placeholder={t("calendar.form.selectClient")}
                            searchPlaceholder={t("calendar.form.searchClients")}
                            emptyMessage={t("calendar.form.noClientsFound")}
                            className={fieldState.invalid ? "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200" : ""}
                            required
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <div className="group">
                  <FormField
                    name="serviceId"
                    control={form.control}
                    render={({ field, fieldState }) => (
                      <FormItem>
                        <FormLabel className="group-focus-within:text-primary-blue">{t("calendar.form.service")}</FormLabel>
                        <FormControl>
                          <Autocomplete
                            options={services || []}
                            value={field.value}
                            onChange={field.onChange}
                            placeholder={t("calendar.form.selectService")}
                            searchPlaceholder={t("calendar.form.searchServices")}
                            emptyMessage={t("calendar.form.noServicesFound")}
                            className={fieldState.invalid ? "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200" : ""}
                            required
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </div>
              {/* Stylist & Offer */}
              <div className="grid grid-cols-2 gap-4">
                <div className="group">
                  <FormField
                    name="stylistId"
                    control={form.control}
                    render={({ field, fieldState }) => (
                      <FormItem>
                        <FormLabel className="group-focus-within:text-primary-blue">{t("calendar.form.stylist")}</FormLabel>
                        <FormControl>
                          <Autocomplete
                            options={stylistOptions}
                            value={field.value}
                            onChange={field.onChange}
                            placeholder={t("calendar.form.selectStylist")}
                            searchPlaceholder={t("calendar.form.searchStylists")}
                            emptyMessage={watchedServiceId ? t("calendar.form.noStylistsFound") : t("calendar.form.selectServiceFirst")}
                            className={fieldState.invalid ? "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200" : ""}
                            disabled={!watchedServiceId || isLoadingStylists}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <div className="group">
                  <FormField
                    name="offerId"
                    control={form.control}
                    render={({ field, fieldState }) => (
                      <FormItem>
                        <FormLabel className="group-focus-within:text-primary-blue">{t("calendar.form.offer")}</FormLabel>
                        <FormControl>
                          <Autocomplete
                            options={offerOptions}
                            value={field.value}
                            onChange={field.onChange}
                            placeholder={t("calendar.form.selectOffer")}
                            searchPlaceholder={t("calendar.form.searchOffers")}
                            emptyMessage={watchedClientId ? t("calendar.form.noOffersFound") : t("calendar.form.selectClientFirst")}
                            className={fieldState.invalid ? "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200" : ""}
                            disabled={!watchedClientId || isLoadingOffers}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </div>

              {/* Stats Box */}
              {watchedClientId && (
                <div className="bg-blue-50/50 rounded-lg p-3 flex justify-around items-center border border-blue-100">
                  <div className="text-center flex-1">
                    <p className="text-[11px] uppercase text-gray-500 font-medium tracking-wider mb-1">Total Spend</p>
                    <p className="text-xl font-bold text-blue-950">€{offersData?.stats?.totalSpend || 0}</p>
                  </div>
                  <div className="h-10 w-[1px] bg-blue-200 flex-none mx-4"></div>
                  <div className="text-center flex-1">
                    <p className="text-[11px] uppercase text-gray-500 font-medium tracking-wider mb-1">Appointments</p>
                    <p className="text-xl font-bold text-blue-950">{offersData?.stats?.appointmentCount || 0}</p>
                  </div>
                </div>
              )}

              {/* Date & Time Fields */}
              <BookingDateTimeFields
                value={dateTimeFields}
                onChange={setDateTimeFields}
                dateError={dateTimeError && !dateTimeFields.date ? dateTimeError : undefined}
                workingHours={stylistDetail?.workingHours}
                vacations={stylistDetail?.vacations}
                stylistName={stylistDetail?.name}
              />

              {/* Time Suggestions */}
              {timeSuggestions && (
                <div className="border-t pt-4">
                  <TimeSuggestions
                    suggestions={timeSuggestions.suggestions}
                    onSelectTime={handleSelectSuggestedTime}
                    onCancel={handleCancelSuggestions}
                    stylists={stylistOptions}
                  />
                </div>
              )}

              {/* Actions */}
              <DialogFooter className="flex justify-end w-full mt-4">
                <div className="flex gap-4 mt-2">
                  <Button
                    variant="outline"
                    type="button"
                    onClick={() => setOpen(false)}
                    className="flex-1 bg-transparent border-blue-950 text-blue-950 rounded-sm px-8"
                  >
                    {t("calendar.buttons.cancel")}
                  </Button>
                  <Button
                    type="submit"
                    className="flex-1 bg-primary-gradient text-white rounded-sm px-8"
                    disabled={createBookingMutation.isPending}
                  >
                    {createBookingMutation.isPending ? t("calendar.buttons.adding") : t("calendar.buttons.addBooking")}
                  </Button>
                </div>
              </DialogFooter>
            </div>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}