// ===== Settings Tab (Hierarchy → Settings) =====
// Mirrors the Settings step from Add Client wizard, with view/edit modes.
const { useState: useStateST, useRef: useRefST, useEffect: useEffectST } = React;

const ST_NumberStepper = ({ value, onChange, disabled, min = 0, max = 9999 }) => {
  const set = (v) => onChange(Math.max(min, Math.min(max, v)));
  return (
    <div className="ac-number">
      <input
        type="number"
        className="ac-input"
        value={value}
        disabled={disabled}
        onChange={(e) => set(Number(e.target.value) || 0)} />
      <div className="ac-number-arrows">
        <button type="button" disabled={disabled} onClick={() => set(value + 1)} aria-label="Increase">
          <svg width="9" height="6" viewBox="0 0 12 8" fill="none"><path d="M1 7l5-5 5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </button>
        <button type="button" disabled={disabled} onClick={() => set(value - 1)} aria-label="Decrease">
          <svg width="9" height="6" viewBox="0 0 12 8" fill="none"><path d="M1 1l5 5 5-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </button>
      </div>
    </div>);
};

const SettingsTab = ({ node, t, pushToast, isRoot = false }) => {
  const [mode, setMode] = useStateST('view'); // 'view' | 'edit'
  const [data, setData] = useStateST({
    security: 'normal',
    allowedIps: ['192.168.1.10', '10.0.0.5'],
    currentNormal: 0,  maxNormal: 20,
    currentSystem: 5,  maxSystem: 5,
    currentNode: 0,    maxNode: 2
  });

  // IP add: in edit mode, click button -> input shows; press Enter -> add chip + hide input
  const [ipInputOpen, setIpInputOpen] = useStateST(false);
  const [pendingIp, setPendingIp] = useStateST('');
  const ipInputRef = useRefST(null);

  useEffectST(() => {
    if (ipInputOpen && ipInputRef.current) ipInputRef.current.focus();
  }, [ipInputOpen]);

  // Snapshot of original data when entering edit mode (so Cancel can revert)
  const snapshotRef = useRefST(null);

  const onChange = (key, val) => setData((d) => ({ ...d, [key]: val }));

  const removeIp = (ip) => onChange('allowedIps', data.allowedIps.filter((x) => x !== ip));
  const submitIp = () => {
    const v = pendingIp.trim();
    if (!v) { setIpInputOpen(false); setPendingIp(''); return; }
    if (!data.allowedIps.includes(v)) {
      onChange('allowedIps', [...data.allowedIps, v]);
    }
    setPendingIp('');
    setIpInputOpen(false);
  };

  const enterEdit = () => {
    snapshotRef.current = JSON.parse(JSON.stringify(data));
    setMode('edit');
  };
  const cancelEdit = () => {
    if (snapshotRef.current) setData(snapshotRef.current);
    setIpInputOpen(false);
    setPendingIp('');
    setMode('view');
  };
  const saveEdit = () => {
    setIpInputOpen(false);
    setPendingIp('');
    setMode('view');
    pushToast && pushToast('Settings updated successfully');
  };

  const isView = mode === 'view';
  const disabled = isView;

  // Portal action buttons into the page-level node-header slot, so they sit on
  // the same row as the "Aramco" title. The slot div is rendered by hierarchy.jsx
  // just before <SettingsTab> is mounted; we wait for it to exist then portal in.
  const [actionsTarget, setActionsTarget] = useStateST(null);
  useEffectST(() => {
    const find = () => {
      const el = document.getElementById('settings-actions-slot');
      if (el) setActionsTarget(el);
    };
    find();
    if (!actionsTarget) {
      const id = setTimeout(find, 0);
      return () => clearTimeout(id);
    }
  }, []);

  const actionsNode = (
    <div className="settings-tab-actions">
      {isView ?
        <button className="btn btn-primary" type="button" onClick={enterEdit}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
          </svg>
          Edit
        </button> :
        <>
          <button className="btn btn-secondary" type="button" onClick={cancelEdit}>Cancel</button>
          <button className="btn btn-primary" type="button" onClick={saveEdit}>Save Changes</button>
        </>
      }
    </div>
  );

  return (
    <div className="settings-tab-wrap">
      {actionsTarget ? ReactDOM.createPortal(actionsNode, actionsTarget) : null}

      <div className={`settings-tab-body ${isView ? 'is-view' : 'is-edit'}`}>
        <div className={`ac-settings-grid ${isRoot ? 'is-root-only' : ''}`}>
          {/* LEFT — security + ips */}
          <div className="ac-settings-left">
            <div className="ac-block-title">Password Security Level</div>
            <div className="ac-radio-cards">
              <label className={`ac-radio-card ${data.security === 'normal' ? 'selected' : ''} ${disabled ? 'is-disabled' : ''}`}>
                <input
                  type="radio" name="st-sec"
                  checked={data.security === 'normal'}
                  disabled={disabled}
                  onChange={() => onChange('security', 'normal')} />
                <span className="ac-radio-mark"></span>
                <div className="ac-radio-text">
                  <strong>Normal</strong>
                  <em>Username, Password, OTP</em>
                </div>
              </label>
              <label className={`ac-radio-card ${data.security === 'advanced' ? 'selected' : ''} ${disabled ? 'is-disabled' : ''}`}>
                <input
                  type="radio" name="st-sec"
                  checked={data.security === 'advanced'}
                  disabled={disabled}
                  onChange={() => onChange('security', 'advanced')} />
                <span className="ac-radio-mark"></span>
                <div className="ac-radio-text">
                  <strong>Advanced</strong>
                  <em>Comply with NCA regulations, <a href="#" onClick={(e) => e.preventDefault()}>press here for more details.</a></em>
                </div>
              </label>
            </div>

            <div className="ac-block-title">Allowed IPs</div>
            <div className="ac-ip-row">
              {/* Add-IP button: hidden when input is open in edit mode */}
              {!isView && !ipInputOpen &&
                <button
                  className="ac-ip-add"
                  type="button"
                  onClick={() => setIpInputOpen(true)}>
                  IP Address
                </button>
              }
              {data.allowedIps.map((ip) =>
                <span key={ip} className="ac-ip-chip">
                  <span>{ip}</span>
                  {!isView &&
                    <button type="button" onClick={() => removeIp(ip)} aria-label="Remove">
                      <IcClose size={10} stroke={2.4} />
                    </button>
                  }
                </span>
              )}
              {isView && data.allowedIps.length === 0 &&
                <span className="settings-empty-hint">No IPs configured</span>
              }
            </div>
            {!isView && ipInputOpen &&
              <input
                ref={ipInputRef}
                className="ac-input ac-ip-input"
                placeholder="Enter IP Address (IPv4 or IPv6) and press Enter"
                value={pendingIp}
                onChange={(e) => setPendingIp(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') { e.preventDefault(); submitIp(); }
                  else if (e.key === 'Escape') { setIpInputOpen(false); setPendingIp(''); }
                }}
                onBlur={() => { if (!pendingIp.trim()) setIpInputOpen(false); }} />
            }
            <div className="ac-hint-text">* Restrict platform access and limit it from these IPs only</div>
          </div>

          {/* RIGHT — limitations */}
          {!isRoot && (
          <aside className="ac-settings-right">
            <div className="ac-side-head">
              <span className="ac-side-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="4" y="11" width="16" height="10" rx="2" />
                  <path d="M8 11V8a4 4 0 0 1 8 0v3" />
                  <circle cx="12" cy="16" r="1.2" fill="currentColor" />
                </svg>
              </span>
              <span>Account Limitations</span>
            </div>

            {isView ? (
              <>
                <div className="limit-row">
                  <div className="limit-row-title">Max Normal User Limit</div>
                  <ST_NumberStepper value={data.maxNormal} disabled onChange={() => {}} />
                </div>
                <div className="limit-row">
                  <div className="limit-row-title">Max System User Limit</div>
                  <ST_NumberStepper value={data.maxSystem} disabled onChange={() => {}} />
                </div>
                <div className="limit-row">
                  <div className="limit-row-title">Max Node Level</div>
                  <ST_NumberStepper value={data.maxNode} disabled onChange={() => {}} />
                </div>
              </>
            ) : (
              <>
                <div className="limit-row">
                  <div className="limit-row-title">Max normal user limit</div>
                  <div className="limit-row-cols">
                    <div className="limit-col">
                      <span className="limit-col-label">Current existing</span>
                      <input className="ac-input limit-current" value={data.currentNormal} disabled readOnly />
                    </div>
                    <div className="limit-col">
                      <span className="limit-col-label">Max allowed</span>
                      <ST_NumberStepper value={data.maxNormal} onChange={(v) => onChange('maxNormal', v)} />
                    </div>
                  </div>
                </div>

                <div className="limit-row">
                  <div className="limit-row-title">Max System User Limit</div>
                  <div className="limit-row-cols">
                    <div className="limit-col">
                      <span className="limit-col-label">Current existing</span>
                      <input className="ac-input limit-current" value={data.currentSystem} disabled readOnly />
                    </div>
                    <div className="limit-col">
                      <span className="limit-col-label">Max allowed</span>
                      <ST_NumberStepper value={data.maxSystem} onChange={(v) => onChange('maxSystem', v)} />
                    </div>
                  </div>
                </div>

                <div className="limit-row">
                  <div className="limit-row-title">Max Node Level</div>
                  <div className="limit-row-cols">
                    <div className="limit-col">
                      <span className="limit-col-label">Current existing</span>
                      <input className="ac-input limit-current" value={data.currentNode} disabled readOnly />
                    </div>
                    <div className="limit-col">
                      <span className="limit-col-label">Max allowed</span>
                      <ST_NumberStepper value={data.maxNode} onChange={(v) => onChange('maxNode', v)} />
                    </div>
                  </div>
                </div>
              </>
            )}
          </aside>
          )}
        </div>
      </div>
    </div>);
};

Object.assign(window, { SettingsTab });