import React, { useState } from 'react';
import { useAuth } from '../context/AuthContext';
import { User, Lock, ArrowRight } from 'lucide-react';

export default function Login() {
  const [email, setEmail] = useState('patricia_admin@gmail.com');
  const [password, setPassword] = useState('patricia2026@mtz');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const { login } = useAuth();

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    setTimeout(() => {
      const res = login(email.trim(), password);
      if (!res.success) {
        setError(res.message);
        setLoading(false);
      }
    }, 400);
  };

  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#e9eef4', // Exact light blueish background from screenshot 2
      padding: '1.5rem',
      fontFamily: 'system-ui, -apple-system, sans-serif'
    }}>
      <div style={{
        width: '100%',
        maxWidth: '430px',
        background: '#ffffff',
        borderRadius: '10px',
        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.08)',
        padding: '3rem 2.5rem 2rem',
        textAlign: 'center'
      }}>
        
        {/* Title matching exact screenshot */}
        <h1 style={{
          fontSize: '2rem',
          fontWeight: '800',
          color: '#2bb3e5', // Exact bright blue color from screenshot
          marginBottom: '0.1rem',
          letterSpacing: '-0.5px'
        }}>
          Mi Empresa
        </h1>
        <p style={{
          fontSize: '0.75rem',
          fontWeight: '700',
          color: '#8da2b5',
          textTransform: 'uppercase',
          letterSpacing: '0.5px',
          marginBottom: '2.5rem'
        }}>
          ACCESO AL SISTEMA
        </p>

        {error && (
          <div style={{
            padding: '0.75rem',
            borderRadius: '6px',
            background: '#fde8e8',
            color: '#e53e3e',
            fontSize: '0.85rem',
            marginBottom: '1.5rem',
            textAlign: 'left'
          }}>
            {error}
          </div>
        )}

        <form onSubmit={handleSubmit} style={{ textAlign: 'left', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
          <div>
            <label style={{ display: 'block', fontSize: '0.75rem', fontWeight: '800', color: '#55687d', marginBottom: '0.5rem', textTransform: 'uppercase' }}>
              NOMBRE DE USUARIO
            </label>
            <div style={{ position: 'relative' }}>
              <User style={{ position: 'absolute', left: '1rem', top: '50%', transform: 'translateY(-50%)', color: '#a0aec0' }} size={16} />
              <input
                type="text"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Escribe tu usuario..."
                style={{
                  width: '100%',
                  padding: '0.75rem 1rem 0.75rem 2.8rem',
                  borderRadius: '25px', // Exact pill shape inputs from screenshot
                  border: '1px solid #e2e8f0',
                  outline: 'none',
                  fontSize: '0.9rem',
                  color: '#4a5568',
                  backgroundColor: '#ffffff'
                }}
              />
            </div>
          </div>

          <div>
            <label style={{ display: 'block', fontSize: '0.75rem', fontWeight: '800', color: '#55687d', marginBottom: '0.5rem', textTransform: 'uppercase' }}>
              CONTRASEÑA
            </label>
            <div style={{ position: 'relative' }}>
              <Lock style={{ position: 'absolute', left: '1rem', top: '50%', transform: 'translateY(-50%)', color: '#a0aec0' }} size={16} />
              <input
                type="password"
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                style={{
                  width: '100%',
                  padding: '0.75rem 1rem 0.75rem 2.8rem',
                  borderRadius: '25px', // Exact pill shape inputs from screenshot
                  border: '1px solid #e2e8f0',
                  outline: 'none',
                  fontSize: '0.9rem',
                  color: '#4a5568',
                  backgroundColor: '#ffffff'
                }}
              />
            </div>
          </div>

          <button
            type="submit"
            disabled={loading}
            style={{
              marginTop: '0.75rem',
              width: '100%',
              padding: '0.8rem',
              borderRadius: '25px', // Exact pill shape button
              border: 'none',
              background: '#2bb3e5', // Matching exact button color
              color: '#ffffff',
              fontWeight: '800',
              fontSize: '0.9rem',
              cursor: loading ? 'not-allowed' : 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '0.5rem',
              boxShadow: '0 4px 12px rgba(43, 179, 229, 0.3)',
              textTransform: 'uppercase'
            }}
          >
            {loading ? 'Cargando...' : <>INICIAR SESIÓN <ArrowRight size={18} /></>}
          </button>
        </form>

        <div style={{ marginTop: '3rem', fontSize: '0.75rem', color: '#a0aec0' }}>
          © 2026 - Mi Empresa
        </div>
      </div>
    </div>
  );
}