// ===== FII/DII Institutional Flow Dashboard =====

// Scoped helpers to avoid global naming conflicts
const FiiDiiHelpers = (() => {
  function fmtCr(val) {
    if (val == null) return '-';
    const num = parseFloat(val);
    const sign = num > 0 ? '+' : '';
    return sign + num.toLocaleString('en-IN', { maximumFractionDigits: 2 });
  }

  function fmtNum(val, showSign) {
    if (val == null) return '-';
    const num = parseInt(val);
    if (isNaN(num)) return '-';
    const sign = showSign && num > 0 ? '+' : '';
    return sign + num.toLocaleString('en-IN');
  }

  function netCls(val) {
    if (val == null) return '';
    const num = parseFloat(val);
    if (num > 0) return 'positive-val';
    if (num < 0) return 'negative-val';
    return '';
  }

  function biasCls(bias) {
    if (!bias) return '';
    const b = bias.toUpperCase();
    if (b.includes('STRONG_BULLISH')) return 'bias-strong-bull';
    if (b.includes('BULLISH')) return 'bias-bull';
    if (b.includes('STRONG_BEARISH')) return 'bias-strong-bear';
    if (b.includes('BEARISH')) return 'bias-bear';
    if (b === 'AVOID') return 'bias-avoid';
    return 'bias-neutral';
  }

  function fmtDate(d) {
    if (!d) return '-';
    const dt = new Date(d);
    return dt.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
  }

  function fmtDateShort(d) {
    if (!d) return '-';
    const dt = new Date(d);
    return dt.toLocaleDateString('en-IN', { day: '2-digit', month: 'short' });
  }

  return { fmtCr, fmtNum, netCls, biasCls, fmtDate, fmtDateShort };
})();

// Simple markdown to HTML renderer for Claude output
function renderMarkdown(text) {
  if (!text) return '';
  var html = text
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/^## (.+)$/gm, '<h3 class="brief-heading">$1</h3>')
    .replace(/^# (.+)$/gm, '<h2 class="brief-title">$1</h2>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/^- (.+)$/gm, '<li>$1</li>')
    .replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/\n/g, '<br>');
  return '<p>' + html + '</p>';
}

