"use client";

import { Settings, AlertCircle, Loader2 } from "lucide-react";
import { useSystemPage } from "./useSystemPage";
import { CleanupSection } from "./CleanupSection";
import { DiskSpaceCard } from "./DiskSpaceCard";
import { ProviderStatus } from "../ProviderStatus";

export default function AdminSystemPage() {
  const { data, isLoading, error, isPurging, purgeResult, handleCleanup } = useSystemPage();

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 bg-purple-600/20 rounded-lg flex items-center justify-center">
          <Settings className="w-5 h-5 text-purple-400" />
        </div>
        <div>
          <h1 className="text-xl font-semibold text-foreground">Système</h1>
          <p className="text-sm text-muted-foreground">
            Surveiller l'état du système et gérer les ressources
          </p>
        </div>
      </div>

      {error && (
        <div className="flex items-center gap-2 rounded-lg border border-red-200/30 bg-red-500/10 px-4 py-3 text-red-500">
          <AlertCircle className="size-4" />
          <span className="text-sm">{error}</span>
        </div>
      )}

      {isLoading && !data ? (
        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
          {[1, 2].map((i) => (
            <div
              key={i}
              className="h-[88px] animate-pulse rounded-lg border border-border bg-card"
            />
          ))}
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
          <DiskSpaceCard
            usedPercent={data?.system?.disk?.used_percent}
            totalGb={data?.system?.disk?.total_gb}
            freeGb={data?.system?.disk?.free_gb}
          />
          <CleanupSection
            trackedFilesCount={data?.cleanup?.tracked_files_count ?? 0}
            isPurging={isPurging}
            purgeResult={purgeResult}
            onCleanup={handleCleanup}
          />
        </div>
      )}

      <ProviderStatus data={data} isLoading={isLoading} />
    </div>
  );
}