if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/static/sw.js");
  });
}

const viewPreferenceKey = `gardomatic.view-preferences.${document.body.dataset.userId || "anonymous"}`;

function readViewPreferences() {
  try { return { default: "grid", ...JSON.parse(localStorage.getItem(viewPreferenceKey) || "{}") }; }
  catch (_) { return { default: "grid" }; }
}

function initializeCollections(root = document) {
  const preferences = readViewPreferences();
  const selectedMode = (key) => {
    const selected = preferences[key];
    return selected && selected !== "inherit" ? selected : preferences.default;
  };
  root.querySelectorAll("[data-background-image]").forEach((card) => {
    card.style.backgroundImage = `url("${card.dataset.backgroundImage}")`;
  });
  root.querySelectorAll("[data-view-key]").forEach((collection) => {
    collection.dataset.viewMode = selectedMode(collection.dataset.viewKey);
  });
  root.querySelectorAll("[data-view-variants]").forEach((container) => {
    const mode = selectedMode(container.dataset.viewKey);
    container.querySelectorAll(":scope > [data-view-variant]").forEach((variant) => {
      variant.hidden = variant.dataset.viewVariant !== mode;
    });
  });
}

function initializeViewToggles(root = document) {
  root.querySelectorAll("[data-view-toggle]").forEach((button) => {
    const key = button.dataset.viewToggle;
    const update = () => {
      const preferences = readViewPreferences();
      const mode = preferences[key] && preferences[key] !== "inherit" ? preferences[key] : preferences.default;
      button.dataset.viewMode = mode;
      button.setAttribute("aria-label", mode === "grid" ? "Als Liste anzeigen" : "Als Kacheln anzeigen");
      button.title = button.getAttribute("aria-label");
    };
    button.addEventListener("click", () => {
      const preferences = readViewPreferences();
      const current = preferences[key] && preferences[key] !== "inherit" ? preferences[key] : preferences.default;
      const next = current === "grid" ? "list" : "grid";
      preferences[key] = next;
      localStorage.setItem(viewPreferenceKey, JSON.stringify(preferences));
      root.querySelectorAll(`[data-view-key="${key}"]`).forEach((collection) => {
        collection.dataset.viewMode = next;
        if (collection.hasAttribute("data-view-variants")) collection.querySelectorAll(":scope > [data-view-variant]").forEach((variant) => { variant.hidden = variant.dataset.viewVariant !== next; });
      });
      update();
    });
    update();
  });
}

function initializeViewSettings() {
  const form = document.querySelector("[data-view-settings]");
  if (!form) return;
  const preferences = readViewPreferences();
  Array.from(form.elements).forEach((field) => {
    if (!(field instanceof HTMLSelectElement)) return;
    if (field.name === "entriesPerPage") field.value = preferences.entriesPerPage || preferences.tasksPerPage || "20";
    else field.value = preferences[field.name] || (field.name === "default" ? "grid" : "inherit");
  });
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const next = {};
    new FormData(form).forEach((value, key) => { next[key] = value; });
    localStorage.setItem(viewPreferenceKey, JSON.stringify(next));
    const userSuffix = document.body.dataset.userId ? `.${document.body.dataset.userId}` : "";
    document.cookie = `gardomatic.entries-per-page${userSuffix}=${encodeURIComponent(next.entriesPerPage || "20")}; Path=/; Max-Age=31536000; SameSite=Lax`;
    form.querySelector("[data-settings-message]").textContent = "Einstellungen gespeichert.";
  });
}

function initializeSearchTabs() {
  const tabs = Array.from(document.querySelectorAll("[data-search-tab]"));
  if (!tabs.length) return;
  const sections = tabs.map((tab) => document.getElementById(tab.dataset.searchTab)).filter(Boolean);
  const select = (id) => {
    tabs.forEach((tab) => {
      const selected = tab.dataset.searchTab === id;
      tab.setAttribute("aria-current", selected ? "page" : "false");
    });
    sections.forEach((section) => { section.hidden = section.id !== id; });
  };
  tabs.forEach((tab) => tab.addEventListener("click", () => select(tab.dataset.searchTab)));
  const initial = window.location.hash.slice(1);
  select(sections.some((section) => section.id === initial) ? initial : "search-all");
}

initializeCollections();
initializeViewToggles();
initializeViewSettings();
initializeSearchTabs();

document.querySelector("[data-history-back]")?.addEventListener("click", () => window.history.back());

