'use client';

import React, { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { Product } from '../types';

const MobileDrawer = dynamic(
  () => import('./MobileDrawer').then((mod) => mod.MobileDrawer),
  { ssr: false }
);
const QuickViewModal = dynamic(
  () => import('./QuickViewModal').then((mod) => mod.QuickViewModal),
  { ssr: false }
);
const WishlistModal = dynamic(
  () => import('./WishlistModal').then((mod) => mod.WishlistModal),
  { ssr: false }
);
const GoogleAuthModal = dynamic(() => import('./auth/GoogleAuthModal'), {
  ssr: false,
});

type QuickViewState = {
  product: Product;
  products?: Product[];
} | null;

export const ClientModalsContainer: React.FC = () => {
  const router = useRouter();
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [wishlistModalOpen, setWishlistModalOpen] = useState(false);
  const [authModalOpen, setAuthModalOpen] = useState(false);
  const [authRedirectTo, setAuthRedirectTo] = useState('/');
  const [quickView, setQuickView] = useState<QuickViewState>(null);

  useEffect(() => {
    const handleOpenDrawer = () => setDrawerOpen(true);
    const handleOpenWishlist = () => setWishlistModalOpen(true);
    const handleOpenAuth = (e: Event) => {
      const detail = (e as CustomEvent).detail as
        | { redirectTo?: string }
        | undefined;
      setAuthRedirectTo(detail?.redirectTo || '/');
      setAuthModalOpen(true);
    };
    const handleOpenQuickView = (e: Event) => {
      const customEvt = e as CustomEvent;
      const detail = customEvt.detail;
      if (!detail) return;
      if (detail.product) {
        setQuickView({ product: detail.product, products: detail.products });
      } else if (detail.name || detail.id || detail.slug) {
        setQuickView({ product: detail as Product, products: detail.products });
      }
    };

    window.addEventListener('openMobileDrawer', handleOpenDrawer);
    window.addEventListener('openWishlistModal', handleOpenWishlist);
    window.addEventListener('openAuthModal', handleOpenAuth);
    window.addEventListener('openQuickView', handleOpenQuickView);

    return () => {
      window.removeEventListener('openMobileDrawer', handleOpenDrawer);
      window.removeEventListener('openWishlistModal', handleOpenWishlist);
      window.removeEventListener('openAuthModal', handleOpenAuth);
      window.removeEventListener('openQuickView', handleOpenQuickView);
    };
  }, []);

  return (
    <>
      <MobileDrawer isOpen={drawerOpen} onClose={() => setDrawerOpen(false)} />
      {quickView && (
        <QuickViewModal
          product={quickView.product}
          products={quickView.products}
          onClose={() => setQuickView(null)}
        />
      )}
      {wishlistModalOpen && (
        <WishlistModal onClose={() => setWishlistModalOpen(false)} />
      )}
      <GoogleAuthModal
        isOpen={authModalOpen}
        onClose={() => setAuthModalOpen(false)}
        onSuccess={() => {
          setAuthModalOpen(false);
          router.push(authRedirectTo || '/');
        }}
      />
    </>
  );
};