'use client';

/**
 * Step 2: Complexity Assessment
 *
 * Allows users to select the project complexity level.
 * Script complexity triggers simplified flow (skips steps 3-4).
 */

import { Check } from 'lucide-react';

import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import { SelectableCard } from '../SelectableCard';
import { complexityOptions } from '../constants';
import type { WizardState, ProjectComplexity } from '../types';

interface ComplexityStepProps {
  state: WizardState;
  updateState: (updates: Partial<WizardState>) => void;
}

export function ComplexityStep({ state, updateState }: ComplexityStepProps) {
  const handleSelect = (complexity: ProjectComplexity) => {
    updateState({ complexity });
  };

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">Project Complexity</h2>
        <p className="mt-1 text-muted-foreground">
          How complex is your project? This helps us assign the right resources.
        </p>
        {state.complexity === 'script' && (
          <p className="mt-2 text-sm text-primary">
            Scripts use a simplified flow - you&apos;ll skip to agent chat directly.
          </p>
        )}
      </div>

      <div className="grid gap-4 md:grid-cols-2" role="radiogroup" aria-label="Project complexity options">
        {complexityOptions.map((option) => {
          const Icon = option.icon;
          const isSelected = state.complexity === option.id;

          return (
            <SelectableCard
              key={option.id}
              selected={isSelected}
              onClick={() => handleSelect(option.id)}
              aria-label={`${option.label}: ${option.description}`}
            >
              <div className="space-y-3">
                <div className="flex items-start justify-between">
                  <div
                    className={cn(
                      'flex h-10 w-10 items-center justify-center rounded-lg',
                      isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'
                    )}
                  >
                    <Icon className="h-5 w-5" aria-hidden="true" />
                  </div>
                  {isSelected && (
                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
                      <Check className="h-4 w-4" aria-hidden="true" />
                    </div>
                  )}
                </div>
                <div>
                  <h3 className="font-semibold">{option.label}</h3>
                  <p className="mt-1 text-sm text-muted-foreground">{option.description}</p>
                </div>
                <Separator />
                <div className="space-y-1 text-sm">
                  <p className="text-muted-foreground">
                    <span className="font-medium text-foreground">Scope:</span> {option.scope}
                  </p>
                  <p className="text-muted-foreground">
                    <span className="font-medium text-foreground">Examples:</span> {option.examples}
                  </p>
                </div>
              </div>
            </SelectableCard>
          );
        })}
      </div>
    </div>
  );
}