"use client";

import { useEffect, useRef, useState } from "react";
import { usePathname } from "next/navigation";
import Sidebar from "@/components/Sidebar";
import MobileNav from "@/components/MobileNav";
import MobileHeader from "@/components/MobileHeader";
import MobileSidebar from "@/components/MobileSidebar";
import { subscribeToEvents } from "@/lib/api";
import { useUI } from "@/context/UIContext";

const NO_SHELL_ROUTES = ["/login"];

export default function ShellWrapper({ children }: { children: React.ReactNode }) {
    const pathname = usePathname();
    const { toast } = useUI();
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
    const notifiedJobs = useRef<Set<string>>(new Set());

    useEffect(() => {
        const unsubscribe = subscribeToEvents((event, data) => {
            if (event === 'job_update') {
                const jobKey = `${data.id}-${data.status}`;
                if (notifiedJobs.current.has(jobKey)) return;

                if (data.status === 'completed') {
                    toast(`Job Completed: ${data.original_file_name}`, 'success');
                    notifiedJobs.current.add(jobKey);
                } else if (data.status === 'failed') {
                    toast(`Job Failed: ${data.original_file_name}`, 'error');
                    notifiedJobs.current.add(jobKey);
                } else if (data.status === 'awaiting_review') {
                    toast(`Quality Review Required for ${data.original_file_name}`, 'info');
                    notifiedJobs.current.add(jobKey);
                }
            }
        });
        return () => unsubscribe();
    }, [toast]);

    const isAuthPage = NO_SHELL_ROUTES.some(r => pathname.startsWith(r));


    if (isAuthPage) {
        // Login page: full-screen, no sidebar, no nav
        return <>{children}</>;
    }

    return (
        <>
            {/* Mobile Sidebar Content (Drawer) */}
            <MobileSidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />

            {/* Desktop Sidebar */}
            <div className="hidden md:flex h-full">
                <Sidebar />
            </div>

            <div className="flex-1 flex flex-col h-full overflow-hidden">
                {/* Mobile Header (Sticky top) */}
                <MobileHeader onMenuOpen={() => setIsSidebarOpen(true)} />

                {/* Main Content Area */}
                <main className="flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-6 lg:p-8 pb-24 md:pb-8 scroll-smooth w-full relative bg-bg-primary">
                    <div
                        key={pathname}
                        className="max-w-7xl mx-auto space-y-8 animate-fade-in"
                    >
                        {children}
                    </div>
                </main>
            </div>

            {/* Mobile Bottom Navigation */}
            <MobileNav />
        </>
    );
}