import { Controller } from "@hotwired/stimulus"

// Calendrier des humeurs : choisir un jour affiche son détail (illustration, mode, journal).
// Au clavier, les flèches se déplacent d'un jour (haut, bas) ou d'une semaine (gauche, droite).
export default class extends Controller {
  static targets = [ "carte", "image", "date", "mode", "statut", "journal", "lien" ]

  connect() {
    const selectionne = this.element.querySelector(".jour[aria-pressed='true']")
    if (selectionne && new URLSearchParams(window.location.search).has("day")) {
      selectionne.scrollIntoView({ block: "center" })
    }
  }

  choisir(event) {
    this.selectionner(event.currentTarget)
  }

  naviguer(event) {
    const decalages = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7 }
    const decalage = decalages[event.key]
    if (!decalage) return

    const date = new Date(`${event.currentTarget.dataset.day}T12:00:00`)
    date.setDate(date.getDate() + decalage)
    const cible = this.element.querySelector(`button.jour[data-day="${date.toISOString().slice(0, 10)}"]`)
    if (!cible) return

    event.preventDefault()
    this.selectionner(cible)
    cible.focus()
  }

  selectionner(jour) {
    const precedent = this.element.querySelector(".jour[aria-pressed='true']")
    if (precedent) {
      precedent.setAttribute("aria-pressed", "false")
      precedent.tabIndex = -1
    }
    jour.setAttribute("aria-pressed", "true")
    jour.tabIndex = 0

    const { day, date, mode, statut, couleur, image, info } = jour.dataset
    this.carteTarget.style.setProperty("--humeur", couleur || "")
    this.imageTarget.src = image
    this.dateTarget.textContent = date
    this.modeTarget.textContent = mode || "Pas de tasse posée"
    this.statutTarget.textContent = mode ? (statut || "") : ""
    this.journalTarget.textContent = info || this.journalTarget.dataset.vide
    this.journalTarget.classList.toggle("detail-journal-vide", !info)
    this.lienTarget.href = `/day_logs/edit?day=${day}`
    this.lienTarget.textContent = info ? "Modifier le journal" : "Écrire dans le journal"

    history.replaceState({}, "", `?day=${day}`)
  }
}