'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { CreditCard, GraduationCap, Lock, Mail, Users, ArrowRight, Loader2 } from 'lucide-react';

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

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      router.push('/dashboard/admin');
    }, 1500);
  };

  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
      {/* Background Decor */}
      <div className="absolute inset-0 z-0 overflow-hidden">
        <div className="absolute -top-40 -right-40 w-[600px] h-[600px] bg-emerald-700/10 rounded-full blur-3xl"></div>
        <div className="absolute -bottom-40 -left-40 w-[600px] h-[600px] bg-amber-500/10 rounded-full blur-3xl"></div>
      </div>

      <div className="relative z-10 w-full max-w-[1000px] grid md:grid-cols-2 bg-white rounded-3xl overflow-hidden shadow-2xl border border-slate-100">
        
        {/* Left Side - Hero / Branding */}
        <div className="bg-emerald-800 p-12 text-white flex flex-col justify-between relative overflow-hidden hidden md:flex">
          {/* Subtle gold overlay pattern */}
          <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
          
          <div className="relative z-10">
            <div className="inline-flex items-center gap-3 bg-white/10 px-4 py-2 rounded-full border border-white/20 backdrop-blur-sm mb-12">
              <GraduationCap className="h-5 w-5 text-amber-400" />
              <span className="text-sm font-medium text-emerald-50 whitespace-nowrap">Madrasah Aliyah Mamba'ul Ma'arif</span>
            </div>
            
            <h1 className="text-4xl md:text-5xl font-bold leading-tight mb-6">
              Sistem <span className="text-amber-400">e-Payment</span><br/>Modern & Aman
            </h1>
            <p className="text-emerald-100/80 text-lg md:text-xl leading-relaxed max-w-sm font-light">
              Kelola pembayaran biaya pendidikan secara transparan, mudah, dan terdokumentasi dengan baik.
            </p>
          </div>

          <div className="relative z-10 mt-20 flex items-center gap-4 border-t border-white/20 pt-8">
            <div className="h-14 w-14 bg-amber-400 rounded-full flex items-center justify-center text-emerald-900 shadow-lg shadow-amber-400/20">
              <CreditCard className="h-6 w-6" />
            </div>
            <div>
              <p className="text-sm font-semibold text-white tracking-wide">e-Payment MA MAMA</p>
              <p className="text-xs text-emerald-200">v2.0 Professional Edition</p>
            </div>
          </div>
        </div>

        {/* Right Side - Login Form / Demo Links */}
        <div className="p-8 md:p-12 lg:p-16 flex flex-col justify-center">
          <div className="md:hidden flex items-center gap-3 mb-8">
            <div className="h-10 w-10 bg-emerald-800 rounded-lg flex items-center justify-center text-amber-400">
              <GraduationCap className="h-5 w-5" />
            </div>
            <span className="font-bold text-slate-800">MA Mamba'ul Ma'arif</span>
          </div>

          <h2 className="text-3xl font-bold text-slate-900 mb-2">Selamat Datang 👋</h2>
          <p className="text-slate-500 mb-8">Silakan masuk menggunakan akun Anda.</p>

          <form className="space-y-5" onSubmit={handleLogin}>
            <div className="space-y-2">
              <label className="text-sm font-medium text-slate-700">Email Address</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                  <Mail className="h-5 w-5" />
                </div>
                <input 
                  type="email" 
                  className="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20 outline-none transition-all"
                  placeholder="admin@mamama.sch.id"
                  readOnly
                />
              </div>
            </div>

            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <label className="text-sm font-medium text-slate-700">Password</label>
                <a href="#" className="text-xs font-semibold text-emerald-700 hover:text-emerald-800">Lupa Password?</a>
              </div>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                  <Lock className="h-5 w-5" />
                </div>
                <input 
                  type="password" 
                  className="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20 outline-none transition-all"
                  placeholder="••••••••"
                  value="12345678"
                  readOnly
                />
              </div>
            </div>

            <button
              disabled={isLoading} 
              className="w-full py-3.5 px-4 bg-emerald-800 hover:bg-emerald-900 disabled:opacity-70 disabled:cursor-not-allowed text-white font-medium rounded-xl transition-colors shadow-lg shadow-emerald-800/20 flex items-center justify-center gap-2"
            >
              {isLoading ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  Memproses...
                </>
              ) : (
                <>
                  Sign In <ArrowRight className="h-4 w-4" />
                </>
              )}
            </button>
          </form>

          <div className="mt-12 pt-8 border-t border-slate-100">
            <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Akses Preview Peran (Mockup)</p>
            <div className="grid grid-cols-2 gap-3">
              <Link href="/dashboard/admin" className="flex items-center p-3 gap-3 rounded-lg border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50/50 transition-all group">
                <div className="h-8 w-8 rounded bg-emerald-100 text-emerald-700 flex items-center justify-center group-hover:scale-110 transition-transform">
                  <Lock className="h-4 w-4" />
                </div>
                <div className="text-left">
                  <p className="text-sm font-bold text-slate-800">Admin</p>
                </div>
              </Link>
              <Link href="/dashboard/kepala" className="flex items-center p-3 gap-3 rounded-lg border border-slate-200 hover:border-amber-500 hover:bg-amber-50/50 transition-all group">
                <div className="h-8 w-8 rounded bg-amber-100 text-amber-700 flex items-center justify-center group-hover:scale-110 transition-transform">
                  <Users className="h-4 w-4" />
                </div>
                <div className="text-left">
                  <p className="text-sm font-bold text-slate-800">Kepala</p>
                </div>
              </Link>
              <Link href="/dashboard/bendahara" className="flex items-center p-3 gap-3 rounded-lg border border-slate-200 hover:border-blue-500 hover:bg-blue-50/50 transition-all group">
                <div className="h-8 w-8 rounded bg-blue-100 text-blue-700 flex items-center justify-center group-hover:scale-110 transition-transform">
                  <CreditCard className="h-4 w-4" />
                </div>
                <div className="text-left">
                  <p className="text-sm font-bold text-slate-800">Bendahara</p>
                </div>
              </Link>
              <Link href="/dashboard/wali" className="flex items-center p-3 gap-3 rounded-lg border border-slate-200 hover:border-purple-500 hover:bg-purple-50/50 transition-all group">
                <div className="h-8 w-8 rounded bg-purple-100 text-purple-700 flex items-center justify-center group-hover:scale-110 transition-transform">
                  <Users className="h-4 w-4" />
                </div>
                <div className="text-left">
                  <p className="text-sm font-bold text-slate-800">Wali Murid</p>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}