'use client';

import { useAuth } from '@/contexts/AuthContext';
import Link from 'next/link';
import { UsersIcon, CubeIcon, TagIcon, BellIcon, GiftIcon, ShoppingBagIcon, CalculatorIcon } from '@heroicons/react/24/outline';
import { MegaphoneIcon } from 'lucide-react';

export default function Dashboard() {
    const { user } = useAuth();

    const cards = [
        {
            href: '/admin/users',
            title: 'مدیریت کاربران',
            desc: 'مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها',
            Icon: UsersIcon,
            iconBg: 'bg-indigo-100 dark:bg-indigo-500/15',
            iconColor: 'text-indigo-600 dark:text-indigo-400',
            hoverBorder: 'hover:border-indigo-300 dark:hover:border-indigo-700',
        },
        {
            href: '/admin/purchases',
            title: 'خریدهای اشتراک',
            desc: 'مشاهده و فیلتر خریدها بر اساس ایمیل، موبایل، پکیج و منبع پرداخت',
            Icon: ShoppingBagIcon,
            iconBg: 'bg-orange-100 dark:bg-orange-500/15',
            iconColor: 'text-orange-600 dark:text-orange-400',
            hoverBorder: 'hover:border-orange-300 dark:hover:border-orange-700',
        },
        {
            href: '/admin/accounting',
            title: 'حسابداری',
            desc: 'تحلیل فروش محصولات و محاسبه کارمزد مایکت و کافه بازار',
            Icon: CalculatorIcon,
            iconBg: 'bg-cyan-100 dark:bg-cyan-500/15',
            iconColor: 'text-cyan-600 dark:text-cyan-400',
            hoverBorder: 'hover:border-cyan-300 dark:hover:border-cyan-700',
        },
        {
            href: '/admin/packages',
            title: 'مدیریت پکیج‌ها',
            desc: 'ایجاد و مدیریت پکیج‌های نرم‌افزار',
            Icon: CubeIcon,
            iconBg: 'bg-green-100 dark:bg-green-500/15',
            iconColor: 'text-green-600 dark:text-green-400',
            hoverBorder: 'hover:border-green-300 dark:hover:border-green-700',
        },
        {
            href: '/admin/products',
            title: 'مدیریت محصولات',
            desc: 'ایجاد و مدیریت محصولات و اشتراک‌ها',
            Icon: TagIcon,
            iconBg: 'bg-purple-100 dark:bg-purple-500/15',
            iconColor: 'text-purple-600 dark:text-purple-400',
            hoverBorder: 'hover:border-purple-300 dark:hover:border-purple-700',
        },
        {
            href: '/admin/reminders',
            title: 'مدیریت یادآوری‌ها',
            desc: 'ایجاد و مدیریت یادآوری‌ها و پیام‌های انگیزشی',
            Icon: BellIcon,
            iconBg: 'bg-yellow-100 dark:bg-yellow-500/15',
            iconColor: 'text-yellow-600 dark:text-yellow-400',
            hoverBorder: 'hover:border-yellow-300 dark:hover:border-yellow-700',
        },
        {
            href: '/admin/promotions',
            title: 'مدیریت تبلیغات',
            desc: 'ایجاد و مدیریت تبلیغات، بنرها و اسلایدرها',
            Icon: MegaphoneIcon,
            iconBg: 'bg-pink-100 dark:bg-pink-500/15',
            iconColor: 'text-pink-600 dark:text-pink-400',
            hoverBorder: 'hover:border-pink-300 dark:hover:border-pink-700',
        },
        {
            href: '/admin/referral-rewards',
            title: 'پاداش‌های معرفی',
            desc: 'اعطای اشتراک رایگان به کاربران واجد شرایط دعوت',
            Icon: GiftIcon,
            iconBg: 'bg-emerald-100 dark:bg-emerald-500/15',
            iconColor: 'text-emerald-600 dark:text-emerald-400',
            hoverBorder: 'hover:border-emerald-300 dark:hover:border-emerald-700',
        },
    ];

    return (
        <div className="p-4 sm:p-8">
            <div className="max-w-7xl mx-auto">
                {/* Welcome Section */}
                <div className="mb-8">
                    <div className="bg-gradient-to-l from-indigo-600 to-indigo-700 rounded-2xl p-6 sm:p-8 text-white shadow-lg shadow-indigo-500/20">
                        <h1 className="text-2xl sm:text-3xl font-bold">
                            خوش آمدید
                        </h1>
                        <p className="mt-1 text-indigo-100 text-sm sm:text-base">
                            {user?.email}
                        </p>
                        <p className="mt-3 text-indigo-200 text-sm">
                            یکی از بخش‌های زیر را برای مدیریت انتخاب کنید
                        </p>
                    </div>
                </div>

                {/* Dashboard Cards */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    {cards.map(({ href, title, desc, Icon, iconBg, iconColor, hoverBorder }) => (
                        <Link key={href} href={href} className="block group">
                            <div className={`h-full bg-white dark:bg-gray-900 rounded-2xl p-5 ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm hover:shadow-md ${hoverBorder} hover:-translate-y-0.5 transition-all duration-200`}>
                                <div className={`inline-flex h-11 w-11 items-center justify-center rounded-xl mb-3 ${iconBg}`}>
                                    <Icon className={`h-5.5 w-5.5 ${iconColor}`} />
                                </div>
                                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
                                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1.5 leading-relaxed">
                                    {desc}
                                </p>
                                <div className="mt-4 flex items-center text-xs font-medium text-indigo-600 dark:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity">
                                    ورود به بخش
                                    <svg className="h-4 w-4 mr-1 rotate-180" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                    </svg>
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>
            </div>
        </div>
    );
}