"use client";

import { useState } from "react";
import { loginAction } from "./actions";
import { useRouter } from "@/i18n/routing";
import { Lock, Mail, Loader2 } from "lucide-react";

export function LoginForm() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setLoading(true);

    const formData = new FormData(e.currentTarget);
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;

    const res = await loginAction({ email, password });

    if (!res.success) {
      setError(res.message || "Failed to login");
      setLoading(false);
    } else {
      // Successfully authenticated, redirect to dashboard
      router.push("/admin/dashboard");
    }
  }

  return (
    <div className="w-full max-w-sm mx-auto p-8 rounded-2xl bg-card border border-border/50 shadow-2xl glass relative overflow-hidden">
      <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-accent via-purple-500 to-accent" />
      
      <div className="text-center mb-8">
        <div className="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center mx-auto mb-4 border border-accent/20">
          <Lock size={20} className="text-accent" />
        </div>
        <h1 className="text-2xl font-bold tracking-tight">Admin Portal</h1>
        <p className="text-sm text-muted-foreground mt-2">
          Sign in to manage your portfolio
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-5">
        {error && (
          <div className="p-3 rounded-lg bg-error/10 border border-error/20 text-error text-sm text-center font-medium">
            {error}
          </div>
        )}

        <div className="space-y-4">
          <div className="relative">
            <Mail size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
            <input
              name="email"
              type="email"
              placeholder="admin@ando.dev"
              required
              className="w-full pl-10 pr-4 py-3 rounded-xl bg-muted/50 border border-border/50 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
            />
          </div>
          
          <div className="relative">
            <Lock size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
            <input
              name="password"
              type="password"
              placeholder="••••••••"
              required
              className="w-full pl-10 pr-4 py-3 rounded-xl bg-muted/50 border border-border/50 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
            />
          </div>
        </div>

        <button
          type="submit"
          disabled={loading}
          className="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-foreground text-background font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {loading ? (
            <Loader2 size={16} className="animate-spin" />
          ) : (
            "Sign In to Dashboard"
          )}
        </button>
      </form>
    </div>
  );
}
