import React, { useState } from 'react';
import Modal from 'react-modal';
import { users, addUser } from '../mockData';

const LoginModal = ({ isOpen, onClose, onLogin }) => {
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const handleLogin = () => {
    const user = users.find(u => u.phone === phone && u.password === password);
    if (user) {
      setError('');
      onLogin(user);
      onClose();
    } else {
      setError('Неверный номер телефона или пароль');
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      onRequestClose={onClose}
      style={{
        overlay: { backgroundColor: 'rgba(0, 0, 0, 0.75)' },
        content: {
          top: '50%',
          left: '50%',
          right: 'auto',
          bottom: 'auto',
          marginRight: '-50%',
          transform: 'translate(-50%, -50%)',
          padding: '20px',
          border: 'none',
          borderRadius: '10px',
          boxShadow: '0px 0px 10px rgba(0,0,0,0.5)',
          backgroundColor: '#f8f8f8',
          fontFamily: 'Arial, sans-serif',
        },
      }}
    >
      <h2 style={{ color: '#333', textAlign: 'center' }}>Вход</h2>
      {error && <p style={{ color: 'red', textAlign: 'center' }}>{error}</p>}
      <div style={{ marginBottom: '15px' }}>
        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Номер телефона:</label>
        <input
          type="tel"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          style={{
            width: '100%',
            padding: '8px',
            borderRadius: '5px',
            border: '1px solid #ddd',
            boxSizing: 'border-box',
          }}
        />
      </div>
      <div style={{ marginBottom: '15px' }}>
        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Пароль:</label>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <input
            type={showPassword ? 'text' : 'password'}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            style={{
              width: '100%',
              padding: '8px',
              borderRadius: '5px',
              border: '1px solid #ddd',
              boxSizing: 'border-box',
            }}
          />
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            style={{
              marginLeft: '10px',
              padding: '8px 12px',
              border: 'none',
              borderRadius: '5px',
              backgroundColor: '#f0f0f0',
              cursor: 'pointer',
            }}
          >
            {showPassword ? 'Скрыть' : 'Показать'}
          </button>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <button
          onClick={handleLogin}
          style={{
            backgroundColor: '#5cb85c',
            color: 'white',
            padding: '10px 15px',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
          }}
        >
          Войти
        </button>
        <button
          onClick={onClose}
          style={{
            backgroundColor: '#d9534f',
            color: 'white',
            padding: '10px 15px',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
          }}
        >
          Отмена
        </button>
      </div>
    </Modal>
  );
};

export default LoginModal;
