import { EnvironmentalImpact as ImpactData, TransportEventType, TransportMethod } from '../../lib/transport/types';

interface EnvironmentalImpactProps {
  impact: ImpactData;
  title?: string;
  showDetails?: boolean;
}

const METHOD_LABELS: Record<TransportMethod, string> = {
  walking: 'Walking',
  bicycle: 'Bicycle',
  electric_vehicle: 'Electric Vehicle',
  hybrid_vehicle: 'Hybrid Vehicle',
  gasoline_vehicle: 'Gas Vehicle',
  diesel_truck: 'Diesel Truck',
  electric_truck: 'Electric Truck',
  refrigerated_truck: 'Refrigerated Truck',
  rail: 'Rail',
  ship: 'Ship',
  air: 'Air Freight',
  drone: 'Drone',
  local_delivery: 'Local Delivery',
  customer_pickup: 'Customer Pickup',
};

const EVENT_LABELS: Record<TransportEventType, string> = {
  seed_acquisition: 'Seed Acquisition',
  planting: 'Planting',
  growing_transport: 'Growing Transport',
  harvest: 'Harvest',
  processing: 'Processing',
  distribution: 'Distribution',
  consumer_delivery: 'Consumer Delivery',
  seed_saving: 'Seed Saving',
  seed_sharing: 'Seed Sharing',
};

function getCarbonRating(carbon: number): { label: string; color: string; bgColor: string } {
  if (carbon < 0.5) return { label: 'Excellent', color: 'text-green-600', bgColor: 'bg-green-100' };
  if (carbon < 1) return { label: 'Very Good', color: 'text-emerald-600', bgColor: 'bg-emerald-100' };
  if (carbon < 2) return { label: 'Good', color: 'text-lime-600', bgColor: 'bg-lime-100' };
  if (carbon < 5) return { label: 'Moderate', color: 'text-yellow-600', bgColor: 'bg-yellow-100' };
  if (carbon < 10) return { label: 'High', color: 'text-orange-600', bgColor: 'bg-orange-100' };
  return { label: 'Very High', color: 'text-red-600', bgColor: 'bg-red-100' };
}

