import { Activity, Bot, Boxes, Building2, Cpu, Database, Factory, Hexagon, Network, Server, SquareTerminal, Users } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { setAuthToken, signIn } from "../lib/auth-client";

function VtitIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" className="text-white">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
    </svg>
  );
}

export function AuthPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

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

    const onSuccess = (ctx: any) => {
      const token = ctx.response.headers.get("set-auth-token");
      if (token) setAuthToken(token);
    };

    const { error } = await signIn.email({ email, password, callbackURL: "/" }, { onSuccess });
    setLoading(false);

    if (error) {
      setError(error.message || "Sign in failed");
      return;
    }

    navigate("/");
  }

  return (
    <div className="relative flex items-center justify-center min-h-screen bg-[#030712] overflow-hidden font-sans">
      <style>{`
        @keyframes scan {
          0% { transform: translateY(-100vh); }
          100% { transform: translateY(100vh); }
        }
        @keyframes float {
          0%, 100% { transform: translateY(0) rotate(0deg); }
          50% { transform: translateY(-30px) rotate(3deg); }
        }
        @keyframes float-form {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
        @keyframes pulse-slow {
          0%, 100% { opacity: 0.3; transform: scale(1); }
          50% { opacity: 0.7; transform: scale(1.05); }
        }
        @keyframes spin-slow {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      `}</style>

      {/* Sci-fi Background elements */}
      <div className="absolute inset-0 pointer-events-none">
        {/* Animated glowing orbs */}
        <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-accent/20 rounded-full mix-blend-screen filter blur-[120px] animate-[pulse-slow_6s_ease-in-out_infinite]" />
        <div className="absolute bottom-1/4 right-1/4 w-[600px] h-[600px] bg-blue-600/20 rounded-full mix-blend-screen filter blur-[150px] animate-[pulse-slow_8s_ease-in-out_infinite]" />

        {/* Floating Tech Icons - Layer 1 (Background, small) */}
        <div className="absolute top-[15%] left-[12%] text-accent/30 animate-[float_7s_ease-in-out_infinite]">
          <Cpu size={56} className="animate-[pulse-slow_3s_ease-in-out_infinite]" />
        </div>
        <div className="absolute top-[85%] left-[25%] text-indigo-400/20 animate-[float_10s_ease-in-out_infinite] [animation-delay:1s]">
          <Factory size={40} className="animate-[pulse-slow_5s_ease-in-out_infinite]" /> {/* MES */}
        </div>
        <div className="absolute top-[10%] right-[30%] text-blue-500/20 animate-[float_8s_ease-in-out_infinite] [animation-delay:2s]">
          <Users size={48} /> {/* HRM */}
        </div>

        {/* Floating Tech Icons - Layer 2 (Midground, various sizes) */}
        <div className="absolute top-[65%] left-[10%] text-blue-500/20 animate-[float_9s_ease-in-out_infinite] [animation-delay:2.5s]">
          <Network size={80} className="animate-[spin-slow_30s_linear_infinite]" />
        </div>
        <div className="absolute top-[25%] right-[15%] text-accent/25 animate-[float_8s_ease-in-out_infinite] [animation-delay:1.5s]">
          <Bot size={64} className="animate-[pulse-slow_4s_ease-in-out_infinite]" /> {/* Chatbot */}
        </div>
        <div className="absolute bottom-[20%] right-[20%] text-indigo-500/30 animate-[float_10s_ease-in-out_infinite] [animation-delay:3.5s]">
          <Server size={50} />
        </div>
        <div className="absolute top-[45%] right-[5%] text-accent/20 animate-[float_6s_ease-in-out_infinite] [animation-delay:0.5s]">
          <Hexagon size={40} className="animate-[spin-slow_20s_linear_infinite]" />
        </div>

        {/* Floating Tech Icons - Layer 3 (Foreground, highly visible) */}
        <div className="absolute bottom-[30%] left-[8%] text-cyan-400/20 animate-[pulse-slow_5s_ease-in-out_infinite]">
          <Activity size={48} />
        </div>
        <div className="absolute top-[40%] left-[5%] text-emerald-400/20 animate-[float_11s_ease-in-out_infinite] [animation-delay:4s]">
          <Boxes size={54} /> {/* Blockchain */}
        </div>
        <div className="absolute bottom-[15%] left-[45%] text-blue-400/15 animate-[float_12s_ease-in-out_infinite] [animation-delay:2.5s]">
          <Building2 size={60} /> {/* ERP */}
        </div>
        <div className="absolute top-[20%] left-[40%] text-violet-400/15 animate-[float_9s_ease-in-out_infinite] [animation-delay:1.8s]">
          <SquareTerminal size={45} /> {/* Support/Chat */}
        </div>
        <div className="absolute bottom-[40%] right-[10%] text-cyan-500/20 animate-[float_8s_ease-in-out_infinite] [animation-delay:3s]">
          <Database size={52} className="animate-[pulse-slow_4s_ease-in-out_infinite]" />
        </div>

        {/* Grid pattern */}
        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />

        {/* Scanning line effect */}
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-accent/10 to-transparent h-[4px] w-full animate-[scan_4s_linear_infinite]" />
      </div>

      {/* Glassmorphism Login Modal */}
      <div className="relative z-10 w-full max-w-sm p-8 space-y-6 bg-[#09090b]/60 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-[0_0_50px_rgba(8,145,178,0.15)] animate-[float-form_8s_ease-in-out_infinite]">
        {/* Logo Section */}
        <div className="flex flex-col items-center text-center space-y-4">
          <div className="w-28 h-28 rounded-2xl bg-gradient-to-br from-accent to-blue-600 p-[2px] shadow-[0_0_25px_rgba(8,145,178,0.6)]">
            <div className="w-full h-full bg-white rounded-2xl flex items-center justify-center p-3 shadow-inner">
              <img src="https://www.viettelsoftware.com/images/asset-2-2.png" alt="VTIT Logo" className="w-full h-full object-contain" />
            </div>
          </div>
          <div>
            <h1 className="text-2xl font-bold tracking-tight text-white">
              VTIT <span className="text-accent drop-shadow-[0_0_8px_rgba(8,145,178,0.8)]">Coding Assistant</span>
            </h1>
          </div>
        </div>

        <AuthForm
          email={email}
          password={password}
          name={name}
          error={error}
          notice={notice}
          loading={loading}
          onEmailChange={setEmail}
          onPasswordChange={setPassword}
          onNameChange={setName}
          onSubmit={handleSubmit}
        />

        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <div className="w-full border-t border-white/10" />
          </div>
          <div className="relative flex justify-center text-xs">
            <span className="bg-[#09090b] px-2 text-zinc-500 uppercase tracking-widest text-[10px]">Or</span>
          </div>
        </div>

        <button
          type="button"
          onClick={(e) => e.preventDefault()}
          className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 border border-blue-500/50 text-white font-medium text-sm py-2.5 rounded-lg hover:from-blue-500 hover:to-indigo-500 hover:shadow-[0_0_20px_rgba(59,130,246,0.4)] transition-all uppercase tracking-wider"
        >
          <VtitIcon />
          Login với VTIT SSO
        </button>

        {/* Footer Text */}
        <div className="pt-4 text-center">
          <p className="text-[10px] text-zinc-500 uppercase tracking-widest font-semibold">Phát triển bởi P. Công Nghệ Sản Phẩm - TTCN</p>
        </div>
      </div>
    </div>
  );
}

