import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, addDoc, onSnapshot, query, orderBy, deleteDoc, doc, updateDoc, serverTimestamp } from 'firebase/firestore';

// Ensure __app_id, __firebase_config, and __initial_auth_token are defined in the environment
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

// Tailwind CSS is assumed to be available, no import needed.
// Lucide React for icons (example: search, edit, delete)
// Shadcn UI components for styling (buttons, inputs, table, dialog)

function App() {
  const [db, setDb] = useState(null);
  const [auth, setAuth] = useState(null);
  const [userId, setUserId] = useState(null);
  const [transfers, setTransfers] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [isAuthReady, setIsAuthReady] = useState(false);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [currentTransfer, setCurrentTransfer] = useState(null);
  const [formErrors, setFormErrors] = useState({});
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState('');
  const messageTimeoutRef = useRef(null);

  // Initialize Firebase and set up authentication
  useEffect(() => {
    try {
      const app = initializeApp(firebaseConfig);
      const firestore = getFirestore(app);
      const authentication = getAuth(app);
      setDb(firestore);
      setAuth(authentication);

      const unsubscribe = onAuthStateChanged(authentication, async (user) => {
        if (user) {
          setUserId(user.uid);
          setIsAuthReady(true);
        } else {
          try {
            if (initialAuthToken) {
              await signInWithCustomToken(authentication, initialAuthToken);
            } else {
              await signInAnonymously(authentication);
            }
          } catch (error) {
            console.error("Error signing in:", error);
            setMessage("حدث خطأ أثناء تسجيل الدخول. يرجى المحاولة مرة أخرى.");
            setIsAuthReady(true); // Still set ready to attempt data fetch
          }
        }
      });

      return () => unsubscribe();
    } catch (error) {
      console.error("Error initializing Firebase:", error);
      setMessage("فشل تهيئة Firebase. يرجى التحقق من الإعدادات.");
      setLoading(false);
    }
  }, []);

  // Fetch data from Firestore once authenticated and ready
  useEffect(() => {
    if (db && userId && isAuthReady) {
      const transfersColRef = collection(db, `artifacts/${appId}/public/data/transfers`);
      // Note: orderBy is commented out to avoid potential index issues as per instructions.
      // Data will be sorted client-side.
      const q = query(transfersColRef); //, orderBy('transactionDate', 'desc'));

      const unsubscribe = onSnapshot(q, (snapshot) => {
        const fetchedTransfers = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        // Sort client-side by transactionDate (descending)
        fetchedTransfers.sort((a, b) => {
          const dateA = a.transactionDate ? new Date(a.transactionDate.toDate()) : new Date(0);
          const dateB = b.transactionDate ? new Date(b.transactionDate.toDate()) : new Date(0);
          return dateB - dateA;
        });
        setTransfers(fetchedTransfers);
        setLoading(false);
      }, (error) => {
        console.error("Error fetching transfers:", error);
        setMessage("حدث خطأ أثناء جلب التحويلات.");
        setLoading(false);
      });

      return () => unsubscribe();
    } else if (!isAuthReady && !userId) {
      // Still waiting for auth to be ready
      setLoading(true);
    }
  }, [db, userId, isAuthReady]);

  // Function to show transient messages
  const showMessage = (msg) => {
    setMessage(msg);
    if (messageTimeoutRef.current) {
      clearTimeout(messageTimeoutRef.current);
    }
    messageTimeoutRef.current = setTimeout(() => {
      setMessage('');
    }, 3000); // Message disappears after 3 seconds
  };

  // Form validation
  const validateForm = (data) => {
    const errors = {};
    if (!data.receiverName || data.receiverName.trim() === '') {
      errors.receiverName = 'اسم المحول إليه مطلوب.';
    }
    if (!data.bankName || data.bankName.trim() === '') {
      errors.bankName = 'اسم البنك مطلوب.';
    }
    if (!data.amount || isNaN(parseFloat(data.amount)) || parseFloat(data.amount) <= 0) {
      errors.amount = 'المبلغ بالدولار يجب أن يكون رقمًا موجبًا.';
    }
    // Corrected validation for transactionDate
    if (!data.transactionDate || !(data.transactionDate instanceof Date) || isNaN(data.transactionDate.getTime())) {
      errors.transactionDate = 'تاريخ العملية مطلوب وصحيح.';
    }
    return errors;
  };

  // Add new transfer
  const handleAddTransfer = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const newTransfer = {
      receiverName: formData.get('receiverName'),
      bankName: formData.get('bankName'),
      amount: parseFloat(formData.get('amount')),
      transactionDate: new Date(formData.get('transactionDate')), // Convert to Date object
      userId: userId, // Store the user ID for ownership (even for public data)
      createdAt: serverTimestamp() // Add creation timestamp
    };

    const errors = validateForm(newTransfer);
    if (Object.keys(errors).length > 0) {
      setFormErrors(errors);
      return;
    }

    try {
      if (db) {
        await addDoc(collection(db, `artifacts/${appId}/public/data/transfers`), newTransfer);
        setShowAddModal(false);
        e.target.reset(); // Clear form
        setFormErrors({});
        showMessage("تمت إضافة التحويل بنجاح!");
      }
    } catch (error) {
      console.error("Error adding document: ", error);
      showMessage("حدث خطأ أثناء إضافة التحويل.");
    }
  };

  // Update existing transfer
  const handleUpdateTransfer = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const updatedTransfer = {
      receiverName: formData.get('receiverName'),
      bankName: formData.get('bankName'),
      amount: parseFloat(formData.get('amount')),
      transactionDate: new Date(formData.get('transactionDate')), // Convert to Date object
      updatedAt: serverTimestamp() // Add update timestamp
    };

    const errors = validateForm(updatedTransfer);
    if (Object.keys(errors).length > 0) {
      setFormErrors(errors);
      return;
    }

    try {
      if (db && currentTransfer) {
        const transferDocRef = doc(db, `artifacts/${appId}/public/data/transfers`, currentTransfer.id);
        await updateDoc(transferDocRef, updatedTransfer);
        setShowEditModal(false);
        setCurrentTransfer(null);
        setFormErrors({});
        showMessage("تم تحديث التحويل بنجاح!");
      }
    } catch (error) {
      console.error("Error updating document: ", error);
      showMessage("حدث خطأ أثناء تحديث التحويل.");
    }
  };

  // Delete transfer
  const handleDeleteTransfer = async (id) => {
    if (!window.confirm("هل أنت متأكد أنك تريد حذف هذا التحويل؟")) { // Using window.confirm for simplicity, but custom modal is preferred
      return;
    }
    try {
      if (db) {
        await deleteDoc(doc(db, `artifacts/${appId}/public/data/transfers`, id));
        showMessage("تم حذف التحويل بنجاح!");
      }
    } catch (error) {
      console.error("Error deleting document: ", error);
      showMessage("حدث خطأ أثناء حذف التحويل.");
    }
  };

  // Filter transfers based on search term
  const filteredTransfers = transfers.filter(transfer => {
    const searchLower = searchTerm.toLowerCase();
    return (
      transfer.receiverName.toLowerCase().includes(searchLower) ||
      transfer.bankName.toLowerCase().includes(searchLower) ||
      transfer.amount.toString().includes(searchLower) ||
      (transfer.transactionDate && new Date(transfer.transactionDate.toDate()).toLocaleDateString('ar-EG').includes(searchLower))
    );
  });

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
        <p className="text-lg">جاري التحميل...</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 font-sans p-4 sm:p-6 lg:p-8">
      {/* Global Message Display */}
      {message && (
        <div className="fixed top-4 left-1/2 -translate-x-1/2 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade-in-down">
          {message}
        </div>
      )}

      {/* Header */}
      <header className="flex flex-col sm:flex-row items-center justify-between mb-8 p-4 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
        <h1 className="text-3xl font-extrabold text-blue-700 dark:text-blue-400 mb-4 sm:mb-0">
          نظام إدارة التحويلات المالية
        </h1>
        <div className="flex items-center space-x-2 rtl:space-x-reverse">
          <span className="text-sm text-gray-600 dark:text-gray-400">معرف المستخدم:</span>
          <span className="text-sm font-semibold text-gray-800 dark:text-gray-200 break-all">{userId}</span>
        </div>
      </header>

      {/* Main Content Area */}
      <main className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Add Transfer Section */}
        <section className="lg:col-span-1 bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg h-fit">
          <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 border-b pb-3 border-gray-200 dark:border-gray-700">
            إضافة تحويل جديد
          </h2>
          <button
            onClick={() => { setShowAddModal(true); setFormErrors({}); }}
            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75"
          >
            + إضافة تحويل
          </button>
        </section>

        {/* Transfers List Section */}
        <section className="lg:col-span-2 bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
          <div className="flex flex-col sm:flex-row items-center justify-between mb-6 border-b pb-3 border-gray-200 dark:border-gray-700">
            <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 sm:mb-0">
              قائمة التحويلات
            </h2>
            <div className="relative w-full sm:w-auto">
              <input
                type="text"
                placeholder="البحث عن تحويل..."
                className="w-full sm:w-64 p-3 pr-10 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
              <svg
                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-300 w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                ></path>
              </svg>
            </div>
          </div>

          {filteredTransfers.length === 0 ? (
            <p className="text-center text-gray-600 dark:text-gray-400 py-8">
              لا توجد تحويلات لعرضها أو لا توجد نتائج للبحث.
            </p>
          ) : (
            <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 shadow-md">
              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead className="bg-gray-100 dark:bg-gray-700">
                  <tr>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider rounded-tl-lg">
                      المحول إليه
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                      البنك
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                      المبلغ (دولار)
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                      التاريخ
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider rounded-tr-lg">
                      الإجراءات
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                  {filteredTransfers.map((transfer) => (
                    <tr key={transfer.id} className="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                        {transfer.receiverName}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                        {transfer.bankName}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                        ${transfer.amount.toFixed(2)}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                        {transfer.transactionDate ? new Date(transfer.transactionDate.toDate()).toLocaleDateString('ar-EG') : 'غير محدد'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div className="flex space-x-2 rtl:space-x-reverse">
                          <button
                            onClick={() => {
                              setCurrentTransfer({
                                ...transfer,
                                transactionDate: transfer.transactionDate ? new Date(transfer.transactionDate.toDate()).toISOString().split('T')[0] : ''
                              });
                              setShowEditModal(true);
                              setFormErrors({});
                            }}
                            className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition duration-150 transform hover:scale-110"
                            title="تعديل"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                          </button>
                          <button
                            onClick={() => handleDeleteTransfer(transfer.id)}
                            className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-200 transition duration-150 transform hover:scale-110"
                            title="حذف"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </main>

      {/* Add Transfer Modal */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-2xl w-full max-w-md animate-scale-in">
            <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 border-b pb-3 border-gray-200 dark:border-gray-700">
              إضافة تحويل جديد
            </h2>
            <form onSubmit={handleAddTransfer} className="space-y-4">
              <div>
                <label htmlFor="receiverName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  اسم المحول إليه
                </label>
                <input
                  type="text"
                  id="receiverName"
                  name="receiverName"
                  className={`w-full p-3 rounded-lg border ${formErrors.receiverName ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200`}
                  placeholder="أدخل اسم المحول إليه"
                />
                {formErrors.receiverName && <p className="text-red-500 text-xs mt-1">{formErrors.receiverName}</p>}
              </div>
              <div>
                <label htmlFor="bankName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  اسم البنك
                </label>
                <input
                  type="text"
                  id="bankName"
                  name="bankName"
                  className={`w-full p-3 rounded-lg border ${formErrors.bankName ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200`}
                  placeholder="أدخل اسم البنك"
                />
                {formErrors.bankName && <p className="text-red-500 text-xs mt-1">{formErrors.bankName}</p>}
              </div>
              <div>
                <label htmlFor="amount" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  المبلغ بالدولار
                </label>
                <input
                  type="number"
                  id="amount"
                  name="amount"
                  step="0.01"
                  className={`w-full p-3 rounded-lg border ${formErrors.amount ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200`}
                  placeholder="أدخل المبلغ"
                />
                {formErrors.amount && <p className="text-red-500 text-xs mt-1">{formErrors.amount}</p>}
              </div>
              <div>
                <label htmlFor="transactionDate" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  تاريخ العملية
                </label>
                <input
                  type="date"
                  id="transactionDate"
                  name="transactionDate"
                  className={`w-full p-3 rounded-lg border ${formErrors.transactionDate ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200`}
                />
                {formErrors.transactionDate && <p className="text-red-500 text-xs mt-1">{formErrors.transactionDate}</p>}
              </div>
              <div className="flex justify-end space-x-3 rtl:space-x-reverse pt-4">
                <button
                  type="button"
                  onClick={() => setShowAddModal(false)}
                  className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-5 rounded-lg shadow-sm transition duration-300 ease-in-out"
                >
                  إلغاء
                </button>
                <button
                  type="submit"
                  className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-5 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                >
                  إضافة
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Edit Transfer Modal */}
      {showEditModal && currentTransfer && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-2xl w-full max-w-md animate-scale-in">
            <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 border-b pb-3 border-gray-200 dark:border-gray-700">
              تعديل التحويل
            </h2>
            <form onSubmit={handleUpdateTransfer} className="space-y-4">
              <div>
                <label htmlFor="editReceiverName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  اسم المحول إليه
                </label>
                <input
                  type="text"
                  id="editReceiverName"
                  name="receiverName"
                  defaultValue={currentTransfer.receiverName}
                  className={`w-full p-3 rounded-lg border ${formErrors.receiverName ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200`}
                  placeholder="أدخل اسم المحول إليه"
                />
                {formErrors.receiverName && <p className="text-red-500 text-xs mt-1">{formErrors.receiverName}</p>}
              </div>
              <div>
                <label htmlFor="editBankName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  اسم البنك
                </label>
                <input
                  type="text"
                  id="editBankName"
                  name="bankName"
                  defaultValue={currentTransfer.bankName}
                  className={`w-full p-3 rounded-lg border ${formErrors.bankName ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200`}
                  placeholder="أدخل اسم البنك"
                />
                {formErrors.bankName && <p className="text-red-500 text-xs mt-1">{formErrors.bankName}</p>}
              </div>
              <div>
                <label htmlFor="editAmount" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  المبلغ بالدولار
                </label>
                <input
                  type="number"
                  id="editAmount"
                  name="amount"
                  step="0.01"
                  defaultValue={currentTransfer.amount}
                  className={`w-full p-3 rounded-lg border ${formErrors.amount ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200`}
                  placeholder="أدخل المبلغ"
                />
                {formErrors.amount && <p className="text-red-500 text-xs mt-1">{formErrors.amount}</p>}
              </div>
              <div>
                <label htmlFor="editTransactionDate" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  تاريخ العملية
                </label>
                <input
                  type="date"
                  id="editTransactionDate"
                  name="transactionDate"
                  defaultValue={currentTransfer.transactionDate}
                  className={`w-full p-3 rounded-lg border ${formErrors.transactionDate ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200`}
                />
                {formErrors.transactionDate && <p className="text-red-500 text-xs mt-1">{formErrors.transactionDate}</p>}
              </div>
              <div className="flex justify-end space-x-3 rtl:space-x-reverse pt-4">
                <button
                  type="button"
                  onClick={() => { setShowEditModal(false); setCurrentTransfer(null); }}
                  className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-5 rounded-lg shadow-sm transition duration-300 ease-in-out"
                >
                  إلغاء
                </button>
                <button
                  type="submit"
                  className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-5 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                >
                  حفظ التغييرات
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Custom CSS for animations and general styling */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        body {
          font-family: 'Inter', sans-serif;
          direction: rtl; /* Set default direction to RTL */
          text-align: right; /* Align text to the right */
        }
        /* Ensure all elements inherit RTL direction */
        * {
          direction: rtl;
          text-align: right;
        }
        /* Specific adjustments for LTR elements if any, e.g., icons, numbers */
        .rtl\\:space-x-reverse > *:not(:last-child) {
          margin-left: 0 !important;
          margin-right: var(--tw-space-x-reverse, 0.5rem) !important;
        }
        .rtl\\:space-x-reverse > *:last-child {
          margin-left: var(--tw-space-x-reverse, 0.5rem) !important;
          margin-right: 0 !important;
        }
        .animate-scale-in {
          animation: scaleIn 0.3s ease-out forwards;
        }
        @keyframes scaleIn {
          from {
            transform: scale(0.9);
            opacity: 0;
          }
          to {
            transform: scale(1);
            opacity: 1;
          }
        }
        .animate-fade-in-down {
          animation: fadeInDown 0.5s ease-out forwards;
        }
        @keyframes fadeInDown {
          from {
            opacity: 0;
            transform: translate(-50%, -20px);
          }
          to {
            opacity: 1;
            transform: translate(-50%, 0);
          }
        }
      `}</style>
    </div>
  );
}

export default App;