// ====== Promotions page ======
const ORDER_ITEM_PRICING_MODES = [
  { value: "free", label: "Free" },
  { value: "fixed_price", label: "Fixed price" },
  { value: "fixed_discount", label: "Fixed discount" },
  { value: "percent_discount", label: "Percent discount" },
  { value: "normal", label: "Regular price" },
];

const ORDER_ITEM_STOCK_EFFECTS = [
  { value: "deduct", label: "Deducts stock" },
  { value: "none", label: "No stock change" },
  { value: "restock", label: "Restocks" },
];

const orderItemTypeActive = (type) => type.is_active !== false && type.isActive !== false;
const orderItemTypeDefault = (type) => type.is_default === true || type.isDefault === true;

const orderItemTypePricingLabel = (type) => {
  const mode = type.pricing_mode || type.pricingMode || "normal";
  const value = Number(type.adjustment_value ?? type.adjustmentValue ?? 0);
  if (mode === "normal") return "Regular price";
  if (mode === "free") return "Free";
  if (mode === "fixed_price") return `$${value.toFixed(2)} fixed price`;
  if (mode === "fixed_discount") return `$${value.toFixed(2)} off`;
  if (mode === "percent_discount") return `${value.toFixed(value % 1 ? 2 : 0)}% off`;
  return "Custom price";
};

const orderItemTypeStockLabel = (type) => {
  const effect = type.stock_effect || type.stockEffect || "deduct";
  return ORDER_ITEM_STOCK_EFFECTS.find(item => item.value === effect)?.label || "Deducts stock";
};

