import React from 'react';
import Modal from './Modal';
import styles from '../styles/UserModal.module.css';

export default function EditUserModal({ isOpen, onClose, user, roles, loading, onChange, onSave }) {
  return (
    <Modal isOpen={isOpen} onClose={onClose} disabled={loading}>
      <h3 className={styles.title}>Редактировать пользователя</h3>
      <form onSubmit={onSave} className={styles.form}>
        <label className={styles.label}>Email
          <input type="email" value={user.email} onChange={e => onChange({ ...user, email: e.target.value })} required className={styles.input} />
        </label>
        <label className={styles.label}>Имя
          <input type="text" value={user.name} onChange={e => onChange({ ...user, name: e.target.value })} required className={styles.input} />
        </label>
        <label className={styles.label}>Роль
          <select value={user.role_id} onChange={e => onChange({ ...user, role_id: Number(e.target.value) })} required className={styles.input}>
            {roles.length === 0 ? (
              <option value="">Загрузка ролей...</option>
            ) : (
              roles.map(role => (
                <option key={role.id} value={role.id}>{role.name}</option>
              ))
            )}
          </select>
          {process.env.NODE_ENV === 'development' && (
            <div style={{ fontSize: '10px', color: '#666', marginTop: '4px' }}>
              Debug: {roles.length} roles, user.role_id: {user.role_id}
            </div>
          )}
        </label>
        <div className={styles.actions}>
          <button type="submit" disabled={loading} className={styles.saveBtn}>{loading ? 'Сохранение...' : 'Сохранить'}</button>
          <button type="button" onClick={onClose} disabled={loading} className={styles.cancelBtn}>Отмена</button>
        </div>
      </form>
    </Modal>
  );
}