// 'use client';

// import { useState } from 'react';
// import { useRouter } from 'next/navigation';
// import Link from 'next/link';
// import { motion } from 'framer-motion';
// import {
//   User,
//   Shield,
//   Trash2,
//   LogOut,
//   ChevronLeft,
//   Bell,
//   Lock,
//   Eye,
//   FileText,
//   HelpCircle,
//   MessageCircle,
//   Loader2,
//   AlertTriangle,
//   X
// } from 'lucide-react';
// import toast, { Toaster } from 'react-hot-toast';
// import AuthService from '../services/AuthService';
// import { changePassword, deleteMyAccount } from '../utils/api';

// export default function SettingsPage() {
//   const router = useRouter();
//   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
//   const [deletePassword, setDeletePassword] = useState('');
//   const [isDeleting, setIsDeleting] = useState(false);
//   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);

//   const handleSignOut = () => {
//     AuthService.deleteToken();
//     toast.success('تم تسجيل الخروج بنجاح');
//     router.push('/');
//   };

//   const handleDeleteAccount = async () => {
//     if (!deletePassword) {
//       toast.error('الرجاء إدخال كلمة المرور');
//       return;
//     }
//     setIsDeleting(true);
//     try {
//       await deleteMyAccount(deletePassword);
//       AuthService.deleteToken();
//       toast.success('تم حذف الحساب بنجاح');
//       router.push('/');
//     } catch (err) {
//       toast.error(err.message || 'فشل حذف الحساب');
//     } finally {
//       setIsDeleting(false);
//       setShowDeleteDialog(false);
//       setDeletePassword('');
//     }
//   };

//   const sections = [
//     {
//       title: 'الحساب',
//       items: [
//         { icon: User, label: 'الملف الشخصي', href: '/profile', desc: 'عرض وتعديل معلوماتك الشخصية' },
//         { icon: Lock, label: 'تغيير كلمة المرور', href: '/change-password', desc: 'تحديث كلمة المرور الخاصة بك' },
//         { icon: Shield, label: 'التحقق من الحساب', href: '/account-verification', desc: 'تأكيد البريد الإلكتروني ورقم الهاتف' },
//       ]
//     },
//     {
//       title: 'الإشعارات',
//       items: [
//         { icon: Bell, label: 'الإشعارات', href: '/notifications', desc: 'إدارة تفضيلات الإشعارات' },
//       ]
//     },
//     {
//       title: 'الدعم',
//       items: [
//         { icon: HelpCircle, label: 'الأسئلة الشائعة', href: '/faq', desc: 'إجابات للأسئلة المتكررة' },
//         { icon: MessageCircle, label: 'تواصل معنا', href: '/support', desc: 'الحصول على المساعدة والدعم' },
//         { icon: FileText, label: 'الشروط والأحكام', href: '/terms', desc: 'سياسة الاستخدام والخصوصية' },
//         { icon: Eye, label: 'سياسة الخصوصية', href: '/privacy', desc: 'كيف نحمي بياناتك' },
//       ]
//     },
//   ];

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

//   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="/profile"
//             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">الإعدادات</h1>
//         </motion.div>

//         <motion.div
//           variants={containerVariants}
//           initial="hidden"
//           animate="visible"
//           className="space-y-6"
//         >
//           {sections.map((section) => (
//             <motion.div
//               key={section.title}
//               variants={itemVariants}
//               className="bg-white rounded-2xl shadow-sm overflow-hidden"
//             >
//               <div className="px-6 py-4 border-b border-gray-100">
//                 <h2 className="text-lg font-semibold text-gray-800">{section.title}</h2>
//               </div>
//               <div className="divide-y divide-gray-50">
//                 {section.items.map((item) => {
//                   const Icon = item.icon;
//                   return (
//                     <Link
//                       key={item.label}
//                       href={item.href}
//                       className="flex items-center gap-4 px-6 py-4 hover:bg-gray-50 transition-colors group"
//                     >
//                       <div className="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center flex-shrink-0 group-hover:bg-amber-100 transition-colors">
//                         <Icon className="w-5 h-5 text-amber-600" />
//                       </div>
//                       <div className="flex-1 min-w-0">
//                         <p className="text-sm font-medium text-gray-900">{item.label}</p>
//                         <p className="text-xs text-gray-500 truncate">{item.desc}</p>
//                       </div>
//                       <ChevronLeft className="w-4 h-4 text-gray-400" />
//                     </Link>
//                   );
//                 })}
//               </div>
//             </motion.div>
//           ))}

