import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Github, ArrowRight, Download } from "lucide-react";
import { CursorIcon, OpenAIIcon } from "@/components/icons/custom-icons";
import Link from "next/link";

export default async function ConnectPage({
  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">Connect Your Sources</h1>
          <p className="text-muted-foreground text-lg">
            Install the Cursor extension and connect your development sources. Our AI will analyze all of the information and automatically create your project for you.
          </p>
        </div>

        {/* Connection Cards */}
        <div className="space-y-4">
          {/* Cursor Extension */}
          <Card>
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
                    <CursorIcon className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <CardTitle>Cursor Extension</CardTitle>
                    <CardDescription>Install our extension to track your development sessions</CardDescription>
                  </div>
                </div>
                <Button>
                  <Download className="h-4 w-4 mr-2" />
                  Install Extension
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-2 text-sm text-muted-foreground">
                <p>The extension will help us:</p>
                <ul className="list-disc list-inside space-y-1 ml-2">
                  <li>Track your coding sessions and AI interactions</li>
                  <li>Monitor costs and token usage</li>
                  <li>Generate automatic documentation</li>
                  <li>Sync your conversations with Vib&apos;n</li>
                </ul>
              </div>
            </CardContent>
          </Card>
          {/* GitHub Connection */}
          <Card>
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                    <Github className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <CardTitle>GitHub Repository</CardTitle>
                    <CardDescription>Connect your code repository for analysis</CardDescription>
                  </div>
                </div>
                <Button>
                  <Github className="h-4 w-4 mr-2" />
                  Connect GitHub
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-2 text-sm text-muted-foreground">
                <p>We&apos;ll need access to:</p>
                <ul className="list-disc list-inside space-y-1 ml-2">
                  <li>Read your repository code and structure</li>
                  <li>Access to repository metadata</li>
                  <li>View commit history</li>
                </ul>
              </div>
            </CardContent>
          </Card>

          {/* ChatGPT Connection - Optional */}
          <Card className="border-dashed">
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
                    <OpenAIIcon className="h-6 w-6 text-green-600" />
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <CardTitle>ChatGPT Project (MCP)</CardTitle>
                      <span className="px-2 py-0.5 rounded-full bg-muted text-muted-foreground text-xs font-medium">
                        Optional
                      </span>
                    </div>
                    <CardDescription>Connect your ChatGPT conversations and docs</CardDescription>
                  </div>
                </div>
                <Button variant="outline">
                  <OpenAIIcon className="h-4 w-4 mr-2" />
                  Install MCP
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-2 text-sm text-muted-foreground">
                <p>Install the Model Context Protocol to:</p>
                <ul className="list-disc list-inside space-y-1 ml-2">
                  <li>Access your ChatGPT project conversations</li>
                  <li>Read product documentation and notes</li>
                  <li>Sync your product vision and requirements</li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </div>

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