frontend/src/pages/AdminLogin.jsx

// frontend/src/pages/AdminLogin.jsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

export default function AdminLogin() {
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  async function handleSubmit(e) {
    e.preventDefault();
    setError("");

    // TEMP: very simple check so you can get into the dashboard.
    // Later we will replace this with a real backend call.
    if (!email) {
      setError("Please enter your email.");
      return;
    }

    setLoading(true);
    try {
      // TODO: call /api/auth/admin/login here in future.
      const admin = {
        email,
        name: email.split("@")[0] || "Admin",
      };
      sessionStorage.setItem("admin", JSON.stringify(admin));
      navigate("/admin", { replace: true });
    } catch (err) {
      setError("Unable to log in as admin.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center px-4">
      <div className="w-full max-w-md bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
        <div className="mb-6">
          <div className="flex items-center gap-3 mb-2">
            <img
              src="/karate-logo.svg"
              alt="Dojo logo"
              className="h-9 w-9 rounded-full object-cover"
            />
            <div>
              <h1 className="text-lg font-semibold text-slate-900">
                Arun Martial Arts Admin
              </h1>
              <p className="text-xs text-slate-500">
                Sign in to manage memberships and plans.
              </p>
            </div>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-xs font-medium text-slate-700 mb-1">
              Admin email
            </label>
            <input
              type="email"
              className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
              placeholder="admin@dojo.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>

          <div>
            <label className="block text-xs font-medium text-slate-700 mb-1">
              Access code
            </label>
            <input
              type="password"
              className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
              placeholder="••••••••"
              value={code}
              onChange={(e) => setCode(e.target.value)}
            />
            <p className="mt-1 text-[11px] text-slate-400">
              For now, any value works. We&apos;ll connect this to the backend later.
            </p>
          </div>

          {error && (
            <p className="text-xs text-red-600 bg-red-50 border border-red-100 rounded-md px-2 py-1">
              {error}
            </p>
          )}

          <button
            type="submit"
            disabled={loading}
            className="w-full inline-flex items-center justify-center rounded-lg bg-indigo-600 text-white text-sm font-medium py-2.5 hover:bg-indigo-700 disabled:opacity-60"
          >
            {loading ? "Signing in…" : "Sign in as admin"}
          </button>
        </form>

        <p className="mt-4 text-[11px] text-slate-400 text-center">
          This is a temporary admin login for testing on Hugging Face.
        </p>
      </div>
    </div>
  );
}