import React, { useState } from 'react';
import { Plus, Users, Shield, Eye } from 'lucide-react';
import { StatusModal } from '../../ui/StatusModal/StatusModal';
import { TENANT_ROLES } from '../../../types/roles';
import { statusColors } from '../../../styles/colors';

interface AddTeamMemberModalProps {
  isOpen: boolean;
  onClose: () => void;
  onAddMember?: (userData: { userId: string; role: string }) => Promise<void>;
  availableUsers: Array<{ id: string; full_name: string; email: string }>;
}

/**
 * AddTeamMemberModal - Modal for adding a new member to the team
 * Comprehensive form for adding new users to the bakery team
 */
export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
  isOpen,
  onClose,
  onAddMember,
  availableUsers
}) => {
  const [formData, setFormData] = useState({
    userId: '',
    role: TENANT_ROLES.MEMBER
  });

  const [loading, setLoading] = useState(false);
  const [mode, setMode] = useState<'view' | 'edit'>('edit');

  const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: string | number | boolean) => {
    // Map field positions to form data fields
    const fieldMappings = [
      // Basic Information section
      ['userId', 'role']
    ];

    const fieldName = fieldMappings[sectionIndex]?.[fieldIndex] as keyof typeof formData;
    if (fieldName) {
      setFormData(prev => ({
        ...prev,
        [fieldName]: value
      }));
    }
  };

  const handleSave = async () => {
    // Validation
    if (!formData.userId) {
      alert('Por favor selecciona un usuario');
      return;
    }

    if (!formData.role) {
      alert('Por favor selecciona un rol');
      return;
    }

    setLoading(true);
    try {
      if (onAddMember) {
        await onAddMember({
          userId: formData.userId,
          role: formData.role
        });
      }

      // Reset form
      setFormData({
        userId: '',
        role: TENANT_ROLES.MEMBER
      });

      onClose();
    } catch (error) {
      console.error('Error adding team member:', error);
      alert('Error al agregar el miembro del equipo. Por favor, intenta de nuevo.');
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    // Reset form to initial values
    setFormData({
      userId: '',
      role: TENANT_ROLES.MEMBER
    });
    onClose();
  };

  const statusConfig = {
    color: statusColors.inProgress.primary,
    text: 'Nuevo Miembro',
    icon: Plus,
    isCritical: false,
    isHighlight: true
  };

  const roleOptions = [
    { label: 'Miembro - Acceso estándar', value: TENANT_ROLES.MEMBER },
    { label: 'Administrador - Gestión de equipo', value: TENANT_ROLES.ADMIN },
    { label: 'Observador - Solo lectura', value: TENANT_ROLES.VIEWER }
  ];

  const userOptions = availableUsers.map(user => ({
    label: `${user.full_name} (${user.email})`,
    value: user.id
  }));

  const getRoleDescription = (role: string) => {
    switch (role) {
      case TENANT_ROLES.ADMIN:
        return 'Los administradores pueden gestionar miembros del equipo y configuraciones.';
      case TENANT_ROLES.MEMBER:
        return 'Los miembros tienen acceso completo para trabajar con datos y funcionalidades.';
      case TENANT_ROLES.VIEWER:
        return 'Los observadores solo pueden ver datos, sin realizar cambios.';
      default:
        return '';
    }
  };

  const sections = [
    {
      title: 'Información del Miembro',
      icon: Users,
      fields: [
        {
          label: 'Usuario',
          value: formData.userId,
          type: 'select' as const,
          editable: true,
          required: true,
          options: userOptions,
          placeholder: 'Seleccionar usuario...'
        },
        {
          label: 'Rol',
          value: formData.role,
          type: 'select' as const,
          editable: true,
          required: true,
          options: roleOptions
        },
        {
          label: 'Descripción del Rol',
          value: getRoleDescription(formData.role),
          type: 'text' as const,
          editable: false
        }
      ]
    }
  ];

  return (
    <StatusModal
      isOpen={isOpen}
      onClose={onClose}
      mode={mode}
      title="Agregar Miembro al Equipo"
      subtitle="Agregar un nuevo miembro al equipo de la panadería"
      statusIndicator={statusConfig}
      sections={sections}
      size="lg"
      loading={loading}
      showDefaultActions={true}
      onSave={handleSave}
      onCancel={handleCancel}
      onFieldChange={handleFieldChange}
    />
  );
};

export default AddTeamMemberModal;