/**
 * @component DealOfDay
 * @purpose Section matching Screenshot 5 with 2 Medium Sound/Tech Banners, Hot Deals sidebar countdown timer, and Monthly Featured Item grid.
 * @dependencies catalogService, cartStore, lucide-react
 */
'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { ChevronLeft, ChevronRight, Star } from 'lucide-react';
import { useCartStore } from '@/store/cartStore';
import { formatCurrency } from '@/lib/utils';

export function DealOfDay() {
  const addToCart = useCartStore((state) => state.addToCart);
  const [timeLeft, setTimeLeft] = useState({ days: 229, hours: 15, minutes: 2, seconds: 49 });

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev.seconds > 0) return { ...prev, seconds: prev.seconds - 1 };
        if (prev.minutes > 0) return { ...prev, minutes: 59, seconds: 59 };
        if (prev.hours > 0) return { ...prev, hours: prev.hours - 1, minutes: 59, seconds: 59 };
        return { days: Math.max(0, prev.days - 1), hours: 23, minutes: 59, seconds: 59 };
      });
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const featuredItems = [
    {
      id: 'm1',
      name: 'Jajot J2 - Feature Phone, Single Sim Keypad Phone',
      price: 1500,
      oldPrice: 2000,
      image: '',
    },
    {
      id: 'm2',
      name: 'Phonokart USB Type C OTG Cable',
      price: 450,
      oldPrice: 500,
      image: '',
    },
    {
      id: 'm3',
      name: 'Logitech M350 WHITE Optical Mouse',
      price: 299,
      oldPrice: 350,
      image: '',
    },
  ];

  return (
    <section className="w-full max-w-7xl mx-auto px-4 py-8">
      {/* 2 Medium Banners (Matching Screenshot 5) */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
        {/* Banner 1: Precision Sound */}
        <div className="bg-[#e8f5e9] rounded-2xl p-8 relative overflow-hidden h-52 flex flex-col justify-between border border-emerald-100">
          <div className="max-w-[55%]">
            <h3 className="text-xl font-black text-gray-900 leading-snug">
              Precision Sound with Amazing Quality
            </h3>
            <p className="text-xs text-gray-600 mt-1 font-medium">USB 3 Rechargeable</p>
            <Link
              href="/products"
              className="inline-block mt-4 text-xs font-bold text-gray-900 border-b-2 border-gray-900 pb-0.5 hover:text-[#1877f2] hover:border-[#1877f2] transition-colors"
            >
              Shop Now
            </Link>
          </div>
          <div className="absolute right-0 bottom-0 top-0 w-1/2">
            <Image
              src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&auto=format&fit=crop&q=60"
              alt="Precision Sound Smartphone"
              fill
              className="object-contain object-right"
            />
          </div>
        </div>

        {/* Banner 2: Nonstop Sound */}
        <div className="bg-[#f5f5f5] rounded-2xl p-8 relative overflow-hidden h-52 flex flex-col justify-between border border-gray-200">
          <div className="max-w-[55%]">
            <h3 className="text-xl font-black text-gray-900 leading-snug">
              Nonstop Sound With Amazing Quality
            </h3>
            <p className="text-xs text-gray-600 mt-1 font-medium">Portable Power In Style</p>
            <Link
              href="/products"
              className="inline-block mt-4 text-xs font-bold text-gray-900 border-b-2 border-gray-900 pb-0.5 hover:text-[#1877f2] hover:border-[#1877f2] transition-colors"
            >
              Shop Now
            </Link>
          </div>
          <div className="absolute right-0 bottom-0 top-0 w-1/2">
            <Image
              src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=500&auto=format&fit=crop&q=60"
              alt="Nonstop Sound Earbuds"
              fill
              className="object-contain object-right"
            />
          </div>
        </div>
      </div>

      {/* Hot Deals & Monthly Featured Item Section */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Hot Deals Countdown Box (1/4 col) */}
        <div className="border-2 border-[#1877f2] rounded-2xl p-5 bg-white shadow-xs flex flex-col justify-between relative">
          <div className="flex items-center justify-between border-b border-gray-100 pb-3">
            <h3 className="text-sm font-bold text-gray-900">Hot Deals</h3>
            <div className="flex gap-1 text-gray-400">
              <ChevronLeft className="w-4 h-4 cursor-pointer hover:text-gray-700" />
              <ChevronRight className="w-4 h-4 cursor-pointer hover:text-gray-700" />
            </div>
          </div>

          <div className="relative w-full h-44 my-4">
            <span className="absolute top-0 right-0 bg-[#1877f2] text-white text-[10px] font-extrabold px-2 py-0.5 rounded">
              -25%
            </span>
            <Image
              src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=500&auto=format&fit=crop&q=60"
              alt="Hot Deal Phone"
              fill
              className="object-contain"
            />
          </div>

          {/* Countdown Timer Row */}
          <div className="grid grid-cols-4 gap-1 text-center py-2 border-t border-gray-100">
            <div>
              <span className="text-xs font-black text-[#e4382f]">{timeLeft.days}</span>
              <span className="block text-[9px] text-gray-400 font-bold uppercase">DAYS</span>
            </div>
            <div>
              <span className="text-xs font-black text-[#e4382f]">{String(timeLeft.hours).padStart(2, '0')}</span>
              <span className="block text-[9px] text-gray-400 font-bold uppercase">HRS</span>
            </div>
            <div>
              <span className="text-xs font-black text-[#e4382f]">{String(timeLeft.minutes).padStart(2, '0')}</span>
              <span className="block text-[9px] text-gray-400 font-bold uppercase">MIN</span>
            </div>
            <div>
              <span className="text-xs font-black text-[#e4382f]">{String(timeLeft.seconds).padStart(2, '0')}</span>
              <span className="block text-[9px] text-gray-400 font-bold uppercase">SEC</span>
            </div>
          </div>
        </div>

        {/* Monthly Featured Item (3/4 col) */}
        <div className="lg:col-span-3">
          <div className="flex items-center justify-between border-b border-gray-200 pb-3 mb-4">
            <h3 className="text-sm font-bold text-gray-900">Monthly Featured Item</h3>
            <div className="flex gap-1 text-gray-400">
              <ChevronLeft className="w-4 h-4 cursor-pointer hover:text-gray-700" />
              <ChevronRight className="w-4 h-4 cursor-pointer hover:text-gray-700" />
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {featuredItems.map((item) => (
              <div key={item.id} className="bg-white border border-gray-200 rounded-xl p-4 flex flex-col justify-between hover:shadow-md transition-shadow">
                <div className="relative w-full h-32 mb-3">
                  <Image src={item.image} alt={item.name} fill className="object-contain" />
                </div>
                <div>
                  <h4 className="text-xs font-bold text-gray-900 line-clamp-2 leading-snug mb-1">{item.name}</h4>
                  <div className="flex text-amber-400 text-[10px] mb-1">
                    {'★'.repeat(5)}
                  </div>
                  <div className="flex items-baseline gap-2">
                    <span className="text-xs font-extrabold text-[#e4382f]">${item.price}</span>
                    <span className="text-[11px] text-gray-400 line-through">${item.oldPrice}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}