import { useParams, useNavigate } from 'react-router-dom';
import { ArrowRight, Shield, Users, Key, Edit, Calendar, FileText } from 'lucide-react';
import { Button } from '../../../components/ui/Button';
import { useRole } from '../core/_hooks';
import { PermissionWrapper } from '../../../components/common/PermissionWrapper';
import { PageContainer, PageTitle, SectionTitle, SectionSubtitle, BodyText } from '../../../components/ui/Typography';
import { formatDate } from '../../../utils/formatters';

const RoleDetailPage = () => {
    const navigate = useNavigate();
    const { id = "" } = useParams();

    const { data: role, isLoading, error } = useRole(id);

    if (isLoading) {
        return (
            <PageContainer>
                <div className="space-y-6 animate-pulse">
                    <div className="flex items-center justify-between">
                        <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-48"></div>
                        <div className="flex gap-3">
                            <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-32"></div>
                            <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
                        </div>
                    </div>
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <div className="lg:col-span-2">
                            <div className="card p-6">
                                <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-32 mb-6"></div>
                                <div className="space-y-6">
                                    <div>
                                        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2"></div>
                                        <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
                                    </div>
                                    <div>
                                        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2"></div>
                                        <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="space-y-6">
                            {[...Array(2)].map((_, i) => (
                                <div key={i} className="card p-6">
                                    <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-4"></div>
                                    <div className="space-y-3">
                                        {[...Array(2)].map((_, j) => (
                                            <div key={j} className="h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
                                        ))}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </PageContainer>
        );
    }
    if (error) return <div className="text-red-600">خطا در بارگذاری اطلاعات نقش</div>;
    if (!role) return <div>نقش یافت نشد</div>;

    return (
        <PageContainer>
            <div className="mb-6">
                <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-4">
                        <Button
                            variant="secondary"
                            onClick={() => navigate('/roles')}
                            className="flex items-center gap-2"
                        >
                            <ArrowRight className="h-4 w-4" />
                            بازگشت
                        </Button>
                        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                            جزئیات نقش
                        </h1>
                    </div>

                    <div className="flex gap-3">
                        <Button
                            variant="primary"
                            onClick={() => navigate(`/roles/${id}/permissions`)}
                            className="flex items-center gap-2"
                        >
                            <Users className="h-4 w-4" />
                            مدیریت دسترسی‌ها
                        </Button>
                        <Button
                            variant="secondary"
                            onClick={() => navigate(`/roles/${id}/edit`)}
                            className="flex items-center gap-2"
                        >
                            <Edit className="h-4 w-4" />
                            ویرایش
                        </Button>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* اطلاعات اصلی */}
                <div className="lg:col-span-2">
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">
                            اطلاعات نقش
                        </h2>

                        <div className="space-y-6">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    نام نقش
                                </label>
                                <div className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                    <p className="text-gray-900 dark:text-gray-100 font-medium">
                                        {role.title}
                                    </p>
                                </div>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    توضیحات
                                </label>
                                <div className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                    <p className="text-gray-900 dark:text-gray-100">
                                        {role.description}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* اطلاعات جانبی */}
                <div className="space-y-6">
                    {/* آمار */}
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            آمار
                        </h3>
                        <div className="space-y-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <Users className="h-4 w-4 text-blue-500" />
                                    <span className="text-sm text-gray-600 dark:text-gray-400">
                                        تعداد دسترسی‌ها
                                    </span>
                                </div>
                                <span className="font-semibold text-gray-900 dark:text-gray-100">
                                    {role.permissions?.length || 0}
                                </span>
                            </div>
                        </div>
                    </div>

                    {/* اطلاعات زمانی */}
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            اطلاعات زمانی
                        </h3>
                        <div className="space-y-4">
                            <div>
                                <div className="flex items-center gap-2 mb-1">
                                    <Calendar className="h-4 w-4 text-green-500" />
                                    <span className="text-sm text-gray-600 dark:text-gray-400">
                                        تاریخ ایجاد
                                    </span>
                                </div>
                                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                    {formatDate(role.created_at)}
                                </p>
                            </div>

                            <div>
                                <div className="flex items-center gap-2 mb-1">
                                    <FileText className="h-4 w-4 text-orange-500" />
                                    <span className="text-sm text-gray-600 dark:text-gray-400">
                                        آخرین به‌روزرسانی
                                    </span>
                                </div>
                                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                    {formatDate(role.updated_at)}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* لیست دسترسی‌ها */}
            {role.permissions && role.permissions.length > 0 && (
                <div className="mt-6">
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            دسترسی‌های تخصیص یافته
                        </h3>
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            {role.permissions.map((permission) => (
                                <div
                                    key={permission.id}
                                    className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg"
                                >
                                    <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-1">
                                        {permission.title}
                                    </h4>
                                    <p className="text-sm text-blue-700 dark:text-blue-300">
                                        {permission.description}
                                    </p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            )}
        </PageContainer>
    );
};

export default RoleDetailPage; 