'use client';

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

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

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

    return (
        <div className="p-4 sm:p-8">
            <div className="max-w-7xl mx-auto">
                <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 p-6">
                    <div className="flex justify-between items-center mb-6">
                        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                            داشبورد
                        </h1>
                        <div className="flex items-center gap-2">
                            <ThemeToggle withLabel />
                            <button
                                onClick={logout}
                                className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 transition-colors"
                            >
                                <PowerIcon className="h-5 w-5" />
                                خروج
                            </button>
                        </div>
                    </div>

                    <div className="border-t border-gray-200 dark:border-gray-800 pt-6">
                        <h2 className="text-lg font-semibold mb-1 text-gray-900 dark:text-gray-100">خوش آمدید، {user?.email}</h2>
                        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">یکی از بخش‌های زیر را برای مدیریت انتخاب کنید.</p>

                        {/* Dashboard Cards */}
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                            {cards.map(({ href, title, desc, Icon, iconWrap }) => (
                                <Link key={href} href={href} className="block group">
                                    <div className="h-full bg-white dark:bg-gray-900 rounded-xl p-6 ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm hover:shadow-md hover:ring-indigo-300 dark:hover:ring-indigo-700 hover:-translate-y-0.5 transition-all duration-200">
                                        <div className={`inline-flex h-12 w-12 items-center justify-center rounded-xl mb-4 ${iconWrap}`}>
                                            <Icon className="h-6 w-6" />
                                        </div>
                                        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">{title}</h3>
                                        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                            {desc}
                                        </p>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}