import { useEffect, useState } from 'react'
import useConnectionStore from '../store/connectionStore'

export default function EmergencyBar() {
  const { status, lostAt } = useConnectionStore()
  const [elapsed, setElapsed] = useState('')

  useEffect(() => {
    if (status !== 'emergency' || !lostAt) return
    function tick() {
      const secs = Math.floor((Date.now() - lostAt.getTime()) / 1000)
      const m = Math.floor(secs / 60)
      const s = secs % 60
      setElapsed(`${m}:${String(s).padStart(2, '0')}`)
    }
    tick()
    const id = setInterval(tick, 1000)
    return () => clearInterval(id)
  }, [status, lostAt])

  if (status !== 'emergency') return null

  return (
    <div style={{
      background: '#dc2626',
      color: '#fef08a',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      gap: 8,
      padding: '8px 16px',
      fontSize: 13, fontWeight: 700,
      letterSpacing: 0.5,
      userSelect: 'none',
    }}>
      <span>EMERGENCY MODE</span>
      {elapsed && (
        <span style={{ opacity: 0.85, fontWeight: 400 }}>({elapsed})</span>
      )}
    </div>
  )
}