function initializePlantCompatibility(root = document) {
  const species = root.querySelector("[data-plant-species]");
  const warning = root.querySelector("[data-compatibility-warning]");
  if (!species || !warning) return;
  const check = () => {
    const expected = species.selectedOptions[0]?.dataset || {};
    const problems = [];
    root.querySelectorAll("[data-assignment-row] select[name='location_id']").forEach((select) => {
      const actual = root.querySelector(`[data-location-id="${select.value}"]`)?.dataset || {};
      const name = select.selectedOptions[0]?.textContent?.trim();
      const fields=[];
      if(expected.sun && actual.sun && expected.sun!==actual.sun) fields.push("Lichtverhältnis");
      if(expected.soil && actual.soil && expected.soil!==actual.soil) fields.push("Bodenbeschaffenheit");
      if(expected.reaction && actual.reaction && expected.reaction!==actual.reaction) fields.push("Bodenreaktion");
      if(fields.length) problems.push(`${name}: ${fields.join(" und ")}`);
    });
    warning.hidden=problems.length===0;
    warning.textContent=problems.length?`Hinweis: Standort und Art unterscheiden sich bei ${problems.join("; ")}.`:"";
  };
  root.addEventListener("change",(event)=>{if(event.target===species||event.target.matches("select[name='location_id']"))check()});
  check();
}
initializePlantCompatibility();

