"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { apiFetch, ApiError, setAccessToken } from "@/lib/apiClient";
import type { AuthResponse } from "@/types";

export default function AdminLoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [showPw, setShowPw] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
      const data = await apiFetch<AuthResponse>("/auth/login", {
        method: "POST",
        body: JSON.stringify({ emailOrPhone: email, password }),
      });
      if (data.user.role !== "ADMIN") {
        setError("Access denied. Admin credentials required.");
        setLoading(false);
        return;
      }
      setAccessToken(data.accessToken);
      router.replace("/admin");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "Login failed");
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center px-5"
      style={{ background: "linear-gradient(145deg, #0D1145, #1C2472)" }}>
      <div className="w-full max-w-sm">
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="w-16 h-16 mx-auto rounded-2xl flex items-center justify-center mb-4"
            style={{ background: "#B8952A" }}>
            <span className="text-white font-black text-2xl" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>AB</span>
          </div>
          <h1 className="text-white font-bold text-xl" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            Admin Portal
          </h1>
          <p className="text-white/40 text-sm mt-1">AL-BAKKAH Travels & Tours</p>
        </div>

        <form onSubmit={handleSubmit}
          className="rounded-2xl p-6 space-y-4"
          style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.08)", backdropFilter: "blur(20px)" }}>
          <div>
            <label className="text-white/50 text-xs font-semibold uppercase tracking-wider block mb-2">Email</label>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required
              autoComplete="username"
              className="w-full px-4 py-3 rounded-xl text-sm text-white bg-white/10 border border-white/10 focus:outline-none focus:border-[#B8952A] placeholder:text-white/20 transition-colors"
              placeholder="admin@al-bakkah.com"
            />
          </div>
          <div>
            <label className="text-white/50 text-xs font-semibold uppercase tracking-wider block mb-2">Password</label>
            <div className="relative">
              <input type={showPw ? "text" : "password"} value={password} onChange={(e) => setPassword(e.target.value)} required
                autoComplete="current-password"
                className="w-full pl-4 pr-10 py-3 rounded-xl text-sm text-white bg-white/10 border border-white/10 focus:outline-none focus:border-[#B8952A] placeholder:text-white/20 transition-colors"
                placeholder="••••••••"
              />
              <button type="button" onClick={() => setShowPw((v) => !v)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60">
                {showPw
                  ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22"/></svg>
                  : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                }
              </button>
            </div>
          </div>

          {error && (
            <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm text-center">
              {error}
            </div>
          )}

          <button type="submit" disabled={loading}
            className="w-full py-3.5 rounded-xl font-semibold text-[#0D1145] text-sm flex items-center justify-center gap-2 transition-opacity disabled:opacity-50"
            style={{ background: "#B8952A" }}>
            {loading
              ? <><div className="w-4 h-4 rounded-full border-2 border-[#0D1145] border-t-transparent animate-spin" /> Signing in...</>
              : "Sign In to Admin"
            }
          </button>
        </form>

        <p className="text-center text-white/20 text-xs mt-6">
          Restricted access — authorised personnel only
        </p>
      </div>
    </div>
  );
}