'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/auth-store';
import { useTheme } from '@/lib/theme-store';
import {
  Eye, EyeOff, Sun, Moon, ArrowRight, Loader2,
  TicketCheck, Users, TrendingUp, ShieldCheck,
} from 'lucide-react';

const EDR_GREEN = 'rgb(20, 113, 76)';

const features = [
  { icon: TicketCheck, label: 'Booking Management', desc: 'Full lifecycle booking operations' },
  { icon: Users,       label: 'Passenger Services',  desc: 'Profiles, loyalty & wallet' },
  { icon: TrendingUp,  label: 'Revenue Analytics',   desc: 'Real-time reports & insights' },
  { icon: ShieldCheck, label: 'Fraud Detection',      desc: 'Automated risk monitoring' },
];

export default function LoginPage() {
  const [email, setEmail]         = useState('');
  const [password, setPassword]   = useState('');
  const [loading, setLoading]     = useState(false);
  const [error, setError]         = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [isMounted, setIsMounted] = useState(false);
  const [emailFocused, setEmailFocused]       = useState(false);
  const [passwordFocused, setPasswordFocused] = useState(false);

  const router         = useRouter();
  const { login }      = useAuthStore();
  const { isDark, toggleTheme } = useTheme();

  useEffect(() => { setIsMounted(true); }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      await login(email, password);
      router.push('/dashboard');
    } catch (err: any) {
      setError(err.response?.data?.message || err.message || 'Invalid credentials. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  if (!isMounted) return null;

  return (
    <div className="flex min-h-screen bg-white dark:bg-gray-950">

      {/* ── LEFT PANEL — form ── */}
      <div className="flex-1 lg:flex-none lg:w-[42%] xl:w-[38%] flex flex-col min-h-screen bg-gray-50 dark:bg-gray-950 relative">

        {/* Top bar */}
        <div className="flex items-center justify-between px-8 py-4 lg:px-10">
          {/* Logo — always visible on the form panel */}
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-[rgb(20,113,76)] flex items-center justify-center shadow-md shadow-[rgb(20,113,76)]/30">
              <svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 2C8 2 5 5 5 8v8l2 2h10l2-2V8c0-3-3-6-7-6z" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M8 17v2M16 17v2M5 12h14" />
                <circle cx="9" cy="9" r="1" fill="currentColor" />
                <circle cx="15" cy="9" r="1" fill="currentColor" />
              </svg>
            </div>
            <div>
              <div className="text-xs font-bold text-gray-900 dark:text-white tracking-wide leading-none">ETHIO-DJIBOUTI</div>
              <div className="text-[12px] text-gray-400 dark:text-gray-500 tracking-widest uppercase leading-none mt-0.5">Railway</div>
            </div>
          </div>

          <button
            onClick={toggleTheme}
            className="p-2 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-500 dark:text-gray-400"
            aria-label="Toggle theme"
          >
            {isDark
              ? <Sun className="w-4 h-4 text-amber-400" />
              : <Moon className="w-4 h-4" />
            }
          </button>
        </div>

        {/* Form area */}
        <div className="flex-1 flex items-center justify-center px-8 py-10 lg:px-10 xl:px-14">
          <div className="w-full max-w-xs">

            {/* Heading */}
            <div className="mb-8 animate-fade-up" style={{ animationDelay: '0ms' }}>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white tracking-tight">
                Sign in to continue
              </h2>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                Enter your credentials to access the back-office.
              </p>
            </div>

            {/* Error */}
            {error && (<div className="animate-fade-up" style={{ animationDelay: '60ms' }}>
              <div className="mb-5 flex items-start gap-3 rounded-xl bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-900/60 px-4 py-3">
                <div className="flex-shrink-0 mt-0.5 w-4 h-4 rounded-full bg-red-500 flex items-center justify-center">
                  <span className="text-white text-[10px] font-bold">!</span>
                </div>
                <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
              </div></div>
            )}

            <form onSubmit={handleSubmit} className="space-y-4 animate-fade-up" style={{ animationDelay: '80ms' }}>

              {/* Email field */}
              <div>
                <label className="block text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2">
                  Email address
                </label>
                <div className={`relative rounded-xl transition-all duration-200 ${
                  emailFocused
                    ? 'ring-2 ring-[rgb(20,113,76)] ring-offset-0'
                    : 'ring-1 ring-gray-200 dark:ring-gray-800'
                }`}>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => { setEmail(e.target.value); setError(''); }}
                    onFocus={() => setEmailFocused(true)}
                    onBlur={() => setEmailFocused(false)}
                    className="w-full px-4 py-3 rounded-xl bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 text-sm focus:outline-none"
                    placeholder="name@edr.com"
                    required
                    autoComplete="email"
                  />
                </div>
              </div>

              {/* Password field */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <label className="block text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
                    Password
                  </label>
                  <button
                    type="button"
                    className="text-xs text-[rgb(20,113,76)] hover:text-[rgb(16,90,61)] font-medium transition-colors"
                  >
                    Forgot password?
                  </button>
                </div>
                <div className={`relative rounded-xl transition-all duration-200 ${
                  passwordFocused
                    ? 'ring-2 ring-[rgb(20,113,76)] ring-offset-0'
                    : 'ring-1 ring-gray-200 dark:ring-gray-800'
                }`}>
                  <input
                    type={showPassword ? 'text' : 'password'}
                    value={password}
                    onChange={(e) => { setPassword(e.target.value); setError(''); }}
                    onFocus={() => setPasswordFocused(true)}
                    onBlur={() => setPasswordFocused(false)}
                    className="w-full px-4 py-3 pr-11 rounded-xl bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 text-sm focus:outline-none"
                    placeholder="••••••••••"
                    required
                    autoComplete="current-password"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 w-7 h-7 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all"
                    aria-label="Toggle password visibility"
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                </div>
              </div>

              {/* Submit */}
              <button
                type="submit"
                disabled={loading || !email || !password}
                className="group w-full mt-2 flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-semibold text-sm text-white transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                style={{ background: loading || !email || !password
                  ? 'rgb(20,113,76)'
                  : `linear-gradient(135deg, rgb(20,113,76) 0%, rgb(16,143,96) 100%)`
                }}
              >
                {loading ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin" />
                    Signing in…
                  </>
                ) : (
                  <>
                    Sign in
                    <ArrowRight className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-0.5" />
                  </>
                )}
              </button>
            </form>

            {/* Divider */}
            <div className="mt-8 pt-6 border-t border-gray-100 dark:border-gray-800/60 animate-fade-up" style={{ animationDelay: '160ms' }}>
              <div className="flex items-center gap-3 p-3 rounded-xl bg-amber-50 dark:bg-amber-950/20 border border-amber-100 dark:border-amber-900/30">
                <ShieldCheck className="w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0" />
                <p className="text-xs text-amber-700 dark:text-amber-400 leading-relaxed">
                  Access is restricted to authorised EDR staff only. All sessions are logged and audited.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="px-8 py-4 lg:px-10 flex items-center justify-between">
          <span className="text-xs text-gray-400 dark:text-gray-600">
            Back-office · v1.0
          </span>
          <span className="text-xs text-gray-400 dark:text-gray-600">
            Need help? <a href="mailto:support@edr.com" className="text-[rgb(20,113,76)] hover:underline">support@edr.com</a>
          </span>
        </div>
      </div>

      {/* ── RIGHT PANEL — photo ── */}
      <div className="hidden lg:flex flex-1 relative flex-col overflow-hidden">
        {/* Layer 1 — base photo, desaturated */}
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: "url('/banner.jpg')",
            filter: isDark
              ? 'saturate(0.1) brightness(1)'
              : 'saturate(0.15) brightness(1)',
          }}
        />

        {/* Layer 2 — brand green color wash */}
        <div
          className="absolute inset-0"
          style={{
            background: 'linear-gradient(145deg, rgb(5,46,30) 0%, rgb(20,113,76) 55%, rgb(4,120,67) 100%)',
            mixBlendMode: 'multiply',
            opacity: isDark ? 0.8 : 0.4,
          }}
        />

        {/* Content */}
        <div className="relative z-10 flex flex-col h-full p-10 xl:p-14">
          {/* Badge */}
          <div className="flex justify-start">
            <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-3 py-1">
              <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
              <span className="text-white/80 text-xs font-medium tracking-wide">Back-office Portal v1.0</span>
            </div>
          </div>

          {/* Hero text */}
          <div className="mt-auto mb-auto">
            <h1 className="text-4xl xl:text-5xl font-bold text-white leading-tight mb-4">
              Passenger<br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-emerald-500">
                Management
              </span>
              <br />System
            </h1>
            <p className="text-white/60 text-base leading-relaxed max-w-sm">
              Unified platform for booking operations, passenger services, revenue analytics, and real-time train management.
            </p>
          </div>

          {/* Feature grid */}
          <div className="mt-auto grid grid-cols-2 gap-3">
            {features.map(({ icon: Icon, label, desc }) => (
              <div
                key={label}
                className="flex items-start gap-3 bg-white/5 hover:bg-white/10 backdrop-blur-sm border border-white/10 rounded-xl p-3.5 transition-colors duration-200"
              >
                <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-[rgb(20,113,76)]/40 flex items-center justify-center">
                  <Icon className="w-4 h-4 text-emerald-300" />
                </div>
                <div>
                  <div className="text-white text-xs font-semibold">{label}</div>
                  <div className="text-white/40 text-xs mt-0.5">{desc}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Bottom rule */}
          <div className="mt-8 pt-6 border-t border-white/10">
            <span className="text-white/30 text-xs block">© 2026 Ethio-Djibouti Railway S.C. — Secure · Encrypted · Monitored</span>            
          </div>
        </div>
      </div>
    </div>
  );
}