"use client";

import React, { useState, useEffect, useCallback } from "react";
import { usePathname, useRouter } from "next/navigation";
import { Sidebar } from "./Sidebar";
import { Header } from "./Header";
import { BottomNav } from "./BottomNav";
import { ThemeProvider } from "../providers/ThemeProvider";
import { RealTimeNotifications } from "../notifications/RealTimeNotifications";
import { isAuthenticated, clearAuthTokens, getSessionRemainingMs } from "@/lib/auth";
import { API_BASE_URL, getAuthHeaders } from "@/lib/api";
import { DynamicMeta } from "./DynamicMeta";

const BRAND_PRESETS: Record<string, string> = {
    "#4f46e5": "oklch(0.55 0.2 264)",
    "#0891b2": "oklch(0.6 0.18 200)",
    "#059669": "oklch(0.6 0.18 165)",
    "#dc2626": "oklch(0.55 0.22 25)",
    "#d97706": "oklch(0.65 0.2 75)",
};

export function Shell({ children }: { children: React.ReactNode }) {
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const pathname = usePathname();
    const router = useRouter();

    const isLoginRoute = pathname === "/login";
    const isReceiptRoute = pathname.startsWith("/receipts");
    const isContactRoute = pathname === "/contact";
    const isPublicRoute = isLoginRoute || isReceiptRoute || isContactRoute;

    // DynamicMeta runs on every page — handles tab title + favicon

    /** Performs a full logout: clears all tokens and redirects to /login */
    const logout = useCallback(() => {
        clearAuthTokens();
        router.push("/login");
    }, [router]);

    /** Auth guard + auto-logout after 48h */
    useEffect(() => {
        if (isPublicRoute) return;

        // Immediately check if session is still valid
        if (!isAuthenticated()) {
            logout();
            return;
        }

        // Schedule automatic logout when the 48-hour session expires
        const remaining = getSessionRemainingMs();
        if (remaining <= 0) {
            logout();
            return;
        }

        const autoLogoutTimer = setTimeout(() => {
            console.info("[Auth] 48-hour session expired. Logging out.");
            logout();
        }, remaining);

        return () => clearTimeout(autoLogoutTimer);
    }, [pathname, isPublicRoute, logout]);

    /** Apply brand primary color from backend company settings on each page load */
    useEffect(() => {
        if (isPublicRoute) return;
        async function applyBrandColor() {
            try {
                const res = await fetch(`${API_BASE_URL}/companies/`, { headers: getAuthHeaders() });
                if (res.ok) {
                    const data = await res.json();
                    const list = data.results || data;
                    const primary = list[0]?.brand_colors?.primary;
                    if (primary) {
                        const oklch = BRAND_PRESETS[primary] || primary;
                        document.documentElement.style.setProperty("--primary", oklch);
                        document.documentElement.style.setProperty("--ring", oklch);
                    }
                }
            } catch { /* silent fail */ }
        }
        applyBrandColor();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isPublicRoute]);

    if (isPublicRoute) {
        return (
            <ThemeProvider>
                <DynamicMeta />
                {children}
            </ThemeProvider>
        );
    }

    return (
        <ThemeProvider>
            <div className="flex h-screen w-full overflow-hidden bg-background">

                {/* Dynamic Nav Shell */}
                <Sidebar isOpen={sidebarOpen} setIsOpen={setSidebarOpen} />

                {/* Main Interface Content */}
                <div className="flex flex-1 flex-col overflow-hidden">
                    <Header toggleSidebar={() => setSidebarOpen((prev) => !prev)} />

                    <main className="flex-1 overflow-y-auto p-4 md:p-8 relative scroll-smooth bg-muted/20 dark:bg-muted/5 pb-20 md:pb-8">
                        <DynamicMeta />
                        {/* The main page content drops here dynamically per route */}
                        <div className="mx-auto max-w-7xl animate-in fade-in slide-in-from-bottom-4 duration-700">
                            {children}
                        </div>
                        <RealTimeNotifications />
                    </main>

                    <BottomNav />
                </div>

            </div>
        </ThemeProvider>
    );
}