// Data Quality Audit — Parquet feature file validation
// Checks for coverage, missing values, duplicates, and value ranges

function DataQualityPage() {
  const [mode, setMode] = React.useState('SENSEX');
  const [days, setDays] = React.useState(3);
  const [loading, setLoading] = React.useState(false);
  const [data, setData] = React.useState(null);
  const [freshness, setFreshness] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [activeTab, setActiveTab] = React.useState('overview');

  const loadFreshness = async (m) => {
    try {
      const res = await API.get(`/api/parquet-audit/freshness?mode=${m || mode}`);
      setFreshness(res);
    } catch (err) {
      console.warn('Freshness check failed:', err);
    }
  };

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

  const runScan = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await API.get(`/api/parquet-audit/scan?mode=${mode}&days=${days}`);
      setData(res);
      setActiveTab('overview');
    } catch (err) {
      setError(err.message || 'Scan failed');
    } finally {
      setLoading(false);
    }
  };

  const statusColor = (status) => ({
    ok: '#3fb950', warning: '#d29922', critical: '#f85149',
    'range-issue': '#58a6ff', missing: '#8b949e', live: '#3fb950',
    recent: '#d29922', stale: '#f85149', offline: '#8b949e', 'no-data': '#8b949e'
  }[status] || '#c9d1d9');

  const statusBadge = (status) => React.createElement('span', {
    style: {
      display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
      fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase',
      color: statusColor(status),
      border: `1px solid ${statusColor(status)}`,
      background: `${statusColor(status)}15`
    }
  }, status);

  return React.createElement('div', { className: 'page-container' },
    React.createElement('div', { className: 'page-header' },
      React.createElement('h1', null, '\uD83D\uDD2C Data Quality Audit'),
      React.createElement('p', { style: { color: '#8b949e', marginTop: 4 } },
        'Validate Parquet feature files for coverage, missing values, duplicates, and range issues')
    ),

    // Freshness banner
    freshness && React.createElement('div', {
      style: {
        display: 'flex', gap: 16, padding: '12px 16px', borderRadius: 8,
        border: `1px solid ${statusColor(freshness.status)}30`,
        background: `${statusColor(freshness.status)}08`, marginBottom: 16, alignItems: 'center'
      }
    },
      React.createElement('div', { style: { fontSize: '1.5rem' } },
        freshness.status === 'live' ? '\uD83D\uDFE2' : freshness.status === 'recent' ? '\uD83D\uDFE1' : '\uD83D\uDD34'),
      React.createElement('div', null,
        React.createElement('div', { style: { fontWeight: 600 } },
          `${mode} Data: `, statusBadge(freshness.status)),
        React.createElement('div', { style: { fontSize: '0.85rem', color: '#8b949e', marginTop: 2 } },
          freshness.ageMinutes >= 0
            ? `Last file: ${Math.round(freshness.ageMinutes)} min ago | Today: ${freshness.todayFiles} files`
            : 'No data found')
      )
    ),

    // Controls
    React.createElement('div', { style: { display: 'flex', gap: 12, marginBottom: 16, alignItems: 'center', flexWrap: 'wrap' } },
      React.createElement('select', {
        value: mode, onChange: e => { setMode(e.target.value); setData(null); loadFreshness(e.target.value); },
        className: 'form-input', style: { width: 140 }
      },
        React.createElement('option', { value: 'SENSEX' }, 'SENSEX'),
        React.createElement('option', { value: 'NIFTY' }, 'NIFTY')
      ),
      React.createElement('select', {
        value: days, onChange: e => setDays(parseInt(e.target.value)),
        className: 'form-input', style: { width: 120 }
      },
        [1, 3, 7, 14, 30].map(d => React.createElement('option', { key: d, value: d }, `${d} day${d > 1 ? 's' : ''}`))
      ),
      React.createElement('button', {
        onClick: runScan, disabled: loading,
        className: 'btn btn-primary', style: { minWidth: 120 }
      }, loading ? '\u23F3 Scanning...' : '\uD83D\uDD0D Run Scan'),
      error && React.createElement('span', { style: { color: '#f85149' } }, error)
    ),

    // Results
    data && React.createElement(React.Fragment, null,
      // Tab bar
      React.createElement('div', { style: { display: 'flex', gap: 4, borderBottom: '1px solid #30363d', marginBottom: 16 } },
        ['overview', 'columns', 'coverage', 'symbols'].map(tab =>
          React.createElement('button', {
            key: tab, onClick: () => setActiveTab(tab),
            style: {
              padding: '8px 16px', border: 'none', cursor: 'pointer',
              borderBottom: activeTab === tab ? '2px solid #58a6ff' : '2px solid transparent',
              color: activeTab === tab ? '#e6edf3' : '#8b949e',
              background: 'transparent', fontWeight: activeTab === tab ? 600 : 400,
              textTransform: 'capitalize', fontSize: '0.9rem'
            }
          }, tab)
        )
      ),

      // Overview tab
      activeTab === 'overview' && React.createElement('div', null,
        // Summary cards
        React.createElement('div', {
          style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12, marginBottom: 20 }
        },
          summaryCard('Total Files', data.summary.totalFiles, null),
          summaryCard('Files Scanned', data.summary.filesScanned, null),
          summaryCard('Rows Scanned', data.summary.totalRowsScanned.toLocaleString(), null),
          summaryCard('Est. Total Rows', data.summary.estimatedTotalRows.toLocaleString(), null),
          summaryCard('Unique Symbols', data.summary.uniqueSymbols, null),
          summaryCard('Duplicates', data.summary.duplicateRows, data.summary.duplicateRows > 0 ? '#f85149' : '#3fb950'),
          summaryCard('Total Size', `${data.summary.totalSizeMb} MB`, null),
          summaryCard('Scan Time', `${data.summary.scanDurationMs} ms`, null)
        ),

        // Date range
        data.summary.dateRange.from && React.createElement('div', {
          style: { padding: 12, background: '#161b22', borderRadius: 8, border: '1px solid #30363d', marginBottom: 16 }
        },
          React.createElement('strong', null, 'Date Range: '),
          new Date(data.summary.dateRange.from).toLocaleString(), ' \u2192 ',
          new Date(data.summary.dateRange.to).toLocaleString()
        ),

        // Quick health
        React.createElement('h3', { style: { margin: '16px 0 8px' } }, 'Column Health Summary'),
        React.createElement('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
          data.nullAnalysis.map(col =>
            React.createElement('div', {
              key: col.column, title: `${col.column}: ${col.nullPct}% nulls`,
              style: {
                padding: '4px 10px', borderRadius: 6, fontSize: '0.75rem',
                border: `1px solid ${statusColor(col.status)}`,
                color: statusColor(col.status), background: `${statusColor(col.status)}10`
              }
            }, col.column)
          )
        ),

        // Duplicates
        data.duplicateSamples.length > 0 && React.createElement('div', { style: { marginTop: 16 } },
          React.createElement('h3', { style: { color: '#f85149' } },
            `\u26A0 ${data.summary.duplicateRows} Duplicate Rows Found`),
          React.createElement('table', { className: 'data-table', style: { marginTop: 8 } },
            React.createElement('thead', null, React.createElement('tr', null,
              React.createElement('th', null, 'Symbol'),
              React.createElement('th', null, 'Timestamp')
            )),
            React.createElement('tbody', null,
              data.duplicateSamples.map((d, i) =>
                React.createElement('tr', { key: i },
                  React.createElement('td', null, d.symbol),
                  React.createElement('td', null, d.timestamp)
                )
              )
            )
          )
        )
      ),

      // Columns tab
      activeTab === 'columns' && React.createElement('div', null,
        React.createElement('table', { className: 'data-table' },
          React.createElement('thead', null, React.createElement('tr', null,
            React.createElement('th', null, 'Column'),
            React.createElement('th', null, 'Status'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Total'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Nulls'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Null %'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Out of Range'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Actual Min'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Actual Max'),
            React.createElement('th', null, 'Expected Range')
          )),
          React.createElement('tbody', null,
            data.nullAnalysis.map(col =>
              React.createElement('tr', { key: col.column },
                React.createElement('td', { style: { fontFamily: 'monospace', fontWeight: 500 } }, col.column),
                React.createElement('td', null, statusBadge(col.status)),
                React.createElement('td', { style: { textAlign: 'right' } }, col.total.toLocaleString()),
                React.createElement('td', { style: { textAlign: 'right', color: col.nulls > 0 ? '#f85149' : '#3fb950' } },
                  col.nulls.toLocaleString()),
                React.createElement('td', { style: { textAlign: 'right', fontWeight: 600, color: statusColor(col.status) } },
                  `${col.nullPct}%`),
                React.createElement('td', { style: { textAlign: 'right', color: col.outOfRange > 0 ? '#d29922' : '#8b949e' } },
                  col.outOfRange || '-'),
                React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', fontSize: '0.85rem' } },
                  col.actualMin != null ? col.actualMin.toFixed(4) : '-'),
                React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', fontSize: '0.85rem' } },
                  col.actualMax != null ? col.actualMax.toFixed(4) : '-'),
                React.createElement('td', { style: { fontFamily: 'monospace', fontSize: '0.85rem', color: '#8b949e' } },
                  col.expectedMin != null ? `[${col.expectedMin}, ${col.expectedMax}]` : '-')
              )
            )
          )
        )
      ),

      // Coverage tab
      activeTab === 'coverage' && React.createElement('div', null,
        React.createElement('table', { className: 'data-table' },
          React.createElement('thead', null, React.createElement('tr', null,
            React.createElement('th', null, 'Date'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Rows'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Symbols'),
            React.createElement('th', null, 'Hours (UTC)'),
            React.createElement('th', null, 'Missing Hours')
          )),
          React.createElement('tbody', null,
            data.coverage.map(c =>
              React.createElement('tr', { key: c.date },
                React.createElement('td', { style: { fontWeight: 600 } }, c.date),
                React.createElement('td', { style: { textAlign: 'right' } }, c.rows.toLocaleString()),
                React.createElement('td', { style: { textAlign: 'right' } }, c.symbols),
                React.createElement('td', null,
                  React.createElement('div', { style: { display: 'flex', gap: 3, flexWrap: 'wrap' } },
                    c.hours.map(h =>
                      React.createElement('span', {
                        key: h, style: {
                          padding: '1px 6px', borderRadius: 4, fontSize: '0.75rem',
                          background: '#12261e', color: '#3fb950', border: '1px solid #3fb95050'
                        }
                      }, `${h}`)
                    )
                  )
                ),
                React.createElement('td', null,
                  c.missingHours.length === 0
                    ? React.createElement('span', { style: { color: '#3fb950' } }, '\u2705 Complete')
                    : React.createElement('div', { style: { display: 'flex', gap: 3, flexWrap: 'wrap' } },
                        c.missingHours.map(h =>
                          React.createElement('span', {
                            key: h, style: {
                              padding: '1px 6px', borderRadius: 4, fontSize: '0.75rem',
                              background: '#3d1214', color: '#f85149', border: '1px solid #f8514950'
                            }
                          }, `${h}`)
                        )
                      )
                )
              )
            )
          )
        )
      ),

      // Symbols tab
      activeTab === 'symbols' && React.createElement('div', null,
        React.createElement('table', { className: 'data-table' },
          React.createElement('thead', null, React.createElement('tr', null,
            React.createElement('th', null, '#'),
            React.createElement('th', null, 'Symbol'),
            React.createElement('th', { style: { textAlign: 'right' } }, 'Rows'),
            React.createElement('th', null, 'Distribution')
          )),
          React.createElement('tbody', null,
            data.topSymbols.map((s, i) => {
              var maxRows = data.topSymbols[0].rows;
              return React.createElement('tr', { key: s.symbol },
                React.createElement('td', { style: { color: '#8b949e' } }, i + 1),
                React.createElement('td', { style: { fontFamily: 'monospace', fontWeight: 500 } }, s.symbol),
                React.createElement('td', { style: { textAlign: 'right' } }, s.rows.toLocaleString()),
                React.createElement('td', { style: { width: '40%' } },
                  React.createElement('div', {
                    style: {
                      height: 8, borderRadius: 4, background: '#30363d', overflow: 'hidden'
                    }
                  },
                    React.createElement('div', {
                      style: {
                        height: '100%', width: `${(s.rows / maxRows * 100).toFixed(1)}%`,
                        background: '#58a6ff', borderRadius: 4
                      }
                    })
                  )
                )
              );
            })
          )
        )
      )
    )
  );
}

function summaryCard(label, value, color) {
  return React.createElement('div', {
    style: {
      background: '#161b22', border: '1px solid #30363d', borderRadius: 8,
      padding: 12, textAlign: 'center'
    }
  },
    React.createElement('div', {
      style: { fontSize: '1.5rem', fontWeight: 700, color: color || '#e6edf3' }
    }, value),
    React.createElement('div', {
      style: { fontSize: '0.75rem', color: '#8b949e', textTransform: 'uppercase', letterSpacing: '0.5px', marginTop: 4 }
    }, label)
  );
}