syndarix/frontend/src/components/projects/wizard/steps/AutonomyStep.tsx

'use client';

/**
 * Step 4: Autonomy Level Selection
 *
 * Allows users to choose how much control they want over agent actions.
 * Includes a detailed approval matrix comparison.
 * Skipped for script complexity projects.
 */

import { Check, AlertCircle } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { SelectableCard } from '../SelectableCard';
import { autonomyOptions } from '../constants';
import type { WizardState, AutonomyLevel, ApprovalMatrix } from '../types';
import { approvalLabels } from '../types';

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

export function AutonomyStep({ state, updateState }: AutonomyStepProps) {
  const handleSelect = (autonomyLevel: AutonomyLevel) => {
    updateState({ autonomyLevel });
  };

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">Autonomy Level</h2>
        <p className="mt-1 text-muted-foreground">
          How much control do you want over the AI agents&apos; actions?
        </p>
      </div>

      <div className="grid gap-4" role="radiogroup" aria-label="Autonomy level options">
        {autonomyOptions.map((option) => {
          const Icon = option.icon;
          const isSelected = state.autonomyLevel === option.id;

          return (
            <SelectableCard
              key={option.id}
              selected={isSelected}
              onClick={() => handleSelect(option.id)}
              aria-label={`${option.label}: ${option.description}`}
            >
              <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                <div className="flex items-start gap-4">
                  <div
                    className={cn(
                      'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
                      isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'
                    )}
                  >
                    <Icon className="h-5 w-5" aria-hidden="true" />
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="font-semibold">{option.label}</h3>
                      {isSelected && (
                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground">
                          <Check className="h-3 w-3" aria-hidden="true" />
                        </div>
                      )}
                    </div>
                    <p className="text-sm text-muted-foreground">{option.description}</p>
                    <p className="mt-1 text-xs text-muted-foreground">
                      <span className="font-medium">Best for:</span> {option.recommended}
                    </p>
                  </div>
                </div>

                <div className="flex flex-wrap gap-2 md:justify-end">
                  {Object.entries(option.approvals).map(([key, requiresApproval]) => (
                    <Badge
                      key={key}
                      variant={requiresApproval ? 'default' : 'secondary'}
                      className="text-xs"
                    >
                      {requiresApproval ? 'Approve' : 'Auto'}:{' '}
                      {approvalLabels[key as keyof ApprovalMatrix]}
                    </Badge>
                  ))}
                </div>
              </div>
            </SelectableCard>
          );
        })}
      </div>

      <Card className="bg-muted/50">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2 text-base">
            <AlertCircle className="h-4 w-4" aria-hidden="true" />
            Approval Matrix
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full text-sm" aria-label="Approval requirements by autonomy level">
              <thead>
                <tr className="border-b">
                  <th scope="col" className="pb-2 text-left font-medium">
                    Action Type
                  </th>
                  <th scope="col" className="pb-2 text-center font-medium">
                    Full Control
                  </th>
                  <th scope="col" className="pb-2 text-center font-medium">
                    Milestone
                  </th>
                  <th scope="col" className="pb-2 text-center font-medium">
                    Autonomous
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {Object.keys(autonomyOptions[0].approvals).map((key) => (
                  <tr key={key}>
                    <td className="py-2 text-muted-foreground">
                      {approvalLabels[key as keyof ApprovalMatrix]}
                    </td>
                    {autonomyOptions.map((option) => (
                      <td key={option.id} className="py-2 text-center">
                        {option.approvals[key as keyof ApprovalMatrix] ? (
                          <Badge variant="outline" className="text-xs">
                            Required
                          </Badge>
                        ) : (
                          <span className="text-xs text-muted-foreground">Automatic</span>
                        )}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}