"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { STOREFRONT_WISHLIST_ADDED } from "@/lib/storefront-events";
import type { StorefrontWishlistItem } from "@/types/storefront";

const TOAST_TIMEOUT_MS = 3200;

export function WishlistToast() {
  const [item, setItem] = useState<StorefrontWishlistItem | null>(null);
  const timeoutRef = useRef<number | null>(null);

  useEffect(() => {
    function clearToastTimeout() {
      if (timeoutRef.current) {
        window.clearTimeout(timeoutRef.current);
        timeoutRef.current = null;
      }
    }

    function handleWishlistAdded(
      event: Event,
    ) {
      const detail = (event as CustomEvent<{ item?: StorefrontWishlistItem }>).detail;

      if (!detail?.item) {
        return;
      }

      clearToastTimeout();
      setItem(detail.item);
      timeoutRef.current = window.setTimeout(() => {
        setItem(null);
        timeoutRef.current = null;
      }, TOAST_TIMEOUT_MS);
    }

    window.addEventListener(STOREFRONT_WISHLIST_ADDED, handleWishlistAdded);

    return () => {
      clearToastTimeout();
      window.removeEventListener(STOREFRONT_WISHLIST_ADDED, handleWishlistAdded);
    };
  }, []);

  if (!item) {
    return null;
  }

  return (
    <div className="pointer-events-none fixed bottom-6 left-6 z-[90]">
      <div className="pointer-events-auto flex h-14 w-[356px] items-center gap-5 bg-[#E7F9D9] px-5">
        <div className="relative size-4 shrink-0">
          <Image
            src="/figma/detonex/wishlist-toast-success.svg"
            alt=""
            width={16}
            height={16}
            className="size-4"
          />
        </div>

        <p className="min-w-0 flex-1 text-[14px] font-normal tracking-[-0.02em] text-primary">
          <span className="leading-[1.5]">Proizvod je dodan na listu </span>
          <Link
            href="/wishlist"
            className="pointer-events-auto font-semibold underline decoration-solid underline-offset-[1px] [text-decoration-skip-ink:none]"
            onClick={() => {
              if (timeoutRef.current) {
                window.clearTimeout(timeoutRef.current);
                timeoutRef.current = null;
              }
              setItem(null);
            }}
          >
            Moji favoriti
          </Link>
          <span className="leading-[1.5]">.</span>
        </p>

        <button
          type="button"
          aria-label="Zatvori obavijest"
          className="inline-flex size-[14px] shrink-0 items-center justify-center text-primary transition-opacity hover:opacity-70"
          onClick={() => {
            if (timeoutRef.current) {
              window.clearTimeout(timeoutRef.current);
              timeoutRef.current = null;
            }
            setItem(null);
          }}
        >
          <Image
            src="/figma/detonex/wishlist-toast-close.svg"
            alt=""
            width={14}
            height={14}
            className="size-[14px]"
          />
        </button>
      </div>
    </div>
  );
}