'use client'

import { useEffect, useState } from 'react'

const ORDER_DEADLINE = new Date('2026-06-25T23:59:59')

function getTimeLeft() {
  const diff = ORDER_DEADLINE.getTime() - Date.now()
  if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0, expired: true }
  return {
    days: Math.floor(diff / 86400000),
    hours: Math.floor((diff % 86400000) / 3600000),
    minutes: Math.floor((diff % 3600000) / 60000),
    seconds: Math.floor((diff % 60000) / 1000),
    expired: false,
  }
}

function Digit({ value, label }: { value: number; label: string }) {
  const [prev, setPrev] = useState(value)
  const [flipping, setFlipping] = useState(false)

  useEffect(() => {
    if (value !== prev) {
      setFlipping(true)
      const t = setTimeout(() => {
        setPrev(value)
        setFlipping(false)
      }, 300)
      return () => clearTimeout(t)
    }
  }, [value, prev])

  return (
    <div className="countdown-digit">
      <span
        className="number"
        style={{
          animation: flipping ? 'countdownFlip 0.3s ease-out' : 'none',
          color: label === 'dies' && value <= 3 ? '#E84040' : undefined,
        }}
      >
        {String(value).padStart(2, '0')}
      </span>
      <span className="label">{label}</span>
    </div>
  )
}

export default function CountdownBanner() {
  const [time, setTime] = useState(getTimeLeft)

  useEffect(() => {
    const interval = setInterval(() => setTime(getTimeLeft()), 1000)
    return () => clearInterval(interval)
  }, [])

  return (
    <div className="bg-gradient-to-r from-dark via-dark-card to-dark border-b border-dark-border">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-6 text-center">
        {time.expired ? (
          <div className="text-cherry font-black text-xl uppercase tracking-widest">
            Periode de comandes tancat
          </div>
        ) : (
          <>
            <div className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-500 mb-4">
              Comandes obertes fins el 25 de juny a mitjanit
            </div>
            <div className="flex items-center justify-center gap-3 sm:gap-4">
              <Digit value={time.days} label="dies" />
              <span className="text-3xl font-black text-dark-muted mb-4">:</span>
              <Digit value={time.hours} label="hores" />
              <span className="text-3xl font-black text-dark-muted mb-4">:</span>
              <Digit value={time.minutes} label="min" />
              <span className="text-3xl font-black text-dark-muted mb-4">:</span>
              <Digit value={time.seconds} label="seg" />
            </div>
            <div className="mt-4 flex flex-wrap items-center justify-center gap-4 text-xs text-slate-500">
              <span className="flex items-center gap-1.5">
                <span className="w-1.5 h-1.5 rounded-full bg-teal inline-block" />
                Comandes: 18 – 25 Juny 2026
              </span>
              <span className="flex items-center gap-1.5">
                <span className="w-1.5 h-1.5 rounded-full bg-cherry inline-block" />
                Lliurament: 29 Juny – 3 Juliol 2026
              </span>
            </div>
          </>
        )}
      </div>
    </div>
  )
}
