import React from 'react';
import ReactDOM from 'react-dom';
import {
  ResponsiveContainer,
  AreaChart,
  Area,
  XAxis,
  YAxis,
  Tooltip
} from 'recharts';

function GscChart({ days }) {
  var totalClicks = days.reduce(function (a, d) { return a + d.clicks; }, 0);
  var totalImpressions = days.reduce(function (a, d) { return a + d.impressions; }, 0);

  var startDate = new Date(days[0].date);
  var endDate = new Date(days[days.length - 1].date);
  var startLabel = startDate.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
  var endLabel = endDate.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });

  var CustomTooltip = function ({ active, payload, label }) {
    if (!active || !payload || !payload.length) return null;
    var dateLabel = new Date(label).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
    return React.createElement('div', {
      style: {
        background: '#fff',
        border: '1px solid #e5e7eb',
        borderRadius: 6,
        padding: '6px 10px',
        fontSize: 11,
        lineHeight: '1.5',
        boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
      }
    },
      React.createElement('div', { style: { color: '#6b7280', marginBottom: 2 } }, dateLabel),
      React.createElement('div', { style: { color: '#6366f1', fontWeight: 600 } }, (payload[1] ? payload[1].value : 0).toLocaleString() + ' clicks'),
      React.createElement('div', { style: { color: 'rgba(99, 102, 241, 0.5)' } }, (payload[0] ? payload[0].value : 0).toLocaleString() + ' impressions')
    );
  };

  return React.createElement('div', {
    style: { position: 'relative', width: '100%', height: '100%' }
  },
    // Date range label (top-left)
    React.createElement('div', {
      style: {
        position: 'absolute',
        top: 0,
        left: 4,
        fontSize: 10,
        color: 'rgba(107, 114, 128, 0.6)',
        zIndex: 1,
        fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif'
      }
    }, startLabel + ' \u2013 ' + endLabel),

    // Chart
    React.createElement(ResponsiveContainer, { width: '100%', height: '100%' },
      React.createElement(AreaChart, {
        data: days,
        margin: { top: 16, right: 0, bottom: 24, left: 0 }
      },
        React.createElement(XAxis, { dataKey: 'date', hide: true }),
        React.createElement(YAxis, { yAxisId: 'clicks', hide: true }),
        React.createElement(YAxis, { yAxisId: 'impressions', hide: true }),
        React.createElement(Tooltip, { content: React.createElement(CustomTooltip, null) }),
        React.createElement(Area, {
          yAxisId: 'impressions',
          type: 'monotone',
          dataKey: 'impressions',
          fill: 'rgba(99,102,241,0.08)',
          stroke: 'rgba(99,102,241,0.3)',
          strokeWidth: 1.5,
          isAnimationActive: false
        }),
        React.createElement(Area, {
          yAxisId: 'clicks',
          type: 'monotone',
          dataKey: 'clicks',
          fill: 'rgba(99,102,241,0.15)',
          stroke: '#6366f1',
          strokeWidth: 2,
          isAnimationActive: false
        })
      )
    ),

    // Totals row (bottom)
    React.createElement('div', {
      style: {
        position: 'absolute',
        bottom: 4,
        left: 4,
        right: 4,
        display: 'flex',
        justifyContent: 'space-between',
        fontSize: 10,
        fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
        zIndex: 1
      }
    },
      React.createElement('span', { style: { color: '#6366f1' } }, totalClicks.toLocaleString() + ' clicks'),
      React.createElement('span', { style: { color: 'rgba(99, 102, 241, 0.5)' } }, totalImpressions.toLocaleString() + ' impressions')
    )
  );
}

window.renderGscChartReact = function (days) {
  var root = document.getElementById('saiap-gsc-chart-root');
  if (!root) return;
  ReactDOM.render(React.createElement(GscChart, { days: days }), root);
};
