// ===== Swing Orders Page — Paper (global) + Live (user) swing GTT orders =====

function SwingOrdersPage() {
  const toast = useToast();
  const [mode, setMode] = React.useState('');   // '' = All, 'PAPER', 'LIVE'
  const [days, setDays] = React.useState(1);
  const [useCustomRange, setUseCustomRange] = React.useState(false);
  const [fromDate, setFromDate] = React.useState('');
  const [toDate, setToDate] = React.useState('');
  const [orders, setOrders] = React.useState([]);
  const [summary, setSummary] = React.useState(null);
  const [pnlData, setPnlData] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [expandedOrderId, setExpandedOrderId] = React.useState(new Set());
  const [statusFilter, setStatusFilter] = React.useState(['FILLED', 'CLOSED']);
  const chartRef = React.useRef(null);
  const chartInstance = React.useRef(null);

  React.useEffect(() => {
    if (useCustomRange && (!fromDate || !toDate)) return;
    loadData();
  }, [mode, days, useCustomRange, fromDate, toDate]);

  React.useEffect(() => {
    if (pnlData.length > 0 && chartRef.current) renderChart();
    return () => { if (chartInstance.current) chartInstance.current.destroy(); };
  }, [pnlData]);

  async function loadData() {
    setLoading(true);
    try {
      const modeParam = mode ? `&mode=${mode}` : '';
      const dateParam = useCustomRange && fromDate && toDate
        ? `from=${fromDate}&to=${toDate}`
        : `days=${days}`;
      const [ordersRes, pnlRes] = await Promise.all([
        API.get(`/api/swing-orders?${dateParam}${modeParam}`),
        API.get(`/api/swing-orders/pnl-chart?days=${days}${modeParam}`)
      ]);
      setOrders(ordersRes.orders || []);
      setSummary(ordersRes.summary || null);
      setPnlData(pnlRes || []);
    } catch (err) {
      toast(err.message || 'Failed to load swing orders', 'error');
    } finally {
      setLoading(false);
    }
  }

  function renderChart() {
    if (chartInstance.current) chartInstance.current.destroy();
    const ctx = chartRef.current.getContext('2d');
    const labels = pnlData.map(p => {
      const parts = p.date.split('-');
      const months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
      return `${parts[2]} ${months[parseInt(parts[1])] || parts[1]}`;
    });
    const dailyPnl = pnlData.map(p => p.dayPnL);
    const cumPnl = pnlData.map(p => p.cumulativePnL);
    const barColors = dailyPnl.map(v => v >= 0 ? 'rgba(22, 163, 74, 0.7)' : 'rgba(220, 38, 38, 0.7)');

    chartInstance.current = new Chart(ctx, {
      type: 'bar',
      data: {
        labels,
        datasets: [
          { label: 'Daily P&L', data: dailyPnl, backgroundColor: barColors, borderRadius: 4, yAxisID: 'y', order: 2 },
          { label: 'Cumulative P&L', data: cumPnl, type: 'line', borderColor: '#1565C0', backgroundColor: 'rgba(21, 101, 192, 0.08)', fill: true, tension: 0.3, pointRadius: 3, pointBackgroundColor: '#1565C0', borderWidth: 2, yAxisID: 'y', order: 1 }
        ]
      },
      options: {
        responsive: true, maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: {
          legend: { position: 'bottom', labels: { usePointStyle: true, padding: 16, font: { size: 12 } } },
          tooltip: { callbacks: { label: (ctx) => `${ctx.dataset.label}: \u20B9${ctx.parsed.y.toLocaleString('en-IN', { minimumFractionDigits: 2 })}` } }
        },
        scales: {
          x: { grid: { display: false }, ticks: { font: { size: 11 } } },
          y: { grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { font: { size: 11 }, callback: (v) => `\u20B9${v >= 1000 || v <= -1000 ? `${(v/1000).toFixed(1)}k` : v}` } }
        }
      }
    });
  }

  return React.createElement('div', { className: 'page-content' },
    React.createElement('div', { className: 'page-header' },
      React.createElement('h1', { className: 'page-title' }, 'Swing Orders'),
      React.createElement('p', { className: 'page-subtitle' }, '3-candle pattern GTT orders \u2014 paper (global) + live (your orders)')
    ),

    // Toolbar card — grouped filters
    React.createElement('div', { className: 'card mb-4', style: { overflow: 'visible' } },
      React.createElement('div', { style: { padding: '12px 18px', display: 'flex', alignItems: 'center', gap: '16px', flexWrap: 'wrap' } },
        // Account
        React.createElement('div', { className: 'toolbar-group' },
          React.createElement('span', { className: 'toolbar-label' }, 'Account'),
          React.createElement('div', { className: 'toggle-btn-group' },
            React.createElement('button', { className: `toggle-btn ${mode === '' ? 'active' : ''}`, onClick: () => setMode('') }, 'All'),
            React.createElement('button', { className: `toggle-btn ${mode === 'PAPER' ? 'active' : ''}`, onClick: () => setMode('PAPER') }, 'Paper'),
            React.createElement('button', { className: `toggle-btn ${mode === 'LIVE' ? 'active' : ''}`, onClick: () => setMode('LIVE') }, 'Live')
          )
        ),
        React.createElement('div', { className: 'toolbar-divider' }),
        // Period
        React.createElement('div', { className: 'toolbar-group' },
          React.createElement('span', { className: 'toolbar-label' }, 'Period'),
          React.createElement('div', { className: 'toggle-btn-group' },
            React.createElement('button', { className: `toggle-btn ${!useCustomRange && days === 1 ? 'active' : ''}`, onClick: () => { setUseCustomRange(false); setDays(1); } }, 'Today'),
            React.createElement('button', { className: `toggle-btn ${useCustomRange ? 'active' : ''}`, onClick: () => {
              if (!useCustomRange) {
                const now = new Date();
                const ist = new Date(now.getTime() + (now.getTimezoneOffset() * 60000) + (5.5 * 60 * 60 * 1000));
                const todayStr = ist.toISOString().split('T')[0];
                if (!fromDate) setFromDate(todayStr);
                if (!toDate) setToDate(todayStr);
              }
              setUseCustomRange(!useCustomRange);
            } }, 'Range')
          ),
          useCustomRange && React.createElement('input', { type: 'date', className: 'form-input', style: { width: '130px', padding: '4px 8px', fontSize: '12px' }, value: fromDate, onChange: (e) => setFromDate(e.target.value) }),
          useCustomRange && React.createElement('span', { className: 'text-muted text-xs' }, 'to'),
          useCustomRange && React.createElement('input', { type: 'date', className: 'form-input', style: { width: '130px', padding: '4px 8px', fontSize: '12px' }, value: toDate, onChange: (e) => setToDate(e.target.value) })
        ),
        React.createElement('div', { className: 'toolbar-divider' }),
        // Status filter
        React.createElement('div', { className: 'toolbar-group' },
          React.createElement('span', { className: 'toolbar-label' }, 'Status'),
          React.createElement('div', { className: 'toggle-btn-group' },
            React.createElement('button', { className: `toggle-btn ${statusFilter.length === 0 ? 'active' : ''}`, onClick: () => setStatusFilter([]) }, 'All'),
            ['FILLED', 'CLOSED', 'PENDING_GTT', 'CANCELLED'].map(s =>
              React.createElement('button', { key: s, className: `toggle-btn ${statusFilter.includes(s) ? 'active' : ''}`, onClick: () => setStatusFilter(prev => prev.includes(s) ? prev.filter(x => x !== s) : [...prev, s]) }, s === 'PENDING_GTT' ? 'Pending' : s.charAt(0) + s.slice(1).toLowerCase())
            )
          )
        ),
        // Refresh
        React.createElement('button', { className: 'btn btn-outline btn-sm', onClick: loadData, style: { marginLeft: 'auto' } }, '\u21BB')
      )
    ),

    loading ? React.createElement(Loading, { text: 'Loading swing orders\u2026' }) : React.createElement(React.Fragment, null,

      // Stats cards
      summary && React.createElement('div', { className: 'stats-grid' },
        React.createElement(StatCard, { label: 'Open', value: summary.activeOrders, sub: `\uD83D\uDCDD ${summary.paperOrders} paper \u00B7 \u26A1 ${summary.liveOrders} live` }),
        React.createElement(StatCard, { label: 'Closed Today', value: summary.totalOrders - summary.activeOrders }),
        React.createElement(StatCard, { label: 'Today P&L', value: formatCurrency(summary.todayPnL), type: summary.todayPnL >= 0 ? 'positive' : 'negative' }),
        React.createElement(StatCard, { label: 'Win Rate', value: `${(summary.winRate * 100).toFixed(0)}%` }),
        React.createElement(StatCard, { label: 'Total P&L', value: formatCurrency(summary.totalPnL), type: summary.totalPnL >= 0 ? 'positive' : 'negative',
          sub: `${summary.wins}W / ${summary.losses}L` })
      ),

      // P&L Chart
      React.createElement('div', { className: 'card mb-4' },
        React.createElement('div', { className: 'card-header' },
          React.createElement('span', null, 'P&L Chart'),
          React.createElement('span', { className: 'text-sm text-muted' }, `${pnlData.length} trading day${pnlData.length !== 1 ? 's' : ''}`)
        ),
        React.createElement('div', { className: 'card-body' },
          pnlData.length === 0
            ? React.createElement(EmptyState, { icon: '\uD83D\uDCC9', title: 'No completed swing trades yet', text: 'P&L chart will appear once swing orders are closed.' })
            : React.createElement('div', { className: 'chart-container' }, React.createElement('canvas', { ref: chartRef }))
        )
      ),

      // Order History — table-based like reporting page
      React.createElement('div', { className: 'card' },
        React.createElement('div', { className: 'card-header' },
          React.createElement('span', null, 'Order History'),
          React.createElement('span', { className: 'text-sm text-muted' }, `${(statusFilter.length === 0 ? orders : orders.filter(o => statusFilter.includes(o.status))).length} order${(statusFilter.length === 0 ? orders : orders.filter(o => statusFilter.includes(o.status))).length !== 1 ? 's' : ''}`)
        ),
        orders.length === 0
          ? React.createElement('div', { className: 'card-body' },
              React.createElement(EmptyState, { icon: '\uD83C\uDF0A', title: 'No swing orders yet', text: 'Paper swing orders are placed automatically during market hours when 3-candle patterns are detected. Enable "Trade with Swing" in user settings only for live broker orders.' })
            )
          : React.createElement('div', { className: 'card-body-flush table-responsive' },
              React.createElement('table', { className: 'data-table' },
                React.createElement('thead', null,
                  React.createElement('tr', null,
                    React.createElement('th', { style: { width: '36px', textAlign: 'center' } }, '#'),
                    React.createElement('th', null, 'Time'),
                    React.createElement('th', null, 'Symbol'),
                    React.createElement('th', null, 'Mode'),
                    React.createElement('th', null, 'Pattern'),
                    React.createElement('th', null, 'Entry'),
                    React.createElement('th', null, 'SL'),
                    React.createElement('th', null, 'Target'),
                    React.createElement('th', null, 'Exit'),
                    React.createElement('th', null, 'P&L'),
                    React.createElement('th', null, 'Status'),
                    React.createElement('th', null, 'Exit Reason')
                  )
                ),
                React.createElement('tbody', null,
                  (statusFilter.length === 0 ? orders : orders.filter(o => statusFilter.includes(o.status))).map((o, i) => {
                    const pnl = o.pnL;
                    const pnlClass = pnl > 0 ? 'pnl-positive' : pnl < 0 ? 'pnl-negative' : 'pnl-zero';
                    const isExpanded = expandedOrderId.has(o.orderId);
                    const isRed = o.pattern === '3_RED';
                    return React.createElement(React.Fragment, { key: o.orderId || i },
                      React.createElement('tr', {
                        style: { cursor: 'pointer', background: isExpanded ? 'var(--bg-secondary, #f8f9fa)' : undefined },
                        onClick: () => setExpandedOrderId(prev => { const next = new Set(prev); if (next.has(o.orderId)) next.delete(o.orderId); else next.add(o.orderId); return next; }),
                        title: 'Click to expand details'
                      },
                        React.createElement('td', { className: 'text-xs text-muted', style: { textAlign: 'center' } }, i + 1),
                        React.createElement('td', { className: 'text-xs font-mono', style: { whiteSpace: 'nowrap' } },
                          React.createElement('span', { style: { marginRight: '6px', fontSize: '10px', opacity: 0.5 } }, isExpanded ? '\u25BC' : '\u25B6'),
                          formatDate(o.createdAtIst)
                        ),
                        React.createElement('td', { className: 'font-medium' }, o.symbol),
                        React.createElement('td', null, React.createElement(Badge, { type: o.mode === 'PAPER' ? 'neutral' : 'info' }, o.mode)),
                        React.createElement('td', null,
                          React.createElement('span', {
                            style: { display: 'inline-flex', alignItems: 'center', gap: '4px', padding: '2px 8px', borderRadius: '10px', fontSize: '11px', fontWeight: 600,
                              background: isRed ? '#fef2f2' : '#f0fdf4', color: isRed ? '#dc2626' : '#16a34a' }
                          }, isRed ? '\uD83D\uDD34' : '\uD83D\uDFE2', ` ${o.optionType}`)
                        ),
                        React.createElement('td', { className: 'font-mono' }, o.entryPrice != null ? `\u20B9${o.entryPrice.toFixed(2)}` : (o.status === 'PENDING_GTT' ? React.createElement('span', { className: 'text-muted' }, 'Pending') : '\u2014')),
                        React.createElement('td', { className: 'font-mono text-xs' }, `\u20B9${o.stopLossPrice.toFixed(2)}`),
                        React.createElement('td', { className: 'font-mono text-xs' }, o.targetPrice != null ? `\u20B9${o.targetPrice.toFixed(2)}` : '\u2014'),
                        React.createElement('td', { className: 'font-mono' }, o.exitPrice != null ? `\u20B9${o.exitPrice.toFixed(2)}` : '\u2014'),
                        React.createElement('td', { className: pnlClass, style: { whiteSpace: 'nowrap' } }, pnl != null ? formatCurrency(pnl) : '\u2014'),
                        React.createElement('td', null, React.createElement(Badge, {
                          type: o.status === 'FILLED' ? 'info' : o.status === 'CLOSED' ? 'neutral' : o.status === 'PENDING_GTT' ? 'warning' : 'neutral'
                        }, o.status)),
                        React.createElement('td', { className: 'text-sm' }, o.exitReason || '\u2014')
                      ),
                      isExpanded && React.createElement('tr', null,
                        React.createElement('td', { colSpan: 12, style: { padding: 0, border: 'none' } },
                          React.createElement('div', {
                            style: { padding: '14px 24px', background: 'var(--bg-secondary, #f9fafb)', borderTop: '1px solid var(--border-color, #e5e7eb)', fontSize: '12px' }
                          },
                            React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '10px 28px' } },
                              swingDetail('ATM Strike', `\u20B9${o.atmStrike}`),
                              swingDetail('GTT Trigger', `\u20B9${o.gttTriggerPrice.toFixed(2)}`),
                              swingDetail('Underlying Ref', `\u20B9${o.underlyingRefPrice.toFixed(2)}`),
                              swingDetail('Qty', `${o.quantity} (${o.quantity / 65} lot)`),
                              swingDetail('SL Points', `${o.stopLossPoints} pts`),
                              swingDetail('Target Points', `${o.targetPoints} pts`),
                              swingDetail('HWM', o.highWaterMark != null ? `\u20B9${o.highWaterMark.toFixed(2)}` : '\u2014'),
                              swingDetail('Timeframe', o.timeframe),
                              swingDetail('Filled At', formatDate(o.filledAtIst)),
                              swingDetail('Exited At', formatDate(o.exitedAtIst))
                            ),
                            o.orderNotes && React.createElement('div', {
                              style: { marginTop: '10px', padding: '8px 12px', background: 'var(--bg-primary, #fff)', borderRadius: '6px', fontFamily: 'monospace', fontSize: '11px', wordBreak: 'break-all', border: '1px solid var(--border-color, #e5e7eb)' }
                            }, o.orderNotes)
                          )
                        )
                      )
                    );
                  })
                )
              )
            )
      )
    )
  );
}

function swingDetail(label, value) {
  return React.createElement('div', null,
    React.createElement('span', { style: { fontWeight: 600, color: 'var(--text-secondary)', marginRight: '6px' } }, `${label}:`),
    React.createElement('span', { className: 'font-mono' }, value)
  );
}