export default function EnvironmentalImpact({
  impact,
  title = 'Environmental Impact Report',
  showDetails = true,
}: EnvironmentalImpactProps) {
  const rating = getCarbonRating(impact.totalCarbonKg);

  // Sort methods by carbon impact
  const sortedMethods = Object.entries(impact.breakdownByMethod)
    .filter(([_, data]) => data.carbon > 0 || data.distance > 0)
    .sort((a, b) => b[1].carbon - a[1].carbon);

  // Sort events by count
  const sortedEvents = Object.entries(impact.breakdownByEventType)
    .filter(([_, data]) => data.count > 0)
    .sort((a, b) => b[1].count - a[1].count);

  const totalMethods = sortedMethods.length;
  const totalEvents = sortedEvents.reduce((sum, [_, data]) => sum + data.count, 0);

  return (
    <div className="bg-white rounded-lg shadow-lg overflow-hidden">
      {/* Header */}
      <div className="bg-gradient-to-r from-teal-600 to-cyan-600 text-white p-6">
        <h3 className="text-xl font-bold">{title}</h3>
        <p className="text-teal-200 text-sm mt-1">Complete carbon and food miles analysis</p>
      </div>

      <div className="p-6 space-y-6">
        {/* Main metrics */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="text-center p-4 bg-green-50 rounded-lg">
            <p className="text-3xl font-bold text-green-600">{impact.totalCarbonKg.toFixed(2)}</p>
            <p className="text-sm text-gray-500">Total Carbon (kg CO2)</p>
          </div>
          <div className="text-center p-4 bg-blue-50 rounded-lg">
            <p className="text-3xl font-bold text-blue-600">{impact.totalFoodMiles.toFixed(1)}</p>
            <p className="text-sm text-gray-500">Total Food Miles (km)</p>
          </div>
          <div className="text-center p-4 bg-purple-50 rounded-lg">
            <p className="text-3xl font-bold text-purple-600">{impact.carbonPerKgProduce.toFixed(3)}</p>
            <p className="text-sm text-gray-500">kg CO2 / kg Produce</p>
          </div>
          <div className="text-center p-4 bg-orange-50 rounded-lg">
            <p className="text-3xl font-bold text-orange-600">{impact.milesPerKgProduce.toFixed(1)}</p>
            <p className="text-sm text-gray-500">Miles / kg Produce</p>
          </div>
        </div>

        {/* Rating badge */}
        <div className="flex justify-center">
          <div className={`px-6 py-3 rounded-full ${rating.bgColor}`}>
            <span className={`text-lg font-bold ${rating.color}`}>
              Environmental Rating: {rating.label}
            </span>
          </div>
        </div>

        {/* Comparison with conventional */}
        {impact.comparisonToConventional && (
          <div className="p-6 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200">
            <h4 className="text-lg font-bold text-gray-900 mb-4">
              Comparison vs Conventional Agriculture
            </h4>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="text-center">
                <div className="w-24 h-24 mx-auto mb-3 rounded-full bg-green-100 flex items-center justify-center">
                  <span className="text-3xl font-bold text-green-600">
                    {impact.comparisonToConventional.percentageReduction.toFixed(0)}%
                  </span>
                </div>
                <p className="text-sm text-gray-600">Carbon Reduction</p>
              </div>

              <div className="text-center">
                <p className="text-3xl font-bold text-green-600">
                  {impact.comparisonToConventional.carbonSaved.toFixed(1)}
                </p>
                <p className="text-sm text-gray-500">kg CO2 Saved</p>
                <div className="mt-2 flex items-center justify-center gap-1 text-green-600">
                  <span>🌲</span>
                  <span className="text-xs">
                    = {(impact.comparisonToConventional.carbonSaved / 21).toFixed(1)} trees/year
                  </span>
                </div>
              </div>

              <div className="text-center">
                <p className="text-3xl font-bold text-blue-600">
                  {impact.comparisonToConventional.milesSaved.toFixed(0)}
                </p>
                <p className="text-sm text-gray-500">km Saved</p>
                <div className="mt-2 flex items-center justify-center gap-1 text-blue-600">
                  <span>🚗</span>
                  <span className="text-xs">
                    = {(impact.comparisonToConventional.milesSaved / 15).toFixed(0)} car trips
                  </span>
                </div>
              </div>
            </div>

            {/* Visual bar comparison */}
            <div className="mt-6 space-y-3">
              <div>
                <div className="flex justify-between text-sm mb-1">
                  <span className="text-gray-600">Your Carbon Footprint</span>
                  <span className="font-medium text-green-600">{impact.totalCarbonKg.toFixed(2)} kg</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
                  <div
                    className="h-full bg-green-500 rounded-full"
                    style={{
                      width: `${100 - impact.comparisonToConventional.percentageReduction}%`
                    }}
                  ></div>
                </div>
              </div>
              <div>
                <div className="flex justify-between text-sm mb-1">
                  <span className="text-gray-600">Conventional Average</span>
                  <span className="font-medium text-gray-500">
                    {(impact.totalCarbonKg + impact.comparisonToConventional.carbonSaved).toFixed(2)} kg
                  </span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
                  <div className="h-full bg-gray-400 rounded-full w-full"></div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Detailed breakdowns */}
        {showDetails && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* By Transport Method */}
            {sortedMethods.length > 0 && (
              <div className="p-4 border border-gray-200 rounded-lg">
                <h4 className="font-semibold text-gray-900 mb-4">By Transport Method</h4>
                <div className="space-y-3">
                  {sortedMethods.map(([method, data]) => {
                    const percentage = impact.totalCarbonKg > 0
                      ? (data.carbon / impact.totalCarbonKg) * 100
                      : 0;
                    return (
                      <div key={method}>
                        <div className="flex justify-between text-sm mb-1">
                          <span className="text-gray-600">
                            {METHOD_LABELS[method as TransportMethod] || method}
                          </span>
                          <span className="font-medium text-gray-900">
                            {data.carbon.toFixed(3)} kg ({percentage.toFixed(0)}%)
                          </span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-2">
                          <div
                            className="h-full bg-teal-500 rounded-full"
                            style={{ width: `${percentage}%` }}
                          ></div>
                        </div>
                        <p className="text-xs text-gray-400 mt-0.5">
                          {data.distance.toFixed(1)} km traveled
                        </p>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* By Event Type */}
            {sortedEvents.length > 0 && (
              <div className="p-4 border border-gray-200 rounded-lg">
                <h4 className="font-semibold text-gray-900 mb-4">By Event Type</h4>
                <div className="space-y-3">
                  {sortedEvents.map(([eventType, data]) => {
                    const percentage = totalEvents > 0
                      ? (data.count / totalEvents) * 100
                      : 0;
                    return (
                      <div key={eventType}>
                        <div className="flex justify-between text-sm mb-1">
                          <span className="text-gray-600">
                            {EVENT_LABELS[eventType as TransportEventType] || eventType}
                          </span>
                          <span className="font-medium text-gray-900">
                            {data.count} events • {data.carbon.toFixed(3)} kg
                          </span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-2">
                          <div
                            className="h-full bg-cyan-500 rounded-full"
                            style={{ width: `${percentage}%` }}
                          ></div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        )}

        {/* Tips Section */}
        <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
          <h4 className="font-semibold text-yellow-800 mb-2">Tips to Reduce Impact</h4>
          <ul className="text-sm text-yellow-700 space-y-1">
            <li>• Prefer walking, cycling, or electric vehicles for short distances</li>
            <li>• Consolidate multiple transports into single trips</li>
            <li>• Source from local producers within 25km when possible</li>
            <li>• Use rail transport for longer distances when available</li>
            <li>• Avoid air freight unless absolutely necessary</li>
          </ul>
        </div>

        {/* Summary stats */}
        <div className="flex justify-between text-xs text-gray-500 pt-4 border-t border-gray-200">
          <span>Transport methods used: {totalMethods}</span>
          <span>Total events tracked: {totalEvents}</span>
        </div>
      </div>
    </div>
  );
}