"use client";

import { useActionState } from "react";
import { login } from "@/app/actions/auth";
import { Lock, ArrowRight } from "lucide-react";
import Image from "next/image";

export default function LoginPage() {
  const [state, formAction, isPending] = useActionState(login, null);

  return (
    <div className="flex-grow flex items-center justify-center p-4 relative min-h-screen overflow-hidden bg-dark">
      {/* Background Image with Overlay */}
      <div className="absolute inset-0 z-0">
        <Image
          src="https://images.unsplash.com/photo-1526367790999-0150786686a2?q=80&w=2940&auto=format&fit=crop"
          alt="Kite Beach Akyaka"
          fill
          className="object-cover opacity-30 scale-105 animate-[pulse_10s_ease-in-out_infinite]"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-dark/90 via-dark/80 to-dark/95" />
      </div>

      <div className="relative z-10 w-full max-w-md animate-fade-up">
        {/* Logo or Brand */}
        <div className="text-center mb-10">
          <h1 className="font-serif font-black tracking-[0.2em] uppercase text-4xl text-transparent bg-clip-text bg-gradient-to-r from-white to-white/60 mb-2">
            KITE BEACH
          </h1>
          <p className="text-white/50 tracking-widest text-xs uppercase">Yönetim Paneli</p>
        </div>

        <div className="bg-white/10 backdrop-blur-xl p-8 sm:p-10 rounded-[2rem] shadow-2xl border border-white/20 relative overflow-hidden">
          {/* Decorative Glow */}
          <div className="absolute -top-20 -right-20 w-40 h-40 bg-accent/40 rounded-full blur-[60px] pointer-events-none" />
          <div className="absolute -bottom-20 -left-20 w-40 h-40 bg-primary/40 rounded-full blur-[60px] pointer-events-none" />
          
          <div className="flex justify-center mb-8 relative">
            <div className="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center backdrop-blur-md border border-white/20 shadow-inner">
              <Lock className="w-8 h-8 text-white" />
            </div>
          </div>
          
          <form action={formAction} className="space-y-6 relative z-10">
            <div className="space-y-1.5">
              <label className="block text-xs font-bold text-white/70 tracking-wider uppercase ml-1">Kullanıcı Adı</label>
              <input 
                type="text" 
                name="username" 
                required 
                className="w-full px-5 py-3.5 bg-white/5 border border-white/10 text-white placeholder-white/30 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all"
                placeholder="Yönetici adınızı girin"
              />
            </div>
            <div className="space-y-1.5">
              <label className="block text-xs font-bold text-white/70 tracking-wider uppercase ml-1">Şifre</label>
              <input 
                type="password" 
                name="password" 
                required 
                className="w-full px-5 py-3.5 bg-white/5 border border-white/10 text-white placeholder-white/30 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all"
                placeholder="••••••••"
              />
            </div>
            
            {state?.error && (
              <div className="text-red-300 text-sm text-center bg-red-500/20 border border-red-500/30 p-3 rounded-xl animate-fade-up">
                {state.error}
              </div>
            )}
            
            <button 
              type="submit" 
              disabled={isPending}
              className="w-full group relative flex items-center justify-center gap-3 bg-accent text-white font-bold tracking-widest uppercase py-4 rounded-xl mt-6 hover:bg-accent/90 transition-all disabled:opacity-70 disabled:cursor-not-allowed overflow-hidden shadow-lg shadow-accent/20"
            >
              <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out" />
              <span className="relative z-10 text-xs">{isPending ? "Giriş yapılıyor..." : "Giriş Yap"}</span>
              {!isPending && <ArrowRight className="w-4 h-4 relative z-10 group-hover:translate-x-1 transition-transform" />}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}