{% extends "base.html" %} {% block title %}إضافة كلمة جديدة - لوحة التحكم{%
endblock %} {% block content %}
<div class="row">
  <div class="col-md-12">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h1>إضافة كلمة جديدة</h1>
      <a href="{{ url_for('admin.words_list') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-right"></i> العودة إلى قائمة الكلمات
      </a>
    </div>
  </div>
</div>

<div class="row justify-content-center">
  <div class="col-md-8">
    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">
          <i class="fas fa-plus-circle"></i> بيانات الكلمة الجديدة
        </h5>
      </div>
      <div class="card-body">
        <form method="POST" enctype="multipart/form-data">
          <div class="row">
            <!-- الكلمة بلغة الفور -->
            <div class="col-md-6 mb-3">
              <label for="fur_word" class="form-label">
                <i class="fas fa-language"></i> الكلمة بلغة الفور *
              </label>
              <input
                type="text"
                class="form-control"
                id="fur_word"
                name="fur_word"
                required
                placeholder="أدخل الكلمة بلغة الفور"
                list="similarWordsDatalist"
              />
              <datalist id="similarWordsDatalist"></datalist>
            </div>

            <!-- الكلمة بالعربية -->
            <div class="col-md-6 mb-3">
              <label for="arabic_word" class="form-label">
                <i class="fas fa-font"></i> الكلمة بالعربية *
              </label>
              <input
                type="text"
                class="form-control"
                id="arabic_word"
                name="arabic_word"
                required
                placeholder="أدخل الكلمة بالعربية"
                title="يجب أن تحتوي على أحرف عربية ورموز وعلامات وتشكيل فقط"
              />
              <div class="invalid-feedback">
                يجب أن تحتوي الكلمة العربية على أحرف عربية ورموز وعلامات وتشكيل
                فقط
              </div>
            </div>
          </div>

          <div class="row">
            <!-- الكلمة بالإنجليزية -->
            <div class="col-md-12 mb-3">
              <label for="english_word" class="form-label">
                <i class="fas fa-globe"></i> الكلمة بالإنجليزية *
              </label>
              <input
                type="text"
                class="form-control"
                id="english_word"
                name="english_word"
                required
                placeholder="Enter the English word"
                pattern="[a-zA-Z\s\d\p{P}]+"
                title="يجب أن تحتوي على أحرف إنجليزية ورموز وعلامات فقط"
              />
              <div class="invalid-feedback">
                يجب أن تحتوي الكلمة الإنجليزية على أحرف إنجليزية ورموز وعلامات
                فقط
              </div>
            </div>
          </div>

          <!-- حقول مرادفات لغة الفور -->
          <div class="row">
            <div class="col-md-12 mb-3">
              <label class="form-label">
                <i class="fas fa-language"></i> مرادفات لغة الفور إضافية
              </label>
              <div id="furSynonymsContainer">
                <!-- سيتم إضافة حقول مرادفات لغة الفور هنا بواسطة JS -->
              </div>
              <button
                type="button"
                class="btn btn-info btn-sm mt-2"
                id="addFurSynonymBtn"
              >
                <i class="fas fa-plus"></i> إضافة مرادف فوري
              </button>
            </div>
          </div>

          <!-- حقول المرادفات الإنجليزية -->
          <div class="row">
            <div class="col-md-12 mb-3">
              <label class="form-label">
                <i class="fas fa-language"></i> مرادفات إنجليزية إضافية
              </label>
              <div id="englishSynonymsContainer">
                <!-- سيتم إضافة حقول المرادفات الإنجليزية هنا بواسطة JS -->
              </div>
              <button
                type="button"
                class="btn btn-info btn-sm mt-2"
                id="addEnglishSynonymBtn"
              >
                <i class="fas fa-plus"></i> إضافة مرادف إنجليزي
              </button>
            </div>
          </div>

          <!-- حقول المرادفات العربية -->
          <div class="row">
            <div class="col-md-12 mb-3">
              <label class="form-label">
                <i class="fas fa-font"></i> مرادفات عربية إضافية
              </label>
              <div id="arabicSynonymsContainer">
                <!-- سيتم إضافة حقول المرادفات العربية هنا بواسطة JS -->
              </div>
              <button
                type="button"
                class="btn btn-info btn-sm mt-2"
                id="addArabicSynonymBtn"
              >
                <i class="fas fa-plus"></i> إضافة مرادف عربي
              </button>
            </div>
          </div>

          <!-- ملفات الصوت -->
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="fur_audio" class="form-label">
                <i class="fas fa-microphone"></i> ملف صوتي للكلمة بالفور
              </label>
              <div class="input-group">
                <input
                  type="file"
                  class="form-control"
                  id="fur_audio"
                  name="fur_audio"
                  accept=".mp3,.wav,.ogg"
                />
                <button
                  type="button"
                  class="btn btn-outline-danger"
                  id="recordFurBtn"
                >
                  <i class="fas fa-microphone"></i> تسجيل
                </button>
              </div>
              <div class="form-text">
                الملفات المدعومة: MP3, WAV, OGG أو اضغط تسجيل
              </div>

              <!-- منطقة التسجيل للفور -->
              <div id="furRecordingArea" class="mt-2" style="display: none">
                <div class="d-flex align-items-center gap-2">
                  <button
                    type="button"
                    class="btn btn-sm btn-success"
                    id="startFurRecord"
                  >
                    <i class="fas fa-play"></i> بدء التسجيل
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-danger"
                    id="stopFurRecord"
                    disabled
                  >
                    <i class="fas fa-stop"></i> إيقاف التسجيل
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-secondary"
                    id="cancelFurRecord"
                  >
                    <i class="fas fa-times"></i> إلغاء
                  </button>
                  <span id="furRecordingStatus" class="text-muted"></span>
                </div>
                <div id="furRecordedAudio" class="mt-2"></div>
              </div>
            </div>


          </div>

          <!-- معاينة الملفات الصوتية -->
          <div class="row" id="audioPreview" style="display: none">
            <div class="col-md-12 mb-3">
              <h6><i class="fas fa-headphones"></i> معاينة الملفات الصوتية:</h6>
              <div id="furAudioPreview"></div>
            </div>
          </div>

          <!-- أزرار التحكم -->
          <div class="row">
            <div class="col-md-12">
              <hr />
              <div class="d-flex justify-content-between">
                <a
                  href="{{ url_for('admin.words_list') }}"
                  class="btn btn-outline-secondary"
                >
                  <i class="fas fa-times"></i> إلغاء
                </a>
                <button type="submit" class="btn btn-primary">
                  <i class="fas fa-save"></i> حفظ الكلمة
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- معلومات إضافية -->
<div class="row mt-4">
  <div class="col-md-12">
    <div class="alert alert-info">
      <h6><i class="fas fa-info-circle"></i> ملاحظات مهمة:</h6>
      <ul class="mb-0">
        <li>الحقول المميزة بـ (*) مطلوبة</li>
        <li>يمكن إضافة ملفات صوتية لتحسين تجربة التعلم</li>
        <li>اختر مستوى الصعوبة المناسب لمساعدة المتعلمين</li>
        <li>الفئات تساعد في تنظيم الكلمات وتسهيل البحث</li>
      </ul>
    </div>
  </div>
