"use client";

import { useState, useEffect } from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import { NetworkBanner } from "../components/NetworkBanner";
import { Toaster } from "sonner";
import { usePathname, useRouter } from 'next/navigation';

import CartDrawer from "../components/CartDrawer";
import LoginModal from "../components/LoginModal";
import AuthModal from "../components/AuthModal";
import B2BPortal from "../components/B2BPortal";
import { useUserStore } from "../lib/store/userStore";
import { useSettingsStore } from "../lib/store/settingsStore";
import { useUIStore } from "../lib/store/uiStore";

export default function ClientLayout({ children }: { children: React.ReactNode }) {
  const { 
    isCartOpen, isLoginModalOpen, isB2BPortalOpen, advisorData,
    setCartOpen, setLoginModalOpen, setB2BPortalOpen, clearAdvisorData 
  } = useUIStore();
  
  const pathname = usePathname();
  const router = useRouter();

  const { fetchProfile } = useUserStore();
  const fetchSettings = useSettingsStore(state => state.fetchSettings);
  const isInitialized = useSettingsStore(state => state.isInitialized);

  useEffect(() => {
    fetchSettings();
    const token = localStorage.getItem('accessToken');
    if (token) {
       fetchProfile().catch(e => console.error("Auth init failed:", e));
    } else {
       useUserStore.getState().logout();
    }
  }, [fetchProfile, fetchSettings]);

  // Remove full-page blocking screen to allow immediate render

  // Derived currentView from pathname for Header
  let currentView = "home";
  if (pathname?.includes("/shop")) currentView = "shop";
  if (pathname?.includes("/wiki")) currentView = "wiki";
  if (pathname?.includes("/profile")) currentView = "profile";
  if (pathname?.includes("/checkout")) currentView = "checkout";
  if (pathname?.includes("/dashboard")) currentView = "user-dashboard";

  const handleNavigate = (v: any) => {
    if (typeof v === 'object') {
       if (v.view === 'profile') router.push('/profile');
       if (v.view === 'order-tracking') router.push('/order/tracking');
       if (v.view === 'home') router.push('/');
    } else {
       if (v === 'home') router.push('/');
       else if (v === 'user-dashboard') router.push('/dashboard');
       else router.push(`/${v}`);
    }
  };

  const navigateToShop = (category: string = "all", search: string = "") => {
    const params = new URLSearchParams();
    if (category && category !== "all") params.set("category", category);
    if (search) params.set("search", search);
    const newUrl = params.toString() ? `/shop?${params.toString()}` : "/shop";
    router.push(newUrl);
  };

  const handleSearch = (q: string) => {
    router.push(`/search?q=${encodeURIComponent(q)}`);
  };

  return (
    <>
      <NetworkBanner />
      <Header 
        onNavigate={handleNavigate} 
        onShopNavigate={navigateToShop} 
        currentView={currentView}
        onCartOpen={() => setCartOpen(true)}
        onSearch={handleSearch}
        onB2BOpen={() => setB2BPortalOpen(true)}
      />
      <main className="min-h-screen">
        {children}
      </main>
      <Footer onNavigate={handleNavigate} onShopNavigate={navigateToShop} onB2BOpen={() => setB2BPortalOpen(true)} />
      
      {isB2BPortalOpen && <B2BPortal onClose={() => setB2BPortalOpen(false)} />}
      <CartDrawer 
        isOpen={isCartOpen} 
        onClose={() => setCartOpen(false)} 
        onCheckout={() => { setCartOpen(false); router.push('/checkout'); }} 
        onShopNavigate={navigateToShop}
      />
      <LoginModal 
        isOpen={isLoginModalOpen} 
        onClose={() => {
          setLoginModalOpen(false);
          clearAdvisorData();
        }} 
        onLogin={() => {
          setLoginModalOpen(false);
        }} 
        petName={advisorData?.name as string | undefined}
        isAdvisorContext={!!advisorData}
      />
      <AuthModal
        isOpen={useUserStore(state => state.isAuthModalOpen)}
        onClose={() => useUserStore.getState().setAuthModalOpen(false)}
      />
      <Toaster position="top-center" expand={true} richColors closeButton />
    </>
  );
}