'use client';
import { useState } from 'react';
import { signIn } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import { Lock, Mail, AlertCircle } from 'lucide-react';
import { motion } from 'framer-motion';
import { useLanguage } from '@/lib/i18n/language-context';
import { LanguageSwitcher } from '@/components/public/language-switcher';

export default function AdminLoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const { t } = useLanguage();

  const handleSubmit = async (e: any) => {
    e?.preventDefault?.();
    setError('');
    setLoading(true);
    try {
      const result = await signIn('credentials', {
        email,
        password,
        redirect: false,
      });
      if (result?.error) {
        setError(t.admin.login.error);
      } else {
        router.replace('/admin/dashboard');
      }
    } catch {
      setError(t.admin.login.error);
    }
    setLoading(false);
  };

  return (
    <div className="min-h-screen bg-[#1a1a1a] flex items-center justify-center px-4">
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="relative w-[200px] h-[60px] mx-auto mb-4">
            <Image src="/images/logo.png" alt="Evo Truck Sales" fill className="object-contain brightness-200" />
          </div>
          <h1 className="text-white text-xl font-semibold">{t.admin.login.title}</h1>
          <div className="mt-3 flex justify-center">
            <LanguageSwitcher variant="admin" />
          </div>
        </div>
        <form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-2xl p-8">
          {error && (
            <div className="bg-red-50 text-red-700 text-sm rounded-lg p-3 mb-4 flex items-center gap-2">
              <AlertCircle className="w-4 h-4" /> {error}
            </div>
          )}
          <div className="mb-4">
            <label className="text-sm font-medium text-gray-700 mb-1 block">Email</label>
            <div className="relative">
              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input type="email" required value={email} onChange={(e: any) => setEmail(e?.target?.value ?? '')} className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg text-sm focus:border-red-500 focus:ring-1 focus:ring-red-500 outline-none" placeholder={t.admin.login.emailPlaceholder} />
            </div>
          </div>
          <div className="mb-6">
            <label className="text-sm font-medium text-gray-700 mb-1 block">{t.admin.login.passwordPlaceholder}</label>
            <div className="relative">
              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input type="password" required value={password} onChange={(e: any) => setPassword(e?.target?.value ?? '')} className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg text-sm focus:border-red-500 focus:ring-1 focus:ring-red-500 outline-none" placeholder="••••••••" />
            </div>
          </div>
          <button type="submit" disabled={loading} className="w-full bg-red-600 hover:bg-red-700 disabled:bg-gray-400 text-white py-3 rounded-lg font-semibold text-sm transition">
            {loading ? t.admin.login.loggingIn : t.admin.login.loginButton}
          </button>
        </form>
      </motion.div>
    </div>
  );
}