import { useParams, useNavigate } from 'react-router-dom';
import { ArrowRight, Shield, Users, Key, Edit, Calendar, FileText, User } from 'lucide-react';
import { Button } from '../../../components/ui/Button';
import { useAdminUser } 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 AdminUserDetailPage = () => {
    const navigate = useNavigate();
    const { id = "" } = useParams();

    const { data: user, isLoading, error } = useAdminUser(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="h-10 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
                    </div>
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <div className="lg:col-span-2 space-y-6">
                            {[...Array(3)].map((_, i) => (
                                <div key={i} className="card p-6">
                                    <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-32 mb-4"></div>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        {[...Array(4)].map((_, j) => (
                                            <div key={j}>
                                                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2"></div>
                                                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32"></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(3)].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 (!user) return <div>کاربر یافت نشد</div>;

    const getStatusBadge = (status: string) => {
        const isActive = status === 'active';
        return (
            <span className={`px-3 py-1 rounded-full text-sm font-medium ${isActive
                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                    : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                }`}>
                {isActive ? 'فعال' : 'غیرفعال'}
            </span>
        );
    };

    return (
        <PageContainer>
            <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                    <button
                        onClick={() => navigate('/admin-users')}
                        className="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors"
                    >
                        <ArrowRight className="h-5 w-5" />
                    </button>
                    <div>
                        <PageTitle>جزئیات کاربر ادمین</PageTitle>
                        <p className="text-gray-600 dark:text-gray-400">نمایش اطلاعات کامل کاربر ادمین</p>
                    </div>
                </div>

                <div className="flex gap-3">
                    <PermissionWrapper permission={23}>
                        <Button
                            onClick={() => navigate(`/admin-users/${id}/edit`)}
                            className="flex items-center gap-2"
                        >
                            <Edit className="h-4 w-4" />
                            ویرایش
                        </Button>
                    </PermissionWrapper>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="lg:col-span-2 space-y-6">
                    <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                        <SectionTitle className="flex items-center gap-2 mb-4">
                            <User className="h-5 w-5" />
                            اطلاعات اصلی
                        </SectionTitle>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    نام
                                </label>
                                <BodyText>{user.first_name || 'تعریف نشده'}</BodyText>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    نام خانوادگی
                                </label>
                                <BodyText>{user.last_name || 'تعریف نشده'}</BodyText>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    نام کاربری
                                </label>
                                <BodyText>{user.username}</BodyText>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    وضعیت
                                </label>
                                {getStatusBadge(user.status)}
                            </div>
                        </div>
                    </div>

                    {user.roles && user.roles.length > 0 && (
                        <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                            <SectionTitle className="flex items-center gap-2 mb-4">
                                <Shield className="h-5 w-5" />
                                نقش‌ها
                            </SectionTitle>
                            <div className="flex flex-wrap gap-2">
                                {user.roles.map((role: any) => (
                                    <span
                                        key={role.id}
                                        className="px-3 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full text-sm font-medium"
                                    >
                                        {role.title}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}

                    {user.permissions && user.permissions.length > 0 && (
                        <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                            <SectionTitle className="flex items-center gap-2 mb-4">
                                <Key className="h-5 w-5" />
                                دسترسی‌های مستقیم
                            </SectionTitle>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                {user.permissions.map((permission: any) => (
                                    <div
                                        key={permission.id}
                                        className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
                                    >
                                        <div className="font-medium text-gray-900 dark:text-gray-100">
                                            {permission.title}
                                        </div>
                                        <div className="text-sm text-gray-600 dark:text-gray-400">
                                            {permission.description}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>

                <div className="space-y-6">
                    <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                        <SectionTitle className="flex items-center gap-2 mb-4">
                            <Calendar className="h-5 w-5" />
                            اطلاعات زمانی
                        </SectionTitle>

                        <div className="space-y-4">
                            <div>
                                <SectionSubtitle className="text-sm text-gray-600 dark:text-gray-400 mb-1">
                                    تاریخ ایجاد
                                </SectionSubtitle>
                                <BodyText>
                                    {user.created_at ? formatDate(user.created_at) : 'تعریف نشده'}
                                </BodyText>
                            </div>

                            <div>
                                <SectionSubtitle className="text-sm text-gray-600 dark:text-gray-400 mb-1">
                                    آخرین بروزرسانی
                                </SectionSubtitle>
                                <BodyText>
                                    {user.updated_at ? formatDate(user.updated_at) : 'تعریف نشده'}
                                </BodyText>
                            </div>
                        </div>
                    </div>

                    <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                        <SectionTitle className="flex items-center gap-2 mb-4">
                            <FileText className="h-5 w-5" />
                            آمار سریع
                        </SectionTitle>

                        <div className="space-y-3">
                            <div className="flex justify-between items-center">
                                <span className="text-sm text-gray-600 dark:text-gray-400">تعداد نقش‌ها</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">
                                    {user.roles ? user.roles.length : 0}
                                </span>
                            </div>
                            <div className="flex justify-between items-center">
                                <span className="text-sm text-gray-600 dark:text-gray-400">تعداد دسترسی‌ها</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">
                                    {user.permissions ? user.permissions.length : 0}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </PageContainer>
    );
};

export default AdminUserDetailPage; 