import { Badge } from "@/components/ui/badge";
import SettingsCard from "@/components/settings/SettingsCard";
import { useGetVersusQuery } from "@/store/api/versusApi";
import { __ } from "@wordpress/i18n";
import NewPageForm from "../components/NewPageForm";

const D = "product-comparison-for-woocommerce";

/** SEO pages › the pages: list with View / Edit, and a quick "new page" form. */
const SeoPagesSection = () => {
  const { data: pages = [], error, isLoading } = useGetVersusQuery();

  return (
    <SettingsCard
      title={__("Comparison pages", D)}
      description={__(
        "Create a page here, then write its intro in the WordPress editor (Products › Comparison pages).",
        D,
      )}
    >
      {error ? (
        <p className="ino:text-sm ino:text-muted-foreground">
          {error.data?.message ||
            __("Save your settings to turn comparison pages on.", D)}
        </p>
      ) : (
        <>
          <NewPageForm />
          {!isLoading && !pages.length && (
            <p className="ino:text-sm ino:text-muted-foreground">
              {__("No comparison pages yet.", D)}
            </p>
          )}
          {pages.length > 0 && (
            <ul className="ino:m-0 ino:mb-4 ino:list-none ino:divide-y ino:divide-border ino:p-0">
              {pages.map((page) => (
                <li
                  key={page.id}
                  className="ino:flex ino:flex-wrap ino:items-center ino:gap-3 ino:py-2.5"
                >
                  <span className="ino:min-w-0 ino:flex-1 ino:text-sm ino:font-medium">
                    {page.title}
                  </span>
                  {page.status !== "publish" && (
                    <Badge variant="secondary">{page.status}</Badge>
                  )}
                  <a
                    className="ino:text-sm"
                    href={page.link}
                    target="_blank"
                    rel="noreferrer"
                  >
                    {__("View", D)}
                  </a>
                  <a className="ino:text-sm" href={page.edit_link}>
                    {__("Edit", D)}
                  </a>
                </li>
              ))}
            </ul>
          )}
        </>
      )}
    </SettingsCard>
  );
};

export default SeoPagesSection;