'use client';

import React, { useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { apiRequest } from '@/lib/api';
import { toast } from '@/context/ToastContext';
import {
  X,
  User,
  Mail,
  Phone,
  Lock,
  AlertCircle,
  ArrowRight,
  LogIn,
  UserPlus,
  Eye,
  EyeOff,
} from 'lucide-react';

interface AuthModalProps {
  isOpen: boolean;
  onClose: () => void;
  initialMode?: 'login' | 'signup';
}

export default function AuthModal({ isOpen, onClose, initialMode = 'signup' }: AuthModalProps) {
  const [mode, setMode] = useState<'login' | 'signup'>(initialMode);

  // Form states
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const { login } = useAuth();

  if (!isOpen) return null;

  const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    if (!name.trim() || !email.trim()) {
      setError('Name and email are required');
      return;
    }

    if (password.length < 8) {
      setError('Password must be at least 8 characters long');
      return;
    }

    setLoading(true);
    const res = await apiRequest('/auth/student/register', {
      method: 'POST',
      body: JSON.stringify({ name, email, phoneNumber, password }),
    });

    setLoading(false);

    if (res.success && res.token && res.student) {
      toast.success('Registration successful! Welcome to ApkaGermanSchool.');
      login(res.token, {
        id: res.student.id,
        name: res.student.name,
        email: res.student.email,
        phoneNumber: res.student.phoneNumber,
        status: res.student.status,
        role: 'student',
      });
      onClose();
    } else {
      setError(res.error || 'Registration failed. Please try again.');
    }
  };

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    const res = await apiRequest('/auth/student/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    });

    setLoading(false);

    if (res.success && res.token && res.student) {
      toast.success(`Welcome back, ${res.student.name}!`);
      login(res.token, {
        id: res.student.id,
        name: res.student.name,
        email: res.student.email,
        phoneNumber: res.student.phoneNumber,
        status: res.student.status,
        role: 'student',
      });
      onClose();
    } else {
      setError(res.error || 'Failed to login. Please verify your credentials.');
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-xs animate-fadeIn">
      <div className="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl border border-gray-100 p-7 sm:p-8 space-y-6 max-h-[92vh] overflow-y-auto">
        {/* Close Modal Button */}
        <button
          onClick={onClose}
          className="absolute top-5 right-5 p-2 rounded-full text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition cursor-pointer"
          aria-label="Close modal"
        >
          <X className="w-5 h-5" />
        </button>

        {/* Educational Header */}
        <div className="text-center space-y-2 pt-1">
          {/* <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-50 border border-amber-200 text-amber-900 text-xs font-bold mb-1">
            <GraduationCap className="w-4 h-4 text-amber-600" />
            <span>ApkaGermanSchool Portal</span>
          </div> */}

          <h2 className="text-2xl font-black text-gray-900 tracking-tight">
            {mode === 'signup' ? 'Student Registration' : 'Student Login'}
          </h2>
          <p className="text-xs text-gray-500 max-w-xs mx-auto">
            {mode === 'signup'
              ? 'Create an account to enroll in German recorded courses & assignments'
              : 'Sign in to access your course materials, videos, and exercises'}
          </p>

          {/* Segmented Control Pill Switcher */}
          <div className="bg-gray-100 p-1.5 rounded-2xl flex items-center mt-4 border border-gray-200/80">
            <button
              type="button"
              onClick={() => {
                setMode('login');
                setError('');
              }}
              className={`flex-1 py-2 px-3 rounded-xl text-xs font-bold transition-all duration-200 flex items-center justify-center gap-1.5 ${mode === 'login'
                ? 'bg-white text-gray-900 shadow-sm font-extrabold border border-gray-200/60'
                : 'text-gray-500 hover:text-gray-800'
                }`}
            >
              <LogIn className="w-3.5 h-3.5" />
              <span>Sign In</span>
            </button>

            <button
              type="button"
              onClick={() => {
                setMode('signup');
                setError('');
              }}
              className={`flex-1 py-2 px-3 rounded-xl text-xs font-bold transition-all duration-200 flex items-center justify-center gap-1.5 ${mode === 'signup'
                ? 'bg-white text-gray-900 shadow-sm font-extrabold border border-gray-200/60'
                : 'text-gray-500 hover:text-gray-800'
                }`}
            >
              <UserPlus className="w-3.5 h-3.5" />
              <span>Register</span>
            </button>
          </div>
        </div>

        {/* Alert Banner without Emojis */}
        {error && (
          <div className="p-3.5 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-bold flex items-center gap-2.5">
            <AlertCircle className="w-4 h-4 text-rose-600 shrink-0" />
            <span>{error}</span>
          </div>
        )}

        {/* Forms with Field Icons */}
        {mode === 'signup' ? (
          <form onSubmit={handleSignup} className="space-y-4">
            <div>
              <label className="block text-xs font-bold uppercase tracking-wider text-gray-700 mb-1.5">
                Full Name <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <User className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type="text"
                  required
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="e.g. John Doe"
                  className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 focus:border-[#FECE00] focus:ring-2 focus:ring-[#FECE00]/30 outline-none text-sm font-semibold text-gray-900 transition bg-white"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-bold uppercase tracking-wider text-gray-700 mb-1.5">
                Email Address <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <Mail className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="student@apkagermanschool.com"
                  className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 focus:border-[#FECE00] focus:ring-2 focus:ring-[#FECE00]/30 outline-none text-sm font-semibold text-gray-900 transition bg-white"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-bold uppercase tracking-wider text-gray-700 mb-1.5">
                Phone Number (Optional)
              </label>
              <div className="relative">
                <Phone className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type="tel"
                  value={phoneNumber}
                  onChange={(e) => setPhoneNumber(e.target.value)}
                  placeholder="+49 123 4567890"
                  className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 focus:border-[#FECE00] focus:ring-2 focus:ring-[#FECE00]/30 outline-none text-sm font-semibold text-gray-900 transition bg-white"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-bold uppercase tracking-wider text-gray-700 mb-1.5">
                Password (min 8 characters) <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <Lock className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type={showPassword ? 'text' : 'password'}
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  className="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-300 focus:border-[#FECE00] focus:ring-2 focus:ring-[#FECE00]/30 outline-none text-sm font-semibold text-gray-900 transition bg-white"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 transition focus:outline-none"
                  title={showPassword ? 'Hide password' : 'Show password'}
                >
                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </button>
              </div>
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full py-3.5 px-4 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] font-extrabold text-sm uppercase tracking-wider shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 mt-3 cursor-pointer active:scale-95 group"
            >
              <span>{loading ? 'Creating Account...' : 'Create Student Account'}</span>
              {!loading && <ArrowRight className="w-4 h-4 text-black group-hover:text-[#FECE00] transition-colors" />}
            </button>
          </form>
        ) : (
          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="block text-xs font-bold uppercase tracking-wider text-gray-700 mb-1.5">
                Email Address <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <Mail className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="student@apkagermanschool.com"
                  className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 focus:border-[#FECE00] focus:ring-2 focus:ring-[#FECE00]/30 outline-none text-sm font-semibold text-gray-900 transition bg-white"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-bold uppercase tracking-wider text-gray-700 mb-1.5">
                Password <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <Lock className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type={showPassword ? 'text' : 'password'}
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  className="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-300 focus:border-[#FECE00] focus:ring-2 focus:ring-[#FECE00]/30 outline-none text-sm font-semibold text-gray-900 transition bg-white"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 transition focus:outline-none"
                  title={showPassword ? 'Hide password' : 'Show password'}
                >
                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </button>
              </div>
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full py-3.5 px-4 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] font-extrabold text-sm uppercase tracking-wider shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 mt-3 cursor-pointer active:scale-95 group"
            >
              <span>{loading ? 'Logging in...' : 'Sign In as Student'}</span>
              {!loading && <ArrowRight className="w-4 h-4 text-black group-hover:text-[#FECE00] transition-colors" />}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}