import React, { useState, useEffect } from 'react';

// 🌿 Sustainable Component: Carbon Footprint Calculator
// Estimates CO2 based on transferred data (Network API)

const CARBON_PER_GB = 0.11; // kgCO2 per GB (Global Average approximation)

export default function CarbonAwareBadge() {
  const [dataTransferred, setDataTransferred] = useState(0); // in MB
  const [co2, setCo2] = useState(0); // in grams

  useEffect(() => {
    // 1. Check for Performance API support
    if (window.performance && window.performance.getEntriesByType) {
      const calculate = () => {
        const resources = window.performance.getEntriesByType("resource");
        let totalBytes = resources.reduce((acc, res) => acc + (res.transferSize || 0), 0);
        // Add navigation transfer (HTML doc)
        const nav = window.performance.getEntriesByType("navigation")[0];
        if (nav) totalBytes += (nav.transferSize || 0);

        const mb = totalBytes / (1024 * 1024);
        const gb = totalBytes / (1024 * 1024 * 1024);
        
        setDataTransferred(mb.toFixed(2));
        setCo2((gb * CARBON_PER_GB * 1000).toFixed(3)); // Convert kg to g
      };

      // Calculate on load & setup observer for new requests
      calculate();
      
      const observer = new PerformanceObserver((list) => {
          calculate();
      });
      observer.observe({ entryTypes: ['resource'] });

      return () => observer.disconnect();
    }
  }, []);

  const getRating = (val) => {
      if (val < 0.2) return { label: 'Excellent', color: 'bg-emerald-500' };
      if (val < 0.5) return { label: 'Good', color: 'bg-yellow-500' };
      return { label: 'Heavy', color: 'bg-red-500' };
  };

  const rating = getRating(Number(co2));

  return (
    <div className="bg-white dark:bg-slate-900 border border-emerald-100 dark:border-emerald-900/30 rounded-full p-1 pr-4 inline-flex items-center gap-3 shadow-sm hover:shadow-md transition-shadow">
      <div className={`p-2 rounded-full ${rating.color} text-white`}>
        <span>🍃</span>
      </div>
      <div>
        <div className="text-[10px] uppercase font-bold text-gray-400 tracking-wider">Session Impact</div>
        <div className="text-sm font-bold text-gray-800 dark:text-gray-200 tabular-nums">
           {co2}g CO₂ <span className="text-gray-400 font-normal">({dataTransferred} MB)</span>
        </div>
      </div>
      <div className="hidden md:block pl-2 border-l border-gray-100 dark:border-gray-800">
         <span className={`text-xs font-bold px-2 py-0.5 rounded-md ${rating.color} bg-opacity-10 text-opacity-100 ${rating.color.replace('bg-', 'text-')}`}>
             {rating.label}
         </span>
      </div>
    </div>
  );
}