'use client';

import { Heading } from "@/components/ui/Typography";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { useAppSelector } from "@/lib/redux/hooks";
import { selectBoxTotal } from "@/lib/redux/slices/boxSlice";
import { container } from "@/lib/utils";
import { ChevronDown, ChevronUp } from "lucide-react";
import { ReactNode, useEffect, useState } from "react";
import { ClientSidebarWrapperWithTranslation } from "./ClientSidebarWrapperWithTranslation";

interface BuildBoxLayoutProps {
  children: ReactNode;
  title: string;
  step: number;
  totalSteps?: number;
  backButton?: ReactNode;
}

export function BuildBoxLayout({ 
  children, 
  title, 
  step, 
  totalSteps = 2,
  backButton 
}: BuildBoxLayoutProps) {
  const { t } = useTranslation();
  const [mobileCartOpen, setMobileCartOpen] = useState(false);
  const storeBoxTotal = useAppSelector(selectBoxTotal);
  
  // Dodajemo state za boxTotal koji će se koristiti za prikaz
  const [displayBoxTotal, setDisplayBoxTotal] = useState(0);
  
  // Ažuriramo displayBoxTotal samo na klijentskoj strani
  useEffect(() => {
    setDisplayBoxTotal(storeBoxTotal);
  }, [storeBoxTotal]);

  // Toggle mobile cart sidebar
  const toggleMobileCart = () => {
    setMobileCartOpen(!mobileCartOpen);
  };

  return (
    <div className="relative">
      {/* Main content */}
      <div className={container}>
        {/* Custom header with step indicator */}
        <div className="mt-8 mb-8">
          {/* Za korak 2, gumb nazad je iznad naslova */}
          {step === 2 && backButton && (
            <div className="mb-4">
              {backButton}
            </div>
          )}
          
          <div className="flex items-center justify-between">
            {/* Za korak 1, gumb nazad je pored naslova (ako postoji) */}
            {step === 1 && backButton && (
              <div>{backButton}</div>
            )}
            
            <Heading level={step === 1 ? 2 : 1} className={step === 1 ? "mt-16" : ""}>
              {title}:&nbsp;
              <span className="text-primary">{t('buildBox.step')} {step}</span>
            </Heading>
          </div>
        </div>
        
        <div className="pr-0 lg:pr-[240px]">
          {children}
        </div>

        {/* Mobile sticky footer with cart button */}
        <div className="lg:hidden fixed bottom-0 left-0 right-0 bg-[#E8E8E8] p-4 z-20 shadow-sm">
          <div 
            className="w-full py-3 flex items-center justify-between cursor-pointer"
            onClick={toggleMobileCart}
          >
            <span className="font-medium">{t('buildBox.sidebar.title')}</span>
            <ChevronUp size={20} />
          </div>
        </div>
        
        {/* Add padding at the bottom on mobile to account for the sticky footer */}
        <div className="h-20 lg:h-0"></div>
      </div>
      
      {/* Desktop sidebar - right side, fixed position */}
      <div className="hidden lg:block fixed top-[63px] right-0 w-[230px] h-[calc(100vh-65px)] bg-gray-100 border-l border-gray-200 shadow-sm z-10">
        <ClientSidebarWrapperWithTranslation />
      </div>

      {/* Mobile full-screen sidebar overlay */}
      {mobileCartOpen && (
        <div className="lg:hidden fixed inset-0 bg-white z-50 flex flex-col h-screen max-h-screen overflow-hidden">
          <div className="flex items-center justify-between p-4">
            <Heading level={3}>{t('buildBox.sidebar.title')}</Heading>
            <div 
              className="cursor-pointer"
              onClick={toggleMobileCart}
            >
              <ChevronDown size={24} />
            </div>
          </div>
          <div className="flex-1 overflow-y-auto">
            <ClientSidebarWrapperWithTranslation isMobile={true} />
          </div>
        </div>
      )}
    </div>
  );
}