import { useState } from 'react';
import { useRouter } from 'next/router';

export default function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const router = useRouter();

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('http://localhost:9002/posts/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      const data = await res.json();

      if (res.ok) {
        localStorage.setItem('blog_token', data.token);
        router.push('/admin');
      } else {
        alert('Credenciales incorrectas');
      }
    } catch (err) {
      alert('Error de conexión');
    }
  };

  return (
    <div style={{
      height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center',
      backgroundColor: '#f8fafc', fontFamily: 'sans-serif'
    }}>
      <form onSubmit={handleLogin} style={{
        backgroundColor: 'white', padding: '50px', borderRadius: '20px',
        border: '1px solid #e2e8f0', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)',
        width: '100%', maxWidth: '400px'
      }}>
        <h2 style={{ textAlign: 'center', marginBottom: '30px', color: '#0f172a', marginTop: 0 }}>
          Admin Login 🔐
        </h2>
        
        <input 
          placeholder="Usuario" 
          value={username} 
          onChange={e => setUsername(e.target.value)} 
          style={{
            width: '100%', padding: '14px', border: '2px solid #e2e8f0',
            borderRadius: '10px', marginBottom: '20px', fontSize: '1rem', 
            boxSizing: 'border-box', outline: 'none'
          }}
        />
        
        <input 
          type="password" 
          placeholder="Contraseña" 
          value={password} 
          onChange={e => setPassword(e.target.value)} 
          style={{
            width: '100%', padding: '14px', border: '2px solid #e2e8f0',
            borderRadius: '10px', marginBottom: '30px', fontSize: '1rem', 
            boxSizing: 'border-box', outline: 'none'
          }}
        />
        
        <button style={{
          width: '100%', padding: '16px', backgroundColor: '#2563eb', color: 'white',
          border: 'none', borderRadius: '10px', fontWeight: '800', fontSize: '1rem',
          cursor: 'pointer'
        }}>
          Entrar al Sistema
        </button>
      </form>
    </div>
  );
}