'use client';

import { Text } from "@/components/ui/Typography";
import { useAppSelector } from "@/lib/redux/hooks";
import { selectBoxTotal } from "@/lib/redux/slices/boxSlice";
import { container } from "@/lib/utils";
import { Product } from "lib/shopify/types";
import Link from "next/link";
import { ProductGrid } from "../products/ProductGrid";
import { BuildBoxSidebar } from "./BuildBoxSidebar";

interface BuildBoxClientPageProps {
  products: Product[];
}

export function BuildBoxClientPage({ products }: BuildBoxClientPageProps) {
  const boxTotal = useAppSelector(selectBoxTotal);

  return (
    <div className="relative">
      {/* Main content */}
      <div className={`${container} lg:pr-[240px]`}>
        
        <ProductGrid products={products} title="" />
        
        {/* Add bottom padding on mobile to make room for mobile sidebar */}
        <div className="h-24 lg:hidden"></div>
      </div>
      
      {/* Desktop sidebar - right side, full height with scrolling */}
      <div className="hidden lg:block fixed top-0 right-0 w-[230px] h-full bg-gray-100 border-l border-gray-200 shadow-sm">
        <div className="pt-[88px] h-full overflow-y-auto">
          <BuildBoxSidebar />
        </div>
      </div>
      
      {/* Mobile sidebar - fixed at bottom of screen */}
      <div className="lg:hidden fixed bottom-0 left-0 right-0 h-20 bg-white border-t border-gray-200 flex items-center justify-between px-4 z-50">
        <div>
          <Text weight="semibold">Cijena boxa: ${boxTotal.toFixed(2)}</Text>
        </div>
        <Link 
          href="/build-box/customize" 
          className="bg-primary text-white px-6 py-2 rounded disabled:bg-gray-400"
          aria-disabled={boxTotal === 0}
          tabIndex={boxTotal === 0 ? -1 : undefined}
        >
          Idući korak
        </Link>
      </div>
    </div>
  );
}