import { Controller } from "@hotwired/stimulus"

// Countdown controller for displaying remaining time until order expiration
export default class extends Controller {
  static values = {
    expiresAt: String,  // ISO timestamp when the order expires
    orderId: Number     // Order ID for identification
  }

  connect() {
    // Parse the expiration timestamp
    this.expirationTime = new Date(this.expiresAtValue).getTime()
    
    // Find the countdown element
    this.countdownElement = this.element.querySelector('.countdown-timer')
    
    if (this.countdownElement && !isNaN(this.expirationTime)) {
      // Start the countdown
      this.updateCountdown()
      this.timer = setInterval(() => this.updateCountdown(), 1000)
    }
  }

  disconnect() {
    // Clean up the interval when the controller disconnects
    if (this.timer) {
      clearInterval(this.timer)
    }
  }

  updateCountdown() {
    const now = new Date().getTime()
    const distance = this.expirationTime - now

    // If the countdown is finished
    if (distance < 0) {
      this.countdownElement.innerHTML = "EXPIRÉ"
      this.countdownElement.classList.add("text-red-600", "font-bold")
      this.countdownElement.classList.remove("text-orange-600")
      
      // Add a more urgent visual indicator
      this.element.classList.add("bg-red-50", "border-red-200")
      this.element.classList.remove("bg-orange-50", "border-orange-200")
      
      // Stop the timer
      if (this.timer) {
        clearInterval(this.timer)
      }
      return
    }

    // Calculate time components
    const seconds = Math.floor(distance / 1000)
    
    // Display the result
    this.countdownElement.innerHTML = `${seconds} secondes`
    
    // Add urgency styling when time is running low
    if (seconds < 60) {
      this.countdownElement.classList.add("text-red-600", "font-bold")
      this.countdownElement.classList.remove("text-orange-600")
      
      // Add background warning for extra urgency
      this.element.classList.add("bg-red-50", "border-red-200")
      this.element.classList.remove("bg-orange-50", "border-orange-200")
    } else if (seconds < 300) { // Less than 5 minutes
      this.countdownElement.classList.add("text-orange-600", "font-bold")
      this.element.classList.add("bg-orange-50", "border-orange-200")
    }
  }
}