import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { FileCode } from "lucide-react";

export default async function ArchitecturePage({
  params,
}: {
  params: { projectId: string };
}) {
  return (
    <div className="flex h-full flex-col">
      {/* Page Header */}
      <div className="border-b bg-card/50 px-6 py-4">
        <div>
          <h1 className="text-2xl font-bold">Architecture</h1>
          <p className="text-sm text-muted-foreground">
            Living architecture documentation and ADRs
          </p>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-6">
        <div className="mx-auto max-w-6xl">
          <Tabs defaultValue="overview" className="space-y-4">
            <TabsList>
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="decisions">Decisions (ADRs)</TabsTrigger>
              <TabsTrigger value="tech-stack">Tech Stack</TabsTrigger>
              <TabsTrigger value="data-model">Data Model</TabsTrigger>
            </TabsList>

            <TabsContent value="overview" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Architecture Overview</CardTitle>
                  <CardDescription>
                    High-level system architecture
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="prose max-w-none">
                    <p className="text-muted-foreground">
                      Architecture documentation will be automatically generated
                      from your code and conversations.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="decisions" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Architectural Decision Records</CardTitle>
                  <CardDescription>
                    Key architectural choices and their context
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-col items-center justify-center py-12">
                    <div className="mb-4 rounded-full bg-muted p-3">
                      <FileCode className="h-6 w-6 text-muted-foreground" />
                    </div>
                    <p className="text-sm text-center text-muted-foreground max-w-sm">
                      ADRs will be automatically detected from your AI conversations
                    </p>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="tech-stack" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Technology Stack</CardTitle>
                  <CardDescription>
                    Approved technologies and frameworks
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid gap-4 md:grid-cols-2">
                    <div>
                      <h4 className="font-medium mb-2">Frontend</h4>
                      <ul className="space-y-1 text-sm text-muted-foreground">
                        <li>• Next.js 15</li>
                        <li>• React 19</li>
                        <li>• Tailwind CSS</li>
                      </ul>
                    </div>
                    <div>
                      <h4 className="font-medium mb-2">Backend</h4>
                      <ul className="space-y-1 text-sm text-muted-foreground">
                        <li>• Node.js</li>
                        <li>• Express</li>
                        <li>• PostgreSQL</li>
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="data-model" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Data Model</CardTitle>
                  <CardDescription>
                    Database schema and relationships
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    Database schema documentation coming soon
                  </p>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  );
}