'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 { getUserTasks } from '@/api/users.service';
import Calendar from '@/components/Calendar';

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 [loading, setLoading] = useState(true);
    const [authError, setAuthError] = useState(false);

    // Fetch tasks
    useEffect(() => {
        console.log('Dashboard useEffect triggered');
        const fetchTasks = async () => {
            try {
                console.log('Starting fetchTasks...');
                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('Fetching user tasks...');
                const response = await getUserTasks(1);
                console.log('Tasks from backend:', response);
                setTasksFromBackend(response);
            } catch (error) {
                console.error('Failed to fetch tasks:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchTasks();
    }, []);

    // Get current date and week


    // Calculate the Monday of current week

    // Group tasks by day




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

    if (authError) {
        return (
            <div className="dashboard-container">
                <div className="flex items-center justify-center min-h-screen">
                    <div className="text-center">
                        <p className="text-xl text-red-500 mb-4">Authentication Error</p>
                        <p className="text-gray-600">Please log in again</p>
                        <button
                            onClick={() => window.location.href = '/login'}
                            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
                        >
                            Go to Login
                        </button>
                    </div>
                </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>
    );
}