/**
 * FieldSettingsPanel — Inline sidebar panel for editing checkout field properties.
 *
 * Replaces the modal flow: settings now render inside the left sidebar.
 *
 * @package ArraySubsPro
 */
import React, { useState, useEffect, useRef, useCallback } from "react";
import { __ } from "@wordpress/i18n";
import Form from "rc-field-form";
import FormBuilder from "@libs/form-builder";
import { ArrowLeft, Lock } from "lucide-react";
import { buildUrl } from "@libs/url";
import {
  isBuiltinField,
  isLockedField,
  isLayoutField,
  isAddressField,
  generateUniqueFieldKey,
  LOCKED_FIELDS,
  SECTION_COLUMN_OPTIONS,
  CHECKOUT_COUPON_NOTICES_TYPE,
  CHECKOUT_COUPON_NOTICES_KEY,
  ORDER_INFO_PAYMENT_TYPE,
  ORDER_INFO_PAYMENT_KEY,
  ORDER_NOTES_TYPE,
  ORDER_NOTES_KEY,
  createCheckoutCouponNoticesElement,
  createOrderInfoPaymentElement,
  createOrderNotesElement,
  PRODUCT_TABLE_COLUMNS,
  DEFAULT_PRODUCT_TABLE_COLUMNS,
} from "./utils";

const sanitizeOptionCache = (options = []) => {
  if (!Array.isArray(options)) {
    return [];
  }

  return options
    .filter(
      (option) =>
        option &&
        option.value !== undefined &&
        option.value !== null &&
        option.label !== undefined,
    )
    .map((option) => ({
      value: String(option.value),
      label: String(option.label),
    }));
};

const buildSelectedOptionCache = (
  selectedValues = [],
  selectedOptions = [],
  existingCache = [],
) => {
  const cacheMap = new Map(
    sanitizeOptionCache(existingCache).map((option) => [
      String(option.value),
      option,
    ]),
  );

  sanitizeOptionCache(selectedOptions).forEach((option) => {
    cacheMap.set(String(option.value), option);
  });

  return (Array.isArray(selectedValues) ? selectedValues : [])
    .filter(
      (value) => value !== undefined && value !== null && String(value) !== "",
    )
    .map((value) => {
      const normalizedValue = String(value);

      return (
        cacheMap.get(normalizedValue) || {
          value: normalizedValue,
          label: normalizedValue,
        }
      );
    });
};

const flattenProductTableColumns = (columns = {}) => {
  return PRODUCT_TABLE_COLUMNS.reduce(
    (values, column) => ({
      ...values,
      [`ts_show_${column.key}`]: Boolean(
        columns[column.key] ?? DEFAULT_PRODUCT_TABLE_COLUMNS[column.key],
      ),
    }),
    {},
  );
};

/**
 * Resize column children array when column count changes.
 * Excess column items shift left into the last surviving column.
 */
const resizeColumnsChildren = (currentChildren, newCount) => {
  const current = (currentChildren || [[]]).map((col) => [...(col || [])]);
  const currentCount = current.length;

  if (newCount > currentCount) {
    for (let i = currentCount; i < newCount; i++) {
      current.push([]);
    }
  } else if (newCount < currentCount) {
    for (let i = currentCount - 1; i >= newCount; i--) {
      current[newCount - 1] = [...current[newCount - 1], ...current[i]];
    }
    current.length = newCount;
  }

  return current;
};

/**
 * Resolve the WC section ID from a group element type.
 */
const getWcSectionIdForType = (type) => {
  if (type === "billing_address") return "billing";
  if (type === "shipping_address") return "shipping";
  if (type === ORDER_NOTES_TYPE) return "order";
  return null;
};

/**
 * Get default WC fields for a given group element type from wcDefaults.
 */
const getWcSectionFields = (wcDefaults, type) => {
  const sectionId = getWcSectionIdForType(type);
  if (!sectionId || !wcDefaults?.sections) return [];
  const section = wcDefaults.sections.find((s) => s.id === sectionId);
  return section?.fields || [];
};

