import StatusBadge from './StatusBadge';

/**
 * @param {{ vms: Array<{ vmid: number; name: string; type: string; status: string; cpu: number; memory: { total: number; used: number }; disk: { total: number; used: number }; node: string }> }} props
 * @returns {import('react').ReactNode}
 */
export default function VMList({ vms }) {
  if (!vms?.length) {
    return <p className="text-text-secondary text-sm">No VMs found.</p>;
  }

  const running = vms.filter((vm) => vm.status === 'running');
  const stopped = vms.filter((vm) => vm.status !== 'running');

  return (
    <div className="space-y-6">
      {running.length > 0 && (
        <div>
          <h4 className="mb-2 text-xs font-medium uppercase tracking-wider text-status-green">Running ({running.length})</h4>
          <div className="overflow-x-auto rounded-xl border border-border-card bg-bg-card">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border-card">
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">VMID</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Name</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Node</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">CPU</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Memory</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Status</th>
                </tr>
              </thead>
              <tbody>
                {running.map((vm) => (
                  <tr key={vm.vmid} className="border-b border-border-card last:border-0">
                    <td className="px-4 py-2 text-text-secondary">{vm.vmid}</td>
                    <td className="px-4 py-2 font-medium text-text-primary">{vm.name}</td>
                    <td className="px-4 py-2 text-text-secondary">{vm.node}</td>
                    <td className="px-4 py-2 text-text-secondary">{(vm.cpu * 100).toFixed(1)}%</td>
                    <td className="px-4 py-2 text-text-secondary">{formatBytes(vm.memory?.used || 0)} / {formatBytes(vm.memory?.total || 0)}</td>
                    <td className="px-4 py-2"><StatusBadge status={vm.status} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {stopped.length > 0 && (
        <div>
          <h4 className="mb-2 text-xs font-medium uppercase tracking-wider text-status-red">Stopped ({stopped.length})</h4>
          <div className="overflow-x-auto rounded-xl border border-border-card bg-bg-card">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border-card">
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">VMID</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Name</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Node</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Disk</th>
                  <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Status</th>
                </tr>
              </thead>
              <tbody>
                {stopped.map((vm) => (
                  <tr key={vm.vmid} className="border-b border-border-card last:border-0">
                    <td className="px-4 py-2 text-text-secondary">{vm.vmid}</td>
                    <td className="px-4 py-2 font-medium text-text-primary">{vm.name}</td>
                    <td className="px-4 py-2 text-text-secondary">{vm.node}</td>
                    <td className="px-4 py-2 text-text-secondary">{formatBytes(vm.disk?.used || 0)}</td>
                    <td className="px-4 py-2"><StatusBadge status={vm.status} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

/** @param {number} bytes @returns {string} */
function formatBytes(bytes) {
  if (!bytes) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  let i = 0;
  let v = bytes;
  while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
  return `${v.toFixed(1)} ${units[i]}`;
}