import { fmtBytes } from '../lib/api';

interface Props {
  label: string;
  used: number;
  total: number;
  // Optional split: a portion of `used` that's "pinned" (won't be
  // evicted). Rendered green; the rest of used is amber.
  pinned?: number | null;
}

/// Big horizontal storage bar. Read-only. Renders green (pinned,
/// safe) + amber (used, evictable) + slate (free). Health color
/// on the label based on fill %.
export function StorageBar({ label, used, total, pinned }: Props) {
  const safeTotal = Math.max(total, 1);
  const pct = Math.min(100, Math.round((used / safeTotal) * 100));
  const pinnedPct = pinned
    ? Math.min(100, Math.round((pinned / safeTotal) * 100))
    : 0;
  const evictablePct = Math.max(0, pct - pinnedPct);
  const bar = pct < 60 ? 'ok' : pct < 85 ? 'warn' : 'err';
  const barText = {
    ok: 'text-emerald-300',
    warn: 'text-amber-300',
    err: 'text-red-300',
  }[bar];

  return (
    <div>
      <div className="flex items-baseline justify-between text-xs mb-1">
        <span className="text-slate-500 uppercase tracking-wider">{label}</span>
        <span className={`font-mono ${barText}`}>
          {fmtBytes(used)} / {fmtBytes(total)} · {pct}%
        </span>
      </div>
      <div className="h-2.5 w-full rounded-full bg-slate-800 overflow-hidden flex">
        {pinnedPct > 0 && (
          <div
            className="bg-emerald-500 h-full"
            style={{ width: `${pinnedPct}%` }}
            title={`Pinned: ${fmtBytes(pinned!)}`}
          />
        )}
        {evictablePct > 0 && (
          <div
            className={`h-full ${
              bar === 'err' ? 'bg-red-500' : bar === 'warn' ? 'bg-amber-500' : 'bg-emerald-600'
            }`}
            style={{ width: `${evictablePct}%` }}
            title={`Used: ${fmtBytes(used - (pinned ?? 0))}`}
          />
        )}
      </div>
    </div>
  );
}