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

export default async function AnalyzePage({
  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">Analyzing Your Project</h1>
          <p className="text-muted-foreground text-lg">
            Our AI is reviewing your code and documentation to understand your product
          </p>
        </div>

        {/* Analysis Progress */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Loader2 className="h-5 w-5 animate-spin" />
              Analysis in Progress
            </CardTitle>
            <CardDescription>This may take a few moments...</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <div className="h-2 w-2 rounded-full bg-green-500" />
                <span className="text-sm">Reading repository structure</span>
              </div>
              <div className="flex items-center gap-3">
                <div className="h-2 w-2 rounded-full bg-green-500" />
                <span className="text-sm">Analyzing code patterns</span>
              </div>
              <div className="flex items-center gap-3">
                <Loader2 className="h-3 w-3 animate-spin text-primary" />
                <span className="text-sm">Processing ChatGPT conversations</span>
              </div>
              <div className="flex items-center gap-3">
                <div className="h-2 w-2 rounded-full bg-muted-foreground/30" />
                <span className="text-sm text-muted-foreground">Extracting product vision</span>
              </div>
              <div className="flex items-center gap-3">
                <div className="h-2 w-2 rounded-full bg-muted-foreground/30" />
                <span className="text-sm text-muted-foreground">Identifying features</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Continue Button */}
        <div className="flex justify-end pt-4">
          <Link href={`/${workspace}/${projectId}/getting-started/summarize`}>
            <Button size="lg">
              Continue to Summary
              <ArrowRight className="h-4 w-4 ml-2" />
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}