'use client';

import React, { useState, useEffect, useRef } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Settings, ArrowLeft } from 'lucide-react';
import Stats from '@/src/components/dashboard/stats/stats';
import RecentOrders from '@/src/components/dashboard/recentOrders/recentOrders';
import DashboardCharts from '@/src/components/dashboard/dashboardCharts/dashboardCharts';
import QuickStats from '@/src/components/dashboard/quickStats/quickStats';
import RecentActivity from '@/src/components/dashboard/recentActivity/recentActivity';
import { WelcomeHeader } from '@/src/components/dashboard/welcomeHeader';
import { QuickActions } from '@/src/components/dashboard/quickActions';
import { DashboardSkeleton } from '@/src/components/skeleton/dashboard';

export default function UserPanelPage() {
    const pathname = usePathname();
    const [isLoading, setIsLoading] = useState(false);
    const hasLoaded = useRef(false);

    useEffect(() => {
        if (!hasLoaded.current) {
            setIsLoading(true);
            const timer = setTimeout(() => {
                setIsLoading(false);
                hasLoaded.current = true;
            }, 400);
            return () => clearTimeout(timer);
        }
    }, []);

    useEffect(() => {
        if (hasLoaded.current) {
            setIsLoading(false);
        }
    }, [pathname]);

    if (isLoading) return <DashboardSkeleton />;

    return (
        <div className="space-y-6">
            <WelcomeHeader />
            <QuickStats />
            <DashboardCharts />
            <Stats />
            <QuickActions />

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
                <div className="lg:col-span-2">
                    <RecentOrders />
                </div>
                <div>
                    <RecentActivity />
                </div>
            </div>

            <div className="bg-white dark:bg-[#111] rounded-2xl p-4 border border-gray-200 dark:border-gray-800 flex items-center justify-between hover:border-[#E53935]/30 transition-all duration-300">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                        <Settings className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                    </div>
                    <div>
                        <p className="text-sm font-medium text-gray-900 dark:text-white">تنظیمات حساب کاربری</p>
                        <p className="text-xs text-gray-500 dark:text-gray-400">اطلاعات شخصی، رمز عبور و ...</p>
                    </div>
                </div>
                <Link href="/user-panel/settings"
                    className="px-4 py-2 bg-[#E53935] text-white rounded-xl text-xs font-bold hover:bg-[#c62828] transition-colors shadow-lg shadow-[#E53935]/30 flex items-center gap-1">
                    ویرایش
                    <ArrowLeft className="w-3 h-3" />
                </Link>
            </div>

            <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparent" />
        </div>
    );
}