{% extends "base.html" %}

{% block content %}
  <header class="topbar reveal">
    <div>
      <h1>Tableau de bord</h1>
      <p class="muted">Backend: {{ backend_url }} | Utilisateur: {{ username }}</p>
    </div>
    <div class="topbar-actions">
      <button type="button" class="danger" id="btn-stop-audio">Arreter l'audio</button>
      <a href="{{ url_for('ui.logout') }}" class="ghost-link">Deconnexion</a>
    </div>
  </header>

  <main class="dashboard-grid">
    <section class="panel reveal delay-1">
      <h2>Ajouter ou modifier un trigger</h2>
      <form method="post" action="{{ url_for('ui.save_trigger') }}" class="form-grid" id="trigger-form">
        <label>
          Identifiant du trigger existant (optionnel)
          <input type="text" name="original_id" id="original_id" placeholder="GPIO3" />
        </label>
        <label>
          Type du trigger (obligatoire)
          <input type="text" name="type" id="trigger_type" placeholder="GPIO3" required />
        </label>
        <label>
          Nom
          <input type="text" name="name" id="trigger_name" placeholder="Bouton entree" required />
        </label>
        <label>
          Fichier audio
          <input list="audio-files" name="music_file" id="music_file" placeholder="bell.mp3" required />
          <datalist id="audio-files">
            {% for f in audio_files %}
              <option value="{{ f }}"></option>
            {% endfor %}
          </datalist>
        </label>
        <div class="time-row">
          <label>
            Debut (s)
            <input type="number" step="0.1" min="0" name="start_seconds" id="start_seconds" value="0" />
          </label>
          <label>
            Fin (s, optionnel)
            <input type="number" step="0.1" min="0" name="end_seconds" id="end_seconds" />
          </label>
        </div>
        <label class="volume-row">
          <span>Volume : <span id="trigger_volume_display">80</span>%</span>
          <input type="range" min="0" max="100" name="volume" id="trigger_volume" value="80" />
        </label>
        <button type="submit">Enregistrer le trigger</button>
      </form>
    </section>

    <section class="panel reveal delay-2">
      <h2>Liste des triggers</h2>
      <p class="muted" id="no-triggers-msg"{% if triggers %} hidden{% endif %}>Aucun trigger configure.</p>
      <div class="table-wrap"{% if not triggers %} hidden{% endif %} id="triggers-table-wrap">
        <table
          id="triggers-table"
          data-play-url="{{ url_for('ui.play_trigger') }}"
          data-delete-url="{{ url_for('ui.delete_trigger') }}"
        >
          <thead>
            <tr>
              <th>ID</th>
              <th>Nom</th>
              <th>Type</th>
              <th>Audio</th>
              <th>Debut</th>
              <th>Fin</th>
              <th>Volume</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody id="triggers-tbody">
            {% for trigger_id, trigger in triggers.items() %}
              <tr
                class="trigger-row"
                data-trigger-id="{{ trigger_id }}"
                data-trigger-type="{{ trigger.get('type', '') }}"
                data-trigger-name="{{ trigger.get('name', '') }}"
                data-trigger-music="{{ trigger.get('music_file', '') }}"
                data-trigger-start="{{ trigger.get('start_seconds', 0) }}"
                data-trigger-end="{{ '' if trigger.get('end_seconds') is none else trigger.get('end_seconds') }}"
                data-trigger-volume="{{ trigger.get('volume', 80) }}"
                title="Cliquer pour charger ce trigger dans le formulaire"
              >
                <td>{{ trigger_id }}</td>
                <td>{{ trigger.get('name', '') }}</td>
                <td>{{ trigger.get('type', '') }}</td>
                <td>{{ trigger.get('music_file', '') }}</td>
                <td>{{ trigger.get('start_seconds', 0) }}</td>
                <td>{{ trigger.get('end_seconds', '') }}</td>
                <td>{{ trigger.get('volume', 80) }}</td>
                <td>
                  <button
                    type="button"
                    class="small js-play-trigger"
                    data-trigger-id="{{ trigger_id }}"
                    data-play-url="{{ url_for('ui.play_trigger') }}"
                  >Lancer</button>
                  <button
                    type="button"
                    class="small danger js-delete-trigger-btn"
                    data-trigger-id="{{ trigger_id }}"
                  >Supprimer</button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="panel reveal delay-3">
      <h2>Stockage audio</h2>
      <div class="audio-player-card">
        <p id="audio-now-playing" class="muted">Aucune lecture en cours.</p>
        <audio id="browser-audio-player" controls preload="metadata"></audio>
        <p class="audio-time" id="audio-time">Temps de lecture: 00:00 / 00:00</p>
      </div>

      <form method="post" action="{{ url_for('ui.upload_audio') }}" enctype="multipart/form-data" class="upload-row" id="upload-audio-form">
        <input type="file" name="audio_file" id="audio_file_input" accept=".mp3,.wav,.ogg,.flac,.aac,.m4a" required />
        <button type="submit">Televerser</button>
      </form>

      {% if audio_files %}
        <ul class="audio-list">
          {% for filename in audio_files %}
            <li>
              <span>{{ filename }}</span>
              <div class="audio-actions">
                <button
                  type="button"
                  class="small-button js-play-browser"
                  data-audio-url="{{ url_for('ui.stream_audio', filename=filename) }}"
                  data-audio-name="{{ filename }}"
                >
                  Lire
                </button>
                <a href="{{ url_for('ui.download_audio', filename=filename) }}" class="small-button">Telecharger</a>
                <form method="post" action="{{ url_for('ui.delete_audio') }}" class="inline-form js-delete-audio-form" data-filename="{{ filename }}">
                  <input type="hidden" name="filename" value="{{ filename }}" />
                  <button type="submit" class="small danger">Supprimer</button>
                </form>
              </div>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="muted">Aucun fichier audio dans le stockage.</p>
      {% endif %}
    </section>
  </main>

  <div class="modal-backdrop" id="delete-audio-modal" aria-hidden="true">
    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="delete-audio-title">
      <h3 id="delete-audio-title">Confirmer la suppression</h3>
      <p id="delete-audio-message">Voulez-vous vraiment supprimer ce fichier ?</p>
      <div class="modal-actions">
        <button type="button" class="ghost-link" id="delete-audio-cancel">Annuler</button>
        <button type="button" class="danger" id="delete-audio-confirm">Supprimer</button>
      </div>
    </div>
  </div>

  <div class="modal-backdrop" id="delete-trigger-modal" aria-hidden="true">
    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="delete-trigger-title">
      <h3 id="delete-trigger-title">Confirmer la suppression</h3>
      <p id="delete-trigger-message">Voulez-vous vraiment supprimer ce trigger ?</p>
      <div class="modal-actions">
        <button type="button" class="ghost-link" id="delete-trigger-cancel">Annuler</button>
        <button type="button" class="danger" id="delete-trigger-confirm">Supprimer</button>
      </div>
    </div>
  </div>

  <div class="modal-backdrop" id="duplicate-name-modal" aria-hidden="true">
    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="duplicate-name-title">
      <h3 id="duplicate-name-title">Nom deja utilise</h3>
      <p id="duplicate-name-message">Ce nom existe deja dans les fichiers enregistres.</p>
      <div class="modal-actions">
        <button type="button" class="ghost-link" id="duplicate-name-close">Fermer</button>
      </div>
    </div>
  </div>

  <script>
    function showFlash(message, category) {
      let stack = document.querySelector(".flash-stack");
      if (!stack) {
        stack = document.createElement("div");
        stack.className = "flash-stack";
        document.body.prepend(stack);
      }
      const flash = document.createElement("div");
      flash.className = "flash flash-" + category;
      flash.textContent = message;
      stack.appendChild(flash);
      window.setTimeout(() => {
        flash.classList.add("is-hiding");
        window.setTimeout(() => {
          flash.remove();
          if (!stack.querySelector(".flash")) stack.remove();
        }, 360);
      }, 3600);
    }

    function upsertTriggerRow(data) {
      const tbody = document.getElementById("triggers-tbody");
      const tableWrap = document.getElementById("triggers-table-wrap");
      const noMsg = document.getElementById("no-triggers-msg");
      const table = document.getElementById("triggers-table");
      if (!tbody || !table) return;

      const triggerId = data.trigger_id;
      const originalId = data.original_id || triggerId;
      const t = data.trigger || {};
      const playUrl = table.dataset.playUrl || "";
      const deleteUrl = table.dataset.deleteUrl || "";

      // Supprimer l'ancienne ligne si renommage
      if (originalId && originalId !== triggerId) {
        const oldRow = tbody.querySelector(`tr[data-trigger-id="${CSS.escape(originalId)}"]`);
        if (oldRow) oldRow.remove();
      }

      const endVal = (t.end_seconds != null && t.end_seconds !== "") ? t.end_seconds : "";

      let row = tbody.querySelector(`tr[data-trigger-id="${CSS.escape(triggerId)}"]`);
      if (!row) {
        row = document.createElement("tr");
        row.className = "trigger-row";
        row.title = "Cliquer pour charger ce trigger dans le formulaire";
        tbody.appendChild(row);
        // Attacher le listener de clic (meme logique que pour les lignes existantes)
        row.addEventListener("click", (event) => {
          if (event.target.closest("form, button, a, input")) return;
          const f = document.getElementById("trigger-form");
          if (!f) return;
          const set = (id, val) => { const el = document.getElementById(id); if (el) el.value = val; };
          set("original_id", row.dataset.triggerId || "");
          set("trigger_type", row.dataset.triggerType || "");
          set("trigger_name", row.dataset.triggerName || "");
          set("music_file", row.dataset.triggerMusic || "");
          set("start_seconds", row.dataset.triggerStart || "0");
          set("end_seconds", row.dataset.triggerEnd || "");
          set("trigger_volume", row.dataset.triggerVolume || "80");
          document.getElementById("trigger_type")?.focus();
          f.scrollIntoView({ behavior: "smooth", block: "start" });
        });
      }

      row.dataset.triggerId = triggerId;
      row.dataset.triggerType = t.type || "";
      row.dataset.triggerName = t.name || "";
      row.dataset.triggerMusic = t.music_file || "";
      row.dataset.triggerStart = t.start_seconds != null ? t.start_seconds : "0";
      row.dataset.triggerEnd = endVal;
      row.dataset.triggerVolume = t.volume != null ? t.volume : 80;

      row.innerHTML = `
        <td>${triggerId}</td>
        <td>${t.name || ""}</td>
        <td>${t.type || ""}</td>
        <td>${t.music_file || ""}</td>
        <td>${t.start_seconds != null ? t.start_seconds : 0}</td>
        <td>${endVal}</td>
        <td>${t.volume != null ? t.volume : 80}</td>
        <td>
          <button type="button" class="small js-play-trigger"
            data-trigger-id="${triggerId}"
            data-play-url="${playUrl}">Lancer</button>
          <button type="button" class="small danger js-delete-trigger-btn"
            data-trigger-id="${triggerId}">Supprimer</button>
        </td>`;

      // Rebrancher le listener du bouton Lancer
      const playBtn = row.querySelector(".js-play-trigger");
      if (playBtn) {
        playBtn.addEventListener("click", () => {
          const tid = playBtn.dataset.triggerId;
          const url = playBtn.dataset.playUrl;
          if (!tid || !url) return;
          playBtn.disabled = true;
          const body = new URLSearchParams({ trigger_id: tid });
          fetch(url, {
            method: "POST",
            headers: { "X-Requested-With": "fetch", "Content-Type": "application/x-www-form-urlencoded" },
            body: body.toString(),
          })
            .then((res) => res.json())
            .then((d) => { showFlash(d.ok ? (d.message || "Trigger demarre.") : (d.error || "Echec."), d.ok ? "success" : "error"); })
            .catch(() => { showFlash("Erreur reseau lors du lancement.", "error"); })
            .finally(() => { playBtn.disabled = false; });
        });
      }

      // Afficher la table si elle etait cachee
      if (tableWrap) tableWrap.hidden = false;
      if (noMsg) noMsg.hidden = true;
    }

    (function () {
      const btn = document.getElementById("btn-stop-audio");
      if (!btn) return;

      btn.addEventListener("click", () => {
        btn.disabled = true;
        fetch("{{ url_for('ui.stop_audio') }}", {
          method: "POST",
          headers: { "X-Requested-With": "fetch" },
        })
          .then((res) => res.json())
          .then((data) => {
            if (data.ok) {
              showFlash(data.message || "Audio arrete.", "info");
            } else {
              showFlash(data.error || "Echec de l'arret audio.", "error");
            }
          })
          .catch(() => {
            showFlash("Erreur reseau lors de l'arret audio.", "error");
          })
          .finally(() => {
            btn.disabled = false;
          });
      });
    })();

    (function () {
      document.querySelectorAll(".js-play-trigger").forEach((btn) => {
        btn.addEventListener("click", () => {
          const triggerId = btn.dataset.triggerId;
          const url = btn.dataset.playUrl;
          if (!triggerId || !url) return;

          btn.disabled = true;
          const body = new URLSearchParams({ trigger_id: triggerId });
          fetch(url, {
            method: "POST",
            headers: { "X-Requested-With": "fetch", "Content-Type": "application/x-www-form-urlencoded" },
            body: body.toString(),
          })
            .then((res) => res.json())
            .then((data) => {
              if (data.ok) {
                showFlash(data.message || "Trigger demarre.", "success");
              } else {
                showFlash(data.error || "Echec du lancement.", "error");
              }
            })
            .catch(() => {
              showFlash("Erreur reseau lors du lancement.", "error");
            })
            .finally(() => {
              btn.disabled = false;
            });
        });
      });
    })();

    (function () {
      const form = document.getElementById("trigger-form");
      if (!form) return;

      const originalIdInput = document.getElementById("original_id");
      const typeInput = document.getElementById("trigger_type");
      const nameInput = document.getElementById("trigger_name");
      const musicInput = document.getElementById("music_file");
      const startInput = document.getElementById("start_seconds");
      const endInput = document.getElementById("end_seconds");
      const volumeInput = document.getElementById("trigger_volume");
      const volumeDisplay = document.getElementById("trigger_volume_display");
      if (volumeInput && volumeDisplay) {
        volumeInput.addEventListener("input", () => { volumeDisplay.textContent = volumeInput.value; });
      }

      form.addEventListener("submit", (event) => {
        event.preventDefault();
        const submitBtn = form.querySelector("button[type=submit]");
        if (submitBtn) submitBtn.disabled = true;

        const body = new URLSearchParams(new FormData(form));
        fetch(form.action, {
          method: "POST",
          headers: { "X-Requested-With": "fetch", "Content-Type": "application/x-www-form-urlencoded" },
          body: body.toString(),
        })
          .then((res) => res.json())
          .then((data) => {
            if (data.ok) {
              showFlash(data.message || "Trigger enregistre.", "success");
              upsertTriggerRow(data);
            } else {
              showFlash(data.error || "Echec de l'enregistrement.", "error");
            }
          })
          .catch(() => {
            showFlash("Erreur reseau lors de l'enregistrement.", "error");
          })
          .finally(() => {
            if (submitBtn) submitBtn.disabled = false;
          });
      });

      const rows = document.querySelectorAll("tr.trigger-row");
      rows.forEach((row) => {
        row.addEventListener("click", (event) => {
          if (event.target.closest("form, button, a, input")) {
            return;
          }

          if (originalIdInput) originalIdInput.value = row.dataset.triggerId || "";
          if (typeInput) typeInput.value = row.dataset.triggerType || "";
          if (nameInput) nameInput.value = row.dataset.triggerName || "";
          if (musicInput) musicInput.value = row.dataset.triggerMusic || "";
          if (startInput) startInput.value = row.dataset.triggerStart || "0";
          if (endInput) endInput.value = row.dataset.triggerEnd || "";
          if (volumeInput) {
            volumeInput.value = row.dataset.triggerVolume || "80";
            if (volumeDisplay) volumeDisplay.textContent = volumeInput.value;
          }

          typeInput?.focus();
          form.scrollIntoView({ behavior: "smooth", block: "start" });
        });
      });
    })();

    (function () {
      const player = document.getElementById("browser-audio-player");
      const timeLabel = document.getElementById("audio-time");
      const nowPlaying = document.getElementById("audio-now-playing");
      if (!player || !timeLabel || !nowPlaying) return;

      const formatTime = (seconds) => {
        if (!Number.isFinite(seconds) || seconds < 0) return "00:00";
        const total = Math.floor(seconds);
        const minutes = Math.floor(total / 60);
        const remain = total % 60;
        return String(minutes).padStart(2, "0") + ":" + String(remain).padStart(2, "0");
      };

      const updateTimeLabel = () => {
        const current = formatTime(player.currentTime || 0);
        const total = formatTime(player.duration || 0);
        timeLabel.textContent = "Temps de lecture: " + current + " / " + total;
      };

      player.addEventListener("timeupdate", updateTimeLabel);
      player.addEventListener("loadedmetadata", updateTimeLabel);
      player.addEventListener("ended", updateTimeLabel);

      const playButtons = document.querySelectorAll(".js-play-browser");
      playButtons.forEach((button) => {        button.addEventListener("click", () => {
          const src = button.dataset.audioUrl;
          const name = button.dataset.audioName || "Fichier audio";
          if (!src) return;

          if (player.src !== src) {
            player.src = src;
          }
          player.play().catch(() => {
            // Browsers may block autoplay in some contexts; user can press play manually.
          });
          nowPlaying.textContent = "Lecture: " + name;
          updateTimeLabel();
        });
      });
    })();

    (function () {
      const uploadForm = document.getElementById("upload-audio-form");
      const fileInput = document.getElementById("audio_file_input");
      const duplicateModal = document.getElementById("duplicate-name-modal");
      const duplicateClose = document.getElementById("duplicate-name-close");
      if (!uploadForm || !fileInput || !duplicateModal || !duplicateClose) return;

      const existing = new Set([
        {% for filename in audio_files %}
          "{{ filename|lower|replace('\\', '\\\\')|replace('"', '\\"') }}",
        {% endfor %}
      ]);

      const openDuplicateModal = () => {
        duplicateModal.classList.add("is-open");
        duplicateModal.setAttribute("aria-hidden", "false");
        duplicateClose.focus();
      };

      const closeDuplicateModal = () => {
        duplicateModal.classList.remove("is-open");
        duplicateModal.setAttribute("aria-hidden", "true");
      };

      uploadForm.addEventListener("submit", (event) => {
        const file = fileInput.files && fileInput.files[0];
        if (!file) return;

        if (existing.has(file.name.toLowerCase())) {
          event.preventDefault();
          openDuplicateModal();
        }
      });

      duplicateClose.addEventListener("click", closeDuplicateModal);
      duplicateModal.addEventListener("click", (event) => {
        if (event.target === duplicateModal) {
          closeDuplicateModal();
        }
      });

      document.addEventListener("keydown", (event) => {
        if (event.key === "Escape" && duplicateModal.classList.contains("is-open")) {
          closeDuplicateModal();
        }
      });
    })();

    (function () {
      const modal = document.getElementById("delete-audio-modal");
      const message = document.getElementById("delete-audio-message");
      const cancelBtn = document.getElementById("delete-audio-cancel");
      const confirmBtn = document.getElementById("delete-audio-confirm");
      if (!modal || !message || !cancelBtn || !confirmBtn) return;

      let pendingForm = null;

      const openModal = (form, filename) => {
        pendingForm = form;
        message.textContent = "Voulez-vous vraiment supprimer le fichier \"" + filename + "\" ?";
        modal.classList.add("is-open");
        modal.setAttribute("aria-hidden", "false");
        confirmBtn.focus();
      };

      const closeModal = () => {
        modal.classList.remove("is-open");
        modal.setAttribute("aria-hidden", "true");
        pendingForm = null;
      };

      document.querySelectorAll(".js-delete-audio-form").forEach((form) => {
        form.addEventListener("submit", (event) => {
          event.preventDefault();
          const filename = form.dataset.filename || "ce fichier";
          openModal(form, filename);
        });
      });

      cancelBtn.addEventListener("click", closeModal);
      modal.addEventListener("click", (event) => {
        if (event.target === modal) {
          closeModal();
        }
      });

      confirmBtn.addEventListener("click", () => {
        if (pendingForm) {
          pendingForm.submit();
        }
      });

      document.addEventListener("keydown", (event) => {
        if (event.key === "Escape" && modal.classList.contains("is-open")) {
          closeModal();
        }
      });
    })();

    (function () {
      const modal = document.getElementById("delete-trigger-modal");
      const message = document.getElementById("delete-trigger-message");
      const cancelBtn = document.getElementById("delete-trigger-cancel");
      const confirmBtn = document.getElementById("delete-trigger-confirm");
      const tbody = document.getElementById("triggers-tbody");
      const tableWrap = document.getElementById("triggers-table-wrap");
      const noMsg = document.getElementById("no-triggers-msg");
      const deleteUrl = document.getElementById("triggers-table")?.dataset.deleteUrl || "";
      if (!modal || !message || !cancelBtn || !confirmBtn || !tbody) return;

      let pendingTriggerId = null;

      const openModal = (triggerId) => {
        pendingTriggerId = triggerId;
        message.textContent = `Voulez-vous vraiment supprimer le trigger "${triggerId}" ?`;
        modal.classList.add("is-open");
        modal.setAttribute("aria-hidden", "false");
        confirmBtn.focus();
      };

      const closeModal = () => {
        modal.classList.remove("is-open");
        modal.setAttribute("aria-hidden", "true");
        pendingTriggerId = null;
      };

      tbody.addEventListener("click", (event) => {
        const btn = event.target.closest(".js-delete-trigger-btn");
        if (!btn) return;
        openModal(btn.dataset.triggerId);
      });

      cancelBtn.addEventListener("click", closeModal);
      modal.addEventListener("click", (event) => {
        if (event.target === modal) closeModal();
      });
      document.addEventListener("keydown", (event) => {
        if (event.key === "Escape" && modal.classList.contains("is-open")) closeModal();
      });

      confirmBtn.addEventListener("click", () => {
        if (!pendingTriggerId) return;
        const triggerId = pendingTriggerId;
        closeModal();
        confirmBtn.disabled = true;
        const body = new URLSearchParams({ trigger_id: triggerId });
        fetch(deleteUrl, {
          method: "POST",
          headers: { "X-Requested-With": "fetch", "Content-Type": "application/x-www-form-urlencoded" },
          body: body.toString(),
        })
          .then((res) => res.json())
          .then((data) => {
            if (data.ok) {
              const row = tbody.querySelector(`tr[data-trigger-id="${CSS.escape(triggerId)}"]`);
              if (row) row.remove();
              if (!tbody.querySelector("tr")) {
                if (tableWrap) tableWrap.hidden = true;
                if (noMsg) noMsg.hidden = false;
              }
              showFlash(data.message || "Trigger supprime.", "success");
            } else {
              showFlash(data.error || "Echec de la suppression.", "error");
            }
          })
          .catch(() => {
            showFlash("Erreur reseau lors de la suppression.", "error");
          })
          .finally(() => {
            confirmBtn.disabled = false;
          });
      });
    })();
  </script>
{% endblock %}