function FiiDiiDashboardPage() {
  const { fmtCr, fmtNum, netCls, biasCls, fmtDate, fmtDateShort } = FiiDiiHelpers;
  const toast = useToast();
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [days, setDays] = React.useState(10);
  const [brief, setBrief] = React.useState(null);
  const [briefLoading, setBriefLoading] = React.useState(false);

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

  async function loadData() {
    try {
      setLoading(true);
      const result = await API.get(`/api/fiidii/rolling?days=${days}`);
      setData(result);
    } catch (err) {
      toast(err.message || 'Failed to load FII/DII data', 'error');
    } finally {
      setLoading(false);
    }
  }

  async function generateBrief(force) {
    try {
      setBriefLoading(true);
      var url = '/api/fiidii/morning-brief' + (force ? '?force=true' : '');
      const result = await API.post(url);
      setBrief(result);
    } catch (err) {
      toast(err.message || 'Failed to generate morning brief', 'error');
    } finally {
      setBriefLoading(false);
    }
  }

  function renderBiasCard(latest) {
    const bias = latest.data.institutionalBias || 'N/A';
    const score = latest.data.biasScore || 0;
    return React.createElement('div', { className: 'fiidii-card bias-card ' + biasCls(bias) },
      React.createElement('div', { className: 'card-label' }, 'Institutional Bias'),
      React.createElement('div', { className: 'card-value bias-value' }, bias.replace(/_/g, ' ')),
      React.createElement('div', { className: 'card-sub' }, 'Score: ' + (score > 0 ? '+' : '') + score),
      React.createElement('div', { className: 'card-date' }, fmtDate(latest.data.tradeDate))
    );
  }

  function renderCashCard(label, net, buy, sell) {
    return React.createElement('div', { className: 'fiidii-card' },
      React.createElement('div', { className: 'card-label' }, label + ' Cash Flow'),
      React.createElement('div', { className: 'card-value ' + netCls(net) }, fmtCr(net) + ' Cr'),
      React.createElement('div', { className: 'card-sub' }, 'Buy: ' + fmtCr(buy) + ' | Sell: ' + fmtCr(sell))
    );
  }

  function renderMetricCard(label, value, unit, isDecimal) {
    const display = isDecimal ? (value != null ? value.toFixed(2) : '-') : fmtNum(value, true);
    return React.createElement('div', { className: 'fiidii-card' },
      React.createElement('div', { className: 'card-label' }, label),
      React.createElement('div', { className: 'card-value ' + (typeof value === 'number' ? netCls(value) : '') },
        display + (unit ? ' ' + unit : ''))
    );
  }

  if (loading) return React.createElement('div', { className: 'page-loading' }, 'Loading FII/DII data...');
  if (!data || !data.days || data.days.length === 0) {
    return React.createElement('div', { className: 'empty-state' },
      React.createElement('h2', null, '\uD83D\uDCCA FII/DII Institutional Dashboard'),
      React.createElement('p', null, 'No data available yet. Data is auto-fetched at worker startup for the previous trading day.'),
      React.createElement('button', { className: 'btn btn-primary', onClick: loadData }, 'Refresh')
    );
  }

  const latest = data.days[0];

  return React.createElement('div', { className: 'fiidii-dashboard' },
    // Header
    React.createElement('div', { className: 'fiidii-header' },
      React.createElement('h2', null, '\uD83D\uDCCA FII/DII Institutional Flow Dashboard'),
      React.createElement('div', { className: 'fiidii-controls' },
        React.createElement('select', {
          value: days,
          onChange: function(e) { setDays(parseInt(e.target.value)); },
          className: 'select-input'
        },
          React.createElement('option', { value: 5 }, '5 Days'),
          React.createElement('option', { value: 10 }, '10 Days'),
          React.createElement('option', { value: 20 }, '20 Days'),
          React.createElement('option', { value: 30 }, '30 Days')
        ),
        React.createElement('button', { className: 'btn btn-sm', onClick: loadData }, '\uD83D\uDD04 Refresh')
      )
    ),

    // Latest Day Summary Cards
    React.createElement('div', { className: 'fiidii-cards' },
      renderBiasCard(latest),
      renderCashCard('FII/FPI', latest.data.fiiNetValue, latest.data.fiiBuyValue, latest.data.fiiSellValue),
      renderCashCard('DII', latest.data.diiNetValue, latest.data.diiBuyValue, latest.data.diiSellValue),
      renderMetricCard('FII Futures Net', latest.fiiFutNet, 'contracts'),
      renderMetricCard('FII Options PCR', latest.fiiPcr, '', true),
      renderMetricCard('DII Options PCR', latest.diiPcr, '', true)
    ),

    // Rolling Data Table
    React.createElement('div', { className: 'fiidii-table-section' },
      React.createElement('h3', null, '\uD83D\uDCCB Rolling Institutional Data'),
      React.createElement('div', { className: 'table-responsive' },
        React.createElement('table', { className: 'fiidii-table' },
          React.createElement('thead', null,
            React.createElement('tr', null,
              React.createElement('th', null, 'Date'),
              React.createElement('th', { className: 'group-header', colSpan: 3 }, 'Cash Flow (\u20B9 Cr)'),
              React.createElement('th', { className: 'group-header', colSpan: 3 }, 'FII Futures OI'),
              React.createElement('th', { className: 'group-header', colSpan: 2 }, 'FII Options'),
              React.createElement('th', { className: 'group-header', colSpan: 2 }, 'DII Derivatives'),
              React.createElement('th', null, 'Bias')
            ),
            React.createElement('tr', { className: 'sub-header' },
              React.createElement('th', null, ''),
              React.createElement('th', null, 'FII Net'),
              React.createElement('th', null, 'DII Net'),
              React.createElement('th', null, 'Combined'),
              React.createElement('th', null, 'Long'),
              React.createElement('th', null, 'Short'),
              React.createElement('th', null, 'Net Chg'),
              React.createElement('th', null, 'PCR'),
              React.createElement('th', null, 'Put OI Chg'),
              React.createElement('th', null, 'Fut Net'),
              React.createElement('th', null, 'PCR'),
              React.createElement('th', null, 'Score')
            )
          ),
          React.createElement('tbody', null,
            data.days.map(function(d, i) {
              var r = d.data;
              var combined = (r.fiiNetValue || 0) + (r.diiNetValue || 0);
              return React.createElement('tr', { key: i, className: i === 0 ? 'latest-row' : '' },
                React.createElement('td', { className: 'date-cell' }, fmtDate(r.tradeDate)),
                React.createElement('td', { className: netCls(r.fiiNetValue) }, fmtCr(r.fiiNetValue)),
                React.createElement('td', { className: netCls(r.diiNetValue) }, fmtCr(r.diiNetValue)),
                React.createElement('td', { className: netCls(combined) }, fmtCr(combined)),
                React.createElement('td', null, fmtNum(r.fiiFutIndexLong)),
                React.createElement('td', null, fmtNum(r.fiiFutIndexShort)),
                React.createElement('td', { className: netCls(r.fiiFutNetChg) }, fmtNum(r.fiiFutNetChg, true)),
                React.createElement('td', null, d.fiiPcr != null ? d.fiiPcr.toFixed(2) : '-'),
                React.createElement('td', { className: netCls(r.fiiOptPutOiChg) }, fmtNum(r.fiiOptPutOiChg, true)),
                React.createElement('td', { className: netCls(d.diiFutNet) }, fmtNum(d.diiFutNet, true)),
                React.createElement('td', null, d.diiPcr != null ? d.diiPcr.toFixed(2) : '-'),
                React.createElement('td', null,
                  React.createElement('span', { className: 'bias-badge ' + biasCls(r.institutionalBias) },
                    (r.biasScore > 0 ? '+' : '') + (r.biasScore || 0)
                  )
                )
              );
            })
          )
        )
      )
    ),

    // Cash Flow Bar Chart (visual)
    React.createElement('div', { className: 'fiidii-chart-section' },
      React.createElement('h3', null, '\uD83D\uDCCA Cash Flow Trend (\u20B9 Cr)'),
      React.createElement('div', { className: 'fiidii-legend' },
        React.createElement('span', { className: 'legend-item' },
          React.createElement('span', { className: 'legend-swatch fii-swatch' }), ' FII/FPI'
        ),
        React.createElement('span', { className: 'legend-item' },
          React.createElement('span', { className: 'legend-swatch dii-swatch' }), ' DII'
        )
      ),
      React.createElement('div', { className: 'cash-bars' },
        data.days.slice().reverse().map(function(d, i) {
          var r = d.data;
          var maxVal = Math.max.apply(null, data.days.map(function(x) {
            return Math.max(Math.abs(x.data.fiiNetValue || 0), Math.abs(x.data.diiNetValue || 0));
          }).concat([1]));
          var fiiPct = ((r.fiiNetValue || 0) / maxVal) * 100;
          var diiPct = ((r.diiNetValue || 0) / maxVal) * 100;
          return React.createElement('div', { key: i, className: 'cash-bar-group' },
            React.createElement('div', { className: 'bar-label' }, fmtDateShort(r.tradeDate)),
            React.createElement('div', { className: 'bar-container' },
              React.createElement('div', {
                className: 'bar fii-bar ' + (fiiPct >= 0 ? 'positive' : 'negative'),
                style: { width: Math.min(Math.abs(fiiPct), 100) + '%' },
                title: 'FII: ' + fmtCr(r.fiiNetValue)
              }),
              React.createElement('div', {
                className: 'bar dii-bar ' + (diiPct >= 0 ? 'positive' : 'negative'),
                style: { width: Math.min(Math.abs(diiPct), 100) + '%' },
                title: 'DII: ' + fmtCr(r.diiNetValue)
              })
            ),
            React.createElement('div', { className: 'bar-values' },
              React.createElement('span', { className: netCls(r.fiiNetValue) }, 'FII: ' + fmtCr(r.fiiNetValue)),
              React.createElement('span', { className: netCls(r.diiNetValue) }, ' DII: ' + fmtCr(r.diiNetValue))
            )
          );
        })
      )
    ),

    // Anthropic Morning Brief
    data.anthropicEnabled ? React.createElement('div', { className: 'fiidii-brief-section' },
      React.createElement('h3', null, '\uD83E\uDD16 AI Morning Brief (Claude)'),
      React.createElement('p', { className: 'brief-disclaimer' },
        '\u26A0\uFE0F This analysis is for informational context only \u2014 not a trade recommendation. Based on T+1 lagging institutional data.'
      ),
      !brief ? React.createElement('button', {
        className: 'btn btn-primary',
        onClick: function() { generateBrief(false); },
        disabled: briefLoading
      }, briefLoading ? '\u23F3 Generating...' : '\uD83D\uDCDD Generate Morning Brief') : null,
      brief ? React.createElement('div', { className: 'brief-content' },
        brief.fromCache ? React.createElement('div', { className: 'brief-cache-badge' }, '\u26A1 Served from cache (no API cost)') : null,
        React.createElement('div', { className: 'brief-text', dangerouslySetInnerHTML: { __html: renderMarkdown(brief.brief) } }),
        React.createElement('div', { className: 'brief-meta' },
          'Generated: ' + (brief.generatedAt || 'N/A') + ' | Data: ' + (brief.dataDays || 0) + ' days'
        ),
        React.createElement('button', {
          className: 'btn btn-sm',
          onClick: function() { setBrief(null); generateBrief(true); },
          disabled: briefLoading
        }, briefLoading ? '\u23F3 Regenerating...' : '\uD83D\uDD04 Regenerate (uses API)')
      ) : null
    ) : null
  );
}