"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { HeartPulse, HardDrive, FileWarning, Trash2, Loader2 } from "lucide-react";
import { useI18n } from "@/lib/i18n";
import type { AdminDashboardData } from "./types";

interface SystemHealthCardsProps {
  data: AdminDashboardData | null;
  isLoading: boolean;
  isPurging: boolean;
  onPurge: () => void;
  purgeResult: { files_cleaned: number } | null;
}

export function SystemHealthCards({
  data,
  isLoading,
  isPurging,
  onPurge,
  purgeResult,
}: SystemHealthCardsProps) {
  const { t } = useI18n();
  const diskUsed = data?.system?.disk?.used_percent ?? 0;
  const trackedFilesCount = data?.cleanup?.tracked_files_count ?? 0;
  const systemStatus = data?.status ?? "unhealthy";

  if (isLoading && !data) {
    return (
      <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
        {[1, 2, 3].map((i) => (
          <Card key={i} className="py-0">
            <CardContent className="flex items-center gap-3 px-4 py-3">
              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted">
                <Loader2 className="size-4 animate-spin text-muted-foreground" />
              </div>
              <div className="flex flex-1 flex-col gap-1">
                <div className="h-3 w-20 animate-pulse rounded bg-muted" />
                <div className="h-4 w-32 animate-pulse rounded bg-muted" />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
      <Card className="py-0">
        <CardContent className="flex items-center gap-3 px-4 py-3">
          <div
            className={`flex size-9 shrink-0 items-center justify-center rounded-lg ${
              systemStatus === "healthy"
                ? "bg-green-500/10"
                : "bg-red-500/10"
            }`}
          >
            <HeartPulse
              className={`size-4 ${
                systemStatus === "healthy"
                  ? "text-green-500"
                  : "text-red-500"
              }`}
            />
          </div>
          <div className="flex flex-1 flex-col gap-0.5">
            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
              Server Health
            </span>
            <div className="flex items-center gap-1.5">
              <span className="relative flex size-2">
                {systemStatus === "healthy" && (
                  <>
                    <span className="absolute inline-flex size-full animate-ping rounded-full bg-green-500 opacity-75" />
                    <span className="relative inline-flex size-2 rounded-full bg-green-500" />
                  </>
                )}
                {systemStatus !== "healthy" && (
                  <span className="relative inline-flex size-2 rounded-full bg-red-500" />
                )}
              </span>
              <span className="text-sm font-semibold text-foreground">
                {systemStatus === "healthy"
                  ? t('admin.system.allOperational')
                  : t('admin.system.issuesDetected')}
              </span>
            </div>
            <span className="text-[10px] text-muted-foreground">
              {data?.timestamp
                ? `Last update: ${new Date(data.timestamp).toLocaleTimeString()}`
                : t('admin.system.waitingData')}
            </span>
          </div>
        </CardContent>
      </Card>

      <Card className="py-0">
        <CardContent className="flex items-center gap-3 px-4 py-3">
          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
            <HardDrive className="size-4 text-blue-500" />
          </div>
          <div className="flex flex-1 flex-col gap-1">
            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
              Disk Space
            </span>
            <div className="flex items-center justify-between">
              <span className="text-sm font-semibold tabular-nums text-foreground">
                {diskUsed}% used
              </span>
              <span className="text-[10px] tabular-nums text-muted-foreground">
                {data?.system?.disk?.total_gb ?? "--"} GB total
              </span>
            </div>
            <Progress
              value={diskUsed}
              className="h-1.5 bg-muted [&>[data-slot=progress-indicator]]:bg-blue-500"
            />
          </div>
        </CardContent>
      </Card>

      <Card className="py-0">
        <CardContent className="flex items-center gap-3 px-4 py-3">
          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-red-500/10">
            <FileWarning className="size-4 text-red-500" />
          </div>
          <div className="flex flex-1 flex-col gap-0.5">
            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
              Temporary Files
            </span>
            <span className="text-sm font-semibold tabular-nums text-foreground">
              {trackedFilesCount} orphaned files
            </span>
            {purgeResult && (
              <span className="text-[10px] text-green-500">
                {purgeResult.files_cleaned} files deleted
              </span>
            )}
          </div>
          <Button
            variant="outline"
            size="sm"
            className="h-7 shrink-0 gap-1.5 border-red-200/30 text-red-500 hover:bg-red-500/10 hover:text-red-500 text-xs"
            onClick={onPurge}
            disabled={isPurging || trackedFilesCount === 0}
          >
            {isPurging ? (
              <Loader2 className="size-3 animate-spin" />
            ) : (
              <Trash2 className="size-3" />
            )}
            {isPurging
              ? t('admin.system.purging')
              : trackedFilesCount === 0
                ? t('admin.system.clean')
                : t('admin.system.purge')}
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}
