puffin-app/project/src/components/CarbonOffset.tsx

import React, { useState } from 'react';
import { Leaf } from 'lucide-react';
import type { CarbonCalculation, CurrencyCode } from '../types';
import { currencies, formatCurrency } from '../utils/currencies';
import { CurrencySelect } from './CurrencySelect';
import { calculateCarbonFromDistance } from '../utils/carbonCalculator';

interface Props {
  calculation: CarbonCalculation;
  onOffsetClick?: (tons: number) => void;
}

export function CarbonOffset({ calculation, onOffsetClick }: Props) {
  const [calculationType, setCalculationType] = useState<'distance' | 'fuel'>('distance');
  const [annualDistance, setAnnualDistance] = useState<string>('');
  const [fuelAmount, setFuelAmount] = useState<string>('');
  const [fuelUnit, setFuelUnit] = useState<'liters' | 'gallons'>('liters');
  const [currency, setCurrency] = useState<CurrencyCode>('USD');
  const [offsetPercentage, setOffsetPercentage] = useState<number>(100);
  const [customPercentage, setCustomPercentage] = useState<string>('');
  const selectedCurrency = currencies[currency];

  const handleCustomPercentageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    if (value === '' || (Number(value) >= 0 && Number(value) <= 100)) {
      setCustomPercentage(value);
      if (value !== '') {
        setOffsetPercentage(Number(value));
      }
    }
  };

  const handlePresetPercentage = (percentage: number) => {
    setOffsetPercentage(percentage);
    setCustomPercentage('');
  };

  const calculateOffsetAmount = (emissions: number, percentage: number) => {
    return (emissions * percentage) / 100;
  };

  const getEmissions = () => {
    if (calculationType === 'distance' && annualDistance) {
      return calculateCarbonFromDistance(Number(annualDistance));
    }
    return calculation.yearlyEmissions;
  };

  const emissions = getEmissions();
  const offsetAmount = calculateOffsetAmount(emissions, offsetPercentage);
  const offsetCost = (offsetAmount * 20); // $20 per ton

  return (
    <div className="bg-white rounded-lg shadow-xl p-6 max-w-2xl w-full">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold text-gray-800">Annual Carbon Offset Summary</h2>
        <Leaf className="text-green-500" size={24} />
      </div>

      <div className="mb-6">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Calculation Method
        </label>
        <div className="flex space-x-4">
          <button
            type="button"
            onClick={() => setCalculationType('distance')}
            className={`px-4 py-2 rounded-lg transition-colors ${
              calculationType === 'distance'
                ? 'bg-green-500 text-white'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            Estimated Distance
          </button>
          <button
            type="button"
            onClick={() => setCalculationType('fuel')}
            className={`px-4 py-2 rounded-lg transition-colors ${
              calculationType === 'fuel'
                ? 'bg-green-500 text-white'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            Fuel Based
          </button>
        </div>
      </div>
      
      {calculationType === 'distance' && (
        <div className="mb-6">
          <label className="block text-sm font-medium text-gray-700">
            Annual Distance (nautical miles)
          </label>
          <input
            type="number"
            min="1"
            value={annualDistance}
            onChange={(e) => setAnnualDistance(e.target.value)}
            placeholder="Enter annual distance"
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-200"
          />
        </div>
      )}

      {calculationType === 'fuel' && (
        <div className="mb-6">
          <label className="block text-sm font-medium text-gray-700">
            Annual Fuel Consumption
          </label>
          <div className="flex space-x-4">
            <div className="flex-1">
              <input
                type="number"
                min="1"
                value={fuelAmount}
                onChange={(e) => setFuelAmount(e.target.value)}
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-200"
                required
              />
            </div>
            <div>
              <select
                value={fuelUnit}
                onChange={(e) => setFuelUnit(e.target.value as 'liters' | 'gallons')}
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-200"
              >
                <option value="liters">Liters</option>
                <option value="gallons">Gallons</option>
              </select>
            </div>
          </div>
        </div>
      )}
      
      <div className="mb-6">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Offset Percentage
        </label>
        <div className="flex flex-wrap gap-3 mb-3">
          {[100, 50, 25].map((percent) => (
            <button
              key={percent}
              onClick={() => handlePresetPercentage(percent)}
              className={`px-4 py-2 rounded-lg transition-colors ${
                offsetPercentage === percent && customPercentage === ''
                  ? 'bg-green-500 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              {percent}%
            </button>
          ))}
          <div className="flex items-center space-x-2">
            <input
              type="number"
              value={customPercentage}
              onChange={handleCustomPercentageChange}
              placeholder="Custom %"
              min="0"
              max="100"
              className="w-24 px-3 py-2 border rounded-lg focus:ring-green-500 focus:border-green-500"
            />
            <span className="text-gray-600">%</span>
          </div>
        </div>
      </div>
      
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Select Currency
        </label>
        <div className="max-w-xs">
          <CurrencySelect value={currency} onChange={setCurrency} />
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4 mb-6">
        <div className="bg-gray-50 p-4 rounded-lg">
          <p className="text-sm text-gray-600">Selected Offset Amount</p>
          <p className="text-2xl font-bold text-gray-900">
            {offsetAmount.toFixed(2)} tons CO₂
          </p>
          <p className="text-sm text-gray-500">
            {offsetPercentage}% of {emissions.toFixed(2)} tons
          </p>
        </div>
        <div className="bg-gray-50 p-4 rounded-lg">
          <p className="text-sm text-gray-600">Estimated Offset Cost</p>
          <p className="text-2xl font-bold text-gray-900">
            {formatCurrency(offsetCost, selectedCurrency)}
          </p>
        </div>
      </div>

      <button 
        onClick={() => {
          if (onOffsetClick) {
            onOffsetClick(offsetAmount);
          }
        }}
        className="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition-colors"
      >
        Offset Your Impact
      </button>
    </div>
  );
}