//@unocss-include
import { FC } from 'react';
import { useNavigate } from 'react-router';
import { Group, Stack } from '../components';
import { notifications } from '../demoData/notification';
import { usePreferenceStore } from '../store';
import { Notification } from '../types/notification';
import { twx } from '../utils';

type NotificationCardProps = Notification & {
  onClose?: () => void;
};

export const NotificationCard: FC<NotificationCardProps> = ({
  type,
  title,
  message,
  actionText,
  onClose,
}) => {
  const navigate = useNavigate();
  return (
    <Stack
      className={twx(
        'p-4 mb-2 rounded-lg border relative',
        type === 'Rejected'
          ? 'bg-red-1 dark:bg-red-950/30 border-red-2 dark:border-red-900'
          : 'bg-green-1 dark:bg-green-950/30 border-green-2 dark:border-green-900',
      )}
    >
      <Group className="items-start justify-between">
        <Group className="gap-2">
          {type === 'Rejected' ? (
            <div className="i-mdi-close-circle text-xl text-red-5" />
          ) : (
            <div className="i-mdi-check-circle text-xl text-green-5" />
          )}
          <p className="font-medium">{title}</p>
        </Group>
        {onClose && (
          <button
            className="i-mdi-close text-black/60 dark:text-white/60 hover:text-black dark:hover:text-white"
            onClick={onClose}
          />
        )}
      </Group>
      <p className="mt-1 text-sm text-black/70 dark:text-white/70">{message}</p>
      <Group className="mt-2 justify-end">
        <button
          className="rounded px-3 py-1 text-sm hover:bg-black/5 dark:hover:bg-white/5"
          onClick={() => {
            if (type === 'Approved') {
              navigate('/SPV-assign');
            } else {
              window.open('/editor', '_blank');
            }
          }}
        >
          {actionText}
        </button>
      </Group>
    </Stack>
  );
};

export const NotificationCenter: FC = () => {
  const notifCenterCollapsed = usePreferenceStore.use.notifCenterCollapsed();

  return (
    <Stack
      className={twx(
        'absolute right-0 top-14 z-40 h-[calc(100vh-3.8rem)] transition-transform bg-white w-120 shadow-lg text-black/90 dark:text-white/90 dark:bg-zinc-800 border dark:border-zinc-700',
        notifCenterCollapsed && 'translate-x-full',
      )}
    >
      <Stack className="p-4">
        <Group className="mb-4 items-center justify-between">
          <p className="font-medium">Notification Center</p>
        </Group>
        <Stack className="gap-2">
          {notifications.map((notification, index) => (
            <NotificationCard key={index} {...notification} />
          ))}
        </Stack>
      </Stack>
    </Stack>
  );
};
