'use client';

import { formatBytes } from '../../../lib/format';

interface RunningModelSegment {
  name: string;
  size_vram: number;
}

interface RamBudgetBarProps {
  totalRam: number;
  appMemory: number;
  runningModels: RunningModelSegment[];
  freeRam: number;
}

const MODEL_COLORS = [
  'var(--success)',
  'var(--accent-secondary)',
  'var(--accent-primary)',
  'var(--purple)',
  'var(--warning)',
];

export function RamBudgetBar({ totalRam, appMemory, runningModels, freeRam }: RamBudgetBarProps) {
  if (totalRam <= 0) return null;
  const modelTotal = runningModels.reduce((sum, m) => sum + m.size_vram, 0);
  const osApps = Math.max(0, totalRam - modelTotal - freeRam);
  const pct = (bytes: number) => Math.max(0.5, (bytes / totalRam) * 100);

  return (
    <div className="mb-4">
      <div className="flex items-center justify-between mb-1.5">
        <span className="text-[11px] font-medium" style={{ color: 'var(--text-secondary)' }}>
          Memory Budget
        </span>
        <span className="text-[11px] font-mono" style={{ color: 'var(--text-tertiary)' }}>
          {formatBytes(totalRam)} unified
        </span>
      </div>
      <div
        className="flex w-full h-5 rounded-md overflow-hidden"
        style={{ background: 'var(--surface-muted)' }}
      >
        {/* OS + Apps */}
        <div
          className="h-full flex items-center justify-center text-[9px] font-medium shrink-0 overflow-hidden"
          style={{
            width: `${pct(osApps)}%`,
            background: 'var(--text-tertiary)',
            color: 'var(--bg-canvas)',
            opacity: 0.5,
          }}
          title={`OS + Apps: ${formatBytes(osApps)}`}
        >
          {pct(osApps) > 8 ? 'OS' : ''}
        </div>
        {/* Loaded models */}
        {runningModels.map((m, i) => (
          <div
            key={m.name}
            className="h-full flex items-center justify-center text-[9px] font-mono font-medium shrink-0 overflow-hidden"
            style={{
              width: `${pct(m.size_vram)}%`,
              background: MODEL_COLORS[i % MODEL_COLORS.length],
              color: 'var(--bg-canvas)',
              opacity: 0.85,
            }}
            title={`${m.name}: ${formatBytes(m.size_vram)}`}
          >
            {pct(m.size_vram) > 10 ? m.name.split(':')[0] : ''}
          </div>
        ))}
        {/* Free */}
        <div
          className="h-full flex-1 flex items-center justify-center text-[9px] font-medium overflow-hidden"
          style={{
            color: 'var(--text-tertiary)',
            opacity: 0.6,
          }}
          title={`Free: ${formatBytes(freeRam)}`}
        >
          {pct(freeRam) > 8 ? `${formatBytes(freeRam)} free` : ''}
        </div>
      </div>
      {runningModels.length > 0 && (
        <div className="flex items-center gap-3 mt-1 flex-wrap">
          {runningModels.map((m, i) => (
            <span
              key={m.name}
              className="flex items-center gap-1 text-[10px]"
              style={{ color: 'var(--text-tertiary)' }}
            >
              <span
                className="w-2 h-2 rounded-sm inline-block"
                style={{ background: MODEL_COLORS[i % MODEL_COLORS.length], opacity: 0.85 }}
              />
              {m.name.split(':')[0]}: {formatBytes(m.size_vram)}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}
