'use client';

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

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

    return (
        <div className="p-8">
            <div className="max-w-7xl mx-auto">
                <div className="bg-white rounded-lg shadow-lg p-6">
                    <div className="flex justify-between items-center mb-6">
                        <h1 className="text-2xl font-bold text-gray-900">
                            داشبورد
                        </h1>
                        <button
                            onClick={logout}
                            className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
                        >
                            خروج
                        </button>
                    </div>

                    <div className="border-t pt-6">
                        <h2 className="text-lg font-semibold mb-4 text-slate-900">خوش آمدید، {user?.email}</h2>

                        {/* Dashboard Cards */}
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
                            <Link href="/admin/users" className="block">
                                <div className="bg-indigo-50 hover:bg-indigo-100 rounded-lg p-6 transition-colors">
                                    <UsersIcon className="h-8 w-8 text-indigo-600 mb-3" />
                                    <h3 className="text-lg font-medium text-gray-900">مدیریت کاربران</h3>
                                    <p className="text-sm text-gray-600 mt-1">
                                        مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها
                                    </p>
                                </div>
                            </Link>

                            <Link href="/admin/packages" className="block">
                                <div className="bg-green-50 hover:bg-green-100 rounded-lg p-6 transition-colors">
                                    <CubeIcon className="h-8 w-8 text-green-600 mb-3" />
                                    <h3 className="text-lg font-medium text-gray-900">مدیریت پکیج‌ها</h3>
                                    <p className="text-sm text-gray-600 mt-1">
                                        ایجاد و مدیریت پکیج‌های نرم‌افزار
                                    </p>
                                </div>
                            </Link>

                            <Link href="/admin/products" className="block">
                                <div className="bg-purple-50 hover:bg-purple-100 rounded-lg p-6 transition-colors">
                                    <TagIcon className="h-8 w-8 text-purple-600 mb-3" />
                                    <h3 className="text-lg font-medium text-gray-900">مدیریت محصولات</h3>
                                    <p className="text-sm text-gray-600 mt-1">
                                        ایجاد و مدیریت محصولات و اشتراک‌ها
                                    </p>
                                </div>
                            </Link>
                            <Link href="/admin/reminders" className="block">
                                <div className="bg-yellow-50 hover:bg-yellow-100 rounded-lg p-6 transition-colors">
                                    <BellIcon className="h-8 w-8 text-yellow-600 mb-3" />
                                    <h3 className="text-lg font-medium text-gray-900">مدیریت یادآوری‌ها</h3>
                                    <p className="text-sm text-gray-600 mt-1">
                                        ایجاد و مدیریت یادآوری‌ها و پیام‌های انگیزشی
                                    </p>
                                </div>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}