</div>

<script>
  // متغيرات التسجيل
  let mediaRecorder;
  let audioChunks = [];
  let currentRecordingType = null;

  // فئة لإدارة التسجيل
  class AudioRecorder {
    constructor(language) {
      this.language = language;
      this.mediaRecorder = null;
      this.audioChunks = [];
      this.isRecording = false;
      this.recordingTimer = null;
      this.maxRecordingTime = 10000; // 10 ثوانٍ
    }

    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: {
            sampleRate: 16000, // تقليل معدل العينة لضغط الملف
            channelCount: 1, // صوت أحادي القناة
            echoCancellation: true,
            noiseSuppression: true,
          },
        });

        // استخدام إعدادات ضغط للتسجيل
        const options = {
          mimeType: "audio/webm;codecs=opus", // استخدام Opus للضغط الأفضل
          audioBitsPerSecond: 32000, // معدل بت منخفض للضغط
        };

        this.mediaRecorder = new MediaRecorder(stream, options);
        this.audioChunks = [];

        this.mediaRecorder.ondataavailable = (event) => {
          this.audioChunks.push(event.data);
        };

        this.mediaRecorder.onstop = () => {
          const audioBlob = new Blob(this.audioChunks, {
            type: "audio/webm;codecs=opus",
          });
          this.handleRecordedAudio(audioBlob);
          stream.getTracks().forEach((track) => track.stop());

          // إيقاف المؤقت
          if (this.recordingTimer) {
            clearTimeout(this.recordingTimer);
            this.recordingTimer = null;
          }
        };

        this.mediaRecorder.start();
        this.isRecording = true;
        this.updateUI("recording");

        // بدء مؤقت الـ 10 ثوانٍ
        this.recordingTimer = setTimeout(() => {
          if (this.isRecording) {
            this.stopRecording();
            alert("تم إيقاف التسجيل تلقائياً بعد 10 ثوانٍ");
          }
        }, this.maxRecordingTime);
      } catch (error) {
        console.error("خطأ في بدء التسجيل:", error);
        alert("لا يمكن الوصول إلى الميكروفون. تأكد من السماح بالوصول.");
      }
    }

    stopRecording() {
      if (this.mediaRecorder && this.isRecording) {
        this.mediaRecorder.stop();
        this.isRecording = false;
        this.updateUI("stopped");

        // إيقاف المؤقت
        if (this.recordingTimer) {
          clearTimeout(this.recordingTimer);
          this.recordingTimer = null;
        }

        // استخدام التسجيل تلقائياً بعد إيقافه (مثل صفحة التعديل)
        setTimeout(() => {
          if (this.recordedBlob) {
            this.useRecording();
          }
        }, 500); // انتظار نصف ثانية للتأكد من اكتمال معالجة التسجيل
      }
    }

    cancelRecording() {
      if (this.mediaRecorder && this.isRecording) {
        this.mediaRecorder.stop();
        this.isRecording = false;

        // إيقاف المؤقت
        if (this.recordingTimer) {
          clearTimeout(this.recordingTimer);
          this.recordingTimer = null;
        }
      }
      this.hideRecordingArea();
    }

    handleRecordedAudio(audioBlob) {
      const audioUrl = URL.createObjectURL(audioBlob);
      const audioElement = document.createElement("audio");
      audioElement.src = audioUrl;
      audioElement.controls = true;
      audioElement.style.width = "100%";
      audioElement.style.maxWidth = "300px";

      // عرض حجم الملف
      const fileSizeKB = (audioBlob.size / 1024).toFixed(2);

      const container = document.getElementById(
        `${this.language}RecordedAudio`
      );
      container.innerHTML = `
      <div class="mt-2">
        <small class="text-success">تم التسجيل بنجاح! (${fileSizeKB} KB)</small><br>
        ${audioElement.outerHTML}
        <div class="mt-2">
          <button type="button" class="btn btn-sm btn-primary" onclick="${this.language}Recorder.useRecording()">
            <i class="fas fa-check"></i> استخدام هذا التسجيل
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary" onclick="${this.language}Recorder.recordAgain()">
            <i class="fas fa-redo"></i> إعادة التسجيل
          </button>
        </div>
      </div>
    `;

      this.recordedBlob = audioBlob;
    }

    useRecording() {
      if (this.recordedBlob) {
        // تحويل Blob إلى File وإضافته لـ input
        const file = new File(
          [this.recordedBlob],
          `recorded_${this.language}.webm`,
          {
            type: "audio/webm;codecs=opus",
          }
        );

        const input = document.getElementById(`${this.language}_audio`);
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        input.files = dataTransfer.files;

        // تشغيل حدث التغيير لمعاينة الملف
        input.dispatchEvent(new Event("change"));
      }
      this.hideRecordingArea();
    }

    recordAgain() {
      document.getElementById(`${this.language}RecordedAudio`).innerHTML = "";
      this.updateUI("ready");
    }

    showRecordingArea() {
      document.getElementById(`${this.language}RecordingArea`).style.display =
        "block";
      this.updateUI("ready");
    }

    hideRecordingArea() {
      document.getElementById(`${this.language}RecordingArea`).style.display =
        "none";
      document.getElementById(`${this.language}RecordedAudio`).innerHTML = "";
    }

    updateUI(status) {
      const startBtn = document.getElementById(
        `start${
          this.language.charAt(0).toUpperCase() + this.language.slice(1)
        }Record`
      );
      const stopBtn = document.getElementById(
        `stop${
          this.language.charAt(0).toUpperCase() + this.language.slice(1)
        }Record`
      );
      const statusSpan = document.getElementById(
        `${this.language}RecordingStatus`
      );

      switch (status) {
        case "ready":
          startBtn.disabled = false;
          stopBtn.disabled = true;
          statusSpan.textContent = "جاهز للتسجيل (حد أقصى 10 ثوانٍ)";
          break;
        case "recording":
          startBtn.disabled = true;
          stopBtn.disabled = false;
          statusSpan.innerHTML =
            '<i class="fas fa-circle text-danger"></i> جاري التسجيل... (حد أقصى 10 ثوانٍ)';
          break;
        case "stopped":
          startBtn.disabled = false;
          stopBtn.disabled = true;
          statusSpan.textContent = "تم إيقاف التسجيل";
          break;
      }
    }
  }

  // إنشاء مسجل للغة الفور فقط
  const furRecorder = new AudioRecorder("fur");

  // ربط الأحداث
  document.getElementById("recordFurBtn").addEventListener("click", () => {
    furRecorder.showRecordingArea();
  });

  document.getElementById("startFurRecord").addEventListener("click", () => {
    furRecorder.startRecording();
  });

  document.getElementById("stopFurRecord").addEventListener("click", () => {
    furRecorder.stopRecording();
  });

  document.getElementById("cancelFurRecord").addEventListener("click", () => {
    furRecorder.cancelRecording();
  });

  // الكود الموجود للمعاينة...
  document.getElementById("fur_audio").addEventListener("change", function (e) {
    previewAudio(e.target, "furAudioPreview", "ملف صوتي للفور");
  });

  function previewAudio(input, previewId, label) {
    const previewDiv = document.getElementById(previewId);
    const audioPreview = document.getElementById("audioPreview");

    if (input.files && input.files[0]) {
      const file = input.files[0];
      const url = URL.createObjectURL(file);

      previewDiv.innerHTML = `
      <div class="mt-2">
        <small class="text-muted">${label}: ${file.name}</small><br>
        <audio controls class="mt-1" style="width: 100%; max-width: 300px;">
          <source src="${url}" type="${file.type}">
          متصفحك لا يدعم تشغيل الصوت
        </audio>
      </div>
    `;

      audioPreview.style.display = "block";
    } else {
      previewDiv.innerHTML = "";
      // إخفاء قسم المعاينة إذا لم تكن هناك ملفات
      if (!document.getElementById("furAudioPreview").innerHTML) {
        audioPreview.style.display = "none";
      }
    }
  }

  // تحسين تجربة المستخدم
  // تحسين تجربة المستخدم
  document.addEventListener("DOMContentLoaded", function () {
    // التركيز على أول حقل
    document.getElementById("fur_word").focus();

    // إضافة التحقق من صحة الإدخال
    const arabicInput = document.getElementById("arabic_word");
    const englishInput = document.getElementById("english_word");

    arabicInput.addEventListener("input", function (e) {
      // تعديل النمط ليسمح بجميع الرموز الخاصة
      const arabicPattern =
        /^[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\s\d.,;:"'\[\]{}()\-_=+*&^%$#@!~`<>?\/\\|\u064B-\u065F\u0670]*$/;
      if (!arabicPattern.test(e.target.value)) {
        e.target.setCustomValidity(
          "يجب أن تحتوي الكلمة العربية على أحرف عربية فقط"
        );
        e.target.classList.add("is-invalid"); // إضافة فئة is-invalid لإظهار رسالة الخطأ
      } else {
        e.target.setCustomValidity("");
        e.target.classList.remove("is-invalid"); // إزالة فئة is-invalid عند صحة الإدخال
      }
    });

    englishInput.addEventListener("input", function (e) {
      // تعديل النمط ليسمح بجميع الرموز الخاصة
      const englishPattern =
        /^[a-zA-Z\s\d.,;:"'\[\]{}()\-_=+*&^%$#@!~`<>?\/\\|]*$/;
      if (!englishPattern.test(e.target.value)) {
        e.target.setCustomValidity(
          "يجب أن تحتوي الكلمة الإنجليزية على أحرف إنجليزية فقط"
        );
        e.target.classList.add("is-invalid"); // إضافة فئة is-invalid لإظهار رسالة الخطأ
      } else {
        e.target.setCustomValidity("");
        e.target.classList.remove("is-invalid"); // إزالة فئة is-invalid عند صحة الإدخال
      }
    });

    // تحسين النموذج
    const form = document.querySelector("form");
    form.addEventListener("submit", function (e) {
      const submitBtn = form.querySelector('button[type="submit"]');
      submitBtn.innerHTML =
        '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';
      submitBtn.disabled = true;
    });
  });

  // دالة لحفظ التسجيل كملف في النموذج
  function saveRecordingToForm(audioBlob, type) {
    const file = new File([audioBlob], `${type}_recording.wav`, {
      type: "audio/wav",
      lastModified: Date.now(),
    });

    // إنشاء input مخفي للملف المسجل
    const fileInput = document.createElement("input");
    fileInput.type = "file";
    fileInput.name = `${type}_recorded_audio`;
    fileInput.style.display = "none";

    // تحويل الملف إلى FileList
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    fileInput.files = dataTransfer.files;

    // إضافة الـ input إلى النموذج
    document.getElementById("wordForm").appendChild(fileInput);
  }

  // تعديل دالة stopRecording
  function stopRecording(type) {
    if (currentRecorder && currentRecorder.state !== "inactive") {
      currentRecorder.stop();

      currentRecorder.ondataavailable = function (event) {
        if (event.data.size > 0) {
          const audioBlob = event.data;

          // حفظ التسجيل في النموذج
          saveRecordingToForm(audioBlob, type);

          // عرض معاينة التسجيل
          const audioUrl = URL.createObjectURL(audioBlob);
          const previewContainer = document.getElementById(
            `${type}RecordingPreview`
          );
          previewContainer.innerHTML = `
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i> تم التسجيل بنجاح
                        <audio controls class="d-block mt-2" style="width: 100%;">
                            <source src="${audioUrl}" type="audio/wav">
                        </audio>
                    </div>
                `;
        }
      };
    }

    // إخفاء أزرار التسجيل وإظهار زر البدء
    document.getElementById(`${type}RecordingControls`).style.display = "none";
    document.getElementById(
      `record${type.charAt(0).toUpperCase() + type.slice(1)}Btn`
    ).style.display = "inline-block";

    currentRecorder = null;
    currentRecordingType = null;
  }

  document.addEventListener("keydown", function (event) {
    // التحقق من الضغط على زر المسطرة (keyCode 32) أثناء التسجيل
    if (event.keyCode === 32) {
      console.log(furRecorder);
      // إيقاف التسجيل النشط
      if (furRecorder && furRecorder.isRecording) {
        document.getElementById("stopFurRecord").click();
        event.preventDefault();
      }
    }
  });

  // جلب الكلمات المشابهة عند الكتابة في حقل كلمة الفور
  const furWordInput = document.getElementById("fur_word");
  const similarWordsDatalist = document.getElementById("similarWordsDatalist");
  let searchTimeout = null;

  furWordInput.addEventListener("input", () => {
    clearTimeout(searchTimeout);
    const query = furWordInput.value.trim();

    if (query.length < 2) {
      // ابدأ البحث بعد حرفين على الأقل
      similarWordsDatalist.innerHTML = "";
      return;
    }

    searchTimeout = setTimeout(async () => {
      try {
        const response = await fetch(
          `/api/words/similar?query=${encodeURIComponent(query)}`
        );
        const data = await response.json();

        if (data.success) {
          similarWordsDatalist.innerHTML = "";
          data.words.forEach((word) => {
            const option = document.createElement("option");
            option.value =
              word.fur_word +
              " (" +
              word.arabic_word +
              " - " +
              word.english_word +
              ")";
            similarWordsDatalist.appendChild(option);
          });
        } else {
          console.error("Error fetching similar words:", data.error);
        }
      } catch (error) {
        console.error("Network error fetching similar words:", error);
      }
    }, 300); // تأخير 300 مللي ثانية بعد التوقف عن الكتابة
  });

  // إضافة حقول المرادفات الإنجليزية والعربية ديناميكياً
  const englishSynonymsContainer = document.getElementById(
    "englishSynonymsContainer"
  );
  const addEnglishSynonymBtn = document.getElementById("addEnglishSynonymBtn");

  function addEnglishSynonymField(synonymText = "") {
    const div = document.createElement("div");
    div.classList.add("input-group", "mb-2", "english-synonym-item");
    div.innerHTML = `
      <input type="text" class="form-control" name="english_synonym_text[]" placeholder="أدخل مرادف إنجليزي" value="${synonymText}">
      <button type="button" class="btn btn-danger remove-synonym-btn"><i class="fas fa-minus"></i></button>
    `;
    englishSynonymsContainer.appendChild(div);

    div.querySelector(".remove-synonym-btn").addEventListener("click", () => {
      div.remove();
    });
  }

  addEnglishSynonymBtn.addEventListener("click", () =>
    addEnglishSynonymField()
  );

  const arabicSynonymsContainer = document.getElementById(
    "arabicSynonymsContainer"
  );
  const addArabicSynonymBtn = document.getElementById("addArabicSynonymBtn");

  function addArabicSynonymField(synonymText = "") {
    const div = document.createElement("div");
    div.classList.add("input-group", "mb-2", "arabic-synonym-item");
    div.innerHTML = `
      <input type="text" class="form-control" name="arabic_synonym_text[]" placeholder="أدخل مرادف عربي" value="${synonymText}">
      <button type="button" class="btn btn-danger remove-synonym-btn"><i class="fas fa-minus"></i></button>
    `;
    arabicSynonymsContainer.appendChild(div);

    div.querySelector(".remove-synonym-btn").addEventListener("click", () => {
      div.remove();
    });
  }

  addArabicSynonymBtn.addEventListener("click", () => addArabicSynonymField());

  // إضافة حقول مرادفات لغة الفور ديناميكياً
  const furSynonymsContainer = document.getElementById("furSynonymsContainer");
  const addFurSynonymBtn = document.getElementById("addFurSynonymBtn");
  let furSynonymCounter = 0;

  function addFurSynonymField(synonymText = "", audioUrl = "") {
    const currentIndex = furSynonymCounter;
    const div = document.createElement("div");
    div.classList.add("mb-3", "fur-synonym-item");
    div.innerHTML = `
      <div class="input-group mb-2">
        <input type="text" class="form-control" name="fur_synonym_text[]" placeholder="أدخل مرادف فوري" value="${synonymText}">
        <button type="button" class="btn btn-danger remove-synonym-btn"><i class="fas fa-minus"></i></button>
      </div>
      <div class="input-group">
        <input type="file" class="form-control" name="fur_synonym_audio_${currentIndex}" accept=".mp3,.wav,.ogg">
        <button type="button" class="btn btn-outline-danger record-fur-synonym-btn" data-index="${currentIndex}">
          <i class="fas fa-microphone"></i> تسجيل
        </button>
      </div>
      <div class="form-text">الملفات المدعومة: MP3, WAV, OGG أو اضغط تسجيل</div>
      <div class="fur-synonym-recording-area mt-2" id="furSynonymRecordingArea_${currentIndex}" style="display: none">
        <div class="d-flex align-items-center gap-2">
          <button type="button" class="btn btn-sm btn-success start-fur-synonym-record" data-index="${currentIndex}">
            <i class="fas fa-play"></i> بدء التسجيل
          </button>
          <button type="button" class="btn btn-sm btn-danger stop-fur-synonym-record" data-index="${currentIndex}" disabled>
            <i class="fas fa-stop"></i> إيقاف التسجيل
          </button>
          <button type="button" class="btn btn-sm btn-secondary cancel-fur-synonym-record" data-index="${currentIndex}">
            <i class="fas fa-times"></i> إلغاء
          </button>
          <span class="fur-synonym-recording-status" id="furSynonymRecordingStatus_${currentIndex}"></span>
        </div>
        <div class="fur-synonym-recorded-audio mt-2" id="furSynonymRecordedAudio_${currentIndex}"></div>
      </div>
      ${audioUrl ? `<div class="mt-2"><audio controls style="width: 100%;"><source src="${audioUrl}" type="audio/mpeg"></audio></div>` : ""}
    `;
    furSynonymsContainer.appendChild(div);

    // إضافة مستمعي الأحداث
    div.querySelector(".remove-synonym-btn").addEventListener("click", () => {
      div.remove();
    });

    // مستمع حدث زر التسجيل
    const recordBtn = div.querySelector(".record-fur-synonym-btn");
    const recordingArea = div.querySelector(".fur-synonym-recording-area");
    const startBtn = div.querySelector(".start-fur-synonym-record");
    const stopBtn = div.querySelector(".stop-fur-synonym-record");
    const cancelBtn = div.querySelector(".cancel-fur-synonym-record");
    const statusSpan = div.querySelector(".fur-synonym-recording-status");
    const recordedAudioDiv = div.querySelector(".fur-synonym-recorded-audio");

    let synonymRecorder = null;
    let synonymAudioChunks = [];

    recordBtn.addEventListener("click", () => {
      recordingArea.style.display = "block";
      recordBtn.style.display = "none";
    });

    startBtn.addEventListener("click", async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        synonymRecorder = new MediaRecorder(stream);
        synonymAudioChunks = [];
        let recordingTimer;

        synonymRecorder.ondataavailable = (event) => {
          synonymAudioChunks.push(event.data);
        };

        synonymRecorder.onstop = () => {
          const audioBlob = new Blob(synonymAudioChunks, { type: "audio/wav" });
          const audioUrl = URL.createObjectURL(audioBlob);
          
          // إنشاء ملف وإضافته للنموذج
          const file = new File([audioBlob], `fur_synonym_${currentIndex}_recording.wav`, {
            type: "audio/wav",
            lastModified: Date.now(),
          });
          
          const fileInput = div.querySelector(`input[name="fur_synonym_audio_${currentIndex}"]`);
          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(file);
          fileInput.files = dataTransfer.files;
          
          // عرض معاينة التسجيل
          recordedAudioDiv.innerHTML = `
            <div class="alert alert-success">
              <i class="fas fa-check-circle"></i> تم التسجيل بنجاح
              <audio controls class="d-block mt-2" style="width: 100%;">
                <source src="${audioUrl}" type="audio/wav">
              </audio>
            </div>
          `;
          
          stream.getTracks().forEach(track => track.stop());
          
          // إعادة تعيين واجهة المستخدم
          startBtn.disabled = false;
          stopBtn.disabled = true;
          statusSpan.textContent = "تم حفظ التسجيل";
          statusSpan.className = "text-success";
          
          // إيقاف المؤقت إذا كان نشطاً
          if (recordingTimer) {
            clearTimeout(recordingTimer);
          }
        };

        synonymRecorder.start();
        startBtn.disabled = true;
        stopBtn.disabled = false;
        statusSpan.textContent = "جاري التسجيل... (حد أقصى 10 ثوانٍ)";
        statusSpan.className = "text-danger";
        
        // إيقاف التسجيل تلقائياً بعد 10 ثوانٍ
        recordingTimer = setTimeout(() => {
          if (synonymRecorder && synonymRecorder.state === 'recording') {
            synonymRecorder.stop();
            stream.getTracks().forEach(track => track.stop());
          }
        }, 10000);
        
      } catch (error) {
        alert("لا يمكن الوصول إلى الميكروفون. تأكد من السماح بالوصول.");
      }
    });

    stopBtn.addEventListener("click", () => {
      if (synonymRecorder && synonymRecorder.state !== "inactive") {
        synonymRecorder.stop();
        startBtn.disabled = false;
        stopBtn.disabled = true;
        statusSpan.textContent = "تم إيقاف التسجيل";
        statusSpan.className = "text-success";
      }
    });

    cancelBtn.addEventListener("click", () => {
      if (synonymRecorder && synonymRecorder.state !== "inactive") {
        synonymRecorder.stop();
      }
      recordingArea.style.display = "none";
      recordBtn.style.display = "inline-block";
      recordedAudioDiv.innerHTML = "";
      statusSpan.textContent = "";
      startBtn.disabled = false;
      stopBtn.disabled = true;
    });

    furSynonymCounter++;
  }

  addFurSynonymBtn.addEventListener("click", () => addFurSynonymField());
</script>
{% endblock %}