'use client'

import { useEffect, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Sparkles } from 'lucide-react'

interface Countdown {
  id: string
  label: string
  date: string
  emoji?: string
  color?: string
  note?: string
}

interface Computed {
  id: string
  label: string
  emoji?: string
  days: number
  accent: string
  dateStr: string
}

const ROTATE_MS = 8_000

function resolveColor(c: Countdown): string {
  if (!c.color) return 'var(--data-violet)'
  if (c.color.startsWith('#')) return c.color
  // токен вида "data-rose" → "var(--data-rose)"
  return `var(--${c.color})`
}

function formatDate(iso: string): string {
  try {
    return new Date(iso + 'T00:00:00').toLocaleDateString('ru-RU', {
      day: 'numeric', month: 'long',
    })
  } catch {
    return iso
  }
}

function daysFromNow(iso: string): number {
  const target = new Date(iso + 'T00:00:00').getTime()
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return Math.ceil((target - today.getTime()) / 86_400_000)
}

function pluralizeDays(n: number): string {
  const a = Math.abs(n)
  if (a % 10 === 1 && a % 100 !== 11) return 'день'
  if ([2, 3, 4].includes(a % 10) && ![12, 13, 14].includes(a % 100)) return 'дня'
  return 'дней'
}

export default function CountdownCard() {
  const [items, setItems] = useState<Computed[]>([])
  const [idx, setIdx] = useState(0)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let cancelled = false
    fetch('/api/countdowns')
      .then(r => r.json())
      .then(d => {
        if (cancelled) return
        const list: Countdown[] = d.countdowns || []
        const computed = list
          .map(c => ({
            id: c.id,
            label: c.label,
            emoji: c.emoji,
            days: daysFromNow(c.date),
            accent: resolveColor(c),
            dateStr: formatDate(c.date),
          }))
          .filter(c => c.days >= 0) // прошедшие скрываем
          .sort((a, b) => a.days - b.days)
        setItems(computed)
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false) })
    return () => { cancelled = true }
  }, [])

  useEffect(() => {
    if (items.length <= 1) return
    const t = setInterval(() => setIdx(i => (i + 1) % items.length), ROTATE_MS)
    return () => clearInterval(t)
  }, [items.length])

  if (loading) {
    return (
      <div className="card" style={{
        padding: '16px 18px', minHeight: 128,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--text-tertiary)', fontSize: 12,
      }}>
        …
      </div>
    )
  }

  if (items.length === 0) {
    return (
      <div className="card" style={{
        padding: '18px 20px', minHeight: 128,
        display: 'flex', flexDirection: 'column', gap: 10,
        color: 'var(--text-tertiary)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Sparkles size={14} />
          <span className="eyebrow">Отсчёт</span>
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.5 }}>
          Добавь в настройках — отпуск, др, дедлайн.
        </div>
      </div>
    )
  }

  const current = items[Math.min(idx, items.length - 1)]
  const imminent = current.days <= 3
  const soon = current.days <= 7

  return (
    <div
      className="card grain"
      style={{
        padding: '18px 20px',
        minHeight: 128,
        display: 'flex', flexDirection: 'column', gap: 10,
        position: 'relative', overflow: 'hidden',
        background: `linear-gradient(135deg, color-mix(in srgb, ${current.accent} 12%, var(--surface-1)), var(--surface-1))`,
        border: `1px solid color-mix(in srgb, ${current.accent} 22%, var(--border-subtle))`,
        transition: 'background 0.6s ease, border-color 0.6s ease',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Sparkles size={14} color={current.accent} />
        <span className="eyebrow" style={{ color: current.accent }}>Отсчёт</span>
        {items.length > 1 && (
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
            {items.map((_, i) => (
              <div key={i} style={{
                width: i === idx ? 14 : 5, height: 5, borderRadius: 3,
                background: i === idx ? current.accent : 'var(--surface-3)',
                transition: 'all 0.4s ease',
              }} />
            ))}
          </div>
        )}
      </div>

      <AnimatePresence mode="wait">
        <motion.div
          key={current.id}
          initial={{ opacity: 0, y: 4 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -4 }}
          transition={{ duration: 0.4 }}
          style={{ display: 'flex', flexDirection: 'column', gap: 4 }}
        >
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <div className="num-display" style={{
              fontSize: current.days === 0 ? 36 : 48,
              color: imminent ? current.accent : 'var(--text-primary)',
              letterSpacing: '-0.04em',
            }}>
              {current.days === 0 ? 'сегодня' : current.days}
            </div>
            {current.days > 0 && (
              <div style={{
                fontSize: 15, color: 'var(--text-secondary)', fontWeight: 600,
              }}>
                {pluralizeDays(current.days)}
              </div>
            )}
          </div>
          <div style={{
            fontSize: 14, fontWeight: 700, color: 'var(--text-primary)',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            {current.emoji && <span style={{ fontSize: 16 }}>{current.emoji}</span>}
            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {current.label}
            </span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>
            {current.dateStr}
          </div>
        </motion.div>
      </AnimatePresence>
    </div>
  )
}