'use client'

import { useEffect, useState } from 'react'
import { cluster, nodes } from '@/lib/clusterMock'
import { SlotMeter } from './SlotMeter'

/** Fake liveness so the layout can be judged in motion. Replaced by SSE in Phase 2. */
function useDrift() {
  const [age, setAge] = useState<number>(cluster.snapshotAge)
  const [slots, setSlots] = useState(3)

  useEffect(() => {
    const tick = setInterval(() => setAge((a) => (a > 6 ? 0.4 : +(a + 0.9).toFixed(1))), 900)
    const churn = setInterval(() => setSlots(() => 1 + Math.floor(Math.random() * 5)), 3400)
    return () => {
      clearInterval(tick)
      clearInterval(churn)
    }
  }, [])

  return { age, slots }
}

export function Ribbon() {
  const { age, slots } = useDrift()

  return (
    <div className="flex flex-wrap items-center gap-x-6 gap-y-2 border-b border-wire bg-void px-4 py-2.5 font-data text-[11px]">
      <span className="flex items-center gap-2 text-chalk">
        <span className="h-1.5 w-1.5 rounded-full bg-flux" />
        {cluster.distro}
      </span>
      <span className="text-dim">
        k8s <span className="text-chalk">{cluster.kubernetes}</span>
      </span>
      <span className="text-dim">
        nodes <span className="text-chalk">{nodes.length}</span>
      </span>
      <span className="text-dim">
        snapshot <span className="text-chalk">{age.toFixed(1)}s</span>
      </span>

      <span className="ml-auto flex items-center gap-3">
        <span className="uppercase tracking-[0.16em] text-dim">seq</span>
        <SlotMeter used={slots} />
        <span className="tabular-nums text-chalk">{slots}/8</span>
      </span>

      <span className="border border-lamp/40 px-1.5 py-0.5 uppercase tracking-[0.16em] text-lamp">
        placeholder data
      </span>
    </div>
  )
}