'use client';

/**
 * Step 6: Review & Confirmation
 *
 * Shows a summary of all selections before creating the project.
 */

import { CheckCircle2 } from 'lucide-react';

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { complexityOptions, clientModeOptions, autonomyOptions } from '../constants';
import type { WizardState } from '../types';

interface ReviewStepProps {
  state: WizardState;
}

export function ReviewStep({ state }: ReviewStepProps) {
  const complexity = complexityOptions.find((o) => o.id === state.complexity);
  const clientMode = clientModeOptions.find((o) => o.id === state.clientMode);
  const autonomy = autonomyOptions.find((o) => o.id === state.autonomyLevel);

  const isScriptMode = state.complexity === 'script';

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">Review Your Project</h2>
        <p className="mt-1 text-muted-foreground">
          Please review your selections before creating the project.
        </p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {/* Basic Info Card */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Basic Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div>
              <p className="text-sm font-medium">Project Name</p>
              <p className="text-sm text-muted-foreground">
                {state.projectName || 'Not specified'}
              </p>
            </div>
            <div>
              <p className="text-sm font-medium">Description</p>
              <p className="text-sm text-muted-foreground">
                {state.description || 'No description provided'}
              </p>
            </div>
            <div>
              <p className="text-sm font-medium">Repository</p>
              <p className="text-sm text-muted-foreground">
                {state.repoUrl || 'New repository will be created'}
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Complexity Card */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Project Complexity</CardTitle>
          </CardHeader>
          <CardContent>
            {complexity ? (
              <div className="flex items-start gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                  <complexity.icon className="h-5 w-5 text-primary" aria-hidden="true" />
                </div>
                <div>
                  <p className="font-medium">{complexity.label}</p>
                  <p className="text-sm text-muted-foreground">{complexity.description}</p>
                </div>
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">Not selected</p>
            )}
          </CardContent>
        </Card>

        {/* Client Mode Card - show for non-scripts or show auto-selected for scripts */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Interaction Mode</CardTitle>
          </CardHeader>
          <CardContent>
            {isScriptMode ? (
              <p className="text-sm text-muted-foreground">
                Auto Mode (automatically set for script projects)
              </p>
            ) : clientMode ? (
              <div className="flex items-start gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                  <clientMode.icon className="h-5 w-5 text-primary" aria-hidden="true" />
                </div>
                <div>
                  <p className="font-medium">{clientMode.label}</p>
                  <p className="text-sm text-muted-foreground">{clientMode.description}</p>
                </div>
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">Not selected</p>
            )}
          </CardContent>
        </Card>

        {/* Autonomy Card - show for non-scripts or show auto-selected for scripts */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Autonomy Level</CardTitle>
          </CardHeader>
          <CardContent>
            {isScriptMode ? (
              <p className="text-sm text-muted-foreground">
                Autonomous (automatically set for script projects)
              </p>
            ) : autonomy ? (
              <div className="flex items-start gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                  <autonomy.icon className="h-5 w-5 text-primary" aria-hidden="true" />
                </div>
                <div>
                  <p className="font-medium">{autonomy.label}</p>
                  <p className="text-sm text-muted-foreground">{autonomy.description}</p>
                </div>
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">Not selected</p>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Summary Alert */}
      <Card className="border-primary/50 bg-primary/5">
        <CardContent className="flex items-start gap-4 p-6">
          <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" aria-hidden="true" />
          <div>
            <h4 className="font-medium">Ready to Create</h4>
            <p className="mt-1 text-sm text-muted-foreground">
              Once you create this project, Syndarix will set up your environment and begin the
              requirements discovery phase with the Product Owner agent.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
