"use client";

import { signIn, useSession } from "next-auth/react";
import { useEffect, useState, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { FaKey, FaInfoCircle, FaArrowRight } from "react-icons/fa";
import toast, { Toaster } from "react-hot-toast";

function HuggingFaceLogo({ className = "w-4 h-4" }) {
  return (
    <svg className={className} viewBox="0 0 120 120" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M60 0C26.86 0 0 26.86 0 60s26.86 60 60 60 60-26.86 60-60S93.14 0 60 0z" />
      <g fill="#fff">
        <circle cx="42" cy="50" r="6" />
        <circle cx="78" cy="50" r="6" />
        <path d="M30 70c5 12 17 20 30 20s25-8 30-20" stroke="#fff" strokeWidth="6" fill="none" strokeLinecap="round" />
      </g>
    </svg>
  );
}

function LoginContent() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const searchParams = useSearchParams();
  const next = searchParams.get("callbackUrl") || searchParams.get("next") || "/";
  const [activeTab, setActiveTab] = useState("huggingface");
  const [apiKeyInput, setApiKeyInput] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    if (status === "authenticated") router.push(next);
  }, [status, router, next]);

  const handleApiKeyLogin = async (e) => {
    e.preventDefault();
    const key = apiKeyInput.trim();
    if (!key) { toast.error("Please enter a valid API key or HF token"); return; }
    if (key.length < 5) { toast.error("Key appears too short"); return; }
    setIsSubmitting(true);
    try {
      const res = await signIn("credentials", { apiKey: key, redirect: false, callbackUrl: next });
      if (res?.error) toast.error(res.error || "Failed to sign in");
      else { toast.success("Signed in successfully!"); router.push(next); }
    } catch (err) {
      console.error(err);
      toast.error("An error occurred during authentication");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-dvh flex items-center justify-center bg-bg-page px-6 text-primary-text select-none">
      <Toaster position="top-right" />
      <div className="relative bg-bg-card border border-divider w-full max-w-md rounded-xl p-8 space-y-6 shadow-2xl animate-scale-up">
        <div className="flex flex-col items-center text-center space-y-3">
          <div className="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-2xl text-primary font-black shadow-md shadow-primary/15">🤗</div>
          <h2 className="text-2xl font-black uppercase tracking-tight">Sign In to Hugging-c-ai</h2>
          <p className="text-xs font-semibold text-secondary-text leading-relaxed px-2">
            Choose your sign-in method: HuggingFace OAuth (recommended) or a custom API key / HF token.
          </p>
        </div>

        <div className="flex bg-bg-page p-1 rounded-lg border border-divider/60">
          <button type="button" onClick={() => setActiveTab("huggingface")}
            className={`flex-1 py-2 rounded-md text-xs font-bold transition-all flex items-center justify-center gap-2 ${
              activeTab === "huggingface" ? "bg-bg-card text-white shadow-sm border border-divider/40" : "text-secondary-text hover:text-white"
            }`}>
            <HuggingFaceLogo className="w-3.5 h-3.5 text-yellow-400" />
            <span>HuggingFace</span>
          </button>
          <button type="button" onClick={() => setActiveTab("apikey")}
            className={`flex-1 py-2 rounded-md text-xs font-bold transition-all flex items-center justify-center gap-2 ${
              activeTab === "apikey" ? "bg-bg-card text-white shadow-sm border border-divider/40" : "text-secondary-text hover:text-white"
            }`}>
            <FaKey className="text-amber-400" />
            <span>Use API Key</span>
          </button>
        </div>

        {activeTab === "huggingface" ? (
          <div className="space-y-4 pt-2">
            <button onClick={() => signIn("huggingface", { callbackUrl: next })}
              className="w-full py-3.5 bg-yellow-400 text-neutral-950 rounded-full text-xs font-bold flex items-center justify-center gap-3 hover:bg-yellow-300 transition-all shadow-md active:scale-[0.98] cursor-pointer">
              <HuggingFaceLogo className="w-4 h-4 text-neutral-950" />
              <span>Continue with HuggingFace</span>
            </button>
            <div className="text-[11px] text-secondary-text space-y-1.5 text-center">
              <p><span className="text-emerald-400 font-semibold">✓ Free</span> — get 50 starter credits</p>
              <p><span className="text-emerald-400 font-semibold">✓ HF Bucket</span> — uploads save to your own HF dataset repo</p>
              <p><span className="text-emerald-400 font-semibold">✓ Gradio</span> — call your own HF Spaces as LLM endpoints</p>
            </div>
            <p className="text-[10px] text-center text-secondary-text/70">
              We request scopes: <code>openid</code>, <code>profile</code>, <code>email</code>, <code>repo:write</code>, <code>read</code>. Your token is stored securely.
            </p>
          </div>
        ) : (
          <form onSubmit={handleApiKeyLogin} className="space-y-4 pt-2">
            <div className="space-y-1.5">
              <label className="block text-[11px] uppercase font-bold text-secondary-text tracking-wider">API Key / HF Token</label>
              <div className="relative">
                <input type="password" value={apiKeyInput} onChange={(e) => setApiKeyInput(e.target.value)}
                  placeholder="hf_... | sk-... | sk-ant... | gsk_... | mu_..."
                  className="w-full bg-bg-page border border-divider rounded-lg px-3.5 py-2.5 text-xs text-white placeholder-secondary-text/50 focus:outline-none focus:border-primary transition-colors" />
              </div>
              <div className="flex justify-between items-center">
                <span className="text-[10px] text-secondary-text">Auto-detects: HF · OpenAI · Anthropic · Groq · MuAPI</span>
                <a href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener noreferrer" className="text-[10px] text-primary hover:underline font-semibold">Get HF Token →</a>
              </div>
            </div>
            <button type="submit" disabled={isSubmitting || !apiKeyInput.trim()}
              className="w-full py-3 bg-primary hover:bg-primary/90 text-white rounded-full text-xs font-bold flex items-center justify-center gap-2 transition-all shadow-md active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer">
              <span>{isSubmitting ? "Authenticating..." : "Sign In with Key"}</span>
              <FaArrowRight className="text-xs" />
            </button>
            <p className="text-[11px] text-center text-amber-400/90 font-medium">⚡ Use your own provider key. 0 website credits required.</p>
          </form>
        )}

        <div className="flex items-start gap-2.5 bg-primary/5 border border-primary/10 p-3.5 rounded text-[11px] leading-relaxed text-secondary-text">
          <FaInfoCircle className="text-primary text-xs shrink-0 mt-0.5" />
          <span>By signing in, you agree to our Terms. Tokens are encrypted at rest and never shared.</span>
        </div>
      </div>
    </div>
  );
}

export default function Login() {
  return (
    <Suspense fallback={
      <div className="min-h-dvh flex items-center justify-center bg-bg-page text-primary-text">
        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
      </div>
    }>
      <LoginContent />
    </Suspense>
  );
}