'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
  Mail,
  Phone,
  Shield,
  ChevronLeft,
  Loader2,
  CheckCircle,
  XCircle,
  Send,
  Key
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '../services/AuthService';
import { sendEmailOTP, sendPhoneOTP, verifyEmail, verifyPhone } from '../utils/api';

export default function AccountVerificationPage() {
  const router = useRouter();
  const { t } = useTranslation();
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const [emailCode, setEmailCode] = useState('');
  const [phoneCode, setPhoneCode] = useState('');
  const [sendingEmailOTP, setSendingEmailOTP] = useState(false);
  const [sendingPhoneOTP, setSendingPhoneOTP] = useState(false);
  const [verifyingEmail, setVerifyingEmail] = useState(false);
  const [verifyingPhone, setVerifyingPhone] = useState(false);
  const [emailVerified, setEmailVerified] = useState(false);
  const [phoneVerified, setPhoneVerified] = useState(false);
  const [showEmailInput, setShowEmailInput] = useState(false);
  const [showPhoneInput, setShowPhoneInput] = useState(false);

  useEffect(() => {
    const authUser = AuthService.getUser();
    if (authUser) {
      setUser(authUser);
      setIsLoading(false);
    } else {
      router.push('/login');
    }
  }, [router]);

  const handleSendEmailOTP = async () => {
    setSendingEmailOTP(true);
    try {
      await sendEmailOTP();
      toast.success(t('accountVerification.emailOtpSent'));
      setShowEmailInput(true);
    } catch (err) {
      toast.error(err.message || t('accountVerification.otpSendFailed'));
    } finally {
      setSendingEmailOTP(false);
    }
  };

  const handleVerifyEmail = async () => {
    if (!emailCode.trim()) {
      toast.error(t('accountVerification.otpRequired'));
      return;
    }
    setVerifyingEmail(true);
    try {
      await verifyEmail(emailCode.trim());
      setEmailVerified(true);
      setShowEmailInput(false);
      toast.success(t('accountVerification.emailVerifiedSuccess'));
    } catch (err) {
      toast.error(err.message || t('accountVerification.otpInvalid'));
    } finally {
      setVerifyingEmail(false);
    }
  };

  const handleSendPhoneOTP = async () => {
    setSendingPhoneOTP(true);
    try {
      await sendPhoneOTP();
      toast.success(t('accountVerification.phoneOtpSent'));
      setShowPhoneInput(true);
    } catch (err) {
      toast.error(err.message || t('accountVerification.otpSendFailed'));
    } finally {
      setSendingPhoneOTP(false);
    }
  };

  const handleVerifyPhone = async () => {
    if (!phoneCode.trim()) {
      toast.error(t('accountVerification.otpRequired'));
      return;
    }
    setVerifyingPhone(true);
    try {
      await verifyPhone(phoneCode.trim());
      setPhoneVerified(true);
      setShowPhoneInput(false);
      toast.success(t('accountVerification.phoneVerifiedSuccess'));
    } catch (err) {
      toast.error(err.message || t('accountVerification.otpInvalid'));
    } finally {
      setVerifyingPhone(false);
    }
  };

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <Loader2 className="w-12 h-12 text-amber-500 animate-spin" />
      </div>
    );
  }

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 }
  };

  return (
    <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
      <Toaster position="top-center" reverseOrder={false} />

      <div className="container mx-auto px-4 max-w-2xl">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex items-center gap-3 mb-8"
        >
          <Link
            href="/settings"
            className="p-2 rounded-xl hover:bg-gray-200 transition-colors text-gray-600"
          >
            <ChevronLeft className="w-5 h-5" />
          </Link>
          <h1 className="text-2xl font-bold text-gray-900">{t('accountVerification.title')}</h1>
        </motion.div>

        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate="visible"
          className="space-y-6"
        >
          <motion.div variants={itemVariants} className="bg-white rounded-2xl shadow-sm overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
              <Mail className="w-5 h-5 text-amber-600" />
              <h2 className="text-lg font-semibold text-gray-800">{t('accountVerification.emailSection')}</h2>
              {emailVerified && (
                <span className="flex items-center gap-1 text-xs text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
                  <CheckCircle className="w-3 h-3" />
                  {t('accountVerification.verified')}
                </span>
              )}
            </div>
            <div className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <p className="text-sm text-gray-600">{user?.email || t('accountVerification.emailNotRegistered')}</p>
                  <p className="text-xs text-gray-400 mt-1">
                    {emailVerified
                      ? t('accountVerification.emailVerifiedDesc')
                      : t('accountVerification.emailVerifyDesc')}
                  </p>
                </div>
                {!emailVerified && !showEmailInput && (
                  <button
                    onClick={handleSendEmailOTP}
                    disabled={sendingEmailOTP}
                    className="flex items-center gap-2 px-4 py-2 bg-amber-500 text-white rounded-xl hover:bg-amber-600 transition-colors text-sm disabled:opacity-50"
                  >
                    {sendingEmailOTP ? (
                      <Loader2 className="w-4 h-4 animate-spin" />
                    ) : (
                      <Send className="w-4 h-4" />
                    )}
                    {sendingEmailOTP ? t('accountVerification.sending') : t('accountVerification.sendOtp')}
                  </button>
                )}
              </div>

              {showEmailInput && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: 'auto' }}
                  className="space-y-3"
                >
                  <p className="text-xs text-gray-500">{t('accountVerification.enter6DigitCode')}</p>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={emailCode}
                      onChange={(e) => setEmailCode(e.target.value)}
                      placeholder={t('accountVerification.otpPlaceholder')}
                      maxLength={6}
                      className="flex-1 px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none text-center text-lg tracking-widest"
                    />
                    <button
                      onClick={handleVerifyEmail}
                      disabled={verifyingEmail}
                      className="px-6 py-3 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-colors text-sm font-medium disabled:opacity-50 flex items-center gap-2"
                    >
                      {verifyingEmail ? (
                        <Loader2 className="w-4 h-4 animate-spin" />
                      ) : (
                        <Key className="w-4 h-4" />
                      )}
                      {t('accountVerification.verify')}
                    </button>
                  </div>
                  <button
                    onClick={handleSendEmailOTP}
                    disabled={sendingEmailOTP}
                    className="text-xs text-amber-600 hover:text-amber-700"
                  >
                    {t('accountVerification.resendCode')}
                  </button>
                </motion.div>
              )}

              {emailVerified && (
                <div className="flex items-center gap-2 text-green-600 bg-green-50 px-4 py-3 rounded-xl">
                  <CheckCircle className="w-5 h-5" />
                  <span className="text-sm font-medium">{t('accountVerification.emailVerifiedSuccess')}</span>
                </div>
              )}
            </div>
          </motion.div>

          <motion.div variants={itemVariants} className="bg-white rounded-2xl shadow-sm overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
              <Phone className="w-5 h-5 text-amber-600" />
              <h2 className="text-lg font-semibold text-gray-800">{t('accountVerification.phoneSection')}</h2>
              {phoneVerified && (
                <span className="flex items-center gap-1 text-xs text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
                  <CheckCircle className="w-3 h-3" />
                  {t('accountVerification.verified')}
                </span>
              )}
            </div>
            <div className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <p className="text-sm text-gray-600">{user?.phone || t('accountVerification.phoneNotRegistered')}</p>
                  <p className="text-xs text-gray-400 mt-1">
                    {phoneVerified
                      ? t('accountVerification.phoneVerifiedDesc')
                      : t('accountVerification.phoneVerifyDesc')}
                  </p>
                </div>
                {!phoneVerified && !showPhoneInput && (
                  <button
                    onClick={handleSendPhoneOTP}
                    disabled={sendingPhoneOTP}
                    className="flex items-center gap-2 px-4 py-2 bg-amber-500 text-white rounded-xl hover:bg-amber-600 transition-colors text-sm disabled:opacity-50"
                  >
                    {sendingPhoneOTP ? (
                      <Loader2 className="w-4 h-4 animate-spin" />
                    ) : (
                      <Send className="w-4 h-4" />
                    )}
                    {sendingPhoneOTP ? t('accountVerification.sending') : t('accountVerification.sendOtp')}
                  </button>
                )}
              </div>

              {showPhoneInput && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: 'auto' }}
                  className="space-y-3"
                >
                  <p className="text-xs text-gray-500">{t('accountVerification.enter6DigitCodePhone')}</p>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={phoneCode}
                      onChange={(e) => setPhoneCode(e.target.value)}
                      placeholder={t('accountVerification.otpPlaceholder')}
                      maxLength={6}
                      className="flex-1 px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none text-center text-lg tracking-widest"
                    />
                    <button
                      onClick={handleVerifyPhone}
                      disabled={verifyingPhone}
                      className="px-6 py-3 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-colors text-sm font-medium disabled:opacity-50 flex items-center gap-2"
                    >
                      {verifyingPhone ? (
                        <Loader2 className="w-4 h-4 animate-spin" />
                      ) : (
                        <Key className="w-4 h-4" />
                      )}
                      {t('accountVerification.verify')}
                    </button>
                  </div>
                  <button
                    onClick={handleSendPhoneOTP}
                    disabled={sendingPhoneOTP}
                    className="text-xs text-amber-600 hover:text-amber-700"
                  >
                    {t('accountVerification.resendCode')}
                  </button>
                </motion.div>
              )}

              {phoneVerified && (
                <div className="flex items-center gap-2 text-green-600 bg-green-50 px-4 py-3 rounded-xl">
                  <CheckCircle className="w-5 h-5" />
                  <span className="text-sm font-medium">{t('accountVerification.phoneVerifiedSuccess')}</span>
                </div>
              )}
            </div>
          </motion.div>

          <motion.div variants={itemVariants} className="bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl p-6 text-white">
            <div className="flex items-center gap-3 mb-3">
              <Shield className="w-6 h-6" />
              <h3 className="text-lg font-semibold">{t('accountVerification.whyVerify')}</h3>
            </div>
            <ul className="space-y-2 text-sm text-amber-50">
              <li className="flex items-center gap-2">
                <CheckCircle className="w-4 h-4 flex-shrink-0" />
                {t('accountVerification.reason1')}
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle className="w-4 h-4 flex-shrink-0" />
                {t('accountVerification.reason2')}
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle className="w-4 h-4 flex-shrink-0" />
                {t('accountVerification.reason3')}
              </li>
            </ul>
          </motion.div>
        </motion.div>
      </div>
    </div>
  );
}