import { useEffect, useState, useMemo } from 'react';
import type { ReactElement } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { ChevronDown, ChevronRight } from 'lucide-react';
import { Modal, FormField, PrimaryButton, SecondaryButton, MultiselectPaginatedSelect } from '@/components/shared';
import type { CreateRoleRequest } from '@/types/role';
import { useAppSelector } from '@/hooks/redux-hooks';

// Utility function to generate code from name
const generateCodeFromName = (name: string): string => {
  return name
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9\s]/g, '') // Remove special characters except spaces
    .replace(/\s+/g, '_') // Replace spaces with underscores
    .replace(/_+/g, '_') // Replace multiple underscores with single underscore
    .replace(/^_|_$/g, ''); // Remove leading/trailing underscores
};

// All available resources
const ALL_RESOURCES = [
  'users',
  // 'tenants',
  'roles',
  'permissions',
  // 'user_roles',
  // 'user_tenants',
  // 'sessions',
  // 'api_keys',
  // 'api_key_permissions',
  'projects',
  'document',
  'audit',
  'security',
  'workflow',
  'training',
  'capa',
  'supplier',
  'reports',
  'notifications',
  'files',
  'settings',
  // 'modules',
  'audit_logs',
  // 'event_logs',
  // 'health_history',
  'qms_connections',
  'qms_sync_jobs',
  'qms_sync_conflicts',
  'qms_entity_mappings',
  'ai',
  'qms',
];

// All available actions
const ALL_ACTIONS = ['create', 'read', 'update', 'delete'];

// Validation schema
const newRoleSchema = z.object({
  name: z.string().min(1, 'Role name is required'),
  code: z
    .string()
    .min(1, 'Code is required')
    .regex(
      /^[a-z]+(_[a-z]+)*$/,
      "Code must be lowercase and use '_' for separation (e.g. abc_def)"
    ),
  description: z.string().min(1, 'Description is required'),
  module_ids: z.array(z.string().uuid()).optional().nullable(),
  permissions: z.array(z.object({
    resource: z.string(),
    action: z.string(),
  })).optional().nullable(),
});

type NewRoleFormData = z.infer<typeof newRoleSchema>;

interface NewRoleModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateRoleRequest) => Promise<void>;
  isLoading?: boolean;
}

