import { ProBadge } from "@/components/plan-badges";
import { useDesign } from "@/hooks/useSettings";
import { IS_PRO } from "@/lib/env";
import { cn } from "@/lib/utils";
import { __ } from "@wordpress/i18n";
import { TEMPLATES } from "../constants";

/** Classic: image tiles on top, then open rows with thin lines. */
const ClassicThumb = () => (
  <div
    aria-hidden="true"
    className="ino:flex ino:h-14 ino:flex-col ino:gap-1 ino:rounded-md ino:bg-background ino:p-1.5 ino:ring-1 ino:ring-border"
  >
    <div className="ino:grid ino:flex-1 ino:grid-cols-[1fr_2fr_2fr] ino:gap-1">
      <span />
      <span className="ino:rounded-sm ino:bg-muted" />
      <span className="ino:rounded-sm ino:bg-muted" />
    </div>
    {[0, 1].map((i) => (
      <span
        key={i}
        className="ino:h-1.5 ino:border-t ino:border-muted-foreground/25"
      />
    ))}
  </div>
);

/** Small sketch of each template for the tiles. */
const Thumb = ({ value }) =>
  value === "classic" ? (
    <ClassicThumb />
  ) : (
    <div
      aria-hidden="true"
      className={cn(
        "ino:grid ino:h-14 ino:grid-cols-3 ino:gap-1 ino:rounded-md ino:p-1.5",
        value === "dark" ? "ino:bg-neutral-800" : "ino:bg-muted",
      )}
    >
      {[0, 1, 2].map((i) => (
        <span
          key={i}
          className={cn(
            "ino:rounded-sm",
            value === "dark" ? "ino:bg-neutral-600" : "ino:bg-background",
            value === "cards" && "ino:shadow-sm",
            value === "spec_sheet" && i > 0 && "ino:bg-muted-foreground/20",
          )}
        />
      ))}
    </div>
  );

/** Table template tiles; Minimal and Classic are free. */
const TemplatePicker = () => {
  const [template, setTemplate] = useDesign("template", "minimal");

  return (
    <div className="ino:border-t ino:border-border/70 ino:py-4">
      <div className="ino:mb-2.5 ino:text-sm ino:font-medium">
        {__("Table template", "product-comparison-for-woocommerce")}
      </div>
      <div className="ino:grid ino:grid-cols-[repeat(auto-fill,minmax(120px,1fr))] ino:gap-2.5">
        {TEMPLATES.map((t) => {
          const locked = t.pro && !IS_PRO;
          return (
            <button
              key={t.value}
              type="button"
              aria-pressed={template === t.value}
              disabled={locked}
              onClick={() => setTemplate(t.value)}
              className={cn(
                "ino:flex ino:cursor-pointer ino:flex-col ino:gap-2 ino:rounded-lg ino:border ino:border-border ino:bg-background ino:p-2 ino:text-left ino:text-[13px] ino:disabled:cursor-not-allowed ino:disabled:opacity-60",
                template === t.value &&
                  "ino:border-primary ino:ring-1 ino:ring-primary",
              )}
            >
              <Thumb value={t.value} />
              <span className="ino:flex ino:items-center ino:gap-1.5 ino:font-medium">
                {t.label}
                {t.pro && <ProBadge />}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default TemplatePicker;