/**
 * GroupFieldsConfig — Configure visibility and labels for WC fields
 * inside a group element (billing_address, shipping_address, order_notes).
 */
const GroupFieldsConfig = ({ field, wcDefaults, onSave }) => {
  const wcFields = getWcSectionFields(wcDefaults, field?.type);
  const [fieldsConfig, setFieldsConfig] = useState(
    () => field?.fields_config || {},
  );

  useEffect(() => {
    setFieldsConfig(field?.fields_config || {});
  }, [field?.key]);

  const handleToggle = useCallback(
    (fieldKey) => {
      setFieldsConfig((prev) => {
        const current = prev[fieldKey] || {};
        const updated = {
          ...prev,
          [fieldKey]: {
            ...current,
            hidden: !current.hidden,
          },
        };

        onSave({ ...field, fields_config: updated });
        return updated;
      });
    },
    [field, onSave],
  );

  const handleLabelChange = useCallback(
    (fieldKey, newLabel) => {
      setFieldsConfig((prev) => {
        const current = prev[fieldKey] || {};
        const updated = {
          ...prev,
          [fieldKey]: {
            ...current,
            label: newLabel,
          },
        };

        onSave({ ...field, fields_config: updated });
        return updated;
      });
    },
    [field, onSave],
  );

  if (!wcFields.length) return null;

  return (
    <div className="arraysubs-cb-group-fields">
      <h5 className="arraysubs-cb-group-fields__title">
        {__("Fields", "arraysubs")}
      </h5>
      <p className="arraysubs-cb-group-fields__help">
        {__("Toggle visibility and rename labels for each field.", "arraysubs")}
      </p>
      <div className="arraysubs-cb-group-fields__list">
        {wcFields.map((wcField) => {
          const config = fieldsConfig[wcField.key] || {};
          const isHidden = Boolean(config.hidden);
          const isLocked = LOCKED_FIELDS.includes(wcField.key);
          const displayLabel =
            config.label !== undefined ? config.label : wcField.label || "";

          return (
            <div
              key={wcField.key}
              className={`arraysubs-cb-group-fields__item${
                isHidden ? " arraysubs-cb-group-fields__item--hidden" : ""
              }`}
            >
              <label className="arraysubs-cb-group-fields__toggle">
                <input
                  type="checkbox"
                  checked={!isHidden}
                  onChange={() => handleToggle(wcField.key)}
                  disabled={isLocked}
                />
                {isLocked && <Lock size={12} />}
              </label>
              <span className="arraysubs-cb-group-fields__key">
                {wcField.key}
              </span>
              <input
                type="text"
                className="arraysubs-cb-group-fields__label-input"
                value={displayLabel}
                onChange={(e) => handleLabelChange(wcField.key, e.target.value)}
                disabled={isHidden}
                placeholder={wcField.label}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

const FieldSettingsPanel = ({
  field,
  allFields = [],
  onSave,
  onClose,
  wcDefaults,
}) => {
  const [form] = Form.useForm();
  const [fieldType, setFieldType] = useState(field?.type || "text");
  const lastAutoKeyRef = useRef("");
  const autoSaveTimerRef = useRef(null);
  const activeFieldKeyRef = useRef(null);
  const fieldRef = useRef(field);
  fieldRef.current = field;
  const locked = isLockedField(field?.key);
  const builtin = isBuiltinField(field);
  const layout = isLayoutField(fieldType);
  const isCheckoutCouponNotices = fieldType === CHECKOUT_COUPON_NOTICES_TYPE;
  const isOrderInfoPayment = fieldType === ORDER_INFO_PAYMENT_TYPE;
  const isOrderNotes = fieldType === ORDER_NOTES_TYPE;
  const isSection = fieldType === "section";
  const addressField = isAddressField(fieldType);
  const isProductTable = fieldType === "product_table";
  const { env } = window.arraySubs || {};
  const [productTableProductOptions, setProductTableProductOptions] = useState(
    [],
  );
  const [productTableCategoryOptions, setProductTableCategoryOptions] =
    useState([]);

  useEffect(() => {
    if (field) {
      // Only reset form when switching to a different field.
      // Auto-save updates the same field — skip to avoid feedback loop.
      if (activeFieldKeyRef.current === field.key) return;
      activeFieldKeyRef.current = field.key;

      setFieldType(field.type || "text");

      const addressCountries = Array.isArray(field.address_countries)
        ? field.address_countries.join(",")
        : "";

      const typeSettings = field.type_settings || {};
      const productTableColumnValues =
        field.type === "product_table"
          ? flattenProductTableColumns(typeSettings.columns || {})
          : {};

      setProductTableProductOptions(
        sanitizeOptionCache(typeSettings.product_options_data || []),
      );
      setProductTableCategoryOptions(
        sanitizeOptionCache(typeSettings.category_options_data || []),
      );

      const rawKey = (field.key || "").replace(/^_arraysubs_cf_/, "");
      lastAutoKeyRef.current = rawKey;

      form.setFieldsValue({
        label: field.label || "",
        key: field.key || "",
        type: field.type || "text",
        placeholder: field.placeholder || "",
        is_required: field.is_required || false,
        help_text: field.help_text || "",
        default_value: field.default_value || "",
        css_class: field.css_class || "",
        columns: field.columns || 1,
        ...(addressCountries ? { ts_address_countries: addressCountries } : {}),
        ...flattenTypeSettings(field.type_settings),
        ...productTableColumnValues,
        ...flattenVisibilityRules(field.visibility_rules),
      });
    }
  }, [field, form]);

  useEffect(() => {
    return () => {
      if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
    };
  }, []);

  const flattenTypeSettings = (settings) => {
    if (!settings) return {};
    const flat = {};
    Object.entries(settings).forEach(([k, v]) => {
      flat[`ts_${k}`] = v;
    });
    return flat;
  };

  const flattenVisibilityRules = (rules) => {
    if (!rules || !rules.length) return {};
    return { visibility_rules: rules };
  };

  const handleLabelChange = () => {
    if (builtin || isOrderInfoPayment || isOrderNotes) return;
    const label = form.getFieldValue("label");
    const currentKey = form.getFieldValue("key") || "";
    const rawKey = currentKey.replace(/^_arraysubs_cf_/, "");

    if (!rawKey || rawKey === lastAutoKeyRef.current) {
      const existingKeys = allFields
        .filter((f) => f.key !== field?.key)
        .map((f) => f.key.replace(/^_arraysubs_cf_/, ""));
      const newKey = generateUniqueFieldKey(label, existingKeys);
      form.setFieldsValue({ key: `_arraysubs_cf_${newKey}` });
      lastAutoKeyRef.current = newKey;
    }
  };

  const handleFinish = (values) => {
    const currentField = fieldRef.current || field;
    const typeSettings = {};
    const cleaned = {};

    Object.entries(values).forEach(([k, v]) => {
      if (k.startsWith("ts_")) {
        typeSettings[k.substring(3)] = v;
      } else {
        cleaned[k] = v;
      }
    });

    const normalizedTypeSettings = { ...typeSettings };
    const normalizedOptions =
      normalizedTypeSettings.options || currentField?.options;

    if (
      Object.prototype.hasOwnProperty.call(normalizedTypeSettings, "multiple")
    ) {
      normalizedTypeSettings.multi = normalizedTypeSettings.multiple;
      delete normalizedTypeSettings.multiple;
    }

    if (
      typeof normalizedTypeSettings.allowed_types === "string" &&
      normalizedTypeSettings.allowed_types.trim()
    ) {
      normalizedTypeSettings.allowed_types =
        normalizedTypeSettings.allowed_types
          .split(",")
          .map((item) => item.trim())
          .filter(Boolean);
    }

    const normalizedContent = normalizedTypeSettings.content;
    const normalizedHeadingLevel = normalizedTypeSettings.heading_level;
    const normalizedAlertType = normalizedTypeSettings.alert_type;
    const normalizedDefaultColor = normalizedTypeSettings.default_color;

    [
      "content",
      "heading_level",
      "alert_type",
      "default_color",
      "options",
    ].forEach((key) => {
      if (Object.prototype.hasOwnProperty.call(normalizedTypeSettings, key)) {
        delete normalizedTypeSettings[key];
      }
    });

    const updated = {
      ...currentField,
      ...cleaned,
      type: fieldType,
      type_settings: normalizedTypeSettings,
      is_custom: !builtin,
      options: Array.isArray(normalizedOptions)
        ? normalizedOptions.map((opt) => ({
            ...opt,
            image: opt?.image || opt?.image_url || "",
          }))
        : undefined,
      content: normalizedContent ?? currentField?.content,
      heading_level: normalizedHeadingLevel ?? currentField?.heading_level,
      alert_type: normalizedAlertType ?? currentField?.alert_type,
      is_builtin: builtin || false,
    };

    if (isSection) {
      const newCols = Math.max(
        1,
        Math.min(3, parseInt(cleaned.columns || 1, 10)),
      );
      updated.columns = newCols;
      updated.children = resizeColumnsChildren(
        currentField.children || [[]],
        newCols,
      );
    }

    if (isOrderInfoPayment) {
      Object.assign(
        updated,
        createOrderInfoPaymentElement({
          css_class: cleaned.css_class || currentField?.css_class || "",
        }),
      );
      updated.key = ORDER_INFO_PAYMENT_KEY;
      updated.type_settings = {};
      updated.placeholder = "";
      updated.help_text = "";
      updated.default_value = "";
      updated.is_required = false;
    }

    if (isCheckoutCouponNotices) {
      Object.assign(
        updated,
        createCheckoutCouponNoticesElement({
          css_class: cleaned.css_class || currentField?.css_class || "",
        }),
      );
      updated.key = CHECKOUT_COUPON_NOTICES_KEY;
      updated.type_settings = {};
      updated.placeholder = "";
      updated.help_text = "";
      updated.default_value = "";
      updated.is_required = false;
    }

    if (isOrderNotes) {
      Object.assign(
        updated,
        createOrderNotesElement({
          css_class: cleaned.css_class || currentField?.css_class || "",
        }),
      );
      updated.key = ORDER_NOTES_KEY;
      updated.type_settings = {};
      updated.placeholder = "";
      updated.help_text = "";
      updated.default_value = "";
      updated.is_required = false;
      updated.fields_config = currentField?.fields_config || {};
    }

    if (addressField) {
      const countriesStr = normalizedTypeSettings.address_countries || "";
      updated.address_countries =
        typeof countriesStr === "string" && countriesStr.trim()
          ? countriesStr
              .split(",")
              .map((c) => c.trim().toUpperCase())
              .filter(Boolean)
          : [];
      delete updated.type_settings.address_countries;
      updated.fields_config = currentField?.fields_config || {};
    }

    if (isProductTable) {
      const normalizedColumns = PRODUCT_TABLE_COLUMNS.reduce(
        (columns, column) => ({
          ...columns,
          [column.key]: Boolean(
            normalizedTypeSettings[`show_${column.key}`] ??
              DEFAULT_PRODUCT_TABLE_COLUMNS[column.key],
          ),
        }),
        {},
      );

      PRODUCT_TABLE_COLUMNS.forEach((column) => {
        delete normalizedTypeSettings[`show_${column.key}`];
      });

      normalizedTypeSettings.product_ids = Array.isArray(
        normalizedTypeSettings.product_ids,
      )
        ? normalizedTypeSettings.product_ids.map((value) => String(value))
        : [];
      normalizedTypeSettings.category_ids = Array.isArray(
        normalizedTypeSettings.category_ids,
      )
        ? normalizedTypeSettings.category_ids.map((value) => String(value))
        : [];
      normalizedTypeSettings.columns = normalizedColumns;
      normalizedTypeSettings.product_options_data = buildSelectedOptionCache(
        normalizedTypeSettings.product_ids,
        productTableProductOptions,
        currentField?.type_settings?.product_options_data || [],
      );
      normalizedTypeSettings.category_options_data = buildSelectedOptionCache(
        normalizedTypeSettings.category_ids,
        productTableCategoryOptions,
        currentField?.type_settings?.category_options_data || [],
      );
    }

    if (!updated.default_value && normalizedDefaultColor) {
      updated.default_value = normalizedDefaultColor;
    }

    onSave(updated);
  };

  const scheduleAutoSave = () => {
    if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
    autoSaveTimerRef.current = setTimeout(() => {
      form
        .validateFields()
        .then((values) => {
          // Use latest field ref so section children stay current.
          handleFinish(values);
        })
        .catch(() => {});
    }, 400);
  };

  /* ── Form definition ──────────────────────────────────── */

  const baseFields = [
    {
      field: "Text",
      name: "label",
      label: __("Label", "arraysubs"),
      rules: [
        { required: true, message: __("Label is required", "arraysubs") },
      ],
      onChange: handleLabelChange,
      ...(isCheckoutCouponNotices || isOrderInfoPayment || isOrderNotes
        ? { disabled: true }
        : {}),
    },
    {
      field: "Text",
      name: "key",
      label: __("Key", "arraysubs"),
      rules: [
        { required: true, message: __("Key is required", "arraysubs") },
        {
          pattern: /^[a-z0-9_]+$/,
          message: __("Lowercase, numbers, underscores only", "arraysubs"),
        },
      ],
      ...(builtin ||
      isCheckoutCouponNotices ||
      isOrderInfoPayment ||
      isOrderNotes
        ? { disabled: true }
        : {}),
    },
  ];

  if (!layout && !isSection && !addressField) {
    baseFields.push(
      {
        field: "Text",
        name: "placeholder",
        label: __("Placeholder", "arraysubs"),
      },
      {
        field: "Switch",
        name: "is_required",
        label: __("Required", "arraysubs"),
        ...(locked ? { disabled: true } : {}),
      },
      { field: "Text", name: "help_text", label: __("Help Text", "arraysubs") },
      {
        field: "Text",
        name: "default_value",
        label: __("Default Value", "arraysubs"),
      },
    );
  }

  if (isSection) {
    baseFields.push({
      field: "Select",
      name: "columns",
      label: __("Columns", "arraysubs"),
      data: SECTION_COLUMN_OPTIONS,
    });
  }

  baseFields.push({
    field: "Text",
    name: "css_class",
    label: __("CSS Class", "arraysubs"),
  });

  const typeFields = getTypeSpecificFields(fieldType, {
    env,
    productOptions: productTableProductOptions,
    categoryOptions: productTableCategoryOptions,
    onProductsChange: (values, meta = {}) => {
      setProductTableProductOptions((currentOptions) =>
        buildSelectedOptionCache(
          values,
          meta.selectedOptions || [],
          currentOptions,
        ),
      );
    },
    onCategoriesChange: (values, meta = {}) => {
      setProductTableCategoryOptions((currentOptions) =>
        buildSelectedOptionCache(
          values,
          meta.selectedOptions || [],
          currentOptions,
        ),
      );
    },
  });
  const visibilityFields = getVisibilityFields(allFields, field?.key);

  const formItems = [...baseFields];

  if (typeFields.length > 0) {
    formItems.push(
      { field: "Title", text: __("Type Settings", "arraysubs"), heading: 5 },
      ...typeFields,
    );
  }

  if (!layout && !isSection && visibilityFields.length > 0) {
    formItems.push(
      { field: "Title", text: __("Visibility", "arraysubs"), heading: 5 },
      ...visibilityFields,
    );
  }

  return (
    <div className="arraysubs-cb-settings-panel">
      <div className="arraysubs-cb-settings-panel__header">
        <button
          type="button"
          className="arraysubs-cb-settings-panel__back"
          onClick={onClose}
        >
          <ArrowLeft size={16} />
          {__("Back", "arraysubs")}
        </button>
        <h4 className="arraysubs-cb-settings-panel__title">
          {__("Edit Element", "arraysubs")}
        </h4>
      </div>

      <div className="arraysubs-cb-settings-panel__body">
        <Form
          form={form}
          onFinish={handleFinish}
          onValuesChange={scheduleAutoSave}
          layout="vertical"
          initialValues={{
            is_required: false,
            type: field?.type || "text",
            columns: field?.columns || 1,
          }}
        >
          <FormBuilder formItems={formItems} form={form} />
        </Form>

        {(addressField || isOrderNotes) && (
          <GroupFieldsConfig
            field={field}
            wcDefaults={wcDefaults}
            onSave={onSave}
          />
        )}
      </div>
    </div>
  );
};

/* ── Type-specific settings ─────────────────────────────── */

function getTypeSpecificFields(type, context = {}) {
  switch (type) {
    case "number":
      return [
        { field: "Number", name: "ts_min", label: __("Min", "arraysubs") },
        { field: "Number", name: "ts_max", label: __("Max", "arraysubs") },
        {
          field: "Number",
          name: "ts_step",
          label: __("Step", "arraysubs"),
          min: 0.01,
        },
      ];

    case "select":
    case "multi_select":
      return [
        {
          field: "Repeater",
          name: "ts_options",
          label: __("Options", "arraysubs"),
          addButtonText: __("Add Option", "arraysubs"),
          collapsible: false,
          items: [
            {
              field: "Text",
              name: "value",
              label: __("Value", "arraysubs"),
              rules: [{ required: true }],
            },
            {
              field: "Text",
              name: "label",
              label: __("Label", "arraysubs"),
              rules: [{ required: true }],
            },
          ],
        },
      ];

    case "image_select":
      return [
        {
          field: "Switch",
          name: "ts_multiple",
          label: __("Allow Multiple", "arraysubs"),
        },
        {
          field: "Repeater",
          name: "ts_options",
          label: __("Options", "arraysubs"),
          addButtonText: __("Add Option", "arraysubs"),
          items: [
            {
              field: "Text",
              name: "value",
              label: __("Value", "arraysubs"),
              rules: [{ required: true }],
            },
            {
              field: "Text",
              name: "label",
              label: __("Label", "arraysubs"),
              rules: [{ required: true }],
            },
            {
              field: "Text",
              name: "image_url",
              label: __("Image URL", "arraysubs"),
              rules: [{ required: true }],
            },
          ],
        },
      ];

    case "grid_select":
      return [
        {
          field: "Switch",
          name: "ts_multiple",
          label: __("Allow Multiple", "arraysubs"),
        },
        {
          field: "Select",
          name: "ts_columns",
          label: __("Columns", "arraysubs"),
          data: [
            { value: 2, label: "2" },
            { value: 3, label: "3" },
            { value: 4, label: "4" },
          ],
        },
        {
          field: "Repeater",
          name: "ts_options",
          label: __("Options", "arraysubs"),
          addButtonText: __("Add Option", "arraysubs"),
          items: [
            {
              field: "Text",
              name: "value",
              label: __("Value", "arraysubs"),
              rules: [{ required: true }],
            },
            {
              field: "Text",
              name: "label",
              label: __("Label", "arraysubs"),
              rules: [{ required: true }],
            },
            {
              field: "Text",
              name: "description",
              label: __("Description", "arraysubs"),
            },
          ],
        },
      ];

    case "upload":
      return [
        {
          field: "Number",
          name: "ts_max_file_size",
          label: __("Max File Size (MB)", "arraysubs"),
          min: 1,
          max: 100,
        },
        {
          field: "Number",
          name: "ts_max_file_count",
          label: __("Max Files", "arraysubs"),
          min: 1,
          max: 20,
        },
        {
          field: "Text",
          name: "ts_allowed_types",
          label: __("Allowed Types", "arraysubs"),
          help: __("Comma-separated, e.g. jpg,png,pdf", "arraysubs"),
        },
      ];

    case "date":
    case "calendar":
      return [
        {
          field: "Text",
          name: "ts_min_date",
          label: __("Min Date", "arraysubs"),
          placeholder: "YYYY-MM-DD",
        },
        {
          field: "Text",
          name: "ts_max_date",
          label: __("Max Date", "arraysubs"),
          placeholder: "YYYY-MM-DD",
        },
      ];

    case "datetime":
      return [
        {
          field: "Text",
          name: "ts_min_date",
          label: __("Min Date", "arraysubs"),
          placeholder: "YYYY-MM-DD",
        },
        {
          field: "Text",
          name: "ts_max_date",
          label: __("Max Date", "arraysubs"),
          placeholder: "YYYY-MM-DD",
        },
        {
          field: "Number",
          name: "ts_time_step",
          label: __("Time Step (min)", "arraysubs"),
          min: 1,
          max: 60,
        },
      ];

    case "time":
      return [
        {
          field: "Select",
          name: "ts_format",
          label: __("Format", "arraysubs"),
          data: [
            { value: "12h", label: __("12 Hour", "arraysubs") },
            { value: "24h", label: __("24 Hour", "arraysubs") },
          ],
        },
      ];

    case "date_range":
      return [
        {
          field: "Text",
          name: "ts_min_date",
          label: __("Min Date", "arraysubs"),
          placeholder: "YYYY-MM-DD",
        },
        {
          field: "Text",
          name: "ts_max_date",
          label: __("Max Date", "arraysubs"),
          placeholder: "YYYY-MM-DD",
        },
        {
          field: "Number",
          name: "ts_max_span",
          label: __("Max Range (days)", "arraysubs"),
          min: 1,
        },
      ];

    case "heading":
      return [
        {
          field: "Select",
          name: "ts_heading_level",
          label: __("Heading Level", "arraysubs"),
          data: [
            { value: "h2", label: "H2" },
            { value: "h3", label: "H3" },
            { value: "h4", label: "H4" },
          ],
        },
      ];

    case "paragraph":
      return [
        {
          field: "TextArea",
          name: "ts_content",
          label: __("Content", "arraysubs"),
          rows: 4,
        },
      ];

    case "alert":
      return [
        {
          field: "Select",
          name: "ts_alert_type",
          label: __("Alert Type", "arraysubs"),
          data: [
            { value: "info", label: __("Info", "arraysubs") },
            { value: "success", label: __("Success", "arraysubs") },
            { value: "warning", label: __("Warning", "arraysubs") },
            { value: "error", label: __("Error", "arraysubs") },
          ],
        },
        {
          field: "TextArea",
          name: "ts_content",
          label: __("Message", "arraysubs"),
          rows: 3,
        },
      ];

    case "color_picker":
      return [
        {
          field: "Text",
          name: "ts_default_color",
          label: __("Default Color", "arraysubs"),
          placeholder: "#000000",
        },
      ];

    case "textarea":
      return [
        {
          field: "Number",
          name: "ts_rows",
          label: __("Rows", "arraysubs"),
          min: 2,
          max: 20,
        },
        {
          field: "Number",
          name: "ts_max_length",
          label: __("Max Length", "arraysubs"),
          min: 0,
        },
      ];

    case CHECKOUT_COUPON_NOTICES_TYPE:
    case ORDER_INFO_PAYMENT_TYPE:
    case ORDER_NOTES_TYPE:
    case "section":
      return [];

    case "billing_address":
    case "shipping_address":
      return [
        {
          field: "TextArea",
          name: "ts_address_countries",
          label: __("Limit Countries", "arraysubs"),
          help: __(
            "Comma-separated ISO country codes (e.g. US,CA,GB). Leave empty for all countries.",
            "arraysubs",
          ),
          rows: 2,
          placeholder: "US,CA,GB",
        },
      ];

    case "product_table": {
      const productSearchUrl = buildUrl(
        `${context?.env?.apiBaseUrl || ""}arraysubs/v1/select-options`,
      );

      return [
        {
          field: "Select",
          name: "ts_product_ids",
          label: __("Products", "arraysubs"),
          multiple: true,
          data: context?.productOptions || [],
          placeholder: __("Search products to include...", "arraysubs"),
          api: {
            url: productSearchUrl,
            params: {
              dataType: "posttype",
              source: "product",
              orderBy: "title",
              order: "asc",
            },
            searchOnly: true,
            perPage: 20,
          },
          onChange: context?.onProductsChange,
          help: __(
            "Search and add individual products one by one. Selected products are merged with category products on the frontend.",
            "arraysubs",
          ),
        },
        {
          field: "Select",
          name: "ts_category_ids",
          label: __("Product Categories", "arraysubs"),
          multiple: true,
          data: context?.categoryOptions || [],
          placeholder: __("Search product categories...", "arraysubs"),
          api: {
            url: productSearchUrl,
            params: {
              dataType: "taxonomy",
              source: "product_cat",
              orderBy: "title",
              order: "asc",
            },
            searchOnly: true,
            perPage: 20,
          },
          onChange: context?.onCategoriesChange,
          help: __(
            "All published products from these categories are added to the table. Duplicate products are shown only once.",
            "arraysubs",
          ),
        },
        {
          field: "Title",
          text: __("Visible Columns", "arraysubs"),
          heading: 6,
          subText: __(
            "Turn on the product details you want to show in the checkout table. The Actions column is always shown.",
            "arraysubs",
          ),
        },
        ...PRODUCT_TABLE_COLUMNS.map((column) => ({
          field: "Switch",
          name: `ts_show_${column.key}`,
          label: column.label,
        })),
      ];
    }

    default:
      return [];
  }
}

function getVisibilityFields(allFields, currentKey) {
  const otherFields = allFields.filter(
    (f) => f.key !== currentKey && !isLayoutField(f.type),
  );

  if (!otherFields.length) return [];

  const fieldOptions = otherFields.map((f) => ({
    value: f.key,
    label: f.label || f.key,
  }));

  return [
    {
      field: "Repeater",
      name: "visibility_rules",
      label: __("Show When", "arraysubs"),
      addButtonText: __("Add Condition", "arraysubs"),
      collapsible: false,
      items: [
        {
          field: "Select",
          name: "field",
          label: __("Field", "arraysubs"),
          data: fieldOptions,
          rules: [{ required: true }],
        },
        {
          field: "Select",
          name: "operator",
          label: __("Operator", "arraysubs"),
          data: [
            { value: "is", label: __("Is", "arraysubs") },
            { value: "is_not", label: __("Is Not", "arraysubs") },
            { value: "contains", label: __("Contains", "arraysubs") },
            { value: "is_empty", label: __("Is Empty", "arraysubs") },
            { value: "is_not_empty", label: __("Is Not Empty", "arraysubs") },
          ],
        },
        { field: "Text", name: "value", label: __("Value", "arraysubs") },
        {
          field: "Select",
          name: "logic",
          label: __("Logic", "arraysubs"),
          data: [
            { value: "AND", label: __("AND", "arraysubs") },
            { value: "OR", label: __("OR", "arraysubs") },
          ],
        },
      ],
    },
  ];
}

export default FieldSettingsPanel;