// [nexus] Hardware summary display for onboarding wizard step 1
import { Skeleton } from "@/components/ui/skeleton";
import type { HardwareInfo } from "@/api/hardware";

interface HardwareSummaryStepProps {
  hardwareInfo: HardwareInfo | undefined;
  isLoading: boolean;
  isError: boolean;
}

interface StatRowProps {
  label: string;
  value: string | number | null | undefined;
}

function StatRow({ label, value }: StatRowProps) {
  return (
    <div className="flex items-center justify-between gap-2">
      <span className="text-xs text-muted-foreground">{label}</span>
      <span className="text-sm font-medium">{value}</span>
    </div>
  );
}

export function HardwareSummaryStep({ hardwareInfo, isLoading, isError }: HardwareSummaryStepProps) {
  if (isLoading) {
    return (
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-full rounded" />
        <Skeleton className="h-4 w-full rounded" />
        <Skeleton className="h-4 w-full rounded" />
      </div>
    );
  }

  if (isError) {
    return (
      <p className="text-sm text-muted-foreground">
        Could not detect hardware. You can still continue.
      </p>
    );
  }

  if (!hardwareInfo) {
    return (
      <p className="text-sm text-muted-foreground">
        Could not detect hardware. You can still continue.
      </p>
    );
  }

  const { hardwareTier } = hardwareInfo;

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-2">
        {hardwareTier === "apple_silicon" && (
          <>
            <StatRow label="Unified memory" value={`${hardwareInfo.totalGb} GB`} />
            <StatRow label="Available" value={`${hardwareInfo.usableGb} GB`} />
            <StatRow label="CPU" value={hardwareInfo.cpuModel} />
          </>
        )}

        {hardwareTier === "gpu" && (
          <>
            <StatRow label="GPU" value={hardwareInfo.gpuName} />
            <StatRow label="GPU VRAM" value={`${hardwareInfo.gpuVramGb} GB`} />
            <StatRow label="System RAM" value={`${hardwareInfo.totalGb} GB`} />
          </>
        )}

        {hardwareTier === "cpu_only" && (
          <>
            <StatRow label="System RAM" value={`${hardwareInfo.totalGb} GB`} />
            <StatRow label="CPU" value={hardwareInfo.cpuModel} />
            <p className="text-xs text-muted-foreground">
              Slower than GPU-accelerated models -- cloud AI recommended
            </p>
          </>
        )}
      </div>

      {hardwareTier !== "cpu_only" && (
        <div className="flex flex-col gap-1 pt-2">
          <span className="text-sm font-medium">Local AI (recommended for privacy)</span>
          <span className="text-xs text-muted-foreground">
            Runs entirely on your machine.{"\n"}
            No accounts. No tracking. Works offline.
          </span>
        </div>
      )}
    </div>
  );
}
