"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Trash2, Loader2 } from "lucide-react";
import type { CleanupResponse } from "../types";

interface CleanupSectionProps {
  trackedFilesCount: number;
  isPurging: boolean;
  purgeResult: CleanupResponse | null;
  onCleanup: () => void;
}

export function CleanupSection({
  trackedFilesCount,
  isPurging,
  purgeResult,
  onCleanup,
}: CleanupSectionProps) {
  return (
    <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">
          <Trash2 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">
            Fichiers Temporaires
          </span>
          <span className="text-sm font-semibold tabular-nums text-foreground">
            {trackedFilesCount} fichier{trackedFilesCount !== 1 ? "s" : ""} orphelin{trackedFilesCount !== 1 ? "s" : ""}
          </span>
          {purgeResult && (
            <span className="text-[10px] text-green-500">
              {purgeResult.files_cleaned} fichier{purgeResult.files_cleaned !== 1 ? "s" : ""} supprimé{purgeResult.files_cleaned !== 1 ? "s" : ""}
            </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={onCleanup}
          disabled={isPurging || trackedFilesCount === 0}
        >
          {isPurging ? (
            <Loader2 className="size-3 animate-spin" />
          ) : (
            <Trash2 className="size-3" />
          )}
          {isPurging
            ? "Nettoyage..."
            : trackedFilesCount === 0
              ? "Propre"
              : "Nettoyer"}
        </Button>
      </CardContent>
    </Card>
  );
}
