"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export default function LoginPage() {
  const router = useRouter();
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  async function submit(event: React.FormEvent) {
    event.preventDefault();
    setError("");
    const response = await fetch("/api/admin/login", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ password })
    });
    if (!response.ok) {
      setError("Clave incorrecta");
      return;
    }
    router.push("/admin");
    router.refresh();
  }

  return (
    <main className="admin-shell">
      <div className="container" style={{ maxWidth: 520 }}>
        <section className="panel">
          <span className="kicker">Administracion</span>
          <h1>Ingreso editorial</h1>
          <form className="form-grid" onSubmit={submit}>
            <label>
              Clave
              <input type="password" value={password} onChange={(event) => setPassword(event.target.value)} />
            </label>
            {error ? <p style={{ color: "var(--red)" }}>{error}</p> : null}
            <button className="button primary" type="submit">
              Entrar
            </button>
          </form>
        </section>
      </div>
    </main>
  );
}