function initializeJournalEditor() {
  const form = document.querySelector("[data-journal-editor]");
  const textarea = form?.querySelector("[data-journal-body]");
  const mount = document.querySelector("#journal-editor");
  if (!form || !textarea || !mount) return;

  const embeddedInput = form.querySelector("[data-embedded-images]");
  const embeddedFiles = new DataTransfer();
  const richTextEnabled = readViewPreferences().journalEditor !== "plain" && window.toastui?.Editor;
  if (richTextEnabled) {
    const editor = new toastui.Editor({
      el: mount,
      height: "480px",
      minHeight: "300px",
      initialEditType: "wysiwyg",
      previewStyle: "vertical",
      initialValue: textarea.value,
      language: "de-DE",
      usageStatistics: false,
      placeholder: form.dataset.entryKind === "pinboard" ? "Idee oder Notiz festhalten …" : "Was ist heute im Garten passiert?",
      hooks: {
        addImageBlobHook(blob, callback) {
          const extension = (blob.type.split("/")[1] || "jpg").replace("jpeg", "jpg");
          const file = blob instanceof File ? blob : new File([blob], `tagebuchbild-${Date.now()}.${extension}`, { type: blob.type || "image/jpeg" });
          const index = embeddedFiles.files.length;
          embeddedFiles.items.add(file);
          embeddedInput.files = embeddedFiles.files;
          callback(`/pending-journal-image/${index}`, file.name);
        },
      },
    });
    textarea.hidden = true;
    form.addEventListener("submit", () => { textarea.value = editor.getMarkdown(); });
  } else {
    mount.hidden = true;
    textarea.hidden = false;
    textarea.placeholder = form.dataset.entryKind === "pinboard" ? "Idee oder Notiz festhalten …" : "Was ist heute im Garten passiert?";
  }

  const fileInputs = Array.from(form.querySelectorAll("[data-journal-files]"));
  const generatedInput = form.querySelector("[data-journal-generated-files]");
  const preview = form.querySelector("[data-attachment-preview]");
	const libraryImages = Array.from(form.querySelectorAll("[data-journal-library-image]"));
  let chosenFiles = new DataTransfer();
  const chosenEntries = [];
  const rebuildChosenFiles = () => {
    chosenFiles = new DataTransfer();
    chosenEntries.forEach((entry) => chosenFiles.items.add(entry.file));
    generatedInput.files = chosenFiles.files;
  };
  const addChosenFile = (file, photoId) => { chosenEntries.push({ file, photoId }); rebuildChosenFiles(); renderFiles(); };
  const replaceChosenFile = (file, photoId) => {
    const entry = chosenEntries.find((value) => value.photoId === photoId);
    if (!entry) return addChosenFile(file, photoId);
    entry.file = file;
    rebuildChosenFiles();
    renderFiles();
  };
  const renderFiles = () => {
    const nativeFiles = fileInputs.flatMap((input) => Array.from(input.files || []));
	const uploaded = [...nativeFiles, ...Array.from(chosenFiles.files)].map((file) => {
      const item = document.createElement("li");
      item.textContent = `${file.name} · ${(file.size / 1024 / 1024).toFixed(1)} MB`;
      return item;
	});
	const fromLibrary = libraryImages.filter((input) => input.checked).map((input) => {
	  const item = document.createElement("li");
	  const size = Number(input.dataset.imageSize || 0);
	  item.textContent = `${input.dataset.imageName || "Bild"} · ${(size / 1024 / 1024).toFixed(1)} MB · Bilderdatenbank`;
	  return item;
	});
	preview.replaceChildren(...uploaded,...fromLibrary);
  };
  fileInputs.forEach((input) => input.addEventListener("change", renderFiles));
	libraryImages.forEach((input) => input.addEventListener("change", renderFiles));
	renderFiles();
  form.addEventListener("journal-photo-ready", (event) => {
    const data = event.detail?.data;
    if (!data?.startsWith("data:")) return;
    const [header, encoded] = data.split(",", 2);
    const mime = header.match(/data:([^;]+)/)?.[1] || "image/jpeg";
    const binary = atob(encoded || "");
    const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0));
    const file = new File([bytes], `tagebuchfoto-${Date.now()}.jpg`, { type: mime });
    if (event.detail?.photoId) replaceChosenFile(file, event.detail.photoId);
    else addChosenFile(file);
  });

  const recordButton = form.querySelector("[data-audio-record]");
  const audioDialog = document.querySelector("[data-audio-dialog]");
  const audioToggle = document.querySelector("[data-audio-toggle]");
  const audioPause = document.querySelector("[data-audio-pause]");
  const audioApply = document.querySelector("[data-audio-apply]");
  const audioPreview = document.querySelector("[data-audio-preview]");
  const audioCancel = document.querySelector("[data-audio-cancel]");
  const audioStatus = document.querySelector("[data-audio-status]");
  const audioError = document.querySelector("[data-audio-error]");
  const recordingIndicator = document.querySelector("[data-audio-indicator]");
  let recorder;
  let recordingStream;
  let chunks = [];
  let cancelAudio = false;
  let pendingAudio;
  let audioPreviewURL;
  const stopAudioStream = () => { recordingStream?.getTracks().forEach((track) => track.stop()); recordingStream = undefined; };
  const clearAudioPreview = () => {
    if (audioPreviewURL) URL.revokeObjectURL(audioPreviewURL);
    audioPreviewURL = undefined;
    pendingAudio = undefined;
    audioPreview.removeAttribute("src");
    audioPreview.load();
    audioPreview.hidden = true;
    audioApply.hidden = true;
    audioPause.textContent = "Pause";
    audioPause.hidden = true;
    recordingIndicator.hidden = true;
  };
  recordButton?.addEventListener("click", () => {
    clearAudioPreview();
    audioError.textContent = "";
    audioStatus.textContent = "Bereit zur Aufnahme.";
    audioToggle.textContent = "Aufnahme starten";
    audioToggle.hidden = false;
    audioPause.hidden = true;
    audioDialog?.showModal();
  });
  audioToggle?.addEventListener("click", async () => {
    if (recorder?.state === "recording" || recorder?.state === "paused") { recorder.stop(); return; }
    if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) {
      audioError.textContent = "Audioaufnahme ist in diesem Browser oder ohne HTTPS nicht verfügbar.";
      return;
    }
    try {
      recordingStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      recorder = new MediaRecorder(recordingStream);
      chunks = [];
      recorder.addEventListener("dataavailable", (event) => { if (event.data.size) chunks.push(event.data); });
      recorder.addEventListener("stop", () => {
        if (cancelAudio) { cancelAudio = false; chunks = []; stopAudioStream(); return; }
        const type = recorder.mimeType || "audio/webm";
        pendingAudio = new File(chunks, `audio-${new Date().toISOString().replace(/[:.]/g, "-")}.webm`, { type });
        audioPreviewURL = URL.createObjectURL(pendingAudio);
        audioPreview.src = audioPreviewURL;
        audioPreview.hidden = false;
        stopAudioStream();
        audioToggle.hidden = true;
        audioPause.hidden = true;
        recordingIndicator.hidden = true;
        audioApply.hidden = false;
        audioStatus.textContent = "Aufnahme bereit. Bitte prüfen und übernehmen.";
      });
      recorder.start();
      audioToggle.textContent = "Aufnahme stoppen";
      audioPause.hidden = false;
      recordingIndicator.hidden = false;
      audioStatus.textContent = "Aufnahme läuft …";
    } catch (_) {
      audioError.textContent = "Das Mikrofon konnte nicht geöffnet werden. Bitte prüfe die Freigabe.";
    }
  });
  audioPause?.addEventListener("click", () => {
    if (!recorder) return;
    if (recorder.state === "recording") { recorder.pause(); audioPause.textContent = "Fortsetzen"; recordingIndicator.hidden = true; audioStatus.textContent = "Aufnahme pausiert."; }
    else if (recorder.state === "paused") { recorder.resume(); audioPause.textContent = "Pause"; recordingIndicator.hidden = false; audioStatus.textContent = "Aufnahme läuft …"; }
  });
  audioApply?.addEventListener("click", () => {
    if (!pendingAudio) return;
    addChosenFile(pendingAudio);
    clearAudioPreview();
    audioDialog?.close();
  });
  audioCancel?.addEventListener("click", () => { if (recorder?.state === "recording" || recorder?.state === "paused") { cancelAudio = true; recorder.stop(); } else stopAudioStream(); clearAudioPreview(); audioDialog?.close(); });
  audioDialog?.addEventListener("close", () => { if (recorder?.state === "recording" || recorder?.state === "paused") { cancelAudio = true; recorder.stop(); } stopAudioStream(); clearAudioPreview(); });

  const videoButton = form.querySelector("[data-video-record]");
  const videoDialog = document.querySelector("[data-video-dialog]");
  const videoPreview = document.querySelector("[data-video-preview]");
  const videoToggle = document.querySelector("[data-video-toggle]");
  const videoPause = document.querySelector("[data-video-pause]");
  const videoApply = document.querySelector("[data-video-apply]");
  const videoCancel = document.querySelector("[data-video-cancel]");
  const videoSwitchCamera = document.querySelector("[data-video-switch-camera]");
  const videoError = document.querySelector("[data-video-error]");
  let videoStream;
  let videoRecorder;
  let videoChunks = [];
  let cancelVideo = false;
  let pendingVideo;
  let videoPreviewURL;
  let videoFacingMode = "environment";
  const stopVideoStream = () => { videoStream?.getTracks().forEach((track) => track.stop()); videoStream = undefined; videoPreview.srcObject = null; };
  const startVideoStream = async () => {
    stopVideoStream();
    videoStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: videoFacingMode } }, audio: true });
    videoPreview.srcObject = videoStream;
    await videoPreview.play();
    const devices = await navigator.mediaDevices.enumerateDevices?.();
    if (videoSwitchCamera) videoSwitchCamera.hidden = devices ? devices.filter((device) => device.kind === "videoinput").length < 2 : false;
  };
  const clearVideoPreview = () => {
    videoPreview.pause();
    if (videoPreviewURL) URL.revokeObjectURL(videoPreviewURL);
    videoPreviewURL = undefined;
    pendingVideo = undefined;
    videoPreview.removeAttribute("src");
    videoPreview.load();
    videoPreview.controls = false;
    videoPreview.muted = true;
    videoApply.hidden = true;
    videoPause.textContent = "Pause";
    videoPause.hidden = true;
  };
  videoButton?.addEventListener("click", async () => {
    clearVideoPreview();
    videoToggle.hidden = false;
    videoPause.hidden = true;
    if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) { videoError.textContent = "Videoaufnahme ist in diesem Browser oder ohne HTTPS nicht verfügbar."; videoDialog.showModal(); return; }
    try {
      await startVideoStream();
      videoError.textContent = "";
      videoToggle.textContent = "Aufnahme starten";
      videoDialog.showModal();
    } catch (_) { videoError.textContent = "Kamera und Mikrofon konnten nicht geöffnet werden. Bitte prüfe die Freigaben."; videoDialog.showModal(); }
  });
  videoSwitchCamera?.addEventListener("click", async () => {
    videoFacingMode = videoFacingMode === "environment" ? "user" : "environment";
    videoError.textContent = "Kamera wird gewechselt …";
    try {
      await startVideoStream();
      videoError.textContent = "";
    } catch (_) {
      videoError.textContent = "Die andere Kamera konnte nicht geöffnet werden.";
    }
  });
  videoToggle?.addEventListener("click", () => {
    if (videoRecorder?.state === "recording" || videoRecorder?.state === "paused") { videoRecorder.stop(); return; }
    if (!videoStream) return;
    videoChunks = [];
    videoRecorder = new MediaRecorder(videoStream);
    if (videoSwitchCamera) videoSwitchCamera.hidden = true;
    videoRecorder.addEventListener("dataavailable", (event) => { if (event.data.size) videoChunks.push(event.data); });
    videoRecorder.addEventListener("stop", () => {
      if (cancelVideo) { cancelVideo = false; videoChunks = []; stopVideoStream(); return; }
      const type = videoRecorder.mimeType || "video/webm";
      pendingVideo = new File(videoChunks, `video-${new Date().toISOString().replace(/[:.]/g, "-")}.webm`, { type });
      stopVideoStream();
      videoPreviewURL = URL.createObjectURL(pendingVideo);
      videoPreview.src = videoPreviewURL;
      videoPreview.controls = true;
      videoPreview.muted = false;
      videoToggle.hidden = true;
      videoPause.hidden = true;
      videoApply.hidden = false;
      videoError.textContent = "Aufnahme bereit. Bitte prüfen und übernehmen.";
    });
    videoRecorder.start();
    videoToggle.textContent = "Aufnahme stoppen";
    videoPause.hidden = false;
  });
  videoPause?.addEventListener("click", () => {
    if (!videoRecorder) return;
    if (videoRecorder.state === "recording") { videoRecorder.pause(); videoPause.textContent = "Fortsetzen"; videoError.textContent = "Aufnahme pausiert."; }
    else if (videoRecorder.state === "paused") { videoRecorder.resume(); videoPause.textContent = "Pause"; videoError.textContent = "Aufnahme läuft …"; }
  });
  videoApply?.addEventListener("click", () => {
    if (!pendingVideo) return;
    addChosenFile(pendingVideo);
    clearVideoPreview();
    videoDialog.close();
  });
  videoCancel?.addEventListener("click", () => { if (videoRecorder?.state === "recording" || videoRecorder?.state === "paused") { cancelVideo = true; videoRecorder.stop(); } else stopVideoStream(); clearVideoPreview(); videoDialog.close(); });
  videoDialog?.addEventListener("close", () => { if (videoRecorder?.state === "recording" || videoRecorder?.state === "paused") { cancelVideo = true; videoRecorder.stop(); } stopVideoStream(); clearVideoPreview(); });
}

