/* global React, Icons, AZ_DATA */
// Integration picker modal — choose which integration powers a category
// (calendar, sms, crm, phone, pos). Triggered from any scenario row or the
// appointment-management bundle card.

const { useState: useStateIP, useEffect: useEffectIP } = React;

function IntegrationPicker({ category, currentId, onPick, onClose, contextLabel }) {
  const { INTEGRATION_CATALOG, CATEGORY_LABELS } = AZ_DATA;
  const options = INTEGRATION_CATALOG.filter((i) => i.category === category);
  const [selected, setSelected] = useStateIP(currentId || options[0]?.id);

  // Esc to close
  useEffectIP(() => {
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  function confirm() {
    onPick(selected);
    onClose();
  }

  const sel = options.find((o) => o.id === selected);

  return (
    <div className="modal-backdrop integration-modal-backdrop" onClick={onClose}>
      <div className="integration-modal" onClick={(e) => e.stopPropagation()}>
        <div className="integration-modal-head">
          <div className="integration-modal-eyebrow">
            ✦ Pick your integration ✦
          </div>
          <h2 className="integration-modal-title">
            What powers your <em>{CATEGORY_LABELS[category]?.toLowerCase() || category}?</em>
          </h2>
          {contextLabel && (
            <div className="integration-modal-context">
              <Icons.Bolt size={11} />
              Powering <b>{contextLabel}</b>
            </div>
          )}
        </div>

        <div className="integration-modal-list">
          {options.map((o) => (
            <button
              key={o.id}
              className={`integration-option ${selected === o.id ? 'on' : ''}`}
              onClick={() => setSelected(o.id)}
            >
              <div className="integration-option-logo">{o.short}</div>
              <div className="integration-option-body">
                <div className="integration-option-head">
                  <span className="integration-option-name">{o.name}</span>
                  {o.tag && <span className={`integration-option-tag ${o.price === 0 ? 'included' : 'enterprise'}`}>{o.tag}</span>}
                  <span className="integration-option-type">{o.type}</span>
                </div>
                <div className="integration-option-desc">{o.desc}</div>
              </div>
              <div className="integration-option-price">
                {o.price === 0
                  ? <span className="zero">$0</span>
                  : <>+${o.price.toLocaleString()}<span className="suffix">one-time</span></>}
              </div>
              <div className="integration-option-radio">
                {selected === o.id && <Icons.Check size={11} strokeWidth={3} />}
              </div>
            </button>
          ))}
        </div>

        <div className="integration-modal-foot">
          <div className="integration-modal-foot-meta">
            {sel && sel.price === 0
              ? <>No additional charge for {sel.name}.</>
              : sel && <>Choosing {sel.name} adds <b>${sel.price.toLocaleString()}</b> one-time.</>}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-ghost btn-sm" onClick={onClose}>Cancel</button>
            <button className="btn btn-primary btn-sm" onClick={confirm}>
              Use {sel?.name || 'this integration'}
              <Icons.Check size={13} strokeWidth={3} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.IntegrationPicker = IntegrationPicker;