import { useState, useEffect } from 'react'
import { CheckCircle, Clock, Zap } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { sidebarApi } from '@/api'

interface StatItem {
  icon: LucideIcon
  value: string | number | null
  label: string
  color: string
}

export function GreetingStatStrip() {
  const [resolved, setResolved] = useState<number | null>(null)
  const [active, setActive] = useState<number | null>(null)
  const [avgMttr, setAvgMttr] = useState<string | null>(null)

  useEffect(() => {
    sidebarApi.getStats()
      .then((stats) => {
        setResolved(stats.resolved_today)
        setActive(stats.active_count)
        const avg = stats.resolved_today > 0
          ? Math.round(stats.total_session_minutes_today / stats.resolved_today)
          : null
        setAvgMttr(avg != null ? `${avg}m` : null)
      })
      .catch(() => {})
  }, [])

  const stats: StatItem[] = [
    { icon: CheckCircle, value: resolved, label: 'resolved today', color: '#34d399' },
    { icon: Zap, value: active, label: 'active now', color: '#60a5fa' },
    { icon: Clock, value: avgMttr, label: 'avg MTTR', color: '#848b9b' },
  ]

  return (
    <div className="hidden sm:flex items-center gap-5 pb-1">
      {stats.map(({ icon: Icon, value, label, color }) => (
        <div key={label} className="flex items-center gap-2">
          <Icon size={13} style={{ color }} className="shrink-0" />
          <div className="text-right">
            <p className="font-heading text-lg font-extrabold leading-none text-[#f0f2f5]">
              {value ?? '\u2014'}
            </p>
            <p className="font-sans text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground mt-0.5">
              {label}
            </p>
          </div>
        </div>
      ))}
    </div>
  )
}