"use client"
import React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
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 { useCreateClient } from "@/lib/react-query/hooks/clients"
import { ClientStatus } from "@/types/clients"
import type { CreateClientPayload } from "@/types/clients"
import { useTranslations } from "next-intl"

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 AddCustomerModalProps {
  open: boolean
  setOpen: (open: boolean) => void
}

export default function AddCustomerModal({ open, setOpen }: AddCustomerModalProps) {
  const createClientMutation = useCreateClient()
  const t = useTranslations()

  const customerSchema = z.object({
    name: z.string().min(2, t("customers.validation.clientNameRequired")),
    email: z.string().email(t("customers.validation.invalidEmail")).optional().or(z.literal("")),
    phone: z.string().optional()
  })

  type CustomerFormData = z.infer<typeof customerSchema>

  const form = useForm<CustomerFormData>({
    resolver: zodResolver(customerSchema),
    defaultValues: {
      name: "",
      email: "",
      phone: ""
    }
  })

  function onSubmit(data: CustomerFormData) {
    const payload: CreateClientPayload = {
      ...data,
      status: ClientStatus.NEW
    }
    createClientMutation.mutate(payload, {
      onSuccess: () => {
        setOpen(false)
        form.reset()
      }
    })
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="sm:max-w-[600px] bg-white border-0 overflow-visible [&>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("customers.modals.addClient")}</DialogTitle>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="px-1">
            <div className="space-y-4">
              {/* First row: Client Name (100%) */}
              <div className="group">
                <FormField
                  name="name"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <FormItem>
                      <FormLabel className="group-focus-within:text-primary-blue">{t("customers.form.clientName")} <span className="text-red-500">*</span></FormLabel>
                      <FormControl>
                        <Input
                          className={fieldState.invalid ? errorInputClass : normalInputClass + " group w-full"}
                          placeholder={t("customers.form.placeholders.clientName")}
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              {/* Second row: Email & Phone (50/50) */}
              <div className="grid grid-cols-2 gap-4">
                <div className="group">
                  <FormField
                    name="email"
                    control={form.control}
                    render={({ field, fieldState }) => (
                      <FormItem>
                        <FormLabel className="group-focus-within:text-primary-blue">{t("customers.form.email")}</FormLabel>
                        <FormControl>
                          <Input
                            type="email"
                            className={fieldState.invalid ? errorInputClass : normalInputClass + " group w-full"}
                            placeholder={t("customers.form.placeholders.email")}
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <div className="group">
                  <FormField
                    name="phone"
                    control={form.control}
                    render={({ field, fieldState }) => (
                      <FormItem>
                        <FormLabel className="group-focus-within:text-primary-blue">{t("customers.form.phone")}</FormLabel>
                        <FormControl>
                          <PhoneInput
                            country={'fr'}
                            value={field.value}
                            onChange={(phone) => field.onChange(phone ? `+${phone}` : '')}
                            containerClass="!w-full"
                            inputClass={`${fieldState.invalid ? errorInputClass : normalInputClass} !w-full !pl-12 !h-12`}
                            buttonClass={`!bg-transparent !border-r-0 ${fieldState.invalid ? "!border-red-500" : "!border-gray-300"} !rounded-l-[var(--radius)] !h-12`}
                            dropdownClass="!bg-white !shadow-lg !rounded-md"
                            preferredCountries={['fr']}
                            placeholder={t("customers.form.placeholders.phone")}
                            disableDropdown={false}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </div>

              {/* Actions: 50% container, 50/50 buttons on right */}
              <DialogFooter className="flex justify-end w-full">
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    type="button"
                    onClick={() => setOpen(false)}
                    className="flex-1 bg-transparent border-blue-950 text-blue-950 px-8"
                  >
                    {t("customers.form.buttons.cancel")}
                  </Button>
                  <Button type="submit" disabled={createClientMutation.isPending} className="flex-1 bg-primary-gradient text-white px-8">
                    {createClientMutation.isPending ? t("customers.form.buttons.adding") : t("customers.form.buttons.addClient")}
                  </Button>
                </div>
              </DialogFooter>
            </div>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}