'use client';

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

export default function AccessPage() {
  const router = useRouter();
  const [username, setUsername] = useState('demo-cliente');
  const [accessCode, setAccessCode] = useState('123456');
  const [error, setError] = useState('');

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError('');
    const res = await fetch('/api/end-user/access', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, accessCode })
    });
    const data = await res.json();
    if (!res.ok) {
      setError(data.error || 'No se pudo acceder');
      return;
    }
    router.push(`/player/${data.slug}?token=${data.token}`);
  }

  return (
    <main>
      <Navbar />
      <div className="auth-wrap">
        <form className="auth-card" onSubmit={handleSubmit}>
          <p className="eyebrow">Acceso cliente</p>
          <h1>Ingresar al reproductor</h1>
          <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Usuario" required />
          <input value={accessCode} onChange={(e) => setAccessCode(e.target.value)} placeholder="Código de acceso" required />
          <button className="btn primary">Entrar al contenido</button>
          {error ? <p className="error-box">{error}</p> : null}
        </form>
      </div>
    </main>
  );
}