admin / SAynapse-Horizon

import { Radar, ShieldCheck, Activity, Clock } from 'lucide-react'
import { formatUtc } from '../utils/format'

// Top application bar: identity + at-a-glance structural indicators.
export default function Header({ activeCount, totalSources, lastPull, loading, displayTick }) {
  const clock = new Date(displayTick)
  const clockStr = formatUtc(clock.toISOString())

  return (
    <header className="flex items-center justify-between gap-4 border-b border-slate-800/80 bg-slate-950/60 px-5 py-3 backdrop-blur">
      <div className="flex items-center gap-3 min-w-0">
        <div className="grid h-10 w-10 place-items-center rounded-lg bg-gradient-to-br from-sky-500/20 to-rose-500/20 ring-1 ring-inset ring-slate-700">
          <Radar className="h-5 w-5 text-sky-400" />
        </div>
        <div className="min-w-0">
          <h1 className="truncate text-lg font-semibold tracking-tight text-slate-100">
            SYNAPSE<span className="text-sky-400">·</span>HORIZON
          </h1>
          <p className="truncate text-[11px] font-medium uppercase tracking-[0.18em] text-slate-500">
            Cyber Threat Intelligence · SOC Fusion Console
          </p>
        </div>
      </div>

      <div className="hidden items-center gap-2 md:flex">
        <Indicator
          icon={Activity}
          tone={loading ? 'amber' : 'emerald'}
          label="Pipeline"
          value={loading ? 'INGESTING' : 'NOMINAL'}
          pulse={loading}
        />
        <Indicator
          icon={ShieldCheck}
          tone="sky"
          label="Channels"
          value={`${activeCount}/${totalSources}`}
        />
        <Indicator
          icon={Clock}
          tone="slate"
          label="System Clock"
          value={clockStr}
          mono
        />
      </div>
    </header>
  )
}

const TONES = {
  emerald: 'text-emerald-400 bg-emerald-500/10 ring-emerald-500/30',
  amber: 'text-amber-400 bg-amber-500/10 ring-amber-500/30',
  sky: 'text-sky-400 bg-sky-500/10 ring-sky-500/30',
  slate: 'text-slate-300 bg-slate-500/10 ring-slate-600/40',
}

function Indicator({ icon: Icon, tone, label, value, mono, pulse }) {
  return (
    <div className={`flex items-center gap-2 rounded-md px-2.5 py-1.5 ring-1 ring-inset ${TONES[tone]}`}>
      <Icon className={`h-3.5 w-3.5 ${pulse ? 'animate-pulse-dot' : ''}`} />
      <div className="leading-tight">
        <div className="text-[9px] font-medium uppercase tracking-widest text-slate-500">{label}</div>
        <div className={`text-xs font-semibold text-slate-200 ${mono ? 'font-mono' : ''}`}>{value}</div>
      </div>
    </div>
  )
}