import SettingsCard from "@/components/settings/SettingsCard";
import { Button } from "@/components/ui/button";
import {
  useFlushCachesMutation,
  useGetComparePageQuery,
  useRepairComparePageMutation,
} from "@/store/api/toolsApi";
import { __, sprintf } from "@wordpress/i18n";
import { toast } from "sonner";
import BackupRow from "../components/BackupRow";
import ToolRow from "../components/ToolRow";

/** Tools › Maintenance: backup, compare page check, caches. */
const MaintenanceSection = () => {
  const { data: page } = useGetComparePageQuery();
  const [repair, repairState] = useRepairComparePageMutation();
  const [flush, flushState] = useFlushCachesMutation();

  const pageNote = !page
    ? __("Checking…", "product-comparison-for-woocommerce")
    : page.healthy
      ? sprintf(
          /* translators: 1: page title, 2: page ID */
          __(
            "“%1$s” (#%2$d) is published and has the table.",
            "product-comparison-for-woocommerce",
          ),
          page.title,
          page.id,
        )
      : __(
          "Missing or not published. Repair creates or restores it.",
          "product-comparison-for-woocommerce",
        );

  return (
    <SettingsCard
      title={__("Maintenance", "product-comparison-for-woocommerce")}
    >
      <BackupRow />
      <ToolRow
        title={__("Compare page", "product-comparison-for-woocommerce")}
        description={pageNote}
      >
        {page?.url && (
          <Button
            variant="ghost"
            render={<a href={page.url} target="_blank" rel="noreferrer" />}
          >
            {__("View", "product-comparison-for-woocommerce")}
          </Button>
        )}
        <Button
          variant="outline"
          disabled={repairState.isLoading}
          onClick={async () => {
            await repair().unwrap();
            toast.success(
              __(
                "The compare page is ready.",
                "product-comparison-for-woocommerce",
              ),
            );
          }}
        >
          {__("Check and repair", "product-comparison-for-woocommerce")}
        </Button>
      </ToolRow>
      <ToolRow
        title={__("Caches", "product-comparison-for-woocommerce")}
        description={__(
          "Table data, search results and design styles.",
          "product-comparison-for-woocommerce",
        )}
      >
        <Button
          variant="outline"
          disabled={flushState.isLoading}
          onClick={async () => {
            await flush().unwrap();
            toast.success(
              __("Caches cleared", "product-comparison-for-woocommerce"),
            );
          }}
        >
          {__("Clear caches", "product-comparison-for-woocommerce")}
        </Button>
      </ToolRow>
    </SettingsCard>
  );
};

export default MaintenanceSection;