// ===== Paper Spread Settings Page =====
// Admin-only settings for paper spread trading (credit/debit spreads).
// Completely separate from the BUY-only paper-settings page.

function PaperSpreadSettingsPage() {
  const toast = useToast();
  const [settings, setSettings] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [dirty, setDirty] = React.useState(false);

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

  async function load() {
    setLoading(true);
    try {
      const data = await API.get('/api/paper-spread-settings');
      setSettings(data);
      setDirty(false);
    } catch (err) { toast(err.message, 'error'); }
    finally { setLoading(false); }
  }

  function update(field, value) {
    setSettings(prev => ({ ...prev, [field]: value }));
    setDirty(true);
  }

  async function saveAll() {
    if (!settings) return;
    setSaving(true);
    try {
      const data = await API.put('/api/paper-spread-settings', {
        enabled: settings.enabled,
        allowedStrategies: settings.allowedStrategies,
        maxDailyOrders: settings.maxDailyOrders,
        niftyWidthStrikes: settings.niftyWidthStrikes,
        sensexWidthStrikes: settings.sensexWidthStrikes,
        niftyLots: settings.niftyLots,
        sensexLots: settings.sensexLots,
        maxBuyConfidence: settings.maxBuyConfidence,
        minIvRank: settings.minIvRank,
        requireSideways: settings.requireSideways,
        slMultiplier: settings.slMultiplier,
        thetaTargetPct: settings.thetaTargetPct,
        niftyUnderlyingBreachPoints: settings.niftyUnderlyingBreachPoints,
        sensexUnderlyingBreachPoints: settings.sensexUnderlyingBreachPoints,
        newOrderStartTimeIst: settings.newOrderStartTimeIst,
        newOrderStopTimeIst: settings.newOrderStopTimeIst,
        eodCloseTimeIst: settings.eodCloseTimeIst,
        closeAtEndOfDay: settings.closeAtEndOfDay,
        expiryDayCutoffTimeIst: settings.expiryDayCutoffTimeIst,
        expiryDayCloseTimeIst: settings.expiryDayCloseTimeIst,
        enableNifty: settings.enableNifty,
        enableSensex: settings.enableSensex,
        flipCooldownMinutes: settings.flipCooldownMinutes,
        maxConcurrentSpreads: settings.maxConcurrentSpreads,
      });
      setSettings(data);
      setDirty(false);
      toast('Spread settings saved', 'success');
    } catch (err) { toast(err.message, 'error'); }
    finally { setSaving(false); }
  }

  if (loading) return React.createElement(Loading, { text: 'Loading spread settings\u2026' });
  if (!settings) return React.createElement(EmptyState, { title: 'Settings not found' });

  const s = settings;
  const desc = s.descriptions || {};

  // Strategy multi-select builder
  function strategyPicker() {
    const allStrategies = ['CREDIT_SPREAD', 'DEBIT_SPREAD', 'IRON_CONDOR', 'IRON_BUTTERFLY'];
    const labels = { CREDIT_SPREAD: 'Credit Spread', DEBIT_SPREAD: 'Debit Spread', IRON_CONDOR: 'Iron Condor', IRON_BUTTERFLY: 'Iron Butterfly' };
    const selected = (s.allowedStrategies || 'CREDIT_SPREAD').split(',').map(x => x.trim()).filter(Boolean);
    return React.createElement('div', { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
      allStrategies.map(strat => {
        const checked = selected.includes(strat);
        const isOnlyChecked = checked && selected.length === 1;
        return React.createElement('label', {
          key: strat,
          style: {
            padding: '8px 16px', borderRadius: '8px',
            border: checked ? '2px solid #2563eb' : '2px solid #e2e8f0',
            background: checked ? '#eff6ff' : '#fff',
            color: checked ? '#2563eb' : '#64748b',
            fontWeight: checked ? '600' : '400',
            fontSize: '0.85rem',
            cursor: isOnlyChecked ? 'not-allowed' : 'pointer',
            opacity: isOnlyChecked ? 0.7 : 1,
            transition: 'all 0.15s ease',
            display: 'flex', alignItems: 'center', gap: '6px',
            whiteSpace: 'nowrap'
          }
        },
          React.createElement('input', {
            type: 'checkbox', checked,
            disabled: isOnlyChecked,
            style: { accentColor: '#2563eb', cursor: 'inherit' },
            onChange: () => {
              const next = checked ? selected.filter(x => x !== strat) : [...selected, strat];
              if (next.length === 0) return;
              update('allowedStrategies', next.join(','));
            }
          }),
          labels[strat] || strat
        );
      })
    );
  }

  return React.createElement('div', { className: 'page-content' },
    // Header
    React.createElement('div', { className: 'page-header' },
      React.createElement('div', { className: 'flex items-center justify-between' },
        React.createElement('div', null,
          React.createElement('h1', { className: 'page-title' }, '\uD83D\uDCCA Spread Trading Settings'),
          React.createElement('p', { className: 'page-subtitle' }, 'Paper option spread settings (credit spreads, debit spreads, iron condors) \u2014 changes take effect within 60 seconds')
        ),
        dirty && React.createElement('button', {
          className: 'btn btn-primary', onClick: saveAll, disabled: saving
        }, saving ? '\u23F3 Saving\u2026' : '\uD83D\uDCBE Save Changes')
      )
    ),

    // \u2500\u2500 Master Switch \u2500\u2500
    React.createElement('div', { className: 'card mb-4' },
      React.createElement('div', { className: 'settings-section-title' }, 'Spread Trading'),
      React.createElement('div', { className: 'settings-row' },
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { className: 'settings-row-label' }, 'Enabled'),
          React.createElement('div', { className: 'settings-row-sub' }, desc['enabled'] || 'Master on/off switch for paper spread trading.')
        ),
        React.createElement(Toggle, { checked: s.enabled, onChange: v => update('enabled', v) })
      ),
      React.createElement('div', { className: 'settings-row' },
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { className: 'settings-row-label' }, 'Enable NIFTY'),
          React.createElement('div', { className: 'settings-row-sub' }, desc['enableNifty'] || 'Allow spread trading on NIFTY options.')
        ),
        React.createElement(Toggle, { checked: s.enableNifty, onChange: v => update('enableNifty', v) })
      ),
      React.createElement('div', { className: 'settings-row' },
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { className: 'settings-row-label' }, 'Enable SENSEX'),
          React.createElement('div', { className: 'settings-row-sub' }, desc['enableSensex'] || 'Allow spread trading on SENSEX options.')
        ),
        React.createElement(Toggle, { checked: s.enableSensex, onChange: v => update('enableSensex', v) })
      )
    ),

    // \u2500\u2500 Allowed Strategies \u2500\u2500
    React.createElement('div', { className: 'card mb-4' },
      React.createElement('div', { className: 'settings-section-title' }, 'Allowed Strategies'),
      React.createElement('div', { className: 'settings-row' },
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { className: 'settings-row-label' }, 'Strategy Types'),
          React.createElement('div', { className: 'settings-row-sub' }, desc['allowedStrategies'] || 'Select which spread strategies the system can place.')
        ),
        strategyPicker()
      )
    ),

    // \u2500\u2500 Lot Sizing & Spread Width \u2500\u2500
    React.createElement('div', { className: 'card mb-4' },
      React.createElement('div', { className: 'settings-section-title' }, 'Lot Sizing & Spread Width'),
      React.createElement(SliderRow, { label: 'NIFTY Lots', sub: desc['niftyLots'] || '1 lot = 65 qty per leg.',
        value: s.niftyLots, min: 1, max: 10, step: 1,
        format: v => `${Math.round(v)} lot${Math.round(v) > 1 ? 's' : ''} (${Math.round(v) * 65} qty)`,
        onChange: v => update('niftyLots', Math.round(v)) }),
      React.createElement(SliderRow, { label: 'SENSEX Lots', sub: desc['sensexLots'] || '1 lot = 20 qty per leg.',
        value: s.sensexLots, min: 1, max: 10, step: 1,
        format: v => `${Math.round(v)} lot${Math.round(v) > 1 ? 's' : ''} (${Math.round(v) * 20} qty)`,
        onChange: v => update('sensexLots', Math.round(v)) }),
      React.createElement(SliderRow, { label: 'NIFTY Width (strikes)', sub: desc['niftyWidthStrikes'] || 'Distance between sell and hedge strikes for NIFTY. 1 strike = 50 points.',
        value: s.niftyWidthStrikes, min: 1, max: 10, step: 1,
        format: v => `${Math.round(v)} (${Math.round(v) * 50} pts)`,
        onChange: v => update('niftyWidthStrikes', Math.round(v)) }),
      React.createElement(SliderRow, { label: 'SENSEX Width (strikes)', sub: desc['sensexWidthStrikes'] || 'Distance between sell and hedge strikes for SENSEX. 1 strike = 100 points.',
        value: s.sensexWidthStrikes, min: 1, max: 10, step: 1,
        format: v => `${Math.round(v)} (${Math.round(v) * 100} pts)`,
        onChange: v => update('sensexWidthStrikes', Math.round(v)) }),
      React.createElement(SliderRow, { label: 'Max Daily Orders', sub: desc['maxDailyOrders'] || 'Maximum new spread orders per day per index.',
        value: s.maxDailyOrders, min: 1, max: 20, step: 1,
        format: v => String(Math.round(v)),
        onChange: v => update('maxDailyOrders', Math.round(v)) }),
      React.createElement(SliderRow, { label: 'Max Concurrent Spreads', sub: desc['maxConcurrentSpreads'] || 'Maximum open spread positions at any time.',
        value: s.maxConcurrentSpreads, min: 1, max: 10, step: 1,
        format: v => String(Math.round(v)),
        onChange: v => update('maxConcurrentSpreads', Math.round(v)) })
    ),

    // \u2500\u2500 Entry Conditions \u2500\u2500
    React.createElement('div', { className: 'card mb-4' },
      React.createElement('div', { className: 'settings-section-title' }, 'Entry Conditions'),
      React.createElement(SliderRow, { label: 'Max BUY Confidence', sub: desc['maxBuyConfidence'] || 'Only enter spreads when ML BUY confidence is below this threshold (low confidence = sideways/uncertain = good for selling premium).',
        value: s.maxBuyConfidence, min: 0.10, max: 1.00, step: 0.05,
        format: formatPct,
        onChange: v => update('maxBuyConfidence', v) }),
      React.createElement(SliderRow, { label: 'Min IV Rank', sub: desc['minIvRank'] || 'Minimum Implied Volatility Rank (0\u2013100) to enter spreads. Higher IV = more premium collected.',
        value: s.minIvRank, min: 0, max: 100, step: 5,
        format: v => `${Math.round(v)}`,
        onChange: v => update('minIvRank', v) }),
      React.createElement('div', { className: 'settings-row' },
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { className: 'settings-row-label' }, 'Require Sideways Market'),
          React.createElement('div', { className: 'settings-row-sub' }, desc['requireSideways'] || 'Only place spreads when the underlying index is detected as range-bound/sideways.')
        ),
        React.createElement(Toggle, { checked: s.requireSideways, onChange: v => update('requireSideways', v) })
      )
    ),

    // \u2500\u2500 Risk Management \u2500\u2500
    React.createElement('div', { className: 'card mb-4' },
      React.createElement('div', { className: 'settings-section-title' }, 'Risk Management'),
      React.createElement(SliderRow, { label: 'SL Multiplier', sub: desc['slMultiplier'] || 'SL triggers when cost to close reaches this multiple of initial credit. E.g. 1.50 = 50% loss beyond credit.',
        value: s.slMultiplier, min: 0.50, max: 5.00, step: 0.10,
        format: v => `${v.toFixed(1)}x`,
        onChange: v => update('slMultiplier', v) }),
      React.createElement(SliderRow, { label: 'Theta Target %', sub: desc['thetaTargetPct'] || 'Close spread when this fraction of max profit has been captured through time decay. E.g. 50% = close at half the premium.',
        value: s.thetaTargetPct, min: 0.10, max: 1.00, step: 0.05,
        format: formatPct,
        onChange: v => update('thetaTargetPct', v) }),
      React.createElement(SliderRow, { label: 'NIFTY Breach (points)', sub: desc['niftyUnderlyingBreachPoints'] || 'Close spread if NIFTY moves this many points from entry. Protects against sudden breakouts.',
        value: s.niftyUnderlyingBreachPoints, min: 25, max: 500, step: 25,
        format: v => `${Math.round(v)} pts`,
        onChange: v => update('niftyUnderlyingBreachPoints', Math.round(v)) }),
      React.createElement(SliderRow, { label: 'SENSEX Breach (points)', sub: desc['sensexUnderlyingBreachPoints'] || 'Close spread if SENSEX moves this many points from entry.',
        value: s.sensexUnderlyingBreachPoints, min: 50, max: 1000, step: 50,
        format: v => `${Math.round(v)} pts`,
        onChange: v => update('sensexUnderlyingBreachPoints', Math.round(v)) }),
      React.createElement(StepperRow, { label: 'Flip Cooldown (min)', sub: desc['flipCooldownMinutes'] || 'Wait time after closing a spread before opening a new one.',
        value: s.flipCooldownMinutes, min: 0, max: 60,
        onChange: v => update('flipCooldownMinutes', v) })
    ),

    // \u2500\u2500 System Managed (Read-Only) \u2500\u2500
    React.createElement('div', { className: 'card mb-4' },
      React.createElement('div', { className: 'settings-section-title' }, 'System Managed (Read-Only)'),
      React.createElement(ReadOnlyRow, { label: 'Close at End of Day', bool: s.closeAtEndOfDay }),
      React.createElement(ReadOnlyRow, { label: 'EOD Close Time (IST)', value: s.eodCloseTimeIst }),
      React.createElement(ReadOnlyRow, { label: 'New Order Start (IST)', value: s.newOrderStartTimeIst }),
      React.createElement(ReadOnlyRow, { label: 'New Order Stop (IST)', value: s.newOrderStopTimeIst }),
      React.createElement(ReadOnlyRow, { label: 'Expiry Day Cutoff (IST)', value: s.expiryDayCutoffTimeIst }),
      React.createElement(ReadOnlyRow, { label: 'Expiry Day Close (IST)', value: s.expiryDayCloseTimeIst })
    ),

    // Last Updated
    s.updatedAtUtc && React.createElement('div', { className: 'text-sm text-muted mt-2' },
      'Last updated: ', formatDate(s.updatedAtUtc)
    )
  );
}