"use client";

import { useState } from "react";
import { ShieldCheck, Lock, Mail, ArrowRight, Loader2 } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function LoginPage() {
  const [isLoading, setIsLoading] = useState(false);

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    // Simulate API call to KVM2
    setTimeout(() => {
      window.location.href = "/dashboard";
    }, 1500);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-brand-black relative overflow-hidden dark">
      {/* Animated Industrial Background */}
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center opacity-20 grayscale"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-brand-black via-brand-black/80 to-transparent"></div>
        
        {/* Subtle grid pattern */}
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff0a_1px,transparent_1px),linear-gradient(to_bottom,#ffffff0a_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
      </div>

      <div className="relative z-10 w-full max-w-5xl flex flex-col md:flex-row items-center gap-12 p-6">
        
        {/* Left Branding Section */}
        <div className="flex-1 text-center md:text-left flex flex-col justify-center">
          <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 px-4 py-2 rounded-full mb-8 backdrop-blur-md self-center md:self-start">
            <ShieldCheck className="w-5 h-5 text-brand-red" />
            <span className="text-white text-sm font-bold tracking-widest uppercase">Secure Admin Portal</span>
          </div>
          
          <h1 className="text-5xl md:text-7xl font-black text-white tracking-tighter mb-4 flex items-center justify-center md:justify-start">
            <span className="text-brand-red">K</span>
            <span className="ml-3">CREATION</span>
          </h1>
          
          <p className="text-xl md:text-2xl font-medium text-gray-400 italic mb-8">
            "La Sécurité N'est Pas Un Hasard"
          </p>
          
          <div className="hidden md:block w-24 h-1 bg-brand-red rounded-full"></div>
        </div>

        {/* Right Login Card (Glassmorphism) */}
        <div className="w-full max-w-md">
          <div className="bg-brand-charcoal/60 backdrop-blur-xl border border-white/10 p-8 rounded-2xl shadow-2xl relative overflow-hidden">
            
            {/* Top decorative accent */}
            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-brand-red to-transparent opacity-50"></div>
            
            <h2 className="text-2xl font-bold text-white mb-2">Welcome Back</h2>
            <p className="text-sm text-gray-400 mb-8">Enter your credentials to access the enterprise dashboard.</p>
            
            <form onSubmit={handleLogin} className="space-y-5">
              <div className="space-y-2">
                <Label htmlFor="email" className="text-gray-300 font-semibold text-xs uppercase tracking-wider">Email Address</Label>
                <div className="relative">
                  <Mail className="absolute left-3 top-3 h-5 w-5 text-gray-500" />
                  <Input 
                    id="email" 
                    type="email" 
                    placeholder="admin@k-creation.dz" 
                    className="pl-10 bg-black/40 border-white/10 text-white placeholder:text-gray-600 focus-visible:ring-brand-red focus-visible:border-brand-red h-12"
                    required 
                  />
                </div>
              </div>
              
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="password" className="text-gray-300 font-semibold text-xs uppercase tracking-wider">Password</Label>
                  <a href="#" className="text-xs text-brand-red hover:text-brand-red/80 font-medium transition-colors">Forgot password?</a>
                </div>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-5 w-5 text-gray-500" />
                  <Input 
                    id="password" 
                    type="password" 
                    placeholder="••••••••" 
                    className="pl-10 bg-black/40 border-white/10 text-white placeholder:text-gray-600 focus-visible:ring-brand-red focus-visible:border-brand-red h-12"
                    required 
                  />
                </div>
              </div>

              <div className="flex items-center space-x-2 pt-2">
                <Checkbox id="remember" className="border-white/20 data-[state=checked]:bg-brand-red data-[state=checked]:border-brand-red" />
                <Label htmlFor="remember" className="text-sm text-gray-400 font-normal cursor-pointer">Remember me for 30 days</Label>
              </div>

              <Button 
                type="submit" 
                className="w-full h-12 mt-4 bg-brand-red hover:bg-brand-red/90 text-white font-bold text-lg tracking-wider transition-all shadow-[0_0_20px_rgba(216,11,23,0.3)] hover:shadow-[0_0_25px_rgba(216,11,23,0.5)]"
                disabled={isLoading}
              >
                {isLoading ? (
                  <Loader2 className="w-5 h-5 animate-spin" />
                ) : (
                  <>
                    SECURE LOGIN <ArrowRight className="w-5 h-5 ml-2" />
                  </>
                )}
              </Button>
            </form>
            
            <div className="mt-8 pt-6 border-t border-white/10 text-center">
              <p className="text-xs text-gray-500 font-medium flex items-center justify-center gap-2">
                <Lock className="w-3 h-3" />
                End-to-End Encrypted Connection
              </p>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}