"use client";

import { Settings, AlertCircle, Loader2, RotateCcw, CheckCircle2 } from "lucide-react";
import { useSystemPage } from "./useSystemPage";
import { CleanupSection } from "./CleanupSection";
import { DiskSpaceCard } from "./DiskSpaceCard";
import { ProviderStatus } from "../ProviderStatus";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useI18n } from "@/lib/i18n";

export default function AdminSystemPage() {
  const {
    data, isLoading, error,
    isPurging, purgeResult, handleCleanup,
    isResetting, resetResult, handleResetQuotas,
  } = useSystemPage();
  const { t } = useI18n();

  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">{t('admin.system.title')}</h1>
          <p className="text-sm text-muted-foreground">
            {t('admin.system.subtitle')}
          </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, 3].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}
          />

          {/* Reset Translation Quotas */}
          <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-amber-500/10">
                <RotateCcw className="size-4 text-amber-500" />
              </div>
              <div className="flex flex-1 flex-col gap-0.5">
                <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                  {t('admin.system.quotas')}
                </span>
                <span className="text-sm font-semibold text-foreground">
                  {t('admin.system.resetQuotas')}
                </span>
                {resetResult && (
                  <span className="text-[10px] text-green-500 flex items-center gap-1">
                    <CheckCircle2 className="size-3" />
                    {resetResult.message}
                  </span>
                )}
              </div>
              <Button
                variant="outline"
                size="sm"
                className="h-7 shrink-0 gap-1.5 border-amber-200/30 text-amber-600 hover:bg-amber-500/10 hover:text-amber-600 text-xs"
                onClick={handleResetQuotas}
                disabled={isResetting}
              >
                {isResetting ? (
                  <Loader2 className="size-3 animate-spin" />
                ) : (
                  <RotateCcw className="size-3" />
                )}
                {isResetting ? t('admin.system.resetting') : t('admin.system.reset')}
              </Button>
            </CardContent>
          </Card>
        </div>
      )}

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