import { Panel } from "@void-nav/ui";
import type { CargoItem, Ship } from "../module_bindings/types";

export function CargoPanel({ cargo, ship }: { cargo: CargoItem[]; ship?: Ship }) {
  const used = cargo.reduce((total, item) => total + item.quantity, 0n);
  const capacity = ship?.cargoCapacity ?? 0n;
  const fillPct = capacity > 0n ? Math.min(100, Math.round((Number(used) / Number(capacity)) * 100)) : 0;
  const barColor = fillPct >= 90 ? "#ef4444" : fillPct >= 60 ? "#f0a030" : "#22d3ee";

  return (
    <Panel className="p-4">
      <div className="flex items-baseline justify-between gap-3">
        <p className="m-0 font-mono text-xs uppercase tracking-[0.1em] text-muted">Cargo</p>
        <span className="font-mono text-xs text-fg-dim">
          {used.toString()} / {capacity.toString()} m&sup3;
        </span>
      </div>
      <div className="mt-2 h-2 overflow-hidden rounded-full bg-surface-raised">
        <div
          className="h-full rounded-full transition-[width] duration-300"
          style={{ width: `${fillPct}%`, backgroundColor: barColor }}
        />
      </div>
      <div className="mt-3 grid gap-2">
        {cargo.length > 0 ? (
          cargo.map((item) => (
            <div key={String(item.cargoItemId)} className="rounded-md border border-border bg-bg-subtle px-3 py-2">
              <div className="flex items-center justify-between gap-3 text-sm">
                <span className="font-semibold text-fg-bright">{item.itemName}</span>
                <span className="font-mono text-xs text-cyan">{item.quantity.toString()}</span>
              </div>
              <div className="mt-1 font-mono text-xs uppercase tracking-[0.08em] text-muted">
                {item.category} / {item.unitPrice.toString()} ISK per unit
              </div>
            </div>
          ))
        ) : (
          <p className="m-0 rounded-md border border-border bg-bg-subtle p-3 text-sm text-fg-dim">Cargo hold empty.</p>
        )}
      </div>
    </Panel>
  );
}