'use client';

import { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { CgLock, CgShoppingCart } from 'react-icons/cg';
import { BiMessageSquare } from 'react-icons/bi';
import { BsTag } from 'react-icons/bs';
import { useTranslations } from 'next-intl';

export default function NotificationDropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const t = useTranslations();
  const toggleDropdown = () => setIsOpen((prev) => !prev);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !(dropdownRef.current as any).contains(event.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const notifications = [
    {
      icon: <CgShoppingCart className="w-5 h-5" />,
      title: "Your Item Was Marked as Sold",
      description: 'Congrats! “Marshall Wireless Over Ear Headphones” has been marked as sold. Ready to list another one?',
      time: "2 hours ago",
      bg: "bg-[#e7edfe]"
    },
    {
      icon: <BiMessageSquare />,
      title: "Something New Just Landed!",
      description: 'Fresh listings in “Electronics” are live now. Don’t miss the latest finds.',
      time: "2 hours ago"
    },
    {
      icon: <BsTag className="w-5 h-5" />,
      title: "Price Drop Just Happened!",
      description: '“Marshall Wireless Over Ear Headphones” you liked just got cheaper. Time to make your move!',
      time: "2 hours ago"
    },
    {
      icon: <BiMessageSquare className="w-5 h-5" />,
      title: "You’ve Got a Message.",
      description: 'A buyer is interested in your item. Open the app to reply quickly!',
      time: "2 hours ago"
    },
    {
      icon: <CgLock className="w-5 h-5" />,
      title: "Boost Ends Soon.",
      description: 'Your promotion for “Marshall Wireless Over Ear Headphones” ends in 24 hours. Extend to stay on top!',
      time: "2 hours ago"
    }
  ];


  return (
    <div className="relative" ref={dropdownRef}>
      <div
        onClick={toggleDropdown}
        className="overflow-hidden cursor-pointer"
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.37 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.64 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16ZM16 17H8V11C8 8.52 9.51 6.5 12 6.5C14.49 6.5 16 8.52 16 11V17Z" fill="#1E293B" className='dark:fill-white' />
        </svg>
      </div>

      {isOpen && (
        <div className="absolute left-1/2 transform -translate-x-1/2 mt-2 w-96 bg-white border border-neutrals200 shadow-Shadow1 rounded-lg z-40 overflow-hidden dark:bg-background dark:border-darkborder">
          <div className='flex items-center justify-between p-5 border-b border-neutrals200 dark:bg-darkbg dark:border-darkborder'>
            <div className='text-xl font-bold dark:text-white'>{t("notification")}</div>
            <Link href="/" className="text-sm font-medium text-primary500 underline underline-offset-2 hover:text-primary600 dark:text-primary400">
              {t("mark_all_as_read")}
            </Link>
          </div>
          <div className="bg-white p-2.5 flex flex-col gap-2.5 max-h-96 overflow-y-auto dark:bg-background">
            {notifications.map((note, index) => (
              <div key={index} className={`flex p-2.5 rounded-lg gap-2.5 cursor-pointer hover:bg-neutrals50 dark:hover:bg-darkbg ${index === 0 ? 'bg-neutrals50 dark:bg-darkbg' : ''}`}>
                <div className={`shrink-0 w-11 h-11 rounded-full flex items-center justify-center ${index === 0 ? "bg-neutrals50" : "bg-neutrals50"}`}>
                  {note.icon}
                </div>
                <div className="text-sm">
                  <div className="text-sm font-bold text-neutrals800 mb-1 dark:text-white">{note.title}</div>
                  <div className="text-neutrals500 text-sm dark:text-neutrals400">{note.description}</div>
                  <div className="text-xs text-gray-400 mt-1">{note.time}</div>
                </div>
              </div>
            ))}
          </div>

        </div>
      )}
    </div>
  );
}