theme_controller.js

import { Controller } from "@hotwired/stimulus"

// Theme controller for dark mode with light/dark/system options
// Persists user preference in localStorage and respects system preferences
export default class extends Controller {
  static targets = ["lightIcon", "darkIcon", "systemIcon"]
  static values = { theme: { type: String, default: "system" } }

  connect() {
    // Load saved theme or default to system
    this.themeValue = localStorage.getItem("theme") || "system"
    this.applyTheme()
    
    // Listen for system preference changes
    this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
    this.handleSystemChange = this.handleSystemChange.bind(this)
    this.mediaQuery.addEventListener("change", this.handleSystemChange)
  }

  disconnect() {
    this.mediaQuery.removeEventListener("change", this.handleSystemChange)
  }

  handleSystemChange(event) {
    if (this.themeValue === "system") {
      this.applyTheme()
    }
  }

  setLight() {
    this.themeValue = "light"
    this.saveAndApply()
  }

  setDark() {
    this.themeValue = "dark"
    this.saveAndApply()
  }

  setSystem() {
    this.themeValue = "system"
    this.saveAndApply()
  }

  toggle() {
    const themes = ["light", "dark", "system"]
    const currentIndex = themes.indexOf(this.themeValue)
    this.themeValue = themes[(currentIndex + 1) % themes.length]
    this.saveAndApply()
  }

  saveAndApply() {
    localStorage.setItem("theme", this.themeValue)
    this.applyTheme()
  }

  applyTheme() {
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const isDark = this.themeValue === "dark" || (this.themeValue === "system" && prefersDark)
    
    document.documentElement.classList.toggle("dark", isDark)
    this.updateIcons()
  }

  updateIcons() {
    if (this.hasLightIconTarget) {
      this.lightIconTarget.classList.toggle("hidden", this.themeValue !== "light")
    }
    if (this.hasDarkIconTarget) {
      this.darkIconTarget.classList.toggle("hidden", this.themeValue !== "dark")
    }
    if (this.hasSystemIconTarget) {
      this.systemIconTarget.classList.toggle("hidden", this.themeValue !== "system")
    }
  }
}