src/app/components/Login.tsx

import { useState } from "react";
import { useNavigate } from "react-router";
import { LogIn, Loader2 } from "lucide-react";
import { login } from "../../services/api";
import logoUrl from "../../assets/logo.png";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");

    if (!email || !password) {
      setError("Please enter both email and password");
      return;
    }

    if (!/\S+@\S+\.\S+/.test(email)) {
      setError("Please enter a valid email address");
      return;
    }

    setIsLoading(true);
    try {
      const res = await login(email, password);
      const user = {
        user_id: res.data.id,
        email: res.data.email,
        name: res.data.fullname,
        loginTime: new Date().toISOString(),
      };
      localStorage.setItem("chatbot_user", JSON.stringify(user));
      navigate("/");
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Login failed");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#1e2d45]">

      {/* ── Dot grid texture ── */}
      <div
        className="absolute inset-0 z-0 opacity-20"
        style={{
          backgroundImage: "radial-gradient(circle, #334155 1px, transparent 1px)",
          backgroundSize: "28px 28px",
        }}
      />

      {/* ── Gradient orbs — glowing on dark bg ── */}
      {/* Cyan — top left */}
      <div
        className="absolute -top-32 -left-32 w-[520px] h-[520px] rounded-full blur-3xl opacity-[0.18] animate-pulse"
        style={{ background: "#0ea5e9", animationDuration: "5s" }}
      />
      {/* Orange — bottom right */}
      <div
        className="absolute -bottom-40 -right-40 w-[560px] h-[560px] rounded-full blur-3xl opacity-[0.16] animate-pulse"
        style={{ background: "#f97316", animationDuration: "7s" }}
      />
      {/* Green — top right */}
      <div
        className="absolute -top-24 right-1/4 w-[320px] h-[320px] rounded-full blur-3xl opacity-[0.12] animate-pulse"
        style={{ background: "#10b981", animationDuration: "9s" }}
      />
      {/* Purple accent — center left */}
      <div
        className="absolute top-1/2 -left-40 w-[360px] h-[360px] rounded-full blur-3xl opacity-[0.10] animate-pulse"
        style={{ background: "#8b5cf6", animationDuration: "11s" }}
      />

      {/* ── Neural network — bottom left ── */}
      <svg
        className="absolute bottom-8 left-8 opacity-[0.35] animate-float-slow"
        width="200" height="200" viewBox="0 0 200 200"
        fill="none" xmlns="http://www.w3.org/2000/svg"
      >
        <line x1="20" y1="150" x2="65" y2="90" stroke="#0ea5e9" strokeWidth="1"/>
        <line x1="20" y1="150" x2="55" y2="170" stroke="#0ea5e9" strokeWidth="1"/>
        <line x1="65" y1="90" x2="110" y2="125" stroke="#0ea5e9" strokeWidth="1"/>
        <line x1="65" y1="90" x2="130" y2="55" stroke="#10b981" strokeWidth="1"/>
        <line x1="110" y1="125" x2="170" y2="105" stroke="#0ea5e9" strokeWidth="1"/>
        <line x1="130" y1="55" x2="170" y2="105" stroke="#10b981" strokeWidth="1"/>
        <line x1="130" y1="55" x2="175" y2="30" stroke="#10b981" strokeWidth="1"/>
        <line x1="55" y1="170" x2="110" y2="125" stroke="#0ea5e9" strokeWidth="1"/>
        <line x1="175" y1="30" x2="170" y2="105" stroke="#10b981" strokeWidth="1"/>
        <circle cx="20" cy="150" r="3.5" fill="#0ea5e9" fillOpacity="0.7"/>
        <circle cx="55" cy="170" r="2.5" fill="#0ea5e9" fillOpacity="0.5"/>
        <circle cx="65" cy="90" r="5" fill="#0ea5e9" fillOpacity="0.9"/>
        <circle cx="110" cy="125" r="3.5" fill="#0ea5e9" fillOpacity="0.7"/>
        <circle cx="130" cy="55" r="5" fill="#10b981" fillOpacity="0.9"/>
        <circle cx="170" cy="105" r="3.5" fill="#10b981" fillOpacity="0.7"/>
        <circle cx="175" cy="30" r="2.5" fill="#10b981" fillOpacity="0.5"/>
      </svg>

      {/* ── Neural network — top right ── */}
      <svg
        className="absolute top-8 right-8 opacity-[0.30] animate-float"
        style={{ "--float-rotate": "0deg" } as React.CSSProperties}
        width="180" height="180" viewBox="0 0 180 180"
        fill="none" xmlns="http://www.w3.org/2000/svg"
      >
        <line x1="160" y1="30" x2="115" y2="80" stroke="#f97316" strokeWidth="1"/>
        <line x1="115" y1="80" x2="70" y2="55" stroke="#f97316" strokeWidth="1"/>
        <line x1="115" y1="80" x2="130" y2="135" stroke="#0ea5e9" strokeWidth="1"/>
        <line x1="70" y1="55" x2="25" y2="90" stroke="#f97316" strokeWidth="1"/>
        <line x1="25" y1="90" x2="80" y2="155" stroke="#0ea5e9" strokeWidth="1"/>
        <line x1="80" y1="155" x2="130" y2="135" stroke="#0ea5e9" strokeWidth="1"/>
        <line x1="70" y1="55" x2="30" y2="25" stroke="#f97316" strokeWidth="1"/>
        <circle cx="160" cy="30" r="3.5" fill="#f97316" fillOpacity="0.7"/>
        <circle cx="115" cy="80" r="5" fill="#f97316" fillOpacity="0.9"/>
        <circle cx="70" cy="55" r="3.5" fill="#f97316" fillOpacity="0.7"/>
        <circle cx="130" cy="135" r="2.5" fill="#0ea5e9" fillOpacity="0.5"/>
        <circle cx="25" cy="90" r="3.5" fill="#0ea5e9" fillOpacity="0.7"/>
        <circle cx="80" cy="155" r="2.5" fill="#0ea5e9" fillOpacity="0.5"/>
        <circle cx="30" cy="25" r="2.5" fill="#f97316" fillOpacity="0.5"/>
      </svg>

      {/* ── Large ring — top right ── */}
      <div className="absolute -top-24 -right-24 w-80 h-80 rounded-full border border-slate-700 animate-float-slow opacity-50" />
      <div className="absolute -top-10 -right-10 w-48 h-48 rounded-full border border-slate-800 opacity-60" />

      {/* ── Rotated square — bottom left ── */}
      <div
        className="absolute bottom-16 left-16 w-24 h-24 border border-slate-200 opacity-50 animate-float"
        style={{ transform: "rotate(20deg)", "--float-rotate": "20deg" } as React.CSSProperties}
      />
      <div
        className="absolute bottom-28 left-28 w-12 h-12 border border-slate-200 opacity-40"
        style={{ transform: "rotate(45deg)" }}
      />

      {/* ── Hexagon — bottom right ── */}
      <svg
        className="absolute bottom-12 right-16 opacity-[0.35] animate-float"
        style={{ "--float-rotate": "0deg", animationDelay: "2s" } as React.CSSProperties}
        width="80" height="80" viewBox="0 0 160 160"
        fill="none" xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M 140 80 L 110 132 L 50 132 L 20 80 L 50 28 L 110 28 Z"
          stroke="#f97316" strokeWidth="1.5" fill="none"
        />
        <path
          d="M 122 80 L 101 114 L 59 114 L 38 80 L 59 46 L 101 46 Z"
          stroke="#f97316" strokeWidth="1" strokeOpacity="0.5" fill="none"
        />
      </svg>

      {/* ── Rotated square — bottom left ── */}
      <div
        className="absolute bottom-16 left-16 w-24 h-24 border border-slate-700 opacity-50 animate-float"
        style={{ transform: "rotate(20deg)", "--float-rotate": "20deg" } as React.CSSProperties}
      />
      <div
        className="absolute bottom-28 left-28 w-12 h-12 border border-slate-700 opacity-30"
        style={{ transform: "rotate(45deg)" }}
      />

      {/* ── Small floating dots ── */}
      <div className="absolute top-1/4 left-12 w-2 h-2 rounded-full bg-sky-400 opacity-60 animate-float" style={{ animationDelay: "1s" }} />
      <div className="absolute top-1/3 right-20 w-1.5 h-1.5 rounded-full bg-orange-400 opacity-60 animate-float-slow" style={{ animationDelay: "3s" }} />
      <div className="absolute bottom-1/3 left-1/4 w-1.5 h-1.5 rounded-full bg-emerald-400 opacity-60 animate-float" style={{ animationDelay: "0.5s" }} />
      <div className="absolute top-2/3 right-1/3 w-1 h-1 rounded-full bg-violet-400 opacity-50 animate-float-slow" style={{ animationDelay: "4s" }} />

      {/* ── Login card ── */}
      <div className="relative z-10 w-full max-w-md px-4">
        <div className="bg-white rounded-2xl shadow-2xl shadow-black/40 p-7 border border-white/10">

          {/* Brand logo */}
          <div className="flex flex-col items-center gap-3 mb-6">
            <img src={logoUrl} alt="DataEyond" className="w-12 h-12 object-contain" />
            <div className="text-center">
              <h1 className="text-xl font-semibold text-slate-900">Welcome Back</h1>
              <p className="text-slate-400 text-sm mt-0.5">Sign in to continue to your chatbot</p>
            </div>
          </div>

          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label htmlFor="email" className="block text-xs font-medium mb-1.5 text-slate-600">
                Email Address
              </label>
              <input
                id="email"
                type="email"
                autoComplete="username"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition"
                placeholder="you@example.com"
                disabled={isLoading}
              />
            </div>

            <div>
              <label htmlFor="password" className="block text-xs font-medium mb-1.5 text-slate-600">
                Password
              </label>
              <input
                id="password"
                type="password"
                autoComplete="current-password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition"
                placeholder="Enter your password"
                disabled={isLoading}
              />
            </div>

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

            <button
              type="submit"
              disabled={isLoading}
              className="w-full flex items-center justify-center gap-2 bg-[#059669] hover:bg-[#047857] active:bg-[#065F46] text-white py-2.5 text-sm rounded-xl transition font-medium disabled:opacity-50 disabled:cursor-not-allowed mt-1"
            >
              {isLoading ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <LogIn className="w-4 h-4" />
              )}
              {isLoading ? "Signing in…" : "Sign In"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}