'use client';

import { useTranslations } from 'next-intl';
import { Gamepad2, Users2, Rocket, Trophy, Play } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Link } from '@/i18n/navigation';

export default function GamesPage() {
    const t = useTranslations();

    const games = [
        {
            id: 'five-dysfunctions',
            title: 'لعبة الاختلالات الخمسة لفريق العمل',
            titleEn: 'The Five Dysfunctions of a Team',
            description: 'استكشف مستويات أداء فريقك وتعلم كيفية التغلب على التحديات المشتركة.',
            descriptionEn: 'Explore your team performance levels and learn how to overcome common challenges.',
            icon: Users2,
            color: 'bg-indigo-500',
            href: '/dashboard/games/five-dysfunctions'
        },
        {
            id: 'teamwork-code',
            title: 'لعبة شفرة العمل الجماعي',
            titleEn: 'Teamwork Code Game',
            description: 'فك رموز ديناميكيات الفريق وتعرف على مراحل بناء الفريق (Tuckman) وأدوار الفاعلية.',
            descriptionEn: 'Decode team dynamics and learn about Tuckman stages and effectiveness roles.',
            icon: Rocket,
            color: 'bg-purple-600',
            href: '/dashboard/games/teamwork-code'
        }
    ];

    return (
        <div className="p-6 max-w-7xl mx-auto">
            <div className="mb-8">
                <h1 className="text-3xl font-bold text-slate-800 mb-2 flex items-center gap-3">
                    <Gamepad2 className="size-8 text-purple-600" />
                    {t('routes.games')}
                </h1>
                <p className="text-slate-600">
                    ألعاب تعليمية تفاعلية لتطوير المهارات القيادية والإدارية.
                </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {games.map((game) => (
                    <Card key={game.id} className="overflow-hidden hover:shadow-lg transition-shadow border-slate-200">
                        <div className={`${game.color} h-3 w-full`} />
                        <CardHeader>
                            <div className="flex justify-between items-start mb-4">
                                <div className={`${game.color} p-3 rounded-xl text-white shadow-inner`}>
                                    <game.icon className="size-6" />
                                </div>
                                <div className="flex gap-1">
                                    <span className="bg-purple-100 text-purple-700 text-xs font-semibold px-2.5 py-0.5 rounded-full">
                                        قيادة
                                    </span>
                                    <span className="bg-blue-100 text-blue-700 text-xs font-semibold px-2.5 py-0.5 rounded-full">
                                        فريق
                                    </span>
                                </div>
                            </div>
                            <CardTitle className="text-xl font-bold text-slate-900 leading-tight">
                                {game.title}
                            </CardTitle>
                            <CardDescription className="pt-1 text-slate-500 font-medium">
                                {game.titleEn}
                            </CardDescription>
                        </CardHeader>
                        <CardContent>
                            <p className="text-slate-600 text-sm mb-6 leading-relaxed">
                                {game.description}
                            </p>
                            <Link href={game.href}>
                                <Button className="w-full bg-purple-600 hover:bg-purple-700 text-white rounded-lg py-6 group">
                                    <Play className="size-4 mr-2 group-hover:scale-125 transition-transform" />
                                    العب الآن
                                </Button>
                            </Link>
                        </CardContent>
                    </Card>
                ))}

                {/* Placeholder for future games */}
                <Card className="border-dashed border-2 border-slate-200 bg-slate-50/50 flex flex-col items-center justify-center p-8 text-center opacity-70">
                    <div className="bg-slate-200 p-4 rounded-full mb-4">
                        <Rocket className="size-8 text-slate-400" />
                    </div>
                    <h3 className="text-lg font-semibold text-slate-500">مزيد من الألعاب قريباً</h3>
                    <p className="text-sm text-slate-400 mt-2">نحن نعمل على تطوير تحديات جديدة لك ولأنظمة فريقك.</p>
                </Card>
            </div>

            <div className="mt-12 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-8 border border-purple-100">
                <div className="flex flex-col md:flex-row items-center gap-8">
                    <div className="bg-white p-4 rounded-full shadow-md">
                        <Trophy className="size-12 text-yellow-500" />
                    </div>
                    <div>
                        <h2 className="text-xl font-bold text-slate-800 mb-2">لماذا الألعاب التعليمية؟</h2>
                        <p className="text-slate-600 text-sm md:text-base leading-relaxed">
                            تساعد الألعاب على ترسيخ المفاهيم المعقدة من خلال التجربة والمحاكاة. ألعابنا مصممة بناءً على نظريات إدارية مثبتة لتوفير تجربة تعليمية ممتعة وفعالة في آن واحد.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}