import { useEffect, useState } from 'react'
import { useServerHealthStore } from '@/stores/server-health'
import ServerStatusDialog from './ServerStatusDialog'

export default function ServerHealthTrigger() {
  const health = useServerHealthStore()
  const [open, setOpen] = useState(false)

  useEffect(() => {
    health.checkHealth(false)
    const timer = setInterval(() => {
      health.checkHealth(true)
    }, 15000)
    return () => clearInterval(timer)
  }, [])

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label="وضعیت ارتباط سرور"
        title={
          health.status === 'connected'
            ? `سرور آنلاین (${health.latencyMs ?? 0}ms) - کلیک جهت جزئیات`
            : health.status === 'checking'
            ? 'در حال بررسی سرور...'
            : 'سرور قطع است - کلیک جهت جزئیات'
        }
        className="relative flex size-9 items-center justify-center rounded-xl border border-border-soft bg-card/60 transition-all hover:bg-card hover:border-primary/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring shadow-sm cursor-pointer"
      >
        <span className="flex size-2.5">
          <span
            className={`inline-flex size-2.5 rounded-full ${
              health.status === 'connected'
                ? 'bg-emerald-500 shadow-[0_0_8px_#10b981]'
                : health.status === 'checking'
                ? 'bg-amber-400'
                : 'bg-rose-500 shadow-[0_0_8px_#f43f5e]'
            }`}
          />
        </span>
      </button>

      <ServerStatusDialog open={open} onOpenChange={setOpen} />
    </>
  )
}