"use client";

import { Shield, RefreshCw, Loader2, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { SystemHealthCards } from "./SystemHealthCards";
import { ProviderStatus } from "./ProviderStatus";
import { useAdminDashboard } from "./useAdminDashboard";
import { useCleanup } from "./useCleanup";
import { useI18n } from "@/lib/i18n";
import {
  TooltipProvider,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export default function AdminPage() {
  const { data, isLoading, error, refetch } = useAdminDashboard();
  const { isPurging, purgeResult, triggerCleanup } = useCleanup();
  const { t } = useI18n();

  const handlePurge = async () => {
    await triggerCleanup();
    refetch();
  };

  return (
    <TooltipProvider>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex size-10 items-center justify-center rounded-lg bg-purple-500/10">
              <Shield className="size-5 text-purple-500" />
            </div>
            <div>
              <h1 className="text-xl font-semibold text-foreground">
                {t('admin.dashboard.title')}
              </h1>
              <p className="text-sm text-muted-foreground">
                {t('admin.dashboard.subtitle')}
              </p>
            </div>
          </div>

          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="outline"
                size="sm"
                className="gap-1.5"
                onClick={() => refetch()}
                disabled={isLoading}
              >
                {isLoading ? (
                  <Loader2 className="size-3.5 animate-spin" />
                ) : (
                  <RefreshCw className="size-3.5" />
                )}
                {t('admin.dashboard.refresh')}
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>{t('admin.dashboard.refreshTooltip')}</p>
            </TooltipContent>
          </Tooltip>
        </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>
        )}

        <SystemHealthCards
          data={data}
          isLoading={isLoading}
          isPurging={isPurging}
          onPurge={handlePurge}
          purgeResult={purgeResult}
        />

        <ProviderStatus data={data} isLoading={isLoading} />

        {data?.config && (
          <div className="rounded-lg border border-border bg-card px-4 py-3">
            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
              {t('admin.dashboard.config')}
            </span>
            <div className="mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground">
              <span>
                {t('admin.dashboard.maxFileSize')}{" "}
                <strong className="text-foreground">
                  {data.config.max_file_size_mb}MB
                </strong>
              </span>
              <span>
                {t('admin.dashboard.translationService')}{" "}
                <strong className="text-foreground">
                  {data.config.translation_service}
                </strong>
              </span>
              <span>
                {t('admin.dashboard.formats')}{" "}
                <strong className="text-foreground">
                  {data.config.supported_extensions.join(", ")}
                </strong>
              </span>
            </div>
          </div>
        )}
      </div>
    </TooltipProvider>
  );
}
