'use client';

import { Button } from "@/components/ui/Button";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { addToBox, removeFromBox, selectBoxItems } from "@/lib/redux/slices/boxSlice";
import Image from "next/image";
import { useEffect, useState } from "react";

export interface BoxOption {
  id: string;
  title: string;
  price: number;
  image: string;
}

interface BuildBoxCustomizeClientWithTranslationProps {
  boxes: BoxOption[];
}

export function BuildBoxCustomizeClientWithTranslation({ boxes }: BuildBoxCustomizeClientWithTranslationProps) {
  const { t, locale } = useTranslation();
  const dispatch = useAppDispatch();
  const [selectedBox, setSelectedBox] = useState<string | null>(null);
  const boxItems = useAppSelector(selectBoxItems);
  
  // Učitaj odabranu kutiju iz postojećih item-a prilikom učitavanja stranice
  useEffect(() => {
    const existingBox = boxItems.find(item => item.variantId === 'box-container');
    if (existingBox) {
      setSelectedBox(existingBox.id);
    }
  }, [boxItems]);

  const handleSelectBox = (box: BoxOption) => {
    // Ako je ista kutija već odabrana, ne radi ništa
    if (selectedBox === box.id) return;
    
    setSelectedBox(box.id);
    
    // Ukloni sve postojeće kutije iz košarice
    const existingBoxes = boxItems.filter(item => item.variantId === 'box-container');
    existingBoxes.forEach(existingBox => {
      dispatch(removeFromBox({ id: existingBox.id, color: existingBox.color }));
    });
    
    // Add box to the cart
    dispatch(addToBox({
      id: box.id,
      name: box.title,
      price: box.price,
      image: box.image,
      quantity: 1,
      variantId: 'box-container', // Special ID to identify this as a box
    }));
  };
  
  return (
    <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
      {boxes.map((box) => {
        const isSelected = selectedBox === box.id;
        return (
          <div
            key={box.id}
            className={`flex flex-col group relative cursor-pointer ${isSelected ? 'ring-2 ring-primary rounded-lg' : ''}`}
            onClick={() => handleSelectBox(box)}
          >
            <div className="relative aspect-[4/3] overflow-hidden rounded-lg">
              <Image 
                src={box.image} 
                alt={box.title} 
                fill
                className="object-cover"
              />
              
              {/* Oznaka za odabranu kutiju */}
              {isSelected && (
                <div className="absolute top-0 right-0 bg-primary text-white m-2 rounded-full p-1 w-6 h-6 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
              )}
              
              {/* Mobile button - always visible */}
              <div className="absolute inset-0 flex items-center justify-center md:hidden">
                <Button
                  variant={isSelected ? "custom" : "primary"}
                  className="w-auto shadow-md"
                >
                  {isSelected 
                    ? (locale === 'en' ? 'Selected' : 'Odabrano') 
                    : t('buildBox.customize.options.select')}
                </Button>
              </div>
              
              {/* Desktop button - visible on hover */}
              <div className="absolute inset-0 hidden md:flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <Button
                  variant={isSelected ? "custom" : "primary"}
                  className="w-auto shadow-md"
                >
                  {isSelected 
                    ? (locale === 'en' ? 'Selected' : 'Odabrano') 
                    : t('buildBox.customize.options.select')}
                </Button>
              </div>
            </div>
            
            <div className="pt-4 flex flex-col">
              <h3 className="text-lg font-bold">{box.title}</h3>
              <p className="text-lg font-medium">${box.price.toFixed(2)}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}