'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Navbar from '@/components/Navbar';

export default function LoginPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError('');

    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });

    const data = await res.json();
    setLoading(false);

    if (!res.ok) {
      setError(data.error || 'Credenciales inválidas');
      return;
    }

    router.push('/dashboard');
  }

  return (
    <main>
      <Navbar />
      <div className="auth-wrap">
        <form className="auth-card" onSubmit={handleSubmit}>
          <p className="eyebrow">Admin / Revendedor</p>
          <h1>Iniciar sesión</h1>
          <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Usuario" required />
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Contraseña" required />
          <button className="btn primary" disabled={loading}>
            {loading ? 'Entrando...' : 'Entrar'}
          </button>
          {error ? <p className="error-box">{error}</p> : null}
        </form>
      </div>
    </main>
  );
}