"use client";

import { useState, type ReactNode } from "react";
import { useRouter } from "next/navigation";
import { Header } from "@/components/layout/header";
import { CategorySidebar } from "@/components/layout/category-sidebar";
import { Footer } from "@/components/layout/footer";
import { Hero } from "@/components/home/hero";
import { NewArrivalsSection } from "@/components/home/new-arrivals-section";
import { CategorySections } from "@/components/home/category-sections";
import { BrandPromise } from "@/components/home/brand-promise";
import { PartnershipSections } from "@/components/home/partnership-sections";
import { Newsletter } from "@/components/layout/newsletter";
import { StorefrontDialog, type Panel } from "@/components/ui/storefront-dialog";
import { categoryShowcases } from "@/data/category-showcases";
import { catalogProducts, shopHref, type ShopQuery, type CatalogProduct } from "@/data/catalog";
import { ProductDetails } from "@/components/product/product-details";
import { productHref } from "@/lib/products";
import { ShopCatalog } from "@/components/shop/shop-catalog";
import { useDemoStore } from "@/components/shop/demo-store";
import { CartPage } from "@/components/commerce/cart-page";
import { CheckoutPage } from "@/components/commerce/checkout-page";
import { OrderConfirmation } from "@/components/commerce/order-confirmation";

export function Storefront({ children, catalogQuery, commercePage, detailProduct, initialDetailVariantId }: { children?: ReactNode; catalogQuery?: ShopQuery; commercePage?: "cart" | "checkout" | "confirmation"; detailProduct?: CatalogProduct; initialDetailVariantId?: string }) {
  const router = useRouter();
  const { count, wishlist, notice } = useDemoStore();
  const [panel, setPanel] = useState<Panel | null>(null);
  const [productId, setProductId] = useState<string>();
  const [variantId, setVariantId] = useState<string>();
  function openCollection(id: string) { setPanel(null); router.push(shopHref(id)); }
  function openCategory(id: string, selectedProductId?: string) {
    if (!selectedProductId) { const category = categoryShowcases.find((item) => item.id === id); if (category) router.push(shopHref(category.collectionId, { type: id })); return; }
    router.push(productHref(selectedProductId));
  }
  function openProduct(id: string, selectedVariantId?: string) { setProductId(id); setVariantId(selectedVariantId); setPanel("product"); }
  function browse() { setPanel(null); router.push("/shop"); }

  return (
    <div id="top">
      <a className="skip-link" href="#main-content">Skip to content</a>
      <Header onOpen={setPanel} activeCollection={catalogQuery?.category ?? detailProduct?.group} homeActive={!children && !catalogQuery && !commercePage && !detailProduct} bagCount={count} wishlistCount={wishlist.length} />
      <div className="storefront-layout">
        <CategorySidebar activeCollection={catalogQuery?.category ?? detailProduct?.group} activeType={catalogQuery?.type ?? detailProduct?.categoryId} wishlistCount={wishlist.length} onWishlist={() => setPanel("wishlist")} />
        <div className="storefront-content">
          <main id="main-content">
            {children ? children : detailProduct ? <ProductDetails product={detailProduct} initialVariantId={initialDetailVariantId} onAdded={() => setPanel("bag")} onQuickAdd={openProduct} /> : commercePage === "cart" ? <CartPage onProduct={openProduct} /> : commercePage === "checkout" ? <CheckoutPage /> : commercePage === "confirmation" ? <OrderConfirmation /> : catalogQuery ? <ShopCatalog query={catalogQuery} onProduct={openProduct} /> : <>
            <Hero onCollection={openCollection} />
            <NewArrivalsSection onCollection={openCollection} />
            <CategorySections onCategory={openCategory} />
            <PartnershipSections />
            <BrandPromise />
            </>}
          </main>
          <Newsletter />
          <Footer onCollection={openCollection} />
        </div>
      </div>
      <StorefrontDialog panel={panel} product={catalogProducts.find((item) => item.id === productId)} initialVariantId={variantId} onClose={() => setPanel(null)} onCollection={openCollection} onWishlist={() => setPanel("wishlist")} onProduct={openProduct} onBrowse={browse} onCart={() => { setPanel(null); router.push("/cart"); }} onCheckout={() => { setPanel(null); router.push("/checkout"); }} onAdded={() => setPanel("bag")} onSearch={(query) => { setPanel(null); router.push(shopHref("All", { q: query })); }} />
      {notice && <div className="store-notice" role="status">{notice}</div>}
    </div>
  );
}