initializeJournalEditor();

function initializeTagEditors(root = document) {
  root.querySelectorAll("[data-tag-editor]").forEach((editor) => {
    if (editor.dataset.tagInitialized) return;
    const input = editor.querySelector("[data-tag-input]");
    const bubbles = editor.querySelector("[data-tag-bubbles]");
    const suggestions = editor.querySelector("[data-tag-suggestions]");
    if (!input || !bubbles || !suggestions) return;
    let tags = input.value.split(",").map((tag) => tag.trim().toLowerCase()).filter(Boolean);
    tags = [...new Set(tags)];
    input.value = "";
    const render = () => {
      bubbles.replaceChildren(...tags.map((tag) => {
        const bubble = document.createElement("span");
        bubble.className = "tag-bubble";
        bubble.textContent = tag;
        const remove = document.createElement("button");
        remove.type = "button";
        remove.className = "tag-bubble-remove";
        remove.textContent = "×";
        remove.setAttribute("aria-label", `${tag} entfernen`);
        remove.addEventListener("click", () => { tags = tags.filter((value) => value !== tag); render(); });
        bubble.append(remove);
        return bubble;
      }));
      updateSuggestions();
    };
    const updateSuggestions = () => {
      const prefix = input.value.trim().toLowerCase();
      let visible = 0;
      suggestions.querySelectorAll("[data-tag-suggestion]").forEach((button) => {
        const value = button.dataset.tagSuggestion.toLowerCase();
        const show = prefix.length > 0 && value.startsWith(prefix) && !tags.includes(value);
        button.hidden = !show;
        visible += show ? 1 : 0;
      });
      suggestions.hidden = visible === 0;
    };
    const add = (value) => {
      value = value.trim().toLowerCase();
      if (value && !tags.includes(value)) tags.push(value);
      input.value = "";
      render();
    };
    input.addEventListener("input", () => {
      if (input.value.includes(",")) {
        const values = input.value.split(",");
        values.slice(0, -1).forEach(add);
        input.value = values.at(-1).trim();
      }
      updateSuggestions();
    });
    input.addEventListener("keydown", (event) => {
      if ((event.key === "Enter" || event.key === ",") && input.value.trim()) { event.preventDefault(); add(input.value); }
      if (event.key === "Backspace" && !input.value && tags.length) { tags.pop(); render(); }
    });
    suggestions.querySelectorAll("[data-tag-suggestion]").forEach((button) => button.addEventListener("click", () => add(button.dataset.tagSuggestion)));
    editor.closest("form")?.addEventListener("submit", () => { if (input.value.trim()) add(input.value); input.value = tags.join(", "); });
    render();
    editor.dataset.tagInitialized = "true";
  });
}

