// Login Page Component with IceX Wolf Logo
window.LoginPage = function LoginPage({ onLogin, error, loading }) {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPassword, setShowPassword] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!username.trim() || !password.trim()) return;
    onLogin(username.trim(), password.trim());
  };

  return (
    <div className="min-h-screen bg-[#080C14] text-slate-200 flex items-center justify-center p-4 relative overflow-hidden">
      {/* Background Neon Aura */}
      <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[550px] h-[550px] bg-cyan-500/10 rounded-full blur-[140px] pointer-events-none"></div>
      <div className="absolute bottom-10 right-10 w-[350px] h-[350px] bg-blue-600/10 rounded-full blur-[120px] pointer-events-none"></div>

      <div className="w-full max-w-md relative z-10 animate-fade-in">
        {/* Brand Header with Wolf Logo */}
        <div className="text-center mb-6">
          <div className="inline-block relative">
            <img
              src="logo.png"
              alt="IceX Wolf Logo"
              className="w-24 h-24 object-contain mx-auto logo-glow-lg transition hover:scale-105"
            />
          </div>
          <h1 className="text-2xl font-bold text-white tracking-wider font-brand mt-2">
            IceX Modz
          </h1>
          <p className="text-xs text-slate-400 mt-1 font-mono">
            Licensing & Authentication Web Panel
          </p>
        </div>

        {/* Login Box */}
        <div className="bg-[#0E1626] border border-[#1E2D4A] rounded-none p-6 sm:p-7 shadow-2xl backdrop-blur-xl">
          <div className="flex items-center justify-between pb-4 border-b border-[#1E2D4A] mb-5">
            <div className="text-xs font-semibold text-white tracking-wide font-mono flex items-center gap-2">
              <i className="fa-solid fa-lock text-cyan-400 text-xs"></i>
              <span>ADMIN & RESELLER ACCESS</span>
            </div>
            <span className="text-[10px] font-mono px-2 py-0.5 rounded-none bg-emerald-500/10 text-[#00FF9D] border border-emerald-500/20">
              PROTECTED
            </span>
          </div>

          {error && (
            <div className="mb-5 p-3.5 rounded-none bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs flex items-start gap-2.5 animate-fade-in">
              <i className="fa-solid fa-circle-exclamation text-rose-400 text-sm mt-0.5 shrink-0"></i>
              <div className="break-anywhere">{error}</div>
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1.5 font-mono">
                USERNAME (Owner หรือ Reseller)
              </label>
              <div className="relative">
                <i className="fa-solid fa-user absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500 text-xs"></i>
                <input
                  type="text"
                  required
                  autoComplete="username"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  placeholder="admin หรือ ชื่อตัวแทน"
                  className="w-full pl-10 pr-4 py-2.5 rounded-none bg-[#080C14] border border-[#1E2D4A] focus:border-[#1D63FF] focus:ring-1 focus:ring-[#1D63FF] text-sm text-white placeholder-slate-600 transition outline-none"
                  style={{ backgroundColor: '#080C14', color: '#FFFFFF' }}
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1.5 font-mono">
                PASSWORD
              </label>
              <div className="relative">
                <i className="fa-solid fa-key absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500 text-xs"></i>
                <input
                  type={showPassword ? 'text' : 'password'}
                  required
                  autoComplete="current-password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  className="w-full pl-10 pr-10 py-2.5 rounded-none bg-[#080C14] border border-[#1E2D4A] focus:border-[#1D63FF] focus:ring-1 focus:ring-[#1D63FF] text-sm text-white placeholder-slate-600 transition outline-none"
                  style={{ backgroundColor: '#080C14', color: '#FFFFFF' }}
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition"
                >
                  <i className={`fa-solid ${showPassword ? 'fa-eye-slash' : 'fa-eye'} text-xs`}></i>
                </button>
              </div>
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full mt-2 py-3 px-4 rounded-none bg-[#1D63FF] hover:bg-[#3878FF] text-white font-semibold text-sm shadow-lg shadow-blue-600/30 transition duration-200 flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50 font-mono"
            >
              {loading ? (
                <>
                  <i className="fa-solid fa-circle-notch fa-spin text-sm"></i>
                  <span>กำลังตรวจสอบ...</span>
                </>
              ) : (
                <>
                  <i className="fa-solid fa-right-to-bracket text-xs"></i>
                  <span>เข้าสู่ระบบ (Sign In)</span>
                </>
              )}
            </button>
          </form>

          {/* Security Notice */}
          <div className="mt-5 pt-4 border-t border-[#1E2D4A] flex items-center justify-between text-[11px] text-slate-500 font-mono">
            <span className="flex items-center gap-1.5">
              <i className="fa-solid fa-shield-halved text-[#00FF9D] text-xs"></i>
              Rate Limit Protection
            </span>
            <span>HMAC-SHA256</span>
          </div>
        </div>

        <div className="text-center mt-5 text-xs text-slate-500 font-mono">
          Copyright By Hack.CL 2026
        </div>
      </div>
    </div>
  );
};