SendGeneralReport api

app/settings/page.js

@@ -1,3 +1,260 @@
+// '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';
@@ -31,6 +288,11 @@ export default function SettingsPage() {
   const [isDeleting, setIsDeleting] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
+  const [showReportDialog, setShowReportDialog] = useState(false);
+  const [reportSubject, setReportSubject] = useState('');
+  const [reportBody, setReportBody] = useState('');
+  const [isSendingReport, setIsSendingReport] = useState(false);
+
   const handleSignOut = () => {
     AuthService.deleteToken();
     toast.success('تم تسجيل الخروج بنجاح');
@@ -49,6 +311,7 @@ export default function SettingsPage() {
       toast.success('تم حذف الحساب بنجاح');
       router.push('/');
     } catch (err) {
+      console.error('Delete account error:', err);
       toast.error(err.message || 'فشل حذف الحساب');
     } finally {
       setIsDeleting(false);
@@ -57,6 +320,70 @@ export default function SettingsPage() {
     }
   };
 
+  const handleSendGeneralReport = async () => {
+    if (!reportSubject.trim() || !reportBody.trim()) {
+      toast.error('الرجاء تعبئة عنوان البلاغ ونصه');
+      return;
+    }
+
+    if (reportSubject.trim().length > 300) {
+      toast.error('عنوان البلاغ يجب ألا يتجاوز 300 حرف');
+      return;
+    }
+
+    const token =
+      AuthService.getToken?.() ||
+      (typeof window !== 'undefined'
+        ? localStorage.getItem('token') ||
+          localStorage.getItem('accessToken') ||
+          localStorage.getItem('authToken')
+        : null);
+
+    if (!token) {
+      console.error('No token found. Checked AuthService.getToken and localStorage keys: token, accessToken, authToken');
+      toast.error('لم يتم العثور على التوكن');
+      return;
+    }
+
+    setIsSendingReport(true);
+
+    try {
+      const res = await fetch('http://45.93.137.91/api/Reports/SendGeneralReport', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          subject: reportSubject.trim(),
+          body: reportBody.trim(),
+        }),
+      });
+
+      const responseText = await res.text();
+
+      if (!res.ok) {
+        console.error('Send report failed:', {
+          status: res.status,
+          statusText: res.statusText,
+          responseText,
+        });
+        throw new Error(responseText || `فشل إرسال البلاغ (HTTP ${res.status})`);
+      }
+
+      console.log('Send report success:', responseText);
+      toast.success(responseText || 'تم إرسال البلاغ بنجاح');
+      setShowReportDialog(false);
+      setReportSubject('');
+      setReportBody('');
+    } catch (err) {
+      console.error('Send report error:', err);
+      toast.error(err.message || 'حدث خطأ أثناء إرسال البلاغ');
+    } finally {
+      setIsSendingReport(false);
+    }
+  };
+
   const sections = [
     {
       title: 'الحساب',
@@ -79,6 +406,7 @@ export default function SettingsPage() {
         { icon: MessageCircle, label: 'تواصل معنا', href: '/support', desc: 'الحصول على المساعدة والدعم' },
         { icon: FileText, label: 'الشروط والأحكام', href: '/terms', desc: 'سياسة الاستخدام والخصوصية' },
         { icon: Eye, label: 'سياسة الخصوصية', href: '/privacy', desc: 'كيف نحمي بياناتك' },
+        { icon: AlertTriangle, label: 'إرسال بلاغ عام', desc: 'إرسال مشكلة أو ملاحظة إلى الإدارة', action: () => setShowReportDialog(true) },
       ]
     },
   ];
@@ -133,12 +461,9 @@ export default function SettingsPage() {
               <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"
-                    >
+
+                  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>
@@ -147,6 +472,28 @@ export default function SettingsPage() {
                         <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>
                   );
                 })}
@@ -242,6 +589,74 @@ export default function SettingsPage() {
           </motion.div>
         </div>
       )}
+
+      {showReportDialog && (
+        <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={() => {
+                  setShowReportDialog(false);
+                  setReportSubject('');
+                  setReportBody('');
+                }}
+                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={reportSubject}
+              onChange={(e) => setReportSubject(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={reportBody}
+              onChange={(e) => setReportBody(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={() => {
+                  setShowReportDialog(false);
+                  setReportSubject('');
+                  setReportBody('');
+                }}
+                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={handleSendGeneralReport}
+                disabled={isSendingReport}
+                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"
+              >
+                {isSendingReport ? <Loader2 className="w-4 h-4 animate-spin" /> : <MessageCircle className="w-4 h-4" />}
+                {isSendingReport ? 'جاري الإرسال...' : 'إرسال البلاغ'}
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      )}
     </div>
   );
 }