'use client';

import { useActionState } from 'react';
import { login } from '../actions';
import { Lock, ArrowRight } from 'lucide-react';

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

    return (
        <div className="min-h-screen bg-black flex items-center justify-center p-4">
            <div className="w-full max-w-md">
                <div className="bg-zinc-950 border border-white/10 rounded-3xl p-8 space-y-8">
                    <div className="text-center space-y-2">
                        <div className="w-16 h-16 bg-[#1e9a83]/10 rounded-full flex items-center justify-center mx-auto mb-6">
                            <Lock className="w-8 h-8 text-[#1e9a83]" />
                        </div>
                        <h1 className="text-2xl font-black uppercase tracking-widest text-white">Yönetici Girişi</h1>
                        <p className="text-white/40 text-sm">Devam etmek için şifrenizi giriniz.</p>
                    </div>

                    <form action={formAction} className="space-y-6">
                        <div className="space-y-2">
                            <label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Kullanıcı Adı</label>
                            <input
                                type="text"
                                name="username"
                                defaultValue="admin"
                                required
                                className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/20 focus:border-[#1e9a83] focus:ring-1 focus:ring-[#1e9a83] outline-none transition-all"
                                placeholder="örn: admin"
                            />
                        </div>

                        <div className="space-y-2">
                            <label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Şifre</label>
                            <input
                                type="password"
                                name="password"
                                required
                                className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/20 focus:border-[#1e9a83] focus:ring-1 focus:ring-[#1e9a83] outline-none transition-all"
                                placeholder="••••••••"
                            />
                        </div>

                        {state?.error && (
                            <p className="text-red-500 text-xs font-bold text-center bg-red-500/10 py-2 rounded-lg">{state.error}</p>
                        )}

                        <button
                            type="submit"
                            disabled={pending}
                            className="w-full bg-[#1e9a83] hover:bg-[#157a67] text-white font-bold py-3 px-4 rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
                        >
                            {pending ? 'Giriş Yapılıyor...' : 'Giriş Yap'}
                            {!pending && <ArrowRight className="w-4 h-4" />}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    );
}