//           <motion.div variants={itemVariants} className="space-y-4">
//             <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
//               <div className="px-6 py-4 border-b border-gray-100">
//                 <h2 className="text-lg font-semibold text-gray-800">الأمان</h2>
//               </div>
//               <div className="p-6">
//                 <button
//                   onClick={() => setShowDeleteDialog(true)}
//                   className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
//                 >
//                   <Trash2 className="w-5 h-5" />
//                   <span className="text-sm font-medium">حذف الحساب</span>
//                 </button>
//                 <p className="text-xs text-gray-500 mt-2 pr-12">
//                   سيتم حذف جميع بياناتك بشكل دائم ولا يمكن التراجع عن هذا الإجراء
//                 </p>
//               </div>
//             </div>

//             <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
//               <div className="p-6">
//                 <button
//                   onClick={handleSignOut}
//                   className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
//                 >
//                   <LogOut className="w-5 h-5" />
//                   <span className="text-sm font-medium">تسجيل الخروج</span>
//                 </button>
//               </div>
//             </div>
//           </motion.div>
//         </motion.div>
//       </div>

//       {showDeleteDialog && (
//         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
//           <motion.div
//             initial={{ opacity: 0, scale: 0.95 }}
//             animate={{ opacity: 1, scale: 1 }}
//             className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6"
//           >
//             <div className="flex items-center gap-3 mb-4">
//               <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
//                 <AlertTriangle className="w-5 h-5 text-red-600" />
//               </div>
//               <div>
//                 <h3 className="text-lg font-semibold text-gray-900">حذف الحساب</h3>
//                 <p className="text-sm text-gray-500">هذا الإجراء لا يمكن التراجع عنه</p>
//               </div>
//               <button
//                 onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
//                 className="mr-auto p-1 hover:bg-gray-100 rounded-lg transition-colors"
//               >
//                 <X className="w-5 h-5 text-gray-400" />
//               </button>
//             </div>

//             <p className="text-sm text-gray-600 mb-4">
//               أدخل كلمة المرور لتأكيد حذف حسابك نهائياً. سيتم حذف جميع بياناتك وملفاتك بشكل دائم.
//             </p>

//             <input
//               type="password"
//               value={deletePassword}
//               onChange={(e) => setDeletePassword(e.target.value)}
//               placeholder="كلمة المرور"
//               className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none"
//             />

//             <div className="flex gap-3">
//               <button
//                 onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
//                 className="flex-1 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
//               >
//                 إلغاء
//               </button>
//               <button
//                 onClick={handleDeleteAccount}
//                 disabled={isDeleting}
//                 className="flex-1 px-4 py-3 rounded-xl bg-red-600 text-white hover:bg-red-700 transition-colors text-sm font-medium disabled:opacity-50 flex items-center justify-center gap-2"
//               >
//                 {isDeleting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
//                 {isDeleting ? 'جاري الحذف...' : 'تأكيد الحذف'}
//               </button>
//             </div>
//           </motion.div>
//         </div>
//       )}
//     </div>
//   );
// }







