"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { EmptyState } from "@/components/dashboard/empty-state";
import { DashboardSkeleton } from "@/components/dashboard/skeleton";

export function DashboardContent() {
  const t = useTranslations("dashboard");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const timer = window.setTimeout(() => setIsLoading(false), 600);
    return () => window.clearTimeout(timer);
  }, []);

  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>Control Plane · Online</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="font-mono text-2xl font-semibold text-emerald-600 dark:text-emerald-400">
              0
            </p>
            <p className="text-sm text-zinc-600 dark:text-zinc-400">Active servers</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("resources")}</CardTitle>
            <CardDescription>Allocated / Quota</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="font-mono text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
              0 / 0
            </p>
            <p className="text-sm text-zinc-600 dark:text-zinc-400">CPU · RAM · Disk</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("activity")}</CardTitle>
            <CardDescription>Last 24 hours</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("activityEmpty")}</p>
          </CardContent>
        </Card>
      </div>

      <section aria-labelledby="servers-heading">
        <h2 id="servers-heading" className="mb-4 text-lg font-medium text-zinc-900 dark:text-zinc-50">
          {t("servers")}
        </h2>
        <EmptyState
          title={t("serversEmpty")}
          description={t("serversEmptyDescription")}
          actionLabel={t("createServer")}
        />
      </section>
    </div>
  );
}
