'use client';
import { useState, useEffect } from 'react';
import '../neon.css';
import './dashboard.css';
import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
import { Home, Settings, Bell } from 'lucide-react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { jwtexp } from '@/lib/utils';
import Calendar from '@/components/Calendar';
import { useNavigate } from "react-router";

const menuItems = [
    { label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
    { label: 'notify', icon: Bell, onClick: () => console.log('Notifications clicked') },
    { label: 'settings', icon: Settings, onClick: () => console.log('Settings clicked') },
];

export default function Dashboard() {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(true);
    const [authError, setAuthError] = useState(false);

    // Validate token on page load
    useEffect(() => {
        console.log('Dashboard useEffect triggered');
        const validateAuth = async () => {
            try {
                console.log('Validating authentication...');
                const token = localStorage.getItem('access_token');
                if (token) {
                    console.log('Token found, validating...');
                    const isTokenValid = await jwtexp(token);
                    if (!isTokenValid) {
                        console.error('Token validation failed');
                        setAuthError(true);
                        setLoading(false);
                        return;
                    }
                } else {
                    console.error('No access token found');
                    setAuthError(true);
                    setLoading(false);
                    return;
                }
                console.log('Authentication validated successfully');
            } catch (error) {
                console.error('Authentication validation error:', error);
                setAuthError(true);
            } finally {
                setLoading(false);
            }
        };

        validateAuth();
    }, []);

    // Redirect to login if authentication fails
    useEffect(() => {
        if (authError) {
            console.log('Authentication error detected, redirecting to login...');
            navigate('/auth/login', { replace: true });
        }
    }, [authError, navigate]);



    if (loading || authError) {
        return (
            <div className="dashboard-container">
                <div className="flex items-center justify-center min-h-screen">
                    <p className="text-xl">
                        {loading ? 'Loading dashboard...' : 'Redirecting...'}
                    </p>
                </div>
            </div>
        );
    }

    return (
        <div className="dashboard-container">
            {/* Navigation Rail - Material Design 3 */}
            <aside className="dashboard-sidebar">
                {/* Avatar with large M3 container */}
                <div className="dashboard-avatar-container">
                    <Avatar className="dashboard-avatar">
                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                        <AvatarFallback className="dashboard-avatar-fallback">CN</AvatarFallback>
                    </Avatar>
                </div>

                <MenuDock
                    items={menuItems}
                    orientation="vertical"
                    animated={false}
                    showIndicator={false}
                    showLabels={true}
                    variant="compact"
                />
            </aside>

            {/* Main Content Area */}
            <main className="dashboard-main">
                <div className="dashboard-content">
                    <h1 className="dashboard-header">
                        <span className="sign-pink-inline">Task&</span>
                        <span className="sign-inline">Coffee</span>
                    </h1>
                    <Calendar />

                    <div className="dashboard-spacer"></div>
                </div>
            </main>
        </div>
    );
}