'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { motion } from 'framer-motion';
import {
  User,
  Shield,
  Trash2,
  LogOut,
  ChevronLeft,
  Bell,
  Lock,
  Eye,
  FileText,
  HelpCircle,
  MessageCircle,
  Loader2,
  AlertTriangle,
  X
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '../services/AuthService';
import { changePassword, deleteMyAccount, submitReport } from '../utils/api';

export default function SettingsPage() {
  const router = useRouter();
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [deletePassword, setDeletePassword] = useState('');
  const [isDeleting, setIsDeleting] = useState(false);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);

  const [showContactDialog, setShowContactDialog] = useState(false);
  const [contactSubject, setContactSubject] = useState('');
  const [contactBody, setContactBody] = useState('');
  const [isSendingContact, setIsSendingContact] = useState(false);

  const handleSignOut = () => {
    AuthService.deleteToken();
    toast.success('تم تسجيل الخروج بنجاح');
    router.push('/');
  };

  const handleDeleteAccount = async () => {
    if (!deletePassword) {
      toast.error('الرجاء إدخال كلمة المرور');
      return;
    }
    setIsDeleting(true);
    try {
      await deleteMyAccount(deletePassword);
      AuthService.deleteToken();
      toast.success('تم حذف الحساب بنجاح');
      router.push('/');
    } catch (err) {
      console.error('Delete account error:', err);
      toast.error(err.message || 'فشل حذف الحساب');
    } finally {
      setIsDeleting(false);
      setShowDeleteDialog(false);
      setDeletePassword('');
    }
  };

  const handleSendContact = async () => {
    if (!contactSubject.trim() || !contactBody.trim()) {
      toast.error('الرجاء تعبئة العنوان والرسالة');
      return;
    }

    setIsSendingContact(true);
    try {
      await submitReport(contactSubject.trim(), contactBody.trim());
      toast.success('تم إرسال رسالتك بنجاح');
      setShowContactDialog(false);
      setContactSubject('');
      setContactBody('');
    } catch (err) {
      toast.error(err.message || 'حدث خطأ أثناء الإرسال');
    } finally {
      setIsSendingContact(false);
    }
  };

  const sections = [
    {
      title: 'الحساب',
      items: [
        { icon: User, label: 'الملف الشخصي', href: '/profile', desc: 'عرض وتعديل معلوماتك الشخصية' },
        { icon: Lock, label: 'تغيير كلمة المرور', href: '/change-password', desc: 'تحديث كلمة المرور الخاصة بك' },
        { icon: Shield, label: 'التحقق من الحساب', href: '/account-verification', desc: 'تأكيد البريد الإلكتروني ورقم الهاتف' },
      ]
    },
    {
      title: 'الإشعارات',
      items: [
        { icon: Bell, label: 'الإشعارات', href: '/notifications', desc: 'إدارة تفضيلات الإشعارات' },
      ]
    },
    {
      title: 'الدعم',
      items: [
        { icon: HelpCircle, label: 'الأسئلة الشائعة', href: '/faq', desc: 'إجابات للأسئلة المتكررة' },
        { icon: MessageCircle, label: 'تواصل معنا', desc: 'الحصول على المساعدة والدعم', action: () => setShowContactDialog(true) },
        { icon: FileText, label: 'الشروط والأحكام', href: '/terms', desc: 'سياسة الاستخدام والخصوصية' },
        { icon: Eye, label: 'سياسة الخصوصية', href: '/privacy', desc: 'كيف نحمي بياناتك' },
      ]
    },
  ];

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

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

  return (
    <div className="min-h-screen bg-gray-50 py-8 pb-28" 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="/profile"
            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">الإعدادات</h1>
        </motion.div>

        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate="visible"
          className="space-y-6"
        >
          {sections.map((section) => (
            <motion.div
              key={section.title}
              variants={itemVariants}
              className="bg-white rounded-2xl shadow-sm overflow-hidden"
            >
              <div className="px-6 py-4 border-b border-gray-100">
                <h2 className="text-lg font-semibold text-gray-800">{section.title}</h2>
              </div>
              <div className="divide-y divide-gray-50">
                {section.items.map((item) => {
                  const Icon = item.icon;

                  const content = (
                    <>
                      <div className="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center flex-shrink-0 group-hover:bg-amber-100 transition-colors">
                        <Icon className="w-5 h-5 text-amber-600" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-900">{item.label}</p>
                        <p className="text-xs text-gray-500 truncate">{item.desc}</p>
                      </div>
                      <ChevronLeft className="w-4 h-4 text-gray-400" />
                    </>
                  );

                  if (item.action) {
                    return (
                      <button
                        key={item.label}
                        onClick={item.action}
                        className="w-full flex items-center gap-4 px-6 py-4 hover:bg-gray-50 transition-colors group text-right"
                      >
                        {content}
                      </button>
                    );
                  }

                  return (
                    <Link
                      key={item.label}
                      href={item.href}
                      className="flex items-center gap-4 px-6 py-4 hover:bg-gray-50 transition-colors group"
                    >
                      {content}
                    </Link>
                  );
                })}
              </div>
            </motion.div>
          ))}

          <motion.div variants={itemVariants} className="space-y-4">
            <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
              <div className="px-6 py-4 border-b border-gray-100">
                <h2 className="text-lg font-semibold text-gray-800">الأمان</h2>
              </div>
              <div className="p-6">
                <button
                  onClick={() => setShowDeleteDialog(true)}
                  className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
                >
                  <Trash2 className="w-5 h-5" />
                  <span className="text-sm font-medium">حذف الحساب</span>
                </button>
                <p className="text-xs text-gray-500 mt-2 pr-12">
                  سيتم حذف جميع بياناتك بشكل دائم ولا يمكن التراجع عن هذا الإجراء
                </p>
              </div>
            </div>

            <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
              <div className="p-6">
                <button
                  onClick={handleSignOut}
                  className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
                >
                  <LogOut className="w-5 h-5" />
                  <span className="text-sm font-medium">تسجيل الخروج</span>
                </button>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>

      {showDeleteDialog && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                <AlertTriangle className="w-5 h-5 text-red-600" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900">حذف الحساب</h3>
                <p className="text-sm text-gray-500">هذا الإجراء لا يمكن التراجع عنه</p>
              </div>
              <button
                onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
                className="mr-auto p-1 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5 text-gray-400" />
              </button>
            </div>

            <p className="text-sm text-gray-600 mb-4">
              أدخل كلمة المرور لتأكيد حذف حسابك نهائياً. سيتم حذف جميع بياناتك وملفاتك بشكل دائم.
            </p>

            <input
              type="password"
              value={deletePassword}
              onChange={(e) => setDeletePassword(e.target.value)}
              placeholder="كلمة المرور"
              className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none"
            />

            <div className="flex gap-3">
              <button
                onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
                className="flex-1 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
              >
                إلغاء
              </button>
              <button
                onClick={handleDeleteAccount}
                disabled={isDeleting}
                className="flex-1 px-4 py-3 rounded-xl bg-red-600 text-white hover:bg-red-700 transition-colors text-sm font-medium disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {isDeleting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
                {isDeleting ? 'جاري الحذف...' : 'تأكيد الحذف'}
              </button>
            </div>
          </motion.div>
        </div>
      )}

      {showContactDialog && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center">
                <MessageCircle className="w-5 h-5 text-amber-600" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900">تواصل معنا</h3>
                <p className="text-sm text-gray-500">سنقوم بالرد عليك في أقرب وقت</p>
              </div>
              <button
                onClick={() => {
                  setShowContactDialog(false);
                  setContactSubject('');
                  setContactBody('');
                }}
                className="mr-auto p-1 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5 text-gray-400" />
              </button>
            </div>

            <input
              type="text"
              value={contactSubject}
              onChange={(e) => setContactSubject(e.target.value)}
              placeholder="الموضوع"
              maxLength={300}
              className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none"
            />

            <textarea
              value={contactBody}
              onChange={(e) => setContactBody(e.target.value)}
              placeholder="اكتب رسالتك هنا..."
              rows={5}
              className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none resize-none"
            />

            <div className="flex gap-3">
              <button
                onClick={() => {
                  setShowContactDialog(false);
                  setContactSubject('');
                  setContactBody('');
                }}
                className="flex-1 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
              >
                إلغاء
              </button>
              <button
                onClick={handleSendContact}
                disabled={isSendingContact}
                className="flex-1 px-4 py-3 rounded-xl bg-amber-600 text-white hover:bg-amber-700 transition-colors text-sm font-medium disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {isSendingContact ? <Loader2 className="w-4 h-4 animate-spin" /> : <MessageCircle className="w-4 h-4" />}
                {isSendingContact ? 'جاري الإرسال...' : 'إرسال'}
              </button>
            </div>
          </motion.div>
        </div>
      )}
    </div>
  );
}