// [nexus] Three-card mode selector for onboarding wizard step 2
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { MessageSquare, Hammer, Layers } from "lucide-react";
import type { NexusMode } from "@/api/hardware";
import type { LucideIcon } from "lucide-react";

interface ModeSelectorProps {
  value: NexusMode;
  onChange: (mode: NexusMode) => void;
}

const MODES: { id: NexusMode; label: string; description: string; icon: LucideIcon; accent: string; recommended?: boolean }[] = [
  {
    id: "personal_ai",
    label: "Personal AI Assistant",
    description: "Always available, persistent memory, private.",
    icon: MessageSquare,
    accent: "text-[color:var(--chart-3)]",
  },
  {
    id: "project_builder",
    label: "Project Builder",
    description: "Brainstorm -> PM -> Engineer -> shipped product.",
    icon: Hammer,
    accent: "text-[color:var(--chart-4)]",
  },
  {
    id: "both",
    label: "Both",
    description: "A conversation becomes a project with one click.",
    icon: Layers,
    accent: "text-primary",
    recommended: true,
  },
];

export function ModeSelector({ value, onChange }: ModeSelectorProps) {
  return (
    <div className="grid gap-3">
      {MODES.map((mode) => {
        const Icon = mode.icon;
        const isSelected = value === mode.id;

        return (
          <button
            key={mode.id}
            type="button"
            onClick={() => onChange(mode.id)}
            className={cn(
              "flex items-start gap-4 rounded-lg border p-5 text-left transition-colors",
              isSelected
                ? "border-l-2 border-l-primary border-t border-r border-b border-border bg-primary/5"
                : "border-border hover:border-muted-foreground/50"
            )}
          >
            <Icon className={cn("h-5 w-5 shrink-0 mt-0.5", mode.accent)} />
            <div className="flex flex-col gap-1 flex-1">
              <div className="flex items-center gap-2">
                <span className="text-base font-medium">{mode.label}</span>
                {mode.recommended && (
                  <Badge variant="outline" className="text-primary border-primary/30 bg-primary/10 text-xs">
                    Recommended
                  </Badge>
                )}
              </div>
              <span className="text-sm text-muted-foreground">{mode.description}</span>
            </div>
          </button>
        );
      })}
    </div>
  );
}
