import { Badge } from "@/components/ui/badge";
import { useFields } from "@/hooks/useFields";
import { useSetting } from "@/hooks/useSettings";
import { IS_PRO } from "@/lib/env";
import { cn } from "@/lib/utils";
import { __, _n, sprintf } from "@wordpress/i18n";
import { SAMPLE_PRODUCTS, SAMPLE_VALUES } from "../constants";

const HEADER_ROWS = ["image", "title", "add_to_cart"];
const COLS = {
  gridTemplateColumns: `110px repeat(${SAMPLE_PRODUCTS.length}, minmax(0, 1fr))`,
};

/**
 * Live preview of the table rows with sample products: order, on/off,
 * highlighted differences and hidden empty rows follow the draft.
 */
const FieldsPreview = () => {
  const { fields } = useFields();
  const [highlight] = useSetting("table.highlight_differences", true);
  const [hideEmpty] = useSetting("table.hide_empty_rows", true);
  const shown = fields.filter((f) => f.enabled && (!f.pro || IS_PRO));
  const showImage = shown.some((f) => f.key === "image");
  const rows = shown
    .filter((f) => !HEADER_ROWS.includes(f.key))
    .map((f) => {
      const values = SAMPLE_VALUES[f.key] ?? ["", "", ""];
      return {
        ...f,
        values,
        empty: values.every((v) => !v),
        different: new Set(values).size > 1,
      };
    });
  const hidden = hideEmpty ? rows.filter((r) => r.empty) : [];
  const visible = rows.filter((r) => !hidden.includes(r));

  return (
    <section className="ino:sticky ino:top-12 ino:max-h-[calc(100vh-8rem)] ino:overflow-auto ino:rounded-xl ino:border ino:border-border ino:bg-card ino:p-5">
      <div className="ino:mb-3 ino:flex ino:items-center ino:justify-between ino:gap-2">
        <h2 className="ino:m-0 ino:text-base ino:font-semibold">
          {__("Live preview", "product-comparison-for-woocommerce")}
        </h2>
        <Badge className="ino:bg-emerald-50 ino:text-emerald-800">
          {__("Updates as you edit", "product-comparison-for-woocommerce")}
        </Badge>
      </div>
      <div className="ino:overflow-hidden ino:rounded-lg ino:border ino:border-border ino:text-[13px]">
        <div className="ino:grid ino:border-b ino:border-border" style={COLS}>
          <div />
          {SAMPLE_PRODUCTS.map((name, i) => (
            <div key={name} className="ino:p-2.5">
              {showImage && (
                <div
                  className="ino:mb-1.5 ino:aspect-square ino:rounded-md"
                  style={{ background: ["#E8ECF5", "#EFE9E1", "#E3EEEA"][i] }}
                />
              )}
              <div className="ino:font-semibold">{name}</div>
            </div>
          ))}
        </div>
        {visible.map((row) => (
          <div
            key={row.key}
            className={cn(
              "ino:grid ino:border-b ino:border-border/70 ino:last:border-b-0",
              highlight && row.different && "ino:bg-amber-50",
            )}
            style={COLS}
          >
            <div className="ino:p-2.5 ino:text-muted-foreground">
              {row.label || row.default_label}
            </div>
            {row.values.map((value, i) => (
              <div key={i} className="ino:p-2.5">
                {value || "—"}
              </div>
            ))}
          </div>
        ))}
      </div>
      {hidden.length > 0 && (
        <p className="ino:mt-2 ino:mb-0 ino:text-xs ino:text-muted-foreground">
          {sprintf(
            /* translators: 1: count, 2: row names */
            _n(
              "%1$d empty row hidden: %2$s",
              "%1$d empty rows hidden: %2$s",
              hidden.length,
              "product-comparison-for-woocommerce",
            ),
            hidden.length,
            hidden.map((r) => r.label || r.default_label).join(", "),
          )}
        </p>
      )}
    </section>
  );
};

export default FieldsPreview;