import { useEffect, useState } from 'react'
import type { WeatherState } from '../../hooks/useWeather'
import { WeatherIcon } from './WeatherIcon'

// 按本地小时给出 早/中/晚/夜 问候（默认英文，改中文只需替换下面的文案）。
function greetingFor(hour: number): string {
  if (hour >= 5 && hour < 12) return 'Good morning'
  if (hour >= 12 && hour < 18) return 'Good afternoon'
  if (hour >= 18 && hour < 23) return 'Good evening'
  return 'Good night'
}

// 天气行：根据后端返回的业务态分别渲染。
function WeatherLine({ wx }: { wx: WeatherState }) {
  let content = null

  if (!wx.loading && wx.data) {
    const d = wx.data
    if (d.ok) {
      content = (
        <>
          <WeatherIcon code={d.icon} size={18} />
          <span>
            {d.city} · {d.text} · {d.temp}°
          </span>
        </>
      )
    } else if (d.reason === 'quota_exceeded') {
      // “表个态”：当日额度用完。
      content = <span className="text-white/55">天气请求次数已用完,明日 0 点恢复</span>
    }
    // not_configured / failed：静默（不打扰页面）
  }

  // 固定最小高度，避免天气加载完成后页面跳动。
  return (
    <div className="mt-3 flex min-h-[1.5rem] items-center justify-center gap-2 font-sans text-sm text-white/70">
      {content}
    </div>
  )
}

export function Greeting({ wx }: { wx: WeatherState }) {
  const [now, setNow] = useState(() => new Date())

  useEffect(() => {
    // 每 30s 刷新，足够让分钟与跨时段问候保持准确。
    const id = setInterval(() => setNow(new Date()), 30_000)
    return () => clearInterval(id)
  }, [])

  const greeting = greetingFor(now.getHours())
  const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
  const date = now.toLocaleDateString([], {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
  })

  return (
    <div className="text-center text-white [text-shadow:0_1px_16px_rgba(0,0,0,0.45)]">
      <p className="font-sans text-xs uppercase tracking-[0.4em] text-white/65">
        {time} · {date}
      </p>

      <h1 className="mt-4 font-display text-5xl font-light italic leading-tight sm:text-6xl">
        {greeting}
        <span className="text-white/45">.</span>
      </h1>

      <WeatherLine wx={wx} />
    </div>
  )
}
