'use client';

import { useEffect, useState } from 'react';

import { handleLineItemTimeout } from '@/lib/services/medusaCart.service';
import { StoreCartLineItem } from '@medusajs/types';
import { Timer } from 'lucide-react';
import { useTranslation } from 'react-i18next';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@kit/ui/alert-dialog';
import { Button } from '@kit/ui/button';

const TIMEOUT_MINUTES = 15;

export default function CartTimer({
  cartItem,
}: {
  cartItem: StoreCartLineItem;
}) {
  const { t } = useTranslation();
  const [timeLeft, setTimeLeft] = useState<number | null>(null);
  const [isDialogOpen, setDialogOpen] = useState(false);

  const updatedAt = cartItem.updated_at!;

  useEffect(() => {
    const date = new Date(updatedAt);
    date.setMinutes(date.getMinutes() + TIMEOUT_MINUTES);

    const interval = setInterval(() => {
      const now = new Date();
      const diff = date.getTime() - now.getTime();
      setTimeLeft(diff);
    }, 1000);

    return () => clearInterval(interval);
  }, [updatedAt]);

  const minutes = timeLeft
    ? Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60))
    : 0;
  const seconds = timeLeft ? Math.floor((timeLeft % (1000 * 60)) / 1000) : 0;

  const isTimeLeftPositive = timeLeft === null || timeLeft > 0;
  useEffect(() => {
    if (!isTimeLeftPositive) {
      void handleLineItemTimeout({
        lineItem: cartItem,
      });
      setDialogOpen(true);
    }
  }, [isTimeLeftPositive, cartItem.id]);

  if (timeLeft === null) {
    return <div className="min-h-[40px]" />;
  }

  return (
    <>
      <div className="ml-auto">
        <Button
          variant="outline"
          className="bg-accent hover:bg-accent flex cursor-default items-center gap-x-2 px-4"
        >
          <Timer />
          <span className="text-sm">
            {t('cart:checkout.timeLeft', {
              timeLeft: `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`,
            })}
          </span>
        </Button>
      </div>

      <AlertDialog open={isDialogOpen} onOpenChange={setDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              {t('cart:checkout.timeoutTitle')}
            </AlertDialogTitle>
            <AlertDialogDescription>
              {t('cart:checkout.timeoutDescription', {
                productTitle: cartItem.product?.title,
              })}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction onClick={() => setDialogOpen(false)}>
              {t('cart:checkout.timeoutAction')}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}