"use client";

import Button from '@/components/button/PrimaryButton';
// import { useProfile } from '@/hooks/auth/useProfile';
// import { useAuthStore } from '@/zustand/authStore';
import { ArrowLeft, Calendar2, CallCalling, Profile } from 'iconsax-react';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React from 'react'
import { useGetProfile } from './hooks/userProfileData';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';

type Props = object

function ProfileIndex({ }: Props) {

    const router = useRouter();
    const { data, isPending } = useGetProfile();

    const formatDate = (dateString: string): string => {
        const date = new Date(dateString);
        return date.toLocaleDateString('fa-IR', {
            year: 'numeric',
            month: 'numeric',
            day: 'numeric'
        });
    };

    const userData = data?.data;
    const fullName = userData ? `${userData.firstName} ${userData.lastName}` : '';
    const genderText = userData?.gender ? 'آقا' : 'خانوم';

    return (
        <div className='overflow-y-auto h-full noscrollbar flex flex-col'>
            <div className='grid grid-cols-3 items-center'>
                <span></span>
                <h1 className='text-sm2 place-self-center font-medium'>پروفایل کاربری</h1>
                <ArrowLeft
                    className='cursor-pointer place-self-end'
                    size='24'
                    color='currentColor'
                    onClick={() => { router.back() }}
                />
            </div>

            <div className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>

                <div className="">
                    <div className="flex items-center justify-start gap-3 pb-6 border-b-[1.5px] border-border">
                        <Image
                            src={userData?.avatarUrl ? userData.avatarUrl : '/assets/images/avatar.svg'}
                            className='rounded-full'
                            alt='user avatar'
                            width={65}
                            height={65}
                        />
                        <div className='block'>
                            <div className='font-medium text-base '>
                                {isPending ? 'در حال بارگذاری...' : fullName || '-'}
                            </div>
                            {/* <div className='text-xs text-primary dark:text-neutral-200 mt-3 inline-flex items-center gap-2'>
                                <Verify size={16} className='stroke-primary dark:stroke-foreground mb-0.5' />
                                <span>
                                    شناسه کاربری:
                                </span>
                                <span>{isPending ? '...' : userData?.id || '-'}</span>
                            </div> */}
                        </div>
                    </div>

                    <div className="grid gap-6 mt-6">
                        <div className='inline-flex items-center gap-2.5'>
                            <CallCalling size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
                            <span className='text-sm2 text-disabled2 dark:text-gray-300'>شماره همراه:</span>
                            <span className='text-sm2'>{isPending ? '...' : userData?.phone || '-'}</span>
                        </div>
                        <div className='inline-flex items-center gap-2.5'>
                            <Calendar2 size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
                            <span className='text-sm2 text-disabled2 dark:text-gray-300'>تاریخ تولد:</span>
                            <span className='text-sm2'>
                                {isPending ? '...' : (userData?.birthDate ? formatDate(userData.birthDate) : '-')}
                            </span>
                        </div>
                        <div className='inline-flex items-center gap-2.5'>
                            <Profile size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
                            <span className='text-sm2 text-disabled2 dark:text-gray-300'>جنسیت:</span>
                            <span className='text-sm2'>{isPending ? '...' : genderText}</span>
                        </div>
                    </div>
                </div>

                <div className='w-full text-center mt-6'>
                    <Link href={'profile/edit'}>
                        <Button>ویرایش اطلاعات</Button>
                    </Link>
                </div>
            </div>
        </div>
    )
}

export default ProfileIndex