import Link from "next/link";
import { Server, Plus, KeyRound } from "lucide-react";
import { prisma } from "@/lib/db";
import { Shell } from "@/components/layout/shell";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import { CopyText } from "@/components/ui/copy-text";

export const dynamic = "force-dynamic";

export default async function DeployTargetsPage() {
  const targets = await prisma.deployTarget.findMany({
    orderBy: { createdAt: "desc" },
    include: { _count: { select: { projects: true } } },
  });

  return (
    <Shell
      actions={
        <Link href="/deploy-targets/new">
          <Button size="sm">
            <Plus className="h-3.5 w-3.5" />
            Thêm máy chủ
          </Button>
        </Link>
      }
    >
      <div className="space-y-6">
        <div className="flex items-end justify-between gap-4">
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">Máy chủ deploy</h1>
            <p className="mt-1 text-sm text-muted-foreground">
              Các host SSH có thể nhận image qua docker compose.
            </p>
          </div>
          <span className="rounded-md border border-border bg-surface px-2.5 py-1 text-xs text-muted-foreground">
            {targets.length} máy chủ
          </span>
        </div>

        {targets.length === 0 ? (
          <EmptyState
            icon={<Server className="h-5 w-5" />}
            title="Chưa cấu hình máy chủ deploy"
            description="Thêm một host có SSH và đường dẫn compose để bật pipeline deploy."
            action={
              <Link href="/deploy-targets/new">
                <Button>
                  <Plus className="h-3.5 w-3.5" />
                  Thêm máy chủ
                </Button>
              </Link>
            }
          />
        ) : (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {targets.map((t) => (
              <Card key={t.id} className="hover:border-primary/40 transition-colors">
                <CardHeader className="flex-row items-start justify-between space-y-0">
                  <div className="min-w-0">
                    <CardTitle className="truncate text-base">{t.name}</CardTitle>
                    <p className="mt-1 text-xs text-muted-foreground">
                      {t._count.projects} dự án
                    </p>
                  </div>
                  <Badge tone={t.authMode === "key" ? "info" : "muted"}>
                    <KeyRound className="h-2.5 w-2.5" />
                    {t.authMode === "key" ? "khoá" : "mật khẩu"}
                  </Badge>
                </CardHeader>
                <CardContent className="space-y-3 text-sm">
                  <div className="space-y-1">
                    <span className="text-2xs font-medium uppercase tracking-wider text-muted-foreground">
                      Host
                    </span>
                    <div className="text-mono text-foreground/90">
                      {t.sshUser}@{t.host}:{t.sshPort}
                    </div>
                  </div>
                  <div className="space-y-1">
                    <span className="text-2xs font-medium uppercase tracking-wider text-muted-foreground">
                      Compose path
                    </span>
                    <CopyText value={t.composePath} truncate className="block max-w-full" />
                  </div>
                  {t.notes && (
                    <p className="border-t border-border/60 pt-3 text-xs text-muted-foreground">
                      {t.notes}
                    </p>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>
    </Shell>
  );
}