initializeTagEditors();

document.addEventListener("click", (event) => {
  document.querySelectorAll(".user-menu[open]").forEach((menu) => {
    if (!menu.contains(event.target)) {
      menu.removeAttribute("open");
    }
  });

  if (event.target.closest("[data-close-dialog]")) {
    event.target.closest("dialog")?.remove();
  }

  const dialogOpener = event.target.closest("[data-open-dialog]");
  if (dialogOpener) {
    const dialog = document.getElementById(dialogOpener.dataset.openDialog);
    if (dialog instanceof HTMLDialogElement && !dialog.open) dialog.showModal();
  }

  if (event.target.closest("[data-cancel-dialog]")) {
    event.target.closest("dialog")?.close();
  }

  const card = event.target.closest("[data-card-href]");
  if (card && !event.target.closest("a, button, input, select, textarea, form, summary, details, video, audio, img")) {
    window.location.assign(card.dataset.cardHref);
  }

  const addAssignment = event.target.closest("[data-add-assignment]");
  if (addAssignment) {
    const template = document.querySelector("#assignment-row-template");
    const list = document.querySelector("[data-assignment-list]");
    if (template && list) {
      list.append(template.content.cloneNode(true));
      refreshAssignmentFields(list);
      list.lastElementChild?.querySelector("select")?.focus();
    }
  }

  const removeAssignment = event.target.closest("[data-remove-assignment]");
  if (removeAssignment) {
    const row = removeAssignment.closest("[data-assignment-row]");
    const assignmentID = row?.querySelector("[name='assignment_id']");
    if (row && assignmentID?.value !== "0") {
      row.querySelector("[name='location_id']").value = "0";
      row.querySelector("[name='quantity']").value = "1";
      row.hidden = true;
    } else {
      row?.remove();
    }
    refreshAssignmentFields(document.querySelector("[data-assignment-list]"));
  }

  const removePlantTask = event.target.closest("[data-remove-plant-task]");
  if (removePlantTask) {
    const row = removePlantTask.closest("[data-plant-task-row]");
    const taskID = row?.querySelector("[name='plant_task_id']");
    if (row && taskID?.value !== "0") {
      row.querySelector("[data-plant-task-delete]").value = "true";
      row.hidden = true;
      row.querySelectorAll("[required]").forEach((field) => field.required = false);
    } else {
      row?.remove();
    }
  }
});

