import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle2, ArrowRight, Sparkles } from "lucide-react";
import Link from "next/link";

export default async function SetupPage({
  params,
}: {
  params: Promise<{ workspace: string; projectId: string }>;
}) {
  const { workspace, projectId } = await params;
  
  return (
    <div className="flex h-full flex-col overflow-auto">
      <div className="flex-1 p-8 space-y-8 max-w-4xl">
        {/* Header */}
        <div>
          <h1 className="text-4xl font-bold mb-2">Setup Your Project</h1>
          <p className="text-muted-foreground text-lg">
            We&apos;ve created your project structure based on the analysis
          </p>
        </div>

        {/* Setup Complete */}
        <Card className="border-green-500/50 bg-green-500/5">
          <CardContent className="pt-6 pb-6">
            <div className="flex items-center gap-4">
              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10">
                <CheckCircle2 className="h-8 w-8 text-green-600" />
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-1">Project Setup Complete!</h3>
                <p className="text-muted-foreground">
                  Your project has been configured with all the necessary sections
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* What We Created */}
        <Card>
          <CardHeader>
            <CardTitle>What We&apos;ve Set Up</CardTitle>
            <CardDescription>Your project is ready with these sections</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
                <CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
                <div>
                  <p className="font-medium">Product Vision</p>
                  <p className="text-sm text-muted-foreground">Your product goals and strategy</p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
                <CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
                <div>
                  <p className="font-medium">Progress Tracking</p>
                  <p className="text-sm text-muted-foreground">Monitor your development progress</p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
                <CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
                <div>
                  <p className="font-medium">UI UX Design</p>
                  <p className="text-sm text-muted-foreground">Design and iterate on your screens</p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
                <CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
                <div>
                  <p className="font-medium">Code Repository</p>
                  <p className="text-sm text-muted-foreground">Connected to your GitHub repo</p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
                <CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
                <div>
                  <p className="font-medium">Deployment & Automation</p>
                  <p className="text-sm text-muted-foreground">CI/CD and automated workflows</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Start Building Button */}
        <div className="flex justify-center pt-4">
          <Link href={`/${workspace}/${projectId}/product`}>
            <Button size="lg" className="gap-2">
              <Sparkles className="h-4 w-4" />
              Start Building
              <ArrowRight className="h-4 w-4" />
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}