"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { setClientToken } from "../_components/AdminComponents";
import { adminVerifyToken } from "../../../lib/adminApi";

export default function AdminLoginPage() {
  const router = useRouter();
  const [token, setToken] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!token.trim()) {
      setError("Please enter the admin token.");
      return;
    }

    setIsSubmitting(true);
    setError(null);

    try {
      const isValid = await adminVerifyToken(token.trim());
      if (isValid) {
        setClientToken(token.trim());
        router.push("/console");
      } else {
        setError("Invalid admin bearer token. Please check your credentials.");
      }
    } catch (err: any) {
      setError(err?.message || "Failed to verify token with backend API.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="w-full max-w-md bg-paper border border-line rounded-lg shadow-lg p-8">
      <div className="text-center mb-6">
        <h1 className="text-2xl font-bold text-ink">ANL Admin Console</h1>
        <p className="text-sm text-ink/70 mt-1">Enter your admin bearer token to manage laboratory datasets.</p>
      </div>

      {error && (
        <div className="p-3 mb-4 text-sm rounded bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300">
          {error}
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="token" className="block text-sm font-medium text-ink mb-1">
            Admin Bearer Token
          </label>
          <input
            id="token"
            type="password"
            value={token}
            onChange={(e) => setToken(e.target.value)}
            placeholder="e.g. admin123"
            className="w-full px-3 py-2 border border-line rounded-md bg-ivory text-ink focus:outline-none focus:ring-2 focus:ring-cobalt/50"
            required
          />
        </div>

        <button
          type="submit"
          disabled={isSubmitting}
          className="w-full py-2 px-4 rounded bg-cobalt hover:bg-cobalt/90 text-white font-medium text-sm transition-colors disabled:opacity-50"
        >
          {isSubmitting ? "Verifying..." : "Sign In to Console"}
        </button>
      </form>
    </div>
  );
}