"use client";

import type { FormEvent } from "react";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { DEFAULT_ADMIN_EMAIL, signIn } from "../../lib/auth";

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

  function submit(e: FormEvent) {
    e.preventDefault();

    const result = signIn(email, password);
    if (!result.ok) {
      setError("Enter a valid email and password.");
      return;
    }

    if (result.role === "admin") {
      router.push("/admin");
      return;
    }

    router.push("/library");
  }

  return (
    <main className="mx-auto flex min-h-screen max-w-3xl flex-col gap-8 px-6 py-24 text-slate-700">
      <header className="space-y-3">
        <p className="text-sm uppercase tracking-[0.35em] text-blue-600">Sign in</p>
        <h1 className="font-serif text-4xl font-bold text-slate-900 md:text-5xl">Access your research workspace.</h1>
        <p className="max-w-2xl text-lg leading-8">Use the default admin account for management access, or sign in as a reader to browse and purchase papers.</p>
      </header>

      <section className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
        <form className="space-y-5" onSubmit={submit}>
          <div>
            <label className="mb-2 block text-sm font-semibold text-slate-700">Email</label>
            <input
              type="email"
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              className="w-full rounded-xl border border-slate-300 bg-slate-50 px-4 py-3 text-slate-900 outline-none ring-0 transition focus:border-blue-500 focus:bg-white"
              placeholder={DEFAULT_ADMIN_EMAIL}
            />
          </div>
          <div>
            <label className="mb-2 block text-sm font-semibold text-slate-700">Password</label>
            <input
              type="password"
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              className="w-full rounded-xl border border-slate-300 bg-slate-50 px-4 py-3 text-slate-900 outline-none ring-0 transition focus:border-blue-500 focus:bg-white"
              placeholder="Searchbuddies@2026"
            />
          </div>

          {error ? <p className="text-sm text-rose-600">{error}</p> : null}

          <div className="flex flex-wrap gap-3">
            <button type="submit" className="rounded-xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white hover:bg-slate-800">Sign in</button>
            <button
              type="button"
              onClick={() => {
                setEmail(DEFAULT_ADMIN_EMAIL);
                setPassword("Searchbuddies@2026");
              }}
              className="rounded-xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50"
            >Use default admin</button>
          </div>
        </form>

        <p className="mt-5 text-sm text-slate-500">Admin login: {DEFAULT_ADMIN_EMAIL} / Searchbuddies@2026</p>
      </section>
    </main>
  );
}