function initializePlantName() {
  const name = document.querySelector("[data-plant-name]");
  const species = document.querySelector("[data-plant-species]");
  if (!name || !species || name.dataset.nameInitialized) return;
  const selectedName = species.selectedOptions[0]?.dataset.plantNameValue || "";
  let manuallyEdited = name.value !== "" && name.value !== selectedName;
  if (!name.value && selectedName) name.value = selectedName;
  name.addEventListener("input", () => { manuallyEdited = true; });
  species.addEventListener("change", () => {
    if (manuallyEdited) return;
    name.value = species.selectedOptions[0]?.dataset.plantNameValue || "";
  });
  name.dataset.nameInitialized = "true";
}

initializePlantName();

function initializeImageEditors(root = document) {
  root.querySelectorAll("[data-image-editor]").forEach((editor) => {
    if (editor.dataset.imageInitialized) return;
    const value = editor.querySelector("[data-image-value]");
	const imageID = editor.querySelector("[data-image-id]");
    const preview = editor.querySelector("[data-image-preview]");
    const placeholder = preview?.querySelector("span");
    const dialog = editor.querySelector("[data-image-dialog]");
    const image = editor.querySelector("[data-cropper-image]");
    const remove = editor.querySelector("[data-image-remove]");
    const apply = editor.querySelector("[data-image-apply]");
    const error = editor.querySelector("[data-image-error]");
    const cameraDialog = editor.querySelector("[data-camera-dialog]");
    const cameraVideo = editor.querySelector("[data-camera-video]");
    const cameraCapture = editor.querySelector("[data-camera-capture]");
    const cameraSwitch = editor.querySelector("[data-camera-switch]");
    const cameraError = editor.querySelector("[data-camera-error]");
    let cropper;
    let cameraStream;
    let cameraFacingMode = "environment";

    if (value.value) {
      if (preview) preview.style.backgroundImage = `url("${value.value}")`;
      if (placeholder) placeholder.hidden = true;
      if (remove) remove.hidden = false;
    }

    const openCropper = (source) => {
      cropper?.destroy();
      cropper = undefined;
      apply.disabled = true;
      error.textContent = "Bild wird geladen …";
      image.onload = () => {
        cropper = new Cropper(image, {
          aspectRatio: 3 / 2,
          viewMode: 1,
          autoCropArea: 1,
          background: false,
          ready() {
            apply.disabled = false;
            error.textContent = "";
          },
        });
      };
      image.onerror = () => { error.textContent = "Das Bild konnte nicht geladen werden."; };
      image.src = String(source);
      dialog.showModal();
    };

    const choose = (event) => {
      const file = event.target.files?.[0];
      if (!file || !file.type.startsWith("image/")) return;
      const reader = new FileReader();
      reader.onload = () => openCropper(reader.result);
      reader.readAsDataURL(file);
      event.target.value = "";
    };
    editor.querySelector("[data-image-file]")?.addEventListener("change", choose);

    const stopCamera = () => {
      cameraStream?.getTracks().forEach((track) => track.stop());
      cameraStream = undefined;
      cameraVideo.srcObject = null;
      cameraCapture.disabled = true;
    };
    const startCamera = async () => {
      stopCamera();
      cameraStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: cameraFacingMode } }, audio: false });
      cameraVideo.srcObject = cameraStream;
      await cameraVideo.play();
      cameraCapture.disabled = cameraVideo.videoWidth === 0;
      cameraVideo.onloadedmetadata = () => { cameraCapture.disabled = false; };
      const devices = await navigator.mediaDevices.enumerateDevices?.();
      if (cameraSwitch) cameraSwitch.hidden = devices ? devices.filter((device) => device.kind === "videoinput").length < 2 : false;
    };
    editor.querySelector("[data-image-camera]")?.addEventListener("click", async () => {
      cameraError.textContent = "Webcam wird gestartet …";
      cameraCapture.disabled = true;
      cameraDialog.showModal();
      if (!navigator.mediaDevices?.getUserMedia) {
        cameraError.textContent = "Die Webcam ist in diesem Browser oder ohne HTTPS nicht verfügbar.";
        return;
      }
      try {
        await startCamera();
        cameraError.textContent = "";
      } catch (_) {
        cameraError.textContent = "Die Webcam konnte nicht geöffnet werden. Bitte prüfe die Kamerafreigabe des Browsers.";
        stopCamera();
      }
    });
    cameraSwitch?.addEventListener("click", async () => {
      cameraFacingMode = cameraFacingMode === "environment" ? "user" : "environment";
      cameraError.textContent = "Kamera wird gewechselt …";
      cameraCapture.disabled = true;
      try {
        await startCamera();
        cameraError.textContent = "";
      } catch (_) {
        cameraError.textContent = "Die andere Kamera konnte nicht geöffnet werden.";
        stopCamera();
      }
    });
    editor.querySelector("[data-camera-cancel]")?.addEventListener("click", () => {
      stopCamera();
      cameraDialog.close();
    });
    cameraDialog?.addEventListener("close", stopCamera);
    cameraCapture?.addEventListener("click", () => {
      if (!cameraVideo.videoWidth || !cameraVideo.videoHeight) return;
      const canvas = document.createElement("canvas");
      canvas.width = cameraVideo.videoWidth;
      canvas.height = cameraVideo.videoHeight;
      canvas.getContext("2d").drawImage(cameraVideo, 0, 0);
      const source = canvas.toDataURL("image/jpeg", 0.9);
      stopCamera();
      cameraDialog.close();
      if (editor.hasAttribute("data-journal-photo-editor")) editor.dataset.photoId = `photo-${Date.now()}-${Math.random().toString(36).slice(2)}`;
      openCropper(source);
    });
    editor.querySelector("[data-image-rotate-left]")?.addEventListener("click", () => cropper?.rotate(-90));
    editor.querySelector("[data-image-rotate-right]")?.addEventListener("click", () => cropper?.rotate(90));
    editor.querySelector("[data-image-cancel]")?.addEventListener("click", () => { dialog.close(); cropper?.destroy(); cropper = undefined; image.onload = null; });
    apply?.addEventListener("click", () => {
      if (!cropper) return;
      const canvas = cropper.getCroppedCanvas({ width: 960, height: 640, imageSmoothingQuality: "high" });
      if (!canvas) {
        error.textContent = "Das Bild ist noch nicht bereit. Bitte versuche es gleich noch einmal.";
        return;
      }
      const data = canvas.toDataURL("image/jpeg", 0.82);
      value.value = data;
	  if (imageID) imageID.value = "";
      if (editor.hasAttribute("data-journal-photo-editor")) editor.closest("form")?.dispatchEvent(new CustomEvent("journal-photo-ready", { detail: { data, photoId: editor.dataset.photoId } }));
      if (preview) preview.style.backgroundImage = `url("${data}")`;
      if (placeholder) placeholder.hidden = true;
      if (remove) remove.hidden = false;
      dialog.close();
      cropper.destroy();
      cropper = undefined;
    });
    remove?.addEventListener("click", () => {
      value.value = "";
      preview.style.backgroundImage = "";
      placeholder.hidden = false;
      remove.hidden = true;
	  if (imageID) imageID.value = "";
    });
	const libraryDialog = editor.querySelector("[data-image-library-dialog]");
	editor.querySelector("[data-image-library-open]")?.addEventListener("click", () => libraryDialog?.showModal());
	editor.querySelector("[data-image-library-cancel]")?.addEventListener("click", () => libraryDialog?.close());
	editor.querySelectorAll("[data-image-library-select]").forEach((button) => button.addEventListener("click", () => {
	  value.value = "";
	  if (imageID) imageID.value = button.dataset.imageId || "";
	  if (preview) preview.style.backgroundImage = `url("${button.dataset.imageUrl}")`;
	  if (placeholder) placeholder.hidden = true;
	  if (remove) remove.hidden = false;
	  libraryDialog?.close();
	}));
    editor.dataset.imageInitialized = "true";
  });
}

