import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAuth } from "@/context/helpers/auth/AuthContext";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Eye, EyeOff, Loader2 } from "lucide-react";
import AccountDetailsSkeleton from "./components/AccountDetailsSkeleton";
import { cn } from "@/lib/utils";

// Account Details view for editing user profile information
const AccountDetails = () => {
  const { t, i18n } = useTranslation();
  const isArabic = i18n.language === "ar";
  const {
    getUserData,
    updateProfile,
    userData,
    setUserData,
    isLoading,
    changePassword,
    setChangePassword,
    changeEmail,
    setChangeEmail,
  } = useAuth();

  const [showOldPassword, setShowOldPassword] = useState(false);
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

  // Define validation schema
  const formSchema = z
    .object({
      firstName: z
        .string()
        .min(
          1,
          t("account:validation.firstNameRequired", "First name is required")
        ),
      lastName: z
        .string()
        .min(
          1,
          t("account:validation.lastNameRequired", "Last name is required")
        ),
      mobile: z
        .string()
        .min(1, t("account:validation.mobileRequired", "Mobile is required")),
      email: z
        .string()
        .min(1, t("account:validation.emailRequired", "Email is required"))
        .regex(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, {
          message: t(
            "account:validation.invalidEmail",
            "Invalid email address"
          ),
        }),
      gender: z.string().optional(),
      DOBValue: z.string().optional(),
      oldPassword: z.string().optional(),
      newPassword: z.string().optional(),
      confirmPassword: z.string().optional(),
    })
    .refine(
      (data) => {
        if (changePassword) {
          return data.oldPassword && data.oldPassword.length > 0;
        }
        return true;
      },
      {
        message: t(
          "account:validation.currentPasswordRequired",
          "Current password is required"
        ),
        path: ["oldPassword"],
      }
    )
    .refine(
      (data) => {
        if (changePassword) {
          return data.newPassword && data.newPassword.length >= 6;
        }
        return true;
      },
      {
        message: t(
          "account:validation.newPasswordMinLength",
          "New password must be at least 6 characters"
        ),
        path: ["newPassword"],
      }
    )
    .refine(
      (data) => {
        if (changePassword) {
          return data.newPassword === data.confirmPassword;
        }
        return true;
      },
      {
        message: t(
          "account:validation.passwordsMustMatch",
          "Passwords must match"
        ),
        path: ["confirmPassword"],
      }
    );

  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      firstName: "",
      lastName: "",
      mobile: "",
      email: "",
      gender: "",
      DOBValue: "",
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    },
  });

  useEffect(() => {
    const fetchData = async () => {
      await getUserData();
    };
    fetchData();
  }, []);

  // Update form values when userData changes
  useEffect(() => {
    if (userData) {
      form.setValue("firstName", userData.firstName || "");
      form.setValue("lastName", userData.lastName || "");
      form.setValue("mobile", userData.mobile || "");
      form.setValue("email", userData.email || "");

      // Normalize gender from API (could be "Male"/"Female" or need to use genderValue)
      const genderFromAPI = userData.gender?.toLowerCase() || "";
      form.setValue("gender", genderFromAPI);

      // Normalize DOBValue - if it's in d/m/Y format, convert to YYYY-MM-DD for input[type="date"]
      let dobForInput = "";
      if (userData.DOBValue && userData.DOBValue !== "30/11/-0001") {
        // Try to parse the date format from API (d/m/Y)
        const parts = userData.DOBValue.split("/");
        if (parts.length === 3 && parts[2] !== "-0001") {
          const day = parts[0].padStart(2, "0");
          const month = parts[1].padStart(2, "0");
          const year = parts[2];
          dobForInput = `${year}-${month}-${day}`;
        }
      }
      form.setValue("DOBValue", dobForInput);
    }
  }, [userData, form]);

  const onSubmit = async (data) => {
    setIsSaving(true);

    // Convert date from YYYY-MM-DD to d/m/Y format for API
    let dobForAPI = "";
    if (data.DOBValue) {
      const parts = data.DOBValue.split("-");
      if (parts.length === 3) {
        dobForAPI = `${parseInt(parts[2])}/${parseInt(parts[1])}/${parts[0]}`;
      }
    }

    // Update userData with form values
    setUserData({
      ...userData,
      firstName: data.firstName,
      lastName: data.lastName,
      mobile: data.mobile,
      email: data.email,
      gender: data.gender,
      DOBValue: dobForAPI || data.DOBValue,
      oldPassword: data.oldPassword,
      newPassword: data.newPassword,
      confirmPassword: data.confirmPassword,
    });

    // Wait a bit for state to update
    await new Promise((resolve) => setTimeout(resolve, 100));

    await updateProfile();
    setIsSaving(false);

    // Clear password fields after successful update
    if (changePassword) {
      form.setValue("oldPassword", "");
      form.setValue("newPassword", "");
      form.setValue("confirmPassword", "");
    }
  };

  // Loading state
  if (isLoading && !userData) {
    return <AccountDetailsSkeleton />;
  }

  return (
    <section className="flex-1 min-h-[600px]">
      <header className="mb-6">
        <h2 className="text-2xl font-semibold text-thirdColor">
          {t("account:cards.accountDetails")}
        </h2>
      </header>

      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-6 max-w-2xl"
        >
          {/* Personal Information */}
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h3 className="text-lg font-semibold mb-4">
              {t("account:labels.personalInformation")}
            </h3>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="firstName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("account:labels.firstName")} *</FormLabel>
                    <FormControl>
                      <Input type="text" className="text-start" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="lastName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("account:labels.lastName")} *</FormLabel>
                    <FormControl>
                      <Input type="text" className="text-start" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="mt-4">
              <FormField
                control={form.control}
                name="mobile"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("account:labels.mobile")} *</FormLabel>
                    <FormControl>
                      <Input
                        type="tel"
                        className={isArabic ? "text-end" : "text-start"}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="gender"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("account:labels.gender")}</FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger
                          className={cn(
                            isArabic
                              ? "flex-row-reverse text-right"
                              : "text-left"
                          )}
                        >
                          <SelectValue
                            placeholder={t("account:labels.selectGender")}
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent
                        className={cn(isArabic ? "text-right" : "text-left")}
                      >
                        <SelectItem
                          value="male"
                          className={cn(
                            isArabic ? "pr-2 pl-8 justify-end text-right" : ""
                          )}
                        >
                          {t("account:labels.male")}
                        </SelectItem>
                        <SelectItem
                          value="female"
                          className={cn(
                            isArabic ? "pr-2 pl-8 justify-end text-right" : ""
                          )}
                        >
                          {t("account:labels.female")}
                        </SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="DOBValue"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("account:labels.dateOfBirth")}</FormLabel>
                    <FormControl>
                      <Input
                        type="date"
                        className={isArabic ? "flex-row-reverse" : "text-start"}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </div>

          {/* Email Change */}
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">
                {t("account:labels.emailAddress")}
              </h3>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="changeEmail"
                  checked={changeEmail}
                  onCheckedChange={setChangeEmail}
                />
                <label htmlFor="changeEmail" className="text-sm cursor-pointer">
                  {t("account:labels.changeEmail")}
                </label>
              </div>
            </div>

            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t("account:labels.email")} *</FormLabel>
                  <FormControl>
                    <Input
                      type="email"
                      disabled={!changeEmail}
                      className="text-start"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>

          {/* Password Change */}
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">
                {t("account:labels.passwordChange")}
              </h3>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="changePassword"
                  checked={changePassword}
                  onCheckedChange={setChangePassword}
                />
                <label
                  htmlFor="changePassword"
                  className="text-sm cursor-pointer"
                >
                  {t("account:labels.changePassword")}
                </label>
              </div>
            </div>

            {changePassword && (
              <div className="space-y-4">
                <FormField
                  control={form.control}
                  name="oldPassword"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>
                        {t("account:labels.currentPassword")} *
                      </FormLabel>
                      <FormControl>
                        <div className="relative">
                          <Input
                            type={showOldPassword ? "text" : "password"}
                            className="pr-10 text-start"
                            {...field}
                          />
                          <button
                            type="button"
                            onClick={() => setShowOldPassword(!showOldPassword)}
                            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                          >
                            {showOldPassword ? (
                              <EyeOff className="h-5 w-5" />
                            ) : (
                              <Eye className="h-5 w-5" />
                            )}
                          </button>
                        </div>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="newPassword"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("account:labels.newPassword")} *</FormLabel>
                      <FormControl>
                        <div className="relative">
                          <Input
                            type={showNewPassword ? "text" : "password"}
                            className="pr-10 text-start"
                            {...field}
                          />
                          <button
                            type="button"
                            onClick={() => setShowNewPassword(!showNewPassword)}
                            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                          >
                            {showNewPassword ? (
                              <EyeOff className="h-5 w-5" />
                            ) : (
                              <Eye className="h-5 w-5" />
                            )}
                          </button>
                        </div>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="confirmPassword"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>
                        {t("account:labels.confirmPassword")} *
                      </FormLabel>
                      <FormControl>
                        <div className="relative">
                          <Input
                            type={showConfirmPassword ? "text" : "password"}
                            className="pr-10 text-start"
                            {...field}
                          />
                          <button
                            type="button"
                            onClick={() =>
                              setShowConfirmPassword(!showConfirmPassword)
                            }
                            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                          >
                            {showConfirmPassword ? (
                              <EyeOff className="h-5 w-5" />
                            ) : (
                              <Eye className="h-5 w-5" />
                            )}
                          </button>
                        </div>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            )}
          </div>

          {/* Submit Button */}
          <div className="flex justify-end">
            <Button
              type="submit"
              disabled={isSaving}
              className="px-8 py-2 cursor-pointer"
            >
              {isSaving ? (
                <>
                  <Loader2 className="mx-2 h-4 w-4 animate-spin" />
                  {t("account:buttons.saving", "Saving...")}
                </>
              ) : (
                t("account:buttons.saveChanges", "Save changes")
              )}
            </Button>
          </div>
        </form>
      </Form>
    </section>
  );
};

export default AccountDetails;