// [nexus] Summary screen for onboarding wizard step 6 — read-only review before starting
import { cn } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import type { HardwareInfo, HardwareTier, NexusMode } from "@/api/hardware";
import { Button } from "@/components/ui/button";

interface OnboardingSummaryStepProps {
  hardwareInfo: HardwareInfo | undefined;
  selectedMode: NexusMode;
  providerLabel: string;
  rootDir: string;
  onRootDirChange: (value: string) => void;
  loading: boolean;
  error: string | null;
  onStartChat: () => void;
  onBack: () => void;
  voiceEnabled?: boolean;
  defaultAdapter?: string;
}

interface SummaryRowProps {
  label: string;
  value: string;
  mono?: boolean;
  warn?: boolean;
}

function SummaryRow({ label, value, mono, warn }: SummaryRowProps) {
  return (
    <div className="flex items-start justify-between gap-4">
      <span className="text-sm text-muted-foreground shrink-0">{label}</span>
      <span
        className={cn(
          "text-base font-medium text-right",
          mono && "font-mono text-sm",
          warn && "text-[color:var(--chart-4)]"
        )}
      >
        {value}
      </span>
    </div>
  );
}

const HARDWARE_TIER_LABELS: Record<HardwareTier, string> = {
  gpu: "GPU",
  apple_silicon: "Apple Silicon",
  cpu_only: "CPU Only",
};

const MODE_LABELS: Record<NexusMode, string> = {
  personal_ai: "Personal AI Assistant",
  project_builder: "Project Builder",
  both: "Both (recommended)",
};

export function OnboardingSummaryStep({
  hardwareInfo,
  selectedMode,
  providerLabel,
  rootDir,
  onRootDirChange,
  loading,
  error,
  onStartChat,
  onBack,
  voiceEnabled,
  defaultAdapter,
}: OnboardingSummaryStepProps) {
  const hardwareLabel = hardwareInfo
    ? (HARDWARE_TIER_LABELS[hardwareInfo.hardwareTier] ?? "Unknown")
    : "Unknown";

  const modeLabel = MODE_LABELS[selectedMode];
  const isProviderNone = providerLabel === "None selected";
  const isVoiceNone = voiceEnabled === false || voiceEnabled === undefined;

  return (
    <div className="flex flex-col gap-6">
      {/* Summary card */}
      <div className="rounded-lg border border-border p-5 flex flex-col gap-4">
        <SummaryRow label="Hardware" value={hardwareLabel} />
        <SummaryRow label="Mode" value={modeLabel} />
        <SummaryRow label="Provider" value={providerLabel} warn={isProviderNone} />
        <SummaryRow label="Voice" value={voiceEnabled ? "Enabled" : "None selected"} warn={isVoiceNone} />
      </div>

      {/* Root directory — editable input for claude_local, read-only row for others */}
      {defaultAdapter === "claude_local" ? (
        <div className="flex flex-col gap-2">
          <label htmlFor="summary-root-dir" className="text-sm text-muted-foreground">
            Root directory (required for Claude Code)
          </label>
          <Input
            id="summary-root-dir"
            type="text"
            placeholder="~/projects/my-project"
            className="font-mono text-sm"
            autoComplete="off"
            value={rootDir}
            onChange={(e) => onRootDirChange(e.target.value)}
          />
        </div>
      ) : rootDir ? (
        <div className="rounded-lg border border-border p-5">
          <SummaryRow label="Root directory" value={rootDir} mono />
        </div>
      ) : null}

      {/* Error message */}
      {error && (
        <p className="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
          {error}
        </p>
      )}

      {/* Actions */}
      <div className="flex flex-col gap-2">
        <Button
          type="button"
          onClick={onStartChat}
          disabled={loading}
          className="w-full h-12 text-base font-medium"
        >
          {loading ? (
            <span className="flex items-center gap-2">
              <svg
                className="h-4 w-4 animate-spin"
                viewBox="0 0 24 24"
                fill="none"
                aria-hidden="true"
              >
                <circle
                  className="opacity-25"
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  strokeWidth="4"
                />
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                />
              </svg>
              Setting up...
            </span>
          ) : (
            "Start chatting"
          )}
        </Button>
        <Button
          type="button"
          variant="ghost"
          onClick={onBack}
          disabled={loading}
          className="w-full"
        >
          Back
        </Button>
      </div>
    </div>
  );
}
