'use client';

import React, { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { HeroSection } from '@/sections/HeroSection';
import { catalogService, type CategoryResponse } from '@/services/api/catalogService';
import {
  SIDEBAR_WIDTH,
  getCategoryMenuItems,
  // CategorySidebar — current mega sidebar kept in file, not deleted:
  // import { CategorySidebar } from '@/components/CategorySidebar';
} from '@/components/CategorySidebar';

interface HomeHeroRowProps {
  heroConfig?: any;
  showHero: boolean;
  initialCategories?: CategoryResponse[];
}

/**
 * TechShop first viewport: All Categories rail (280px) + hero carousel.
 * Only mounted when `hero_slider` is Visible in the dashboard.
 */
export const HomeHeroRow: React.FC<HomeHeroRowProps> = ({
  heroConfig,
  showHero = true,
  initialCategories,
}) => {
  const [categories, setCategories] = useState<CategoryResponse[]>(
    initialCategories || []
  );

  useEffect(() => {
    if (initialCategories?.length) {
      setCategories(initialCategories);
      return;
    }
    let cancelled = false;
    catalogService.getCategories().then((res) => {
      if (!cancelled && res?.length) setCategories(res);
    });
    return () => {
      cancelled = true;
    };
  }, [initialCategories]);

  const menu = useMemo(() => getCategoryMenuItems(categories), [categories]);

  if (!showHero) return null;

  return (
    <section className="pt-0 pb-6 bg-white font-sans">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px] overflow-visible">
        <div className="flex items-stretch gap-0 xl:gap-8 lg:gap-10 min-w-0 overflow-visible relative z-30">
          {/*
            Previous mega CategorySidebar rail — kept, not deleted:
            <CategorySidebar initialCategories={initialCategories} />
          */}
          <aside
            className="hidden xl:flex w-[280px] shrink-0 flex-col bg-white border border-primary border-t-0 rounded-b-lg overflow-hidden shadow-[0_4px_14px_rgba(25,118,243,0.08)]"
            style={{ width: SIDEBAR_WIDTH }}
            aria-label="Shop categories"
          >
            <ul className="flex flex-col flex-1 bg-white">
              {menu.map((item, idx) => (
                <li key={item.id}>
                  <Link
                    href={item.href}
                    className={`flex items-center px-5 py-[13px] text-[13px] font-medium text-[#333] hover:text-primary hover:bg-[#f7f9fc] transition-colors ${
                      idx < menu.length - 1 ? 'border-b border-[#ececec]' : ''
                    }`}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </aside>
          <div className="flex-1 min-w-0 relative z-0">
            <HeroSection config={heroConfig} enabled />
          </div>
        </div>
      </div>
    </section>
  );
};