import React, { useEffect, useState } from 'react';
import { Users, Shield, Plus, User as UserIcon, Network } from 'lucide-react';
import { COMMON_FIELDS } from '../core/constants';
import { useUsers, useProfiles, useUpdateUser, useDeleteUser, useCreateProfile } from '../features/users/userQueries';
import { useRoles } from '../features/security/securityQueries';
import { UserList } from '../features/users/components/UserList';
import { UserHierarchy } from '../features/users/components/UserHierarchy';
import { ProfileList } from '../features/users/components/ProfileList';
import { PermissionEditorModal } from '../features/security/components/PermissionEditorModal';
import { UserPermissionSetsSection } from '../features/users/components/UserPermissionSetsSection';
import { EffectivePermissionsModal } from '../features/permission-analyzer/components/EffectivePermissionsModal';
import { UserEditorModal } from '../features/users/components/UserEditorModal';
import { ConfirmationModal } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { ProfileFormModal } from '../features/admin/components/ProfileFormModal';
import { useErrorToast } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { Logger } from '../core/services/Logger';
import { RecordListSkeleton } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { EmptyState } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { useSystemPermission } from '@nexuscrm/host-sdk';
import type { User, Profile } from '../types';

export const UserManager: React.FC = () => {
    const errorToast = useErrorToast();
    const [activeTab, setActiveTab] = useState<'users' | 'profiles' | 'hierarchy'>('users');
    const canManageProfilesPermSets = useSystemPermission('ManageProfilesPermSets');

    // React Query Hooks
    const { data: users = [], isLoading: usersLoading, error: usersError, refetch: refetchUsers } = useUsers();
    const { data: profiles = [], isLoading: profilesLoading, error: profilesError, refetch: refetchProfiles } = useProfiles();
    const { data: roles = [] } = useRoles();

    const updateUserMutation = useUpdateUser();
    const deleteUserMutation = useDeleteUser();
    const createProfileMutation = useCreateProfile();

    // Modal State
    const [editingPermissions, setEditingPermissions] = useState<Profile | null>(null);
    const [creatingUser, setCreatingUser] = useState(false);
    const [editingUser, setEditingUser] = useState<User | null>(null);
    const [managingPermissionsUser, setManagingPermissionsUser] = useState<User | null>(null);
    const [viewingEffectivePermissionsUser, setViewingEffectivePermissionsUser] = useState<User | null>(null);
    const [deletingUser, setDeletingUser] = useState<User | null>(null);

    const [creatingProfile, setCreatingProfile] = useState(false);

    const loading = activeTab === 'profiles' ? profilesLoading : (usersLoading || profilesLoading);
    const error = activeTab === 'profiles' ? profilesError : (usersError || profilesError);

    useEffect(() => {
        if (!canManageProfilesPermSets && activeTab === 'profiles') {
            setActiveTab('users');
        }
    }, [activeTab, canManageProfilesPermSets]);

    const handleCreateProfile = async (formData: { Name: string; Description: string }) => {
        try {
            await createProfileMutation.mutateAsync(formData);
            setCreatingProfile(false);
        } catch (err: unknown) {
            Logger.error('[UserManager] Failed to create profile', {}, err);
            errorToast('Failed to create profile');
        }
    };

    const handleToggleStatus = async (user: User) => {
        try {
            await updateUserMutation.mutateAsync({
                id: user[COMMON_FIELDS.ID] as string,
                data: { IsActive: !user.IsActive }
            });
        } catch (err: unknown) {
            Logger.error('[UserManager] Failed to toggle user status', {}, err);
            errorToast("Failed to update user status");
        }
    };

    const handleDeleteUser = async () => {
        if (!deletingUser) return;
        try {
            await deleteUserMutation.mutateAsync(deletingUser[COMMON_FIELDS.ID] as string);
        } catch (err: unknown) {
            Logger.error('[UserManager] Failed to delete user', {}, err);
            errorToast("Failed to delete user");
        } finally {
            setDeletingUser(null);
        }
    };

    const handleRefetch = () => {
        if (activeTab === 'users') {
            refetchUsers();
        }
        refetchProfiles();
    };

    return (
        <div className="max-w-7xl mx-auto p-6">
            <div className="flex items-center justify-between mb-8">
                <div className="flex items-center gap-4">
                    <div className="p-3 bg-purple-100 rounded-lg">
                        <Users className="text-purple-600" size={32} />
                    </div>
                    <div>
                        <h1 className="text-2xl font-bold text-slate-800">Users & Profiles</h1>
                        <p className="text-slate-500">Manage user access and security settings.</p>
                    </div>
                </div>
                {activeTab !== 'hierarchy' && (
                    <button
                        onClick={() => {
                            if (activeTab === 'users') {
                                setCreatingUser(true);
                            } else {
                                setCreatingProfile(true);
                            }
                        }}
                        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium shadow-sm transition-colors"
                    >
                        <Plus size={18} />
                        {activeTab === 'users' ? 'Add User' : 'Create Profile'}
                    </button>
                )}
            </div>

            <div className="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
                <div className="border-b border-slate-200">
                    <nav className="flex -mb-px">
                        <button
                            onClick={() => setActiveTab('users')}
                            className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'users'
                                ? 'border-blue-500 text-blue-600'
                                : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
                                }`}
                        >
                            <UserIcon size={18} />
                            Users
                        </button>
                        <button
                            onClick={() => setActiveTab('hierarchy')}
                            className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'hierarchy'
                                ? 'border-blue-500 text-blue-600'
                                : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
                                }`}
                        >
                            <Network size={18} />
                            Hierarchy
                        </button>
                        {canManageProfilesPermSets && (
                            <button
                                onClick={() => setActiveTab('profiles')}
                                className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'profiles'
                                    ? 'border-blue-500 text-blue-600'
                                    : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
                                    }`}
                            >
                                <Shield size={18} />
                                Profiles
                            </button>
                        )}
                    </nav>
                </div>

                <div className="p-6">
                    {loading ? (
                        <RecordListSkeleton rows={5} columns={6} />
                    ) : error ? (
                        <EmptyState
                            variant="error"
                            title="Error Loading Data"
                            description="Failed to load data. Please try again."
                            action={{ label: 'Retry', onClick: handleRefetch }}
                        />
                    ) : activeTab === 'users' ? (
                        <UserList
                            users={users}
                            profiles={profiles}
                            roles={roles}
                            onEdit={setEditingUser}
                            onDelete={setDeletingUser}
                            onManagePermissions={setManagingPermissionsUser}
                            onViewEffective={setViewingEffectivePermissionsUser}
                            onToggleStatus={handleToggleStatus}
                            showPermissionActions={canManageProfilesPermSets}
                        />
                    ) : activeTab === 'hierarchy' ? (
                        <UserHierarchy users={users} profiles={profiles} />
                    ) : (
                        <ProfileList
                            profiles={profiles}
                            onEditPermissions={setEditingPermissions}
                        />
                    )}
                </div>
            </div>

            {/* Modals */}
            {canManageProfilesPermSets && editingPermissions && (
                <PermissionEditorModal
                    entity={{ id: editingPermissions[COMMON_FIELDS.ID] as string, name: editingPermissions.Name, type: 'profile' }}
                    onClose={() => setEditingPermissions(null)}
                    onSave={() => {
                        setEditingPermissions(null);
                        refetchProfiles(); // Refresh to catch any side effects
                    }}
                />
            )}

            {canManageProfilesPermSets && managingPermissionsUser && (
                <UserPermissionSetsSection
                    userId={managingPermissionsUser[COMMON_FIELDS.ID] as string}
                    userName={managingPermissionsUser.Name}
                    isOpen={!!managingPermissionsUser}
                    onClose={() => setManagingPermissionsUser(null)}
                />
            )}

            {canManageProfilesPermSets && viewingEffectivePermissionsUser && (
                <EffectivePermissionsModal
                    user={{ id: viewingEffectivePermissionsUser.Id, name: viewingEffectivePermissionsUser.Name }}
                    onClose={() => setViewingEffectivePermissionsUser(null)}
                />
            )}

            {creatingUser && (
                <UserEditorModal
                    onClose={() => setCreatingUser(false)}
                    onSave={() => {
                        setCreatingUser(false);
                        refetchUsers();
                    }}
                />
            )}
            {editingUser && (
                <UserEditorModal
                    user={editingUser}
                    onClose={() => setEditingUser(null)}
                    onSave={() => {
                        setEditingUser(null);
                        refetchUsers();
                    }}
                    onManagePermissions={canManageProfilesPermSets ? () => { setEditingUser(null); setManagingPermissionsUser(editingUser); } : undefined}
                />
            )}
            <ConfirmationModal
                isOpen={!!deletingUser}
                onClose={() => setDeletingUser(null)}
                onConfirm={handleDeleteUser}
                title="Delete User"
                message={`Are you sure you want to delete user ${deletingUser?.Name}? This action cannot be undone.`}
                confirmLabel="Delete"
                variant="danger"
            />

            {/* Profile Creation Modal */}
            <ProfileFormModal
                isOpen={canManageProfilesPermSets && creatingProfile}
                onClose={() => setCreatingProfile(false)}
                onSave={handleCreateProfile}
                submitting={createProfileMutation.isPending}
            />
        </div>
    );
};