"use client";
import { useState, useMemo, useEffect } from "react";
import { useRouter } from "next/navigation";
import axios from "axios";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { FiEdit2, FiPlus, FiMapPin, FiHome, FiNavigation} from "react-icons/fi";

import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import ToastMessage from "@/components/common/ToastMessage";

const addressFormSchema = z.object({
  name: z.string().min(4, {
    message: "Your name must be at least 4 characters",
  }),
  address_line: z.string().min(5, {
    message: "Street address must be at least 5 characters",
  }),
  city: z.string().min(2, {
    message: "City must be at least 2 characters",
  }),
  district: z.string().min(2, {
    message: "District must be at least 2 characters",
  }),
  post_code: z.string().min(4, {
    message: "Postal code must be at least 4 characters",
  }),
  division: z.string().min(2, {
    message: "Please select a division",
  }),
  phone: z.string().min(11, {
    message: "Phone number must be at least 11 digits",
  }),
  shipping_zone: z.string(),
  is_default: z.boolean().default(false),
});

type AddressFormValues = z.infer<typeof addressFormSchema>;

interface Address {
  uuid: string;
  name: string;
  address_line: string;
  city: string;
  district: string;
  post_code: string;
  division: string;
  phone: string;
  shipping_zone: string
  is_default: boolean;
}

interface AddressDialogProps {
  children?: React.ReactNode;
  address?: Address;
}

export function AddressDialog({ children, address }: AddressDialogProps) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [shippingZones, setShippingZones] = useState<DeliveryCostType[]>([])


  const fetchShippingZones = async () => {
    const response = await axios.get("/api/admin/deliveryCost");
    if (response.status === 200) {
      console.log(response.data.deliveryCosts);
      setShippingZones(response.data.deliveryCosts);
    } else {
      ToastMessage("error", "Failed to fetch shipping zones");
    }
  }

  useEffect(()=>{
    fetchShippingZones()
  },[])


  const defaultValues = useMemo<Partial<AddressFormValues>>(() => ({
      name: address?.name || "",
      address_line: address?.address_line || "",
      city: address?.city || "",
      district: address?.district || "",
      post_code: address?.post_code || "",
      division: address?.division || "",
      phone: address?.phone || "",
      is_default: address?.is_default || false,
      shipping_zone: address?.shipping_zone || "",
    }),
    [address]
  );

  const form = useForm<AddressFormValues>({
    resolver: zodResolver(addressFormSchema),
    defaultValues,
  });

  useEffect(() => {
    if (open) {
      form.reset(defaultValues);
    }
  }, [open, form, defaultValues]);

  async function onSubmit(data: AddressFormValues) {
    setIsSubmitting(true);
    try {
      const response = address? await axios.put(`/api/user/address/${address.uuid}`, data) : await axios.post("/api/user/address", data);

      if (response.status === 200) {
        ToastMessage(
          "success",
          address ? "Address updated!" : "Address added!"
        );
        window.location.reload()
      }
    } catch (error) {
      ToastMessage("error", "Something went wrong. Please try again.");
    } finally {
      setIsSubmitting(false);
      setOpen(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {children || (
          <Button variant="outline" size="sm">
            {address ? (
              <>
                <FiEdit2 className="mr-2 h-4 w-4" />
                Edit
              </>
            ) : (
              <>
                <FiPlus className="mr-2 h-4 w-4" />
                Add Address
              </>
            )}
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px] bg-white">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            {address ? (
              <>
                <FiEdit2 className="h-5 w-5" />
                Edit Address
              </>
            ) : (
              <>
                <FiPlus className="h-5 w-5" />
                Add New Address
              </>
            )}
          </DialogTitle>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Full Name</FormLabel>
                  <FormControl>
                    <Input placeholder="John Doe" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="address_line"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="flex items-center gap-1">
                    <FiMapPin className="h-4 w-4" />
                    Street Address
                  </FormLabel>
                  <FormControl>
                    <Input placeholder="123 Main St" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="grid grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="city"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>City</FormLabel>
                    <FormControl>
                      <Input placeholder="Chittagong" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="district"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>District</FormLabel>
                    <FormControl>
                      <Input placeholder="Chandgaon" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="post_code"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Postal Code</FormLabel>
                    <FormControl>
                      <Input placeholder="4000" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="division"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Division</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Select division" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent className="bg-white">
                        {[
                          "Barisal",
                          "Chittagong",
                          "Dhaka",
                          "Khulna",
                          "Mymensingh",
                          "Rajshahi",
                          "Rangpur",
                          "Sylhet",
                        ].map((division) => (
                          <SelectItem key={division} value={division}>
                            {division}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <FormField
              control={form.control}
              name="phone"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Phone Number</FormLabel>
                  <FormControl>
                    <Input placeholder="017XXXXXXXX" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="shipping_zone"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="flex items-center gap-1">
                    <FiNavigation className="h-4 w-4" />
                    Shipping Zone - {field.value}
                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={field.value}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select zone" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent className="bg-white">
                      {shippingZones && shippingZones.map((zone) => (
                        <SelectItem key={zone.shipping_zone} value={zone.id.toString()}>
                          {zone.shipping_zone}
                        </SelectItem>
                      ))}

                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="is_default"
              render={({ field }) => (
                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                  <FormControl>
                    <Checkbox
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  </FormControl>
                  <div className="space-y-1 leading-none">
                    <FormLabel className="flex items-center gap-1">
                      <FiHome className="h-4 w-4" />
                      Default Address
                    </FormLabel>
                    <FormDescription>
                      Use this as your primary shipping address
                    </FormDescription>
                  </div>
                </FormItem>
              )}
            />

            <DialogFooter>
              <Button type="submit" disabled={isSubmitting} className="text-white bg-primary hover:bg-secondary">
                {isSubmitting
                  ? "Processing..."
                  : address
                  ? "Save Changes"
                  : "Add Address"}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}