initializeImageEditors();

document.querySelector("[data-species-template]")?.addEventListener("change", (event) => {
  const url = new URL(window.location.href);
  if (event.target.value === "0") url.searchParams.delete("template_id");
  else url.searchParams.set("template_id", event.target.value);
  window.location.assign(url);
});

function initializeTaskTemplateTriggers(root = document) {
  root.querySelectorAll("[data-template-trigger]").forEach((trigger) => {
    if (trigger.dataset.triggerInitialized) return;
    const update = () => {
      const form = trigger.closest("form");
      form?.querySelectorAll("[data-trigger-fields]").forEach((group) => {
        const visible = group.dataset.triggerFields === trigger.value || (group.dataset.triggerFields === "relative" && trigger.value !== "month_of_year");
        group.hidden = !visible;
        group.disabled = !visible;
      });
    };
    trigger.addEventListener("change", update);
    trigger.dataset.triggerInitialized = "true";
    update();
  });
}

initializeTaskTemplateTriggers();

function initializeRoleEditors(root = document) {
  root.querySelectorAll("[data-role-editor]").forEach((editor) => {
    if (editor.dataset.roleEditorInitialized) return;
    const select = editor.querySelector("[data-role-select]");
    const update = () => editor.querySelectorAll("[data-role-pane]").forEach((pane) => {
      pane.hidden = pane.dataset.rolePane !== select.value;
    });
    select?.addEventListener("change", update);
    editor.dataset.roleEditorInitialized = "true";
    update();
  });
}