function AuthForm(props: {
  email: string;
  password: string;
  name: string;
  error: string | null;
  notice: string | null;
  loading: boolean;
  onEmailChange: (value: string) => void;
  onPasswordChange: (value: string) => void;
  onNameChange: (value: string) => void;
  onSubmit: (e: React.FormEvent) => void;
}) {
  const inputClass =
    "w-full bg-[#030712]/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder-zinc-500 outline-none focus:border-accent focus:shadow-[0_0_15px_rgba(8,145,178,0.3)] transition-all";

  return (
    <form onSubmit={props.onSubmit} className="space-y-4">
      <input
        type="email"
        placeholder="Email nội bộ"
        value={props.email}
        onChange={(e) => props.onEmailChange(e.target.value)}
        required
        className={inputClass}
      />
      <input
        type="password"
        placeholder="Mật khẩu"
        value={props.password}
        onChange={(e) => props.onPasswordChange(e.target.value)}
        required
        minLength={8}
        className={inputClass}
      />

      {props.error && <p className="text-sm text-red-400">{props.error}</p>}
      {props.notice && <p className="text-sm text-accent">{props.notice}</p>}

      <button
        type="submit"
        disabled={props.loading}
        className="w-full bg-accent/90 border border-accent/50 text-white font-bold tracking-wider text-sm py-3 rounded-lg hover:bg-accent hover:shadow-[0_0_20px_rgba(8,145,178,0.5)] transition-all disabled:opacity-50 uppercase"
      >
        {props.loading ? "Processing..." : "Đăng nhập hệ thống"}
      </button>
    </form>
  );
}