import type { ReactNode } from 'react';
import { ConfBar, Delta, LevelBadge } from '@/components/ui/primitives';
import { fmt } from '@/lib/format';
import { pressureColor } from '@/lib/pressure';
import { Time } from '@/lib/time';
import type { LevelId, Trend } from '@/lib/types';

/** Header for a scope page (region, country, ASN, service): kicker, title, big pressure, level, Δ1h, meta. */
export function ScopeHeader({ kicker, title, subtitle, pressure, level, delta1h, trend, confidence, ts, meta, right }: { kicker: ReactNode; title: string; subtitle?: ReactNode; pressure: number | null; level?: LevelId; delta1h?: number | null; trend?: Trend; confidence?: number | null; ts?: string | null; meta?: ReactNode; right?: ReactNode }) {
  return (
    <header className="grid gap-6 pt-6 pb-5 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
      <div className="min-w-0">
        <p className="label">{kicker}</p>
        <h1 className="mt-1 text-[26px] font-medium leading-tight tracking-tight text-ink sm:text-[32px]">{title}</h1>
        {subtitle && <p className="mt-1 text-[13px] text-ink-2">{subtitle}</p>}
        {meta && <div className="num mt-3 flex flex-wrap gap-x-5 gap-y-1 text-[12px] text-ink-2">{meta}</div>}
      </div>
      <div className="flex flex-wrap items-end gap-x-6 gap-y-2 md:justify-end">
        <div>
          <div className="label">pressure</div>
          <div className="num text-[64px] leading-none tracking-[-0.03em]" style={{ color: pressure == null ? 'var(--ink-3)' : pressureColor(pressure) }}>
            {fmt(pressure)}
          </div>
        </div>
        <div className="flex flex-col gap-1 pb-1">
          {level && <LevelBadge level={level} size="md" />}
          {delta1h !== undefined && (
            <span className="text-[15px]">
              <Delta value={delta1h} trend={trend} suffix="/ 1h" />
            </span>
          )}
          {confidence != null && <ConfBar value={confidence} />}
          {ts && (
            <span className="num text-[10.5px] text-ink-3">
              engine <Time ts={ts} style="time" />
            </span>
          )}
        </div>
        {right}
      </div>
    </header>
  );
}