"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { Lock } from "lucide-react";

/** Form login CMS — satu password dari .env.local. */
export default function AdminLogin() {
  const router = useRouter();
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/admin/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error ?? "Gagal masuk.");
        return;
      }
      router.refresh();
    } catch {
      setError("Tidak dapat menghubungi server.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <main className="grid min-h-screen place-items-center bg-ink px-5">
      <form
        onSubmit={submit}
        className="glow-border w-full max-w-sm rounded-3xl border border-line bg-surface p-8"
      >
        <Image
          src="/logo-velo.png"
          alt="Logo Velo Teknologi"
          width={300}
          height={160}
          className="mx-auto h-12 w-auto"
        />
        <h1 className="mt-6 text-center text-lg font-semibold text-fg">
          CMS Velo Teknologi
        </h1>
        <p className="mt-1 text-center text-sm text-mist">
          Masukkan password admin untuk melanjutkan
        </p>

        <label className="mt-8 block">
          <span className="mb-2 flex items-center gap-2 font-accent text-xs tracking-wide text-mist uppercase">
            <Lock size={12} />
            Password
          </span>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoFocus
            required
            className="w-full rounded-xl border border-line bg-panel px-4 py-3 text-sm text-fg outline-none focus:border-line-2"
            placeholder="••••••••"
          />
        </label>

        {error && (
          <p className="mt-3 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-2.5 text-sm text-red-300">
            {error}
          </p>
        )}

        <button
          type="submit"
          disabled={loading || !password}
          className="mt-6 w-full rounded-full bg-cta px-6 py-3 text-sm font-semibold text-cta-ink transition-all cta-glow disabled:opacity-50"
        >
          {loading ? "Memeriksa…" : "Masuk"}
        </button>
      </form>
    </main>
  );
}