class InteractiveChart extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 2rem;
        }
        .card {
          background: white;
          border-radius: 0.5rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
          overflow: hidden;
        }
        .card-header {
          padding: 1.5rem;
          border-bottom: 1px solid #e5e7eb;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }
        .card-title {
          font-size: 1.25rem;
          font-weight: 600;
          margin: 0;
          color: #111827;
        }
        .card-description {
          margin: 0;
          color: #6b7280;
          font-size: 0.875rem;
        }
        .card-content {
          padding: 1.5rem;
        }
        .chart-container {
          width: 100%;
          height: 300px;
        }
        .select-container {
          margin-top: 1rem;
        }
        select {
          padding: 0.5rem;
          border-radius: 0.375rem;
          border: 1px solid #e5e7eb;
          background-color: white;
        }
        .recharts-cartesian-grid line {
          stroke: #e5e7eb;
        }
        .recharts-tooltip-cursor {
          fill: rgba(0, 0, 0, 0.05);
        }
        .recharts-default-tooltip {
          border-radius: 0.5rem !important;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
          border: none !important;
          background: white !important;
          padding: 0.75rem !important;
        }
      </style>
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Area Chart - Interactive</h3>
          <p class="card-description">Showing total visitors for the last 3 months</p>
          <div class="select-container">
            <select id="timeRange">
              <option value="90d">Last 3 months</option>
              <option value="30d">Last 30 days</option>
              <option value="7d">Last 7 days</option>
            </select>
          </div>
        </div>
        <div class="card-content">
          <div class="chart-container" id="chart"></div>
        </div>
      </div>
    `;

    this.initializeChart();
  }

  initializeChart() {
    const chartData = [
      { date: "2024-04-01", desktop: 222, mobile: 150 },
      { date: "2024-04-02", desktop: 97, mobile: 180 },
      // ... (rest of the data from the React component)
      { date: "2024-06-30", desktop: 446, mobile: 400 }
    ];

    const timeRangeSelect = this.shadowRoot.getElementById('timeRange');
    timeRangeSelect.addEventListener('change', () => {
      this.updateChart(chartData, timeRangeSelect.value);
    });

    this.updateChart(chartData, '90d');
  }

  updateChart(data, timeRange) {
    const filteredData = data.filter((item) => {
      const date = new Date(item.date);
      const referenceDate = new Date("2024-06-30");
      let daysToSubtract = 90;
      if (timeRange === "30d") {
        daysToSubtract = 30;
      } else if (timeRange === "7d") {
        daysToSubtract = 7;
      }
      const startDate = new Date(referenceDate);
      startDate.setDate(startDate.getDate() - daysToSubtract);
      return date >= startDate;
    });

    const chartContainer = this.shadowRoot.getElementById('chart');
    chartContainer.innerHTML = '';

    const chart = new Recharts.AreaChart({
      width: chartContainer.clientWidth,
      height: 300,
      data: filteredData,
      margin: { top: 10, right: 30, left: 0, bottom: 0 },
    });

    chart.append(new Recharts.CartesianGrid({ strokeDasharray: '3 3', vertical: false }));
    chart.append(new Recharts.XAxis({
      dataKey: 'date',
      tickFormatter: (value) => {
        const date = new Date(value);
        return date.toLocaleDateString('en-US', {
          month: 'short',
          day: 'numeric'
        });
      }
    }));
    chart.append(new Recharts.YAxis());
    chart.append(new Recharts.Tooltip());
    
    // Desktop area
    chart.append(new Recharts.Area({
      dataKey: 'desktop',
      type: 'natural',
      stroke: '#3b82f6',
      fill: '#93c5fd',
      strokeWidth: 2
    }));
    
    // Mobile area
    chart.append(new Recharts.Area({
      dataKey: 'mobile',
      type: 'natural',
      stroke: '#10b981',
      fill: '#6ee7b7',
      strokeWidth: 2
    }));

    chartContainer.appendChild(chart);
  }
}

customElements.define('interactive-chart', InteractiveChart);