import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CheckCircle2, AlertCircle, Shield, Sparkles } from "lucide-react";
import { useSetupStore } from "@/store/setup-store";
import { useAppStore } from "@/store/app-store";

interface CompleteStepProps {
  onFinish: () => void;
}

export function CompleteStep({ onFinish }: CompleteStepProps) {
  const { claudeCliStatus, claudeAuthStatus } = useSetupStore();
  const { apiKeys } = useAppStore();

  const claudeReady =
    (claudeCliStatus?.installed && claudeAuthStatus?.authenticated) ||
    apiKeys.anthropic;

  return (
    <div className="text-center space-y-6">
      <div className="w-20 h-20 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg shadow-green-500/30 flex items-center justify-center mx-auto">
        <CheckCircle2 className="w-10 h-10 text-white" />
      </div>

      <div>
        <h2 className="text-3xl font-bold text-foreground mb-3">
          Setup Complete!
        </h2>
        <p className="text-muted-foreground max-w-md mx-auto">
          Your development environment is configured. You&apos;re ready to start
          building with AI-powered assistance.
        </p>
      </div>

      <Button
        size="lg"
        className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
        onClick={onFinish}
        data-testid="setup-finish-button"
      >
        <Sparkles className="w-4 h-4 mr-2" />
        Start Building
      </Button>
    </div>
  );
}