const OrderItemTypeModal = ({ type, nextSortOrder, onClose, onSave, onDelete }) => {
  const isDefault = orderItemTypeDefault(type || {});
  const isNew = !type;
  const [draft, setDraft] = React.useState(() => ({
    id: type?.id || null,
    name: type?.name || "",
    pricing_mode: type?.pricing_mode || type?.pricingMode || "free",
    adjustment_value: Number(type?.adjustment_value ?? type?.adjustmentValue ?? 0),
    stock_effect: type?.stock_effect || type?.stockEffect || "deduct",
    is_active: orderItemTypeActive(type || { is_active: true }),
    is_default: isDefault,
    sort_order: Number(type?.sort_order ?? type?.sortOrder ?? nextSortOrder ?? 0),
  }));
  const [saving, setSaving] = React.useState(false);
  const [confirmDelete, setConfirmDelete] = React.useState(false);
  const pricingMode = isDefault ? "normal" : draft.pricing_mode;
  const needsValue = ["fixed_price", "fixed_discount", "percent_discount"].includes(pricingMode);
  const set = (patch) => setDraft(prev => ({ ...prev, ...patch }));
  const save = async () => {
    if (!draft.name.trim()) return;
    setSaving(true);
    try {
      await onSave({
        ...draft,
        name: draft.name.trim(),
        pricing_mode: isDefault ? "normal" : pricingMode,
        adjustment_value: isDefault ? 0 : Number(draft.adjustment_value || 0),
        is_active: isDefault ? true : draft.is_active,
      });
    } finally {
      setSaving(false);
    }
  };

  return (
    <React.Fragment>
      <div className="modal-scrim open" onClick={onClose}>
        <div className="modal promo-type-modal" onClick={e => e.stopPropagation()}>
          <div className="modal-head">
            <div>
              <div style={{ fontFamily: "var(--font-script)", color: "var(--gold-600)", fontSize: 18, lineHeight: 1 }}>
                {isNew ? "New order item type" : "Editing"}
              </div>
              <h2>{draft.name || "Untitled type"}</h2>
              <div className="sub">Store-wide item classification for orders</div>
            </div>
            <button className="icon-btn" onClick={onClose}><Ic name="x" /></button>
          </div>
          <div className="modal-body promo-type-modal-body">
            <div className="field">
              <label>Name</label>
              <input
                value={draft.name}
                disabled={isDefault}
                onChange={e => set({ name: e.target.value })}
                placeholder="e.g. Gift, Staff Drink, Waste"
              />
            </div>
            <div className="field">
              <label>Pricing</label>
              <select
                value={pricingMode}
                disabled={isDefault}
                onChange={e => set({ pricing_mode: e.target.value })}
              >
                {ORDER_ITEM_PRICING_MODES.map(mode => (
                  <option key={mode.value} value={mode.value}>{mode.label}</option>
                ))}
              </select>
            </div>
            {needsValue && !isDefault && (
              <div className="field">
                <label>{pricingMode === "percent_discount" ? "Percent" : "Amount"}</label>
                <input
                  type="number"
                  min="0"
                  step="0.01"
                  value={draft.adjustment_value}
                  onChange={e => set({ adjustment_value: e.target.value })}
                />
              </div>
            )}
            <div className="field">
              <label>Stock effect</label>
              <select value={draft.stock_effect} onChange={e => set({ stock_effect: e.target.value })}>
                {ORDER_ITEM_STOCK_EFFECTS.map(effect => (
                  <option key={effect.value} value={effect.value}>{effect.label}</option>
                ))}
              </select>
            </div>
            {!isDefault && (
              <label className="promo-toggle">
                <input
                  type="checkbox"
                  checked={draft.is_active}
                  onChange={e => set({ is_active: e.target.checked })}
                />
                <span>Active</span>
              </label>
            )}
          </div>
          <div className="modal-foot promo-type-modal-foot">
            {!isNew && !isDefault && !confirmDelete && (
              <button className="btn btn-ghost" style={{ color: "var(--rose-500)", marginRight: "auto" }} onClick={() => setConfirmDelete(true)}>
                Remove
              </button>
            )}
            {!isNew && !isDefault && confirmDelete ? (
              <React.Fragment>
                <span style={{ marginRight: "auto", color: "var(--rose-500)", fontSize: 12.5, fontWeight: 700 }}>
                  Remove this item type?
                </span>
                <button className="btn btn-ghost" onClick={() => setConfirmDelete(false)}>Keep</button>
                <button
                  className="btn btn-ghost"
                  disabled={saving}
                  style={{ color: "var(--rose-500)" }}
                  onClick={async () => {
                    setSaving(true);
                    try {
                      await onDelete(draft);
                    } finally {
                      setSaving(false);
                    }
                  }}
                >
                  {saving ? <span className="btn-spinner" /> : null} Remove
                </button>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
                <button className="btn btn-primary" disabled={saving || !draft.name.trim()} onClick={save}>
                  {saving ? <span className="btn-spinner" /> : <Ic name="check" size={14} />} Save
                </button>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

const Promotions = () => {
  const [types, setTypes] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState("");
  const [modalType, setModalType] = React.useState(null);
  const [modalOpen, setModalOpen] = React.useState(false);

  const loadTypes = React.useCallback(async () => {
    const backend = window.TeaGangBackend;
    if (!backend?.enabled || !backend.fetchOrderItemTypes) {
      setError("Backend is not available.");
      setLoading(false);
      return;
    }
    setLoading(true);
    try {
      const rows = await backend.fetchOrderItemTypes();
      setTypes(rows || []);
      setError("");
    } catch (err) {
      console.warn("Could not load order item types.", err);
      setError(err.message || "Could not load order item types.");
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => {
    loadTypes();
  }, [loadTypes]);

  React.useEffect(() => {
    const backend = window.TeaGangBackend;
    if (!backend?.subscribeToStoreData) return undefined;
    let disposed = false;
    let subscription = null;
    backend.subscribeToStoreData(() => {
      if (!disposed) loadTypes();
    }, ["store_order_item_types"]).then(next => {
      if (disposed) next?.unsubscribe?.();
      else subscription = next;
    }).catch(error => console.warn("Promotion settings realtime unavailable.", error));
    return () => {
      disposed = true;
      subscription?.unsubscribe?.();
    };
  }, [loadTypes]);

  const openNew = () => {
    setModalType(null);
    setModalOpen(true);
  };
  const openEdit = (type) => {
    setModalType(type);
    setModalOpen(true);
  };
  const nextSortOrder = React.useMemo(() => {
    const max = types.reduce((value, type) => Math.max(value, Number(type.sort_order || 0)), 0);
    return max + 10;
  }, [types]);
  const saveType = async (draft) => {
    await window.TeaGangBackend.saveOrderItemType(draft);
    setModalOpen(false);
    setModalType(null);
    await loadTypes();
  };
  const deleteType = async (draft) => {
    await window.TeaGangBackend.deleteOrderItemType(draft.id);
    setModalOpen(false);
    setModalType(null);
    await loadTypes();
  };

  const activeCount = types.filter(orderItemTypeActive).length;
  const nonRegularCount = types.filter(type => !orderItemTypeDefault(type)).length;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Promotions &amp; comps</div>
          <h1 className="page-title">Promotions</h1>
          <div className="page-meta" style={{ marginTop: 8 }}>
            <span className="ornament"></span>
            <span><b>{activeCount}</b> active item types · <b>{nonRegularCount}</b> custom</span>
          </div>
        </div>
        <div className="row" style={{ gap: 10 }}>
          <button className="btn btn-ghost" onClick={loadTypes}><Ic name="refresh" size={14} /> Refresh</button>
          <button className="btn btn-gold" onClick={openNew}><Ic name="plus" /> New item type</button>
        </div>
      </div>

      <div className="promo-layout">
        <section className="card promo-panel">
          <div className="promo-panel-head">
            <div>
              <div className="promo-section-label">Order item types</div>
              <h2>Promotion rules</h2>
            </div>
          </div>
          {loading ? (
            <div className="promo-empty">Loading item types...</div>
          ) : error ? (
            <div className="promo-empty error">{error}</div>
          ) : (
            <div className="promo-type-list">
              {types.map(type => {
                const active = orderItemTypeActive(type);
                const isDefault = orderItemTypeDefault(type);
                return (
                  <button key={type.id} className="promo-type-row" onClick={() => openEdit(type)}>
                    <div className="promo-type-icon"><Ic name="promotions" size={20} /></div>
                    <div className="promo-type-main">
                      <div className="promo-type-name">{type.name}</div>
                      <div className="promo-type-sub">{orderItemTypePricingLabel(type)} · {orderItemTypeStockLabel(type)}</div>
                    </div>
                    <span className={`promo-status ${active ? "active" : "inactive"}`}>{active ? "Active" : "Inactive"}</span>
                    {isDefault && <span className="promo-status default">Default</span>}
                    <Ic name="arrow-right" size={15} />
                  </button>
                );
              })}
            </div>
          )}
        </section>
      </div>

      {modalOpen && (
        <OrderItemTypeModal
          type={modalType}
          nextSortOrder={nextSortOrder}
          onClose={() => { setModalOpen(false); setModalType(null); }}
          onSave={saveType}
          onDelete={deleteType}
        />
      )}
    </div>
  );
};