import React, { useState } from 'react';
import { Mail, Lock, User, Phone, BookOpen, X, ShieldAlert } from 'lucide-react';
import { Language, Student } from '../types';
import { translations } from '../data';

interface RegisterModalProps {
  lang: Language;
  onClose: () => void;
  onRegister: (student: Student) => void;
  onShowLogin: () => void;
}

export function RegisterModal({ lang, onClose, onRegister, onShowLogin }: RegisterModalProps) {
  const t = translations[lang];
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [bio, setBio] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !email || !phone || !password) return;

    const newStudent: Student = {
      id: 'student-' + Math.floor(1000 + Math.random() * 9000),
      name,
      email,
      phone,
      bio,
      registeredAt: new Date().toLocaleDateString(lang === 'ar' ? 'ar-EG' : 'en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    };

    onRegister(newStudent);
  };

  return (
    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div 
        className="bg-white rounded-2xl max-w-lg w-full overflow-hidden shadow-2xl border border-teal-50 animate-in fade-in zoom-in-95 duration-200"
        dir={lang === 'ar' ? 'rtl' : 'ltr'}
      >
        {/* Header */}
        <div className="bg-teal-850 text-white p-6 relative">
          <h3 className="font-sans font-bold text-lg md:text-xl">{t.registerFormTitle}</h3>
          <p className="text-xs text-teal-100/80 mt-1">{t.registerFormSubtitle}</p>
          <button 
            onClick={onClose}
            className="text-white hover:bg-white/10 p-1.5 rounded-full absolute right-4 top-4 transition-colors"
          >
            <X size={20} />
          </button>
        </div>

        {/* Form Body */}
        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Full Name */}
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">{t.fullName} *</label>
              <div className="relative">
                <User size={16} className="text-gray-400 absolute left-3 top-3.5" />
                <input
                  type="text"
                  required
                  placeholder={lang === 'en' ? 'John Doe' : 'أحمد بن علي'}
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="w-full border border-gray-300 rounded-xl p-2.5 pl-10 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-600 transition-all"
                />
              </div>
            </div>

            {/* Email */}
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">{t.emailAddress} *</label>
              <div className="relative">
                <Mail size={16} className="text-gray-400 absolute left-3 top-3.5" />
                <input
                  type="email"
                  required
                  placeholder="student@daralfikr.sch.ng"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full border border-gray-300 rounded-xl p-2.5 pl-10 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-600 transition-all"
                />
              </div>
            </div>

            {/* Phone */}
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">{t.phoneNumber} *</label>
              <div className="relative">
                <Phone size={16} className="text-gray-400 absolute left-3 top-3.5" />
                <input
                  type="tel"
                  required
                  placeholder="+2348134200006"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  className="w-full border border-gray-300 rounded-xl p-2.5 pl-10 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-600 transition-all"
                />
              </div>
            </div>

            {/* Password */}
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">{t.password} *</label>
              <div className="relative">
                <Lock size={16} className="text-gray-400 absolute left-3 top-3.5" />
                <input
                  type="password"
                  required
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full border border-gray-300 rounded-xl p-2.5 pl-10 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-600 transition-all"
                />
              </div>
            </div>
          </div>

          {/* Bio */}
          <div>
            <label className="block text-xs font-bold text-gray-600 mb-1">{t.bio}</label>
            <div className="relative">
              <BookOpen size={16} className="text-gray-400 absolute left-3 top-3" />
              <textarea
                placeholder={lang === 'en' ? 'Tell us about your educational background...' : 'أخبرنا عن خلفيتك الأكاديمية واهتماماتك الدراسية...'}
                value={bio}
                onChange={(e) => setBio(e.target.value)}
                rows={2}
                className="w-full border border-gray-300 rounded-xl p-2.5 pl-10 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-600 transition-all"
              />
            </div>
          </div>

          <button
            type="submit"
            className="w-full bg-teal-700 hover:bg-teal-800 text-white font-bold text-sm py-3 px-4 rounded-xl shadow-md transition-all active:scale-[0.98]"
          >
            {t.submitRegister}
          </button>

          <div className="text-center pt-2">
            <button
              type="button"
              onClick={onShowLogin}
              className="text-xs text-teal-750 font-bold hover:underline"
            >
              {t.haveAccount}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

interface LoginModalProps {
  lang: Language;
  onClose: () => void;
  onLogin: (student: Student) => void;
  onShowRegister: () => void;
}

export function LoginModal({ lang, onClose, onLogin, onShowRegister }: LoginModalProps) {
  const t = translations[lang];
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email || !password) return;

    // Login with given credentials, or create a mock student with the login details
    const studentName = email.split('@')[0];
    const mockStudent: Student = {
      id: 'student-' + Math.floor(1000 + Math.random() * 9000),
      name: studentName.charAt(0).toUpperCase() + studentName.slice(1),
      email: email,
      phone: '+234 813 420 0006',
      bio: lang === 'en' 
        ? 'Professional Student pursuing tech and classical sciences.' 
        : 'طالب أكاديمي يسعى للتفوق في العلوم اللغوية الكلاسيكية والتكنولوجيا.',
      registeredAt: new Date().toLocaleDateString(lang === 'ar' ? 'ar-EG' : 'en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    };

    onLogin(mockStudent);
  };

  const triggerDemoLogin = () => {
    const demoStudent: Student = {
      id: 'student-demo',
      name: lang === 'en' ? 'Habu Abubakar' : 'هابو أبو بكر',
      email: 'habuamar36@gmail.com',
      phone: '+2348134200006',
      bio: lang === 'en'
        ? 'Determined student of technology and linguistic sciences, residing in Abuja, FCT.'
        : 'طالب مجتهد في هندسة التقنيات الحديثة واللسانيات الكلاسيكية، مقيم بمدينة أبوجا.',
      registeredAt: 'June 26, 2026'
    };
    onLogin(demoStudent);
  };

  return (
    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div 
        className="bg-white rounded-2xl max-w-md w-full overflow-hidden shadow-2xl border border-teal-50 animate-in fade-in zoom-in-95 duration-200"
        dir={lang === 'ar' ? 'rtl' : 'ltr'}
      >
        {/* Header */}
        <div className="bg-teal-850 text-white p-6 relative">
          <h3 className="font-sans font-bold text-lg md:text-xl">{t.loginBtn}</h3>
          <p className="text-xs text-teal-100/80 mt-1">
            {lang === 'en' ? 'Log in to track modules, join live classes, and download certs.' : 'سجل الدخول لمتابعة الدروس، حضور البث المباشر والحصول على الشهادات.'}
          </p>
          <button 
            onClick={onClose}
            className="text-white hover:bg-white/10 p-1.5 rounded-full absolute right-4 top-4 transition-colors"
          >
            <X size={20} />
          </button>
        </div>

        {/* Form Body */}
        <div className="p-6 space-y-4">
          {/* Quick Demo Access banner */}
          <div className="bg-amber-50 rounded-xl p-3.5 border border-amber-200 flex items-start gap-2.5">
            <ShieldAlert size={18} className="text-amber-600 shrink-0 mt-0.5" />
            <div>
              <p className="text-xs font-bold text-amber-800">
                {lang === 'en' ? 'Want a quick tour?' : 'تريد تجربة سريعة للبوابة؟'}
              </p>
              <button
                type="button"
                onClick={triggerDemoLogin}
                className="mt-1 text-xs bg-amber-600 hover:bg-amber-700 text-white font-extrabold px-3 py-1 rounded-lg transition-all"
              >
                {lang === 'en' ? '🔑 Instant Demo Log In' : '🔑 تسجيل دخول تجريبي فوري'}
              </button>
            </div>
          </div>

          <form onSubmit={handleSubmit} className="space-y-4">
            {/* Email */}
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">{t.emailAddress} *</label>
              <div className="relative">
                <Mail size={16} className="text-gray-400 absolute left-3 top-3.5" />
                <input
                  type="email"
                  required
                  placeholder="student@daralfikr.sch.ng"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full border border-gray-300 rounded-xl p-2.5 pl-10 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-600 transition-all"
                />
              </div>
            </div>

            {/* Password */}
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">{t.password} *</label>
              <div className="relative">
                <Lock size={16} className="text-gray-400 absolute left-3 top-3.5" />
                <input
                  type="password"
                  required
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full border border-gray-300 rounded-xl p-2.5 pl-10 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-600 transition-all"
                />
              </div>
            </div>

            <button
              type="submit"
              className="w-full bg-teal-700 hover:bg-teal-800 text-white font-bold text-sm py-3 px-4 rounded-xl shadow-md transition-all active:scale-[0.98]"
            >
              {t.loginBtn}
            </button>
          </form>

          <div className="text-center pt-2">
            <button
              type="button"
              onClick={onShowRegister}
              className="text-xs text-teal-750 font-bold hover:underline"
            >
              {lang === 'en' ? 'New here? Register a student account instead.' : 'طالب جديد؟ اضغط هنا لإنشاء حساب أكاديمي.'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
