'use client';

interface ContextBarProps {
  usedTokens: number;
  maxTokens: number;
}

function fmt(n: number): string {
  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
  return `${n}`;
}

export function ContextBar({ usedTokens, maxTokens }: ContextBarProps) {
  const safeMax = Math.max(1, maxTokens);
  const ratio = Math.min(1, usedTokens / safeMax);
  const pct = Math.round(ratio * 100);

  let color = 'var(--success)';
  if (pct >= 95) color = 'var(--danger)';
  else if (pct >= 80) color = 'var(--warning)';
  else if (pct >= 60) color = 'var(--accent-secondary)';

  return (
    <div className="mt-2">
      <div className="mb-1 flex items-center justify-between text-[11px]">
        <span className="text-[var(--text-tertiary)]">Context</span>
        <span className="text-[var(--text-secondary)]">
          {fmt(usedTokens)} / {fmt(maxTokens)} tokens
        </span>
      </div>
      <div className="h-1.5 w-full overflow-hidden rounded bg-white/10">
        <div className="h-full" style={{ width: `${pct}%`, background: color }} />
      </div>
    </div>
  );
}