initializeRoleEditors();

document.addEventListener("change", (event) => {
  const control = event.target.closest("[data-toggle-control]");
  if (!control) return;
  const row = control.closest(".plant-task-row, .plant-template-task-row");
  const value = row?.querySelector("[data-toggle-value]");
  if (value) value.value = control.checked ? "true" : "false";
});

function refreshAssignmentFields(list) {
  list?.querySelectorAll("[data-assignment-row]").forEach((row, index) => {
    const select = row.querySelector("[name='location_id']");
    const quantity = row.querySelector("[name='quantity']");
    const locationLabel = select?.previousElementSibling;
    const quantityLabel = quantity?.previousElementSibling;
    if (select) select.id = index === 0 ? "location_id" : `location_id_${index}`;
    if (quantity) quantity.id = `quantity_${index}`;
    if (locationLabel) locationLabel.htmlFor = select.id;
    if (quantityLabel) quantityLabel.htmlFor = quantity.id;
  });
}

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    document.querySelectorAll(".user-menu[open]").forEach((menu) => {
      menu.removeAttribute("open");
      menu.querySelector("summary")?.focus();
    });
  }

  const card = event.target.closest("[data-card-href]");
  if (card && !event.target.closest("a, button, input, select, textarea, form, summary, details") && (event.key === "Enter" || event.key === " ")) {
    event.preventDefault();
    window.location.assign(card.dataset.cardHref);
  }
});

document.addEventListener("locationCreated", () => {
  document.querySelector("#location-dialog-host dialog")?.remove();
});

document.addEventListener("plantTaskSaved", () => {
  document.querySelector("#plant-task-dialog-host dialog")?.remove();
});

document.addEventListener("htmx:afterSwap", (event) => {
	initializeTaskTemplateTriggers(event.detail.target || document);
	initializeImageEditors(event.detail.target || document);
	initializeCollections(event.detail.target || document);
	initializeTagEditors(event.detail.target || document);
	initializeViewToggles(event.detail.target || document);
	initializeRoleEditors(event.detail.target || document);
  const dialog = event.detail.target?.querySelector(".location-dialog, .task-template-dialog, .plant-task-dialog");
  if (dialog && !dialog.open) {
    dialog.showModal();
  }
});

document.addEventListener("htmx:afterRequest", (event) => {
  if (!event.detail.successful) return;
  const trigger = event.detail.elt;
  const addSection = trigger?.closest(".care-instruction-add");
  if (addSection) addSection.querySelector("form")?.reset();
});