'use client';

import { ef } from '@/lib/helpers/utfNumbers';
import { ArrowLeft, Trash } from 'iconsax-react';
import { useRouter } from 'next/navigation';
import React from 'react'
import { useTranslation } from 'react-i18next';
import { useGetNotifications, useDeleteNotification } from './hooks/useNotificationData';
import type { Notification } from './types/Types';

type Props = object

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

const formatTime = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleTimeString('fa-IR', {
        hour: '2-digit',
        minute: '2-digit'
    });
};

export default function NotificationsIndex({ }: Props) {
    const { t } = useTranslation('notifications')
    const router = useRouter();
    const { data, isLoading, isError } = useGetNotifications();
    const { mutate: deleteNotification } = useDeleteNotification();

    const notifications = React.useMemo(() => {
        return data?.data ?? [];
    }, [data?.data]);

    const handleDelete = (id: string) => {
        deleteNotification(id);
    };

    if (isLoading) {
        return (
            <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
                <div className='grid grid-cols-3 items-center py-4 '>
                    <span></span>
                    <h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
                    <ArrowLeft
                        className='cursor-pointer place-self-end'
                        size='24'
                        color='currentColor'
                        onClick={() => { router.back() }}
                    />
                </div>
                <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
                    <span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
                    <p>در حال دریافت اعلان‌ها...</p>
                </div>
            </div>
        );
    }

    if (isError || !notifications.length) {
        return (
            <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
                <div className='grid grid-cols-3 items-center py-4 '>
                    <span></span>
                    <h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
                    <ArrowLeft
                        className='cursor-pointer place-self-end'
                        size='24'
                        color='currentColor'
                        onClick={() => { router.back() }}
                    />
                </div>
                <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
                    <p>اعلانی وجود ندارد</p>
                </div>
            </div>
        );
    }

    return (
        <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
            <div className='grid grid-cols-3 items-center py-4 '>
                <span></span>
                <h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
                <ArrowLeft
                    className='cursor-pointer place-self-end'
                    size='24'
                    color='currentColor'
                    onClick={() => { router.back() }}
                />
            </div>

            <ul className='flex flex-col gap-4 pb-20'>
                {notifications.map((notification: Notification) => {
                    const isNew = !notification.sentAt;
                    const formattedDate = formatDate(notification.createdAt);
                    const formattedTime = formatTime(notification.createdAt);

                    return (
                        <li key={notification.id} className='bg-container py-5 px-4 rounded-container shadow-lg'>
                            <h5 className='font-medium text-sm'>{notification.title}</h5>
                            <p className='text-xs mt-2 leading-5'>{notification.content}</p>

                            <div className='flex items-center justify-between mt-5 '>
                                <div className="flex items-center justify-start gap-2">
                                    {isNew && (
                                        <span className='px-4 pt-1 pb-0.5 text-xs bg-primary text-white rounded-md'>
                                            {t('Tags.New')}
                                        </span>
                                    )}
                                    <span className='text-disabled2 text-xs pt-0.5'>
                                        {ef(formattedDate)}
                                    </span>
                                    <span className='size-1.5 bg-disabled rounded-full'></span>
                                    <span className='text-disabled2 text-xs pt-0.5'>
                                        {ef(formattedTime)}
                                    </span>
                                </div>
                                <Trash
                                    size={24}
                                    className='stroke-primary dark:stroke-foreground cursor-pointer'
                                    onClick={() => handleDelete(notification.id)}
                                />
                            </div>
                        </li>
                    );
                })}
            </ul>
        </div>
    )
}