import { useState } from 'react';
import { Input, Button } from '@heroui/react';
import { MagicCard } from './MagicCard';
import { useAuth } from '../context/AuthContext';

export const Login = () => {
  const { login } = useAuth();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    if (username.length > 0 && password.length > 0) {
      setIsLoading(true);
      setError(false);
      const success = await login(username, password);
      if (!success) {
        setError(true);
      }
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-[#10131f] flex text-foreground selection:bg-[#2563eb]/30 overflow-hidden relative items-center justify-center">
      {/* Background radial gradient glow for atmospheric depth */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#2563eb]/10 blur-[100px] pointer-events-none rounded-full" />
      
      <MagicCard className="w-full max-w-sm rounded-[1.5rem] bg-[#1c1f2c] shadow-[0_20px_50px_rgba(0,0,0,0.3)] ring-1 ring-white/5 z-10 mx-4">
        <form onSubmit={handleLogin} className="p-10 flex flex-col gap-8 items-center bg-transparent relative z-20">
          <div className="flex flex-col items-center gap-2 mb-2 w-full text-center">
            <h1 className="text-2xl font-black text-white tracking-tighter uppercase geist-mono">{import.meta.env.VITE_LIBRARY_TITLE || "Romm"}</h1>
            <p className="text-[10px] geist-mono uppercase tracking-[0.05em] text-[#c3c6d7] opacity-60">{import.meta.env.VITE_LIBRARY_SUBTITLE || "Game Manager"}</p>
          </div>

          <div className="flex flex-col gap-4 w-full">
            <Input 
              autoFocus
              classNames={{
                inputWrapper: "bg-white/5 hover:bg-white/10 group-data-[focus=true]:bg-white/10 focus-within:!bg-white/10 border-none shadow-none ring-0 group-data-[focus=true]:ring-1 group-data-[focus=true]:ring-[#2563eb]/50 transition-all rounded-[0.5rem] h-12",
                input: "text-white geist-mono text-sm placeholder:text-[#c3c6d7]/50"
              }}
              placeholder="Archivist ID"
              startContent={<span className="material-symbols-outlined text-[#c3c6d7] text-sm pr-2">person</span>}
              value={username}
              onValueChange={setUsername}
            />
            
            <Input 
              type="password"
              classNames={{
                inputWrapper: "bg-white/5 hover:bg-white/10 group-data-[focus=true]:bg-white/10 focus-within:!bg-white/10 border-none shadow-none ring-0 group-data-[focus=true]:ring-1 group-data-[focus=true]:ring-[#2563eb]/50 transition-all rounded-[0.5rem] h-12",
                input: "text-white font-sans text-sm tracking-[0.3em] placeholder:text-[#c3c6d7]/50 placeholder:tracking-normal"
              }}
              placeholder="Passcode"
              startContent={<span className="material-symbols-outlined text-[#c3c6d7] text-sm pr-2">lock</span>}
              value={password}
              onValueChange={setPassword}
            />
            {error && (
              <p className="text-red-500 text-[10px] text-center geist-mono uppercase tracking-widest font-bold mt-2 animate-appearance-in">Invalid credentials</p>
            )}
          </div>

          <Button 
            type="submit"
            isLoading={isLoading}
            className="w-full h-12 bg-gradient-to-br from-[#2563eb] to-[#6001d1] hover:opacity-90 text-white font-black flex items-center justify-center gap-2 active:scale-95 transition-all text-[11px] uppercase geist-mono rounded-[3rem] shadow-[0_10px_30px_rgba(37,99,235,0.1)] mt-2"
          >
            {!isLoading && <>Access Vault <span className="material-symbols-outlined text-base" style={{ fontVariationSettings: "'wght' 600" }}>login</span></>}
          </Button>

          <div className="flex w-full items-center gap-4 my-2 opacity-50">
            <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent via-[#c3c6d7] to-transparent"></div>
            <span className="text-[10px] uppercase tracking-widest font-bold geist-mono text-[#c3c6d7]">Or</span>
            <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent via-[#c3c6d7] to-transparent"></div>
          </div>

          <Button 
            as="a"
            href={`${import.meta.env.VITE_ROMM_BASE_URL || 'http://localhost:8080'}/api/login/openid`}
            className="w-full h-12 bg-white/5 hover:bg-white/10 text-white border border-white/5 font-black flex items-center justify-center gap-2 active:scale-95 transition-all text-[11px] uppercase geist-mono rounded-[3rem]"
          >
            <span className="material-symbols-outlined text-base">vpn_key</span>
            Log in with Single Sign-On
          </Button>
        </form>
      </MagicCard>
    </div>
  );
};
