class EfficiencyChart extends HTMLElement {
  connectedCallback() {
    const initialEfficiency = parseFloat(this.getAttribute('initial-efficiency')) || 95;
    const yearsToShow = parseInt(this.getAttribute('years-to-show')) || 25;
    const annualDegradation = parseFloat(this.getAttribute('annual-degradation')) || 0.5;

    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;
        }
        .card-title {
          font-size: 1.25rem;
          font-weight: 600;
          margin: 0;
          color: #111827;
        }
        .card-description {
          margin-top: 0.5rem;
          color: #6b7280;
          font-size: 0.875rem;
        }
        .card-content {
          padding: 1.5rem;
        }
        .chart-container {
          width: 100%;
          height: 300px;
        }
        .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">Eficiência ao Longo do Tempo</h3>
          <p class="card-description">
            Degradação anual de ${annualDegradation}% • Eficiência após ${yearsToShow} anos: 
            ${(initialEfficiency - (yearsToShow * annualDegradation)).toFixed(2)}%
          </p>
        </div>
        <div class="card-content">
          <div class="chart-container" id="chart"></div>
        </div>
      </div>
    `;

    // Generate chart data
    const data = Array.from({ length: yearsToShow + 1 }, (_, year) => {
      const efficiency = Math.max(
        initialEfficiency - year * annualDegradation,
        80
      );
      const warranty = year <= 10 ? 90 : 80;
      return {
        year: `Ano ${year}`,
        efficiency,
        warranty,
      };
    });

    // Initialize chart
    setTimeout(() => {
      const chartContainer = this.shadowRoot.getElementById('chart');
      if (chartContainer) {
        const chart = new Recharts.AreaChart({
          width: chartContainer.clientWidth,
          height: 300,
          data,
          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: 'year',
          tickFormatter: (value) => value.slice(4)
        }));
        chart.append(new Recharts.YAxis({
          domain: [75, 100],
          tickFormatter: (value) => `${value}%`
        }));
        chart.append(new Recharts.Tooltip());
        
        // Warranty area
        chart.append(new Recharts.Area({
          dataKey: 'warranty',
          type: 'natural',
          stroke: '#9ca3af',
          fill: '#f3f4f6',
          strokeWidth: 2
        }));
        
        // Efficiency area
        chart.append(new Recharts.Area({
          dataKey: 'efficiency',
          type: 'natural',
          stroke: '#3b82f6',
          fill: '#93c5fd',
          strokeWidth: 2
        }));

        chartContainer.appendChild(chart);
      }
    }, 0);
  }
}

customElements.define('efficiency-chart', EfficiencyChart);