"use client";

import Button from '@/components/button/PrimaryButton';
import { Button as ShadButton } from '@/components/ui/button';
import ComboBox from '@/components/combobox/Combobox';
import InputField from '@/components/input/InputField';
import { PORFILE_EDIT_PAGE_ELEMENT } from '@/enums';
import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';
import { Calendar2, Camera } from 'iconsax-react';
import Image from 'next/image';
import React, { useEffect, useMemo } from 'react'
import Calendar from '@/components/ui/calendar';
import { getDateLib } from "react-day-picker/persian";
import { useRouter } from 'next/navigation';
import { useGetProfile, useSingleUpload, useUpdateProfile } from '../hooks/userProfileData';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { UpdateProfileType } from '../types/Types';
import { toast } from '@/components/Toast';
import { extractErrorMessage } from '@/lib/func';

type Props = object

function ProfileIndex({ }: Props) {

    const { mutateAsync: singleUpload, isPending: isUploading } = useSingleUpload();
    const { data, isPending } = useGetProfile();
    const { mutate: updateProfile, isPending: isUpdating } = useUpdateProfile();
    const [showCalendar, setShowCalendar] = React.useState(false);
    const [uploadedImageUrl, setUploadedImageUrl] = React.useState<string | null>(null);
    const fileInputRef = React.useRef<HTMLInputElement>(null);
    const dateLib = getDateLib()
    const router = useRouter();

    const userData = data?.data;

    // تابع برای بررسی معتبر بودن Date
    const isValidDate = (date: Date | null | undefined): date is Date => {
        return date instanceof Date && !isNaN(date.getTime());
    };

    // تابع برای تبدیل string تاریخ به Date بدون مشکل timezone
    const parseLocalDate = (dateString: string): Date | undefined => {
        try {
            if (!dateString) return undefined;

            // اگر تاریخ به فرمت ISO یا کامل است، ابتدا به Date تبدیل می‌کنیم
            const date = new Date(dateString);
            if (isValidDate(date)) {
                // برای جلوگیری از مشکل timezone، فقط سال، ماه و روز را می‌گیریم
                const year = date.getFullYear();
                const month = date.getMonth();
                const day = date.getDate();
                return new Date(year, month, day);
            }

            // اگر فرمت ISO کار نکرد، سعی می‌کنیم فرمت YYYY-MM-DD را parse کنیم
            const parts = dateString.split('T')[0].split('-');
            if (parts.length === 3) {
                const [year, month, day] = parts.map(Number);
                if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
                    const parsedDate = new Date(year, month - 1, day);
                    if (isValidDate(parsedDate)) {
                        return parsedDate;
                    }
                }
            }

            return undefined;
        } catch {
            return undefined;
        }
    };

    // تابع برای تبدیل Date به string تاریخ
    const formatDateToString = (date: Date): string => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    };

    // تابع برای format کردن تاریخ با dateLib
    const formatDateForDisplay = (date: Date | null | undefined): string => {
        if (!date || !isValidDate(date)) {
            return "انتخاب کنید";
        }
        try {
            return dateLib.format(date, "yyyy/MM/dd");
        } catch {
            return "انتخاب کنید";
        }
    };

    type FormValues = {
        firstName: string;
        lastName: string;
        birthDate?: Date | null;
        gender?: boolean;
    };

    const validationSchema: Yup.ObjectSchema<FormValues> = Yup.object({
        firstName: Yup.string().required('نام اجباری است'),
        lastName: Yup.string().required('نام خانوادگی اجباری است'),
    }) as Yup.ObjectSchema<FormValues>;

    const formik = useFormik<FormValues>({
        initialValues: {
            firstName: '',
            lastName: '',
            birthDate: undefined,
            gender: undefined,
        },
        validationSchema,
        enableReinitialize: true,
        onSubmit: (values) => {
            const { birthDate, ...submitValues } = values;
            const payload: UpdateProfileType = {
                firstName: submitValues.firstName,
                lastName: submitValues.lastName,
                birthDate: birthDate ? formatDateToString(birthDate) : undefined,
                gender: submitValues.gender,
                avatarUrl: uploadedImageUrl || undefined,
            };

            updateProfile(payload, {
                onSuccess: () => {
                    toast('اطلاعات با موفقیت به‌روزرسانی شد', 'success');
                    router.back();
                },
                onError: (error) => {
                    toast(extractErrorMessage(error), 'error');
                },
            });
        },
    });

    useEffect(() => {
        if (userData) {
            const birthDate = userData.birthDate ? parseLocalDate(userData.birthDate) : undefined;
            const values: FormValues = {
                firstName: userData.firstName || '',
                lastName: userData.lastName || '',
                birthDate: birthDate,
                gender: userData.gender !== undefined ? userData.gender : undefined,
            };
            formik.setValues(values);
            // اگر کاربر تصویر آواتار دارد، آن را نمایش بده
            if (userData.avatarUrl) {
                setUploadedImageUrl(userData.avatarUrl);
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [userData]);

    const selectedGenderId = useMemo(() => {
        if (formik.values.gender === true) return '0';
        if (formik.values.gender === false) return '1';
        return '';
    }, [formik.values.gender]);

    const changeGender = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
        formik.setFieldValue('gender', index === 0);
    }

    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        try {
            const response = await singleUpload(file);
            if (response?.data?.url) {
                setUploadedImageUrl(response.data.url);
                toast('تصویر با موفقیت آپلود شد', 'success');
            }
        } catch (error) {
            toast(extractErrorMessage(error), 'error');
        }
    };

    const handleImageClick = () => {
        fileInputRef.current?.click();
    };

    if (isPending) {
        return (
            <div className='h-full noscrollbar overflow-y-auto flex flex-col items-center justify-center'>
                <p className='text-sm2 text-disabled-text'>در حال بارگذاری...</p>
            </div>
        );
    }

    return (
        <div className='h-full noscrollbar overflow-y-auto flex flex-col'>
            <div className='grid grid-cols-3 items-center'>
                <span></span>
                <h1 className='text-sm2 place-self-center font-medium'>ویرایش اطلاعات</h1>
            </div>

            <form onSubmit={formik.handleSubmit} className="mt-8 flex-1 bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
                <div className="bg-inherit">
                    <div className="justify-self-center w-fit relative text-center pb-10">
                        <input
                            ref={fileInputRef}
                            type="file"
                            accept="image/*"
                            onChange={handleImageUpload}
                            className="hidden"
                        />
                        <button type="button" onClick={handleImageClick} disabled={isUploading} className="relative">
                            {uploadedImageUrl && (
                                <Image
                                    src={uploadedImageUrl}
                                    className='rounded-full'
                                    alt='user avatar'
                                    width={96}
                                    height={96}
                                />
                            )}
                            <div
                                className={`w-24 h-24 ${uploadedImageUrl ? 'absolute top-0 left-0' : ''} rounded-full cursor-pointer flex items-center justify-center`}
                                style={uploadedImageUrl ? {
                                    // background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 51.56%, rgba(0, 0, 0, 0.5) 100%)'
                                } : {
                                    background: 'rgba(0, 0, 0, 0.1)',
                                    border: '2px dashed rgba(0, 0, 0, 0.3)'
                                }}>
                                {isUploading ? (
                                    <div className='text-disabled-text text-xs'>
                                        در حال آپلود...
                                    </div>
                                ) : (
                                    <Camera size={24} className={uploadedImageUrl ? 'stroke-white' : 'stroke-disabled-text'} />
                                )}
                            </div>
                        </button>
                    </div>

                    <div className="grid gap-6 mt-6 bg-inherit">
                        <InputField
                            name="firstName"
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            className='bg-inherit'
                            labelText='نام'
                            htmlFor="firstName"
                            value={formik.values.firstName}
                            valid={!(formik.touched.firstName && formik.errors.firstName)}
                            aria-errormessage={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : undefined}
                        />
                        <InputField
                            name="lastName"
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            className='bg-inherit'
                            labelText='نام خانوادگی'
                            htmlFor="lastName"
                            value={formik.values.lastName}
                            valid={!(formik.touched.lastName && formik.errors.lastName)}
                            aria-errormessage={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : undefined}
                        />
                        <Popover open={showCalendar} onOpenChange={setShowCalendar}>
                            <PopoverTrigger asChild>
                                <ShadButton
                                    type="button"
                                    variant="outline"
                                    id="date"
                                    className="w-full bg-container text-border dark:text-border justify-between font-normal relative h-11 rounded-normal hover:bg-white"
                                >
                                    <div className='text-foreground'>
                                        {formatDateForDisplay(formik.values.birthDate)}
                                    </div>
                                    <Calendar2 className='stroke-disabled2 dark:stroke-foreground' size={24} />
                                    <span className='absolute text-foreground text-xs top-0 -translate-y-2 right-2 bg-container px-2'>تاریخ تولد</span>
                                </ShadButton>
                            </PopoverTrigger>
                            <PopoverContent className="w-auto overflow-hidden p-0 z-20 box-shadow-normal rounded-lg" align="center">
                                <Calendar
                                    className='bg-white dark:bg-background z-20 min-w-64 rounded-lg'
                                    mode="single"
                                    defaultMonth={formik.values.birthDate || undefined}
                                    selected={formik.values.birthDate || undefined}
                                    captionLayout="dropdown"
                                    onSelect={(date) => {
                                        formik.setFieldValue('birthDate', date || undefined);
                                        setShowCalendar(false);
                                    }}
                                />
                            </PopoverContent>
                        </Popover>

                        <div className='relative'>
                            <ComboBox
                                searchable={false}
                                title=""
                                options={[{ id: '0', title: 'آقا', label: 'آقا' }, { id: '1', title: 'خانوم', label: 'خانوم' }]}
                                id={PORFILE_EDIT_PAGE_ELEMENT.INPUT_GENDER}
                                selectedId={selectedGenderId}
                                onSelectionChange={changeGender} />
                            <span className='absolute text-xs top-0 -translate-y-2 right-2 bg-container px-2'>جنسیت</span>
                        </div>
                    </div>
                </div>

                <div className='w-full text-center mt-16 grid grid-cols-2 gap-4'>
                    <Button type="submit" disabled={isUpdating || isUploading || !formik.isValid}>
                        {isUpdating ? 'در حال ذخیره...' : 'ذخیره'}
                    </Button>
                    <Button
                        type="button"
                        className='bg-neutral-200! dark:bg-neutral-600! text-disabled-text!'
                        onClick={() => router.back()}
                    >
                        انصراف
                    </Button>
                </div>
            </form>
        </div>
    )
}

export default ProfileIndex