import { notFound } from "next/navigation";
import { GitBranch } from "lucide-react";
import { prisma } from "@/lib/db";
import { Shell } from "@/components/layout/shell";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ProjectOverview } from "@/components/project-overview";
import { CommitLogList } from "@/components/commit-log";
import { LiveRefresh } from "@/components/live-refresh";
import { DeployButton } from "@/components/deploy-button";
import { DeployHistoryList } from "@/components/deploy-history";
import { TargetSelector } from "@/components/target-selector";

export const dynamic = "force-dynamic";

export default async function ProjectDetail({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const project = await prisma.project.findUnique({ where: { id } });
  if (!project) notFound();

  const [commits, deploys, targets] = await Promise.all([
    prisma.commitLog.findMany({
      where: { projectId: id },
      orderBy: { timestamp: "desc" },
      take: 20,
    }),
    prisma.deployHistory.findMany({
      where: { projectId: id },
      orderBy: { startedAt: "desc" },
      take: 10,
    }),
    prisma.deployTarget.findMany({ orderBy: { name: "asc" } }),
  ]);

  const drift =
    !!project.deployedVersion &&
    !!project.version &&
    project.deployedVersion !== project.version;

  return (
    <Shell crumbs={[{ label: "Tổng quan", href: "/" }, { label: project.name }]}>
      <LiveRefresh />

      <div className="space-y-6">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="min-w-0">
            <div className="flex items-center gap-3">
              <h1 className="truncate text-2xl font-semibold tracking-tight">
                {project.name}
              </h1>
              {drift && (
                <Badge tone="warning">lệch {project.deployedVersion} → {project.version}</Badge>
              )}
            </div>
            <div className="mt-1.5 flex items-center gap-3 text-sm text-muted-foreground">
              <span className="flex items-center gap-1.5">
                <GitBranch className="h-3.5 w-3.5" />
                <span className="text-mono">{project.branch ?? "—"}</span>
              </span>
              <span className="text-mono">{project.version ?? "—"}</span>
            </div>
          </div>
        </div>

        <div className="grid gap-6 lg:grid-cols-3">
          <div className="space-y-6 lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle>Thông tin dự án</CardTitle>
              </CardHeader>
              <CardContent>
                <ProjectOverview
                  path={project.path}
                  source={project.source}
                  branch={project.branch}
                  version={project.version}
                  gitRemote={project.gitRemote}
                  lastCommitHash={project.lastCommitHash}
                  lastCommitMessage={project.lastCommitMessage}
                  lastCommitTime={project.lastCommitTime}
                  deployedVersion={project.deployedVersion}
                  deployedAt={project.deployedAt}
                />
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="flex-row items-center justify-between space-y-0">
                <CardTitle>Lịch sử deploy</CardTitle>
                <span className="text-xs text-muted-foreground">{deploys.length} lượt</span>
              </CardHeader>
              <CardContent className="p-0">
                <DeployHistoryList rows={deploys} projectId={project.id} />
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="flex-row items-center justify-between space-y-0">
                <CardTitle>Commit gần đây</CardTitle>
                <span className="text-xs text-muted-foreground">{commits.length}</span>
              </CardHeader>
              <CardContent>
                <CommitLogList commits={commits} />
              </CardContent>
            </Card>
          </div>

          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Deploy</CardTitle>
              </CardHeader>
              <CardContent className="space-y-5">
                <TargetSelector
                  projectId={project.id}
                  currentTargetId={project.deployTargetId}
                  targets={targets.map((t) => ({ id: t.id, name: t.name, host: t.host }))}
                />
                <DeployButton projectId={project.id} hasTarget={!!project.deployTargetId} />
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </Shell>
  );
}