import { ComingSoonBadge, ProBadge } from "@/components/plan-badges";
import Segmented from "@/components/settings/Segmented";
import { Button } from "@/components/ui/button";
import { IS_PRO } from "@/lib/env";
import { __ } from "@wordpress/i18n";
import AddCustomField from "./AddCustomField";

/**
 * Locked previews of the Pro row tools: per-category templates, custom
 * field rows and AI row suggestions. They do nothing in Free.
 */
export const CategoryTemplates = () => (
  <div className="ino:mb-4 ino:rounded-lg ino:bg-muted/60 ino:p-3">
    <div className="ino:mb-2 ino:flex ino:items-center ino:gap-2 ino:text-[13px] ino:font-medium">
      {__("Rows for", "product-comparison-for-woocommerce")}
      <ProBadge />
    </div>
    <Segmented
      label={__("Category template", "product-comparison-for-woocommerce")}
      value="all"
      disabled={!IS_PRO}
      onChange={() => {}}
      options={[
        {
          value: "all",
          label: __("All products", "product-comparison-for-woocommerce"),
        },
        {
          value: "category",
          label: __("A category…", "product-comparison-for-woocommerce"),
        },
      ]}
    />
    <p className="ino:mt-2 ino:mb-0 ino:text-xs ino:text-muted-foreground">
      {__(
        "Different rows per category, picked automatically. Available in Pro.",
        "product-comparison-for-woocommerce",
      )}
    </p>
  </div>
);

const Row = ({ text, button, badge }) => (
  <div className="ino:flex ino:flex-wrap ino:items-center ino:justify-between ino:gap-3 ino:border-t ino:border-border/70 ino:pt-3">
    <span className="ino:text-[13px] ino:text-muted-foreground">{text}</span>
    <Button variant="outline" size="sm" disabled={!IS_PRO}>
      {button}
      {badge}
    </Button>
  </div>
);

export const RowTools = () => (
  <div className="ino:mt-4 ino:flex ino:flex-col ino:gap-3">
    {IS_PRO ? (
      <AddCustomField />
    ) : (
      <Row
        text={__(
          "Add a custom field, ACF, Meta Box or taxonomy row",
          "product-comparison-for-woocommerce",
        )}
        button={__("+ Add row", "product-comparison-for-woocommerce")}
        badge={<ProBadge />}
      />
    )}
    <Row
      text={__(
        "Let AI pick the most useful rows for this category",
        "product-comparison-for-woocommerce",
      )}
      button={__("Suggest rows", "product-comparison-for-woocommerce")}
      badge={<ComingSoonBadge />}
    />
  </div>
);