// [nexus] Hardware summary display for onboarding wizard step 1
import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge";
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-sm text-muted-foreground">{label}</span>
      <span className="text-base font-medium">{value}</span>
    </div>
  );
}

const TIER_BADGE: Record<string, { label: string; color: string }> = {
  apple_silicon: { label: "Apple Silicon", color: "text-[color:var(--chart-2)] border-[color:var(--chart-2)]/30 bg-[color:var(--chart-2)]/10" },
  gpu: { label: "GPU Available", color: "text-primary border-primary/30 bg-primary/10" },
  cpu_only: { label: "CPU Only", color: "text-[color:var(--chart-4)] border-[color:var(--chart-4)]/30 bg-[color:var(--chart-4)]/10" },
};

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

  if (isError) {
    return (
      <div className="flex flex-col gap-2">
        <p className="text-sm text-muted-foreground">
          Could not detect hardware. You can still continue.
        </p>
        <p className="text-xs text-destructive/70">
          GET /api/system/providers failed -- check server logs
        </p>
      </div>
    );
  }

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

  const { hardwareTier } = hardwareInfo;
  const tierBadge = TIER_BADGE[hardwareTier];

  return (
    <div className="flex flex-col gap-5">
      {/* Detection status + tier badge */}
      <div className="flex items-center gap-3 flex-wrap">
        <Badge variant="outline" className="text-[color:var(--chart-2)] border-[color:var(--chart-2)]/30 bg-[color:var(--chart-2)]/10">
          Detected
        </Badge>
        {tierBadge && (
          <Badge variant="outline" className={tierBadge.color}>
            {tierBadge.label}
          </Badge>
        )}
      </div>

      {/* Hardware stats */}
      <div className="flex flex-col gap-3">
        {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-sm 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-base font-medium">Local AI (recommended for privacy)</span>
          <span className="text-sm text-muted-foreground">
            Runs entirely on your machine. No accounts. No tracking. Works offline.
          </span>
        </div>
      )}
    </div>
  );
}
