"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
import { useTheme } from "@/lib/theme";

export default function AppLayout({ children }: { children: React.ReactNode }) {
    const { status } = useSession();
    const router = useRouter();
    const { theme } = useTheme();

    useEffect(() => {
        if (status === "unauthenticated") {
            router.push("/");
        }
    }, [status, router]);

    if (status === "loading") {
        return (
            <div className="min-h-screen flex items-center justify-center" style={{ background: "var(--bg)" }}>
                <span className="font-mono text-xs tracking-widest animate-pulse" style={{ color: "var(--accent)" }}>
                    CHARGEMENT...
                </span>
            </div>
        );
    }

    if (status !== "authenticated") return null;

    return (
        <div className="flex min-h-screen" style={{ background: "var(--bg)" }}>
            <Sidebar />
            <main className="ml-56 flex-1 p-8" style={{ background: "var(--bg)" }}>
                {children}
            </main>
        </div>
    );
}