export const NewRoleModal = ({
  isOpen,
  onClose,
  onSubmit,
  isLoading = false,
}: NewRoleModalProps): ReactElement | null => {
  const permissions = useAppSelector((state) => state.auth.permissions);
  const roles = useAppSelector((state) => state.auth.roles);
  const tenant = useAppSelector((state) => state.auth.tenant);
  const isSuperAdmin = roles.includes('super_admin');
  const [selectedModules, setSelectedModules] = useState<string[]>([]);
  const [selectedPermissions, setSelectedPermissions] = useState<Array<{ resource: string; action: string }>>([]);
  const [expandedResources, setExpandedResources] = useState<Set<string>>(new Set());

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    reset,
    setError,
    clearErrors,
    formState: { errors },
  } = useForm<NewRoleFormData>({
    resolver: zodResolver(newRoleSchema),
    defaultValues: {
      code: undefined,
      module_ids: [],
      permissions: [],
    },
  });

  const nameValue = watch('name');

  // Auto-generate code from name
  useEffect(() => {
    if (nameValue) {
      const generatedCode = generateCodeFromName(nameValue);
      setValue('code', generatedCode, { shouldValidate: true });
    }
  }, [nameValue, setValue]);

  // Reset form when modal closes
  useEffect(() => {
    if (!isOpen) {
      reset({
        name: '',
        code: undefined,
        description: '',
        module_ids: [],
        permissions: [],
      });
      setSelectedModules([]);
      setSelectedPermissions([]);
      clearErrors();
    }
  }, [isOpen, reset, clearErrors]);

  // Load modules from tenant assignedModules
  const loadModules = async (page: number, limit: number) => {
    const assignedModules = tenant?.assignedModules || [];
    const startIndex = (page - 1) * limit;
    const endIndex = startIndex + limit;
    const paginatedModules = assignedModules.slice(startIndex, endIndex);
    
    return {
      options: paginatedModules.map((module) => ({
        value: module.id,
        label: module.name,
      })),
      pagination: {
        page,
        limit,
        total: assignedModules.length,
        totalPages: Math.ceil(assignedModules.length / limit),
        hasMore: endIndex < assignedModules.length,
      },
    };
  };

  // Build available resources and actions based on user permissions
  const availableResourcesAndActions = useMemo(() => {
    const resourceMap = new Map<string, Set<string>>();

    permissions.forEach((perm) => {
      const { resource, action } = perm;

      if (resource === '*') {
        // If resource is *, show all resources
        ALL_RESOURCES.forEach((res) => {
          if (!resourceMap.has(res)) {
            resourceMap.set(res, new Set());
          }
          const actions = resourceMap.get(res)!;
          if (action === '*') {
            // If action is also *, add all actions
            ALL_ACTIONS.forEach((act) => actions.add(act));
          } else {
            actions.add(action);
          }
        });
      } else {
        // Specific resource
        if (!resourceMap.has(resource)) {
          resourceMap.set(resource, new Set());
        }
        const actions = resourceMap.get(resource)!;
        if (action === '*') {
          // If action is *, add all actions for this resource
          ALL_ACTIONS.forEach((act) => actions.add(act));
        } else {
          actions.add(action);
        }
      }
    });

    return resourceMap;
  }, [permissions]);

  // Check if a resource has any selected actions
  const hasSelectedActions = (resource: string, actions: Set<string>): boolean => {
    return Array.from(actions).some((action) => {
      return selectedPermissions.some((p) => {
        // Check for exact match
        if (p.resource === resource && p.action === action) return true;
        // Check for wildcard resource with exact action
        if (p.resource === '*' && p.action === action) return true;
        // Check for exact resource with wildcard action
        if (p.resource === resource && p.action === '*') return true;
        // Check for wildcard resource with wildcard action
        if (p.resource === '*' && p.action === '*') return true;
        return false;
      });
    });
  };

  // Toggle resource expansion
  const toggleResource = (resource: string) => {
    setExpandedResources((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(resource)) {
        newSet.delete(resource);
      } else {
        newSet.add(resource);
      }
      return newSet;
    });
  };

  // Handle permission checkbox change
  const handlePermissionChange = (resource: string, action: string, checked: boolean) => {
    setSelectedPermissions((prev) => {
      const newPerms = [...prev];
      if (checked) {
        // Add permission if not already exists
        if (!newPerms.some((p) => p.resource === resource && p.action === action)) {
          newPerms.push({ resource, action });
        }
      } else {
        // Remove permission
        return newPerms.filter((p) => !(p.resource === resource && p.action === action));
      }
      return newPerms;
    });
  };

  // Update form value when permissions change
  useEffect(() => {
    setValue('permissions', selectedPermissions.length > 0 ? selectedPermissions : []);
  }, [selectedPermissions, setValue]);

  const handleFormSubmit = async (data: NewRoleFormData): Promise<void> => {
    clearErrors();
    try {
      const submitData = {
        ...data,
        // Only include module_ids if user is not super_admin
        module_ids: isSuperAdmin ? undefined : (selectedModules.length > 0 ? selectedModules : undefined),
        permissions: selectedPermissions.length > 0 ? selectedPermissions : undefined,
      };
      await onSubmit(submitData as CreateRoleRequest);
    } catch (error: any) {
      // Handle validation errors from API
      if (error?.response?.data?.details && Array.isArray(error.response.data.details)) {
        const validationErrors = error.response.data.details;
        validationErrors.forEach((detail: { path: string; message: string }) => {
          if (
            detail.path === 'name' ||
            detail.path === 'code' ||
            detail.path === 'description' ||
            detail.path === 'module_ids' ||
            detail.path === 'permissions'
          ) {
            setError(detail.path as keyof NewRoleFormData, {
              type: 'server',
              message: detail.message,
            });
          }
        });
      } else {
        // Handle general errors
        const errorObj = error?.response?.data?.error;
        const errorMessage =
          (typeof errorObj === 'object' && errorObj !== null && 'message' in errorObj ? errorObj.message : null) ||
          (typeof errorObj === 'string' ? errorObj : null) ||
          error?.response?.data?.message ||
          error?.message ||
          'Failed to create role. Please try again.';
        setError('root', {
          type: 'server',
          message: typeof errorMessage === 'string' ? errorMessage : 'Failed to create role. Please try again.',
        });
      }
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Create Role"
      description="Define a new role by setting permissions and role type."
      maxWidth="lg"
      footer={
        <>
          <SecondaryButton
            type="button"
            onClick={onClose}
            disabled={isLoading}
            className="px-4 py-2.5 text-sm"
          >
            Cancel
          </SecondaryButton>
          <PrimaryButton
            type="button"
            onClick={handleSubmit(handleFormSubmit)}
            disabled={isLoading}
            size="default"
            className="px-4 py-2.5 text-sm"
          >
            {isLoading ? 'Creating...' : 'Create Role'}
          </PrimaryButton>
        </>
      }
    >
      <form onSubmit={handleSubmit(handleFormSubmit)} className="p-5 flex flex-col gap-0 max-h-[70vh] overflow-y-auto">
        {/* General Error Display */}
        {errors.root && (
          <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
            <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
          </div>
        )}

        {/* Role Name and Role Code Row */}
        <div className="grid grid-cols-2 gap-5 pb-4">
          <FormField
            label="Role Name"
            required
            placeholder="Enter Text Here"
            error={errors.name?.message}
            {...register('name')}
          />

          <FormField
            label="Role Code"
            required
            placeholder="Auto-generated from name"
            error={errors.code?.message}
            {...register('code')}
            disabled
            className="bg-[#f3f4f6] cursor-not-allowed"
          />
        </div>

        {/* Description */}
        <FormField
          label="Description"
          required
          placeholder="Enter Text Here"
          error={errors.description?.message}
          {...register('description')}
        />

        {/* Module Selection - Only show if user is not super_admin */}
        {!isSuperAdmin && (
          <MultiselectPaginatedSelect
            label="Modules"
            placeholder="Select modules"
            value={selectedModules}
            onValueChange={(values) => {
              setSelectedModules(values);
              setValue('module_ids', values.length > 0 ? values : []);
            }}
            onLoadOptions={loadModules}
            error={errors.module_ids?.message}
          />
        )}

        {/* Permissions Section */}
        <div className="pb-4">
          <label className="flex items-center gap-1.5 text-[13px] font-medium text-[#0e1b2a] mb-3">
            <span>Permissions</span>
          </label>
          {errors.permissions && (
            <p className="text-sm text-[#ef4444] mb-2">{errors.permissions.message}</p>
          )}
          <div className="border border-[rgba(0,0,0,0.08)] rounded-md p-4 max-h-96 overflow-y-auto">
            {Array.from(availableResourcesAndActions.entries()).length === 0 ? (
              <p className="text-sm text-[#6b7280]">No permissions available</p>
            ) : (
              <div className="space-y-2">
                {Array.from(availableResourcesAndActions.entries()).map(([resource, actions]) => {
                  const isExpanded = expandedResources.has(resource);
                  const hasSelected = hasSelectedActions(resource, actions);
                  return (
                    <div
                      key={resource}
                      className={`border border-[rgba(0,0,0,0.08)] rounded-md overflow-hidden transition-colors ${
                        hasSelected ? 'bg-[rgba(17,40,104,0.05)]' : 'bg-white'
                      }`}
                    >
                      <button
                        type="button"
                        onClick={() => toggleResource(resource)}
                        className="w-full flex items-center justify-between p-3 hover:bg-[rgba(0,0,0,0.02)] transition-colors"
                      >
                        <div className="flex items-center gap-2">
                          {isExpanded ? (
                            <ChevronDown className="w-4 h-4 text-[#0e1b2a]" />
                          ) : (
                            <ChevronRight className="w-4 h-4 text-[#0e1b2a]" />
                          )}
                          <span
                            className={`font-medium text-sm capitalize ${
                              hasSelected ? 'text-[#112868]' : 'text-[#0e1b2a]'
                            }`}
                          >
                            {resource.replace(/_/g, ' ')}
                          </span>
                          {hasSelected && (
                            <span className="text-xs text-[#112868] bg-[rgba(17,40,104,0.1)] px-2 py-0.5 rounded">
                              Selected
                            </span>
                          )}
                        </div>
                      </button>
                      {isExpanded && (
                        <div className="px-3 pb-3 pt-2 border-t border-[rgba(0,0,0,0.05)]">
                          <div className="flex flex-wrap gap-4">
                            {Array.from(actions).map((action) => {
                              const isChecked = selectedPermissions.some((p) => {
                                // Check for exact match
                                if (p.resource === resource && p.action === action) return true;
                                // Check for wildcard resource with exact action
                                if (p.resource === '*' && p.action === action) return true;
                                // Check for exact resource with wildcard action
                                if (p.resource === resource && p.action === '*') return true;
                                // Check for wildcard resource with wildcard action
                                if (p.resource === '*' && p.action === '*') return true;
                                return false;
                              });
                              return (
                                <label
                                  key={`${resource}-${action}`}
                                  className="flex items-center gap-2 cursor-pointer"
                                >
                                  <input
                                    type="checkbox"
                                    checked={isChecked}
                                    onChange={(e) => handlePermissionChange(resource, action, e.target.checked)}
                                    className="w-4 h-4 text-[#112868] border-[rgba(0,0,0,0.2)] rounded focus:ring-[#112868]/20"
                                  />
                                  <span className="text-sm text-[#0e1b2a] capitalize">{action}</span>
                                </label>
                              );
                            })}
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </form>
    </Modal>
  );
};