"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { Link, useRouter } from "@/i18n/navigation";
import { EmptyState } from "@/components/dashboard/empty-state";
import { DashboardSkeleton } from "@/components/dashboard/skeleton";
import { listServers } from "@/lib/api/servers";

export function DashboardContent() {
  const t = useTranslations("dashboard");
  const router = useRouter();
  const { data, isLoading } = useQuery({
    queryKey: ["servers"],
    queryFn: listServers,
  });

  const servers = data?.servers ?? [];
  const activeCount = servers.filter((server) =>
    ["RUNNING", "STARTING", "STOPPING"].includes(server.status),
  ).length;

  if (isLoading) {
    return <DashboardSkeleton />;
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
          {t("title")}
        </h1>
        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("welcome")}</p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle>{t("status")}</CardTitle>
            <CardDescription>{t("controlPlaneOnline")}</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="font-mono text-2xl font-semibold text-emerald-600 dark:text-emerald-400">
              {activeCount}
            </p>
            <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("activeServers")}</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("resources")}</CardTitle>
            <CardDescription>{t("resourcesSubtitle")}</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="font-mono text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
              {servers.reduce((sum, server) => sum + server.ramMb, 0)} MB
            </p>
            <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("allocatedRam")}</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("activity")}</CardTitle>
            <CardDescription>{t("activitySubtitle")}</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="font-mono text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
              {servers.length}
            </p>
            <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("totalServers")}</p>
          </CardContent>
        </Card>
      </div>

      <section aria-labelledby="servers-heading">
        <div className="mb-4 flex items-center justify-between gap-4">
          <h2 id="servers-heading" className="text-lg font-medium text-zinc-900 dark:text-zinc-50">
            {t("servers")}
          </h2>
          <Link
            href="/servers"
            className="text-sm font-medium text-sky-600 hover:text-sky-500 dark:text-sky-400"
          >
            {t("viewAllServers")}
          </Link>
        </div>

        {servers.length === 0 ? (
          <EmptyState
            title={t("serversEmpty")}
            description={t("serversEmptyDescription")}
            actionLabel={t("createServer")}
            onAction={() => {
              router.push("/servers/new");
            }}
          />
        ) : (
          <Card>
            <CardContent className="flex flex-col gap-4 py-6 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("serversSummary")}</p>
                <p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
                  {servers.length}
                </p>
              </div>
              <Link
                href="/servers/new"
                className="inline-flex h-10 items-center rounded-md bg-sky-600 px-4 text-sm font-medium text-white hover:bg-sky-500 dark:bg-sky-500 dark:hover:bg-sky-400"
              >
                {t("createServer")}
              </Link>
            </CardContent>
          </Card>
        )}
      </section>
    </div>
  );
}
