import React, { useState } from 'react';
import axios from 'axios';
import { setToken } from '../auth';

const s = {
  overlay: {
    position: 'fixed', inset: 0, background: '#050608',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    zIndex: 3000, fontFamily: "'Segoe UI', Arial, sans-serif",
  },
  modal: {
    width: '380px', maxWidth: '92vw', background: '#111217', borderRadius: '12px',
    boxShadow: '0 16px 40px rgba(0,0,0,0.8)', color: '#f8f9fa',
    overflow: 'hidden', border: '1px solid #2a2b3a',
  },
  header: {
    padding: '24px', borderBottom: '1px solid #222', textAlign: 'center',
    background: 'linear-gradient(135deg, #000000, #151622)',
  },
  logo: { height: '34px', marginBottom: '12px' },
  title: { fontSize: '18px', fontWeight: 800, letterSpacing: '0.5px' },
  subtitle: { fontSize: '12px', color: '#c0c2d6', marginTop: '4px' },
  body: { padding: '22px 24px 8px 24px' },
  label: { fontSize: '13px', fontWeight: 600, marginBottom: '4px', color: '#e5e7f1' },
  input: {
    width: '100%', padding: '10px 12px', borderRadius: '6px',
    border: '1px solid #333544', background: '#050608', color: '#f8f9fa',
    fontSize: '14px', fontFamily: 'inherit', marginBottom: '16px',
    boxSizing: 'border-box',
  },
  error: {
    background: '#3a1414', borderRadius: '6px', padding: '9px 11px',
    fontSize: '12px', color: '#ff9b9b', border: '1px solid #c0392b', marginBottom: '14px',
  },
  footer: { padding: '0 24px 22px 24px' },
  btn: {
    width: '100%', padding: '11px', borderRadius: '6px', border: 'none',
    background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)',
    color: '#000', fontWeight: 700, fontSize: '14px',
    cursor: 'pointer', textTransform: 'uppercase', letterSpacing: '0.5px',
  },
};

export default function LoginModal({ onSuccess }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error,    setError]    = useState('');
  const [loading,  setLoading]  = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const { data } = await axios.post('/api/auth/login', { username, password });
      setToken(data.token);
      onSuccess(data.user);
    } catch (err) {
      setError(err.response?.data?.error || 'Login failed. Please try again.');
      setLoading(false);
    }
  };

  return (
    <div style={s.overlay}>
      <form style={s.modal} onSubmit={submit}>
        <div style={s.header}>
          <img src="/static/mpm-logo.png" alt="MPM" style={s.logo} />
          <div style={s.title}>CPAS Tracker</div>
          <div style={s.subtitle}>Sign in to continue</div>
        </div>

        <div style={s.body}>
          {error && <div style={s.error}>{error}</div>}

          <div style={s.label}>Username</div>
          <input
            style={s.input}
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoFocus
            autoComplete="username"
          />

          <div style={s.label}>Password</div>
          <input
            style={s.input}
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="current-password"
          />
        </div>

        <div style={s.footer}>
          <button style={{ ...s.btn, opacity: loading ? 0.7 : 1 }} type="submit" disabled={loading}>
            {loading ? 'Signing in…' : 'Sign In'}
          </button>
        </div>
      </form>
    </div>
  );
}
