import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Leaf,
  TrendingDown,
  Euro,
  Award,
  Target,
  Droplets,
  TreeDeciduous,
  Download,
  FileText,
  Info
} from 'lucide-react';
import { PageHeader } from '../../../../components/layout';
import { StatsGrid, Button, Card } from '../../../../components/ui';
import { LoadingSpinner } from '../../../../components/ui';
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
import { useSustainabilityMetrics } from '../../../../api/hooks/sustainability';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useTenantCurrency } from '../../../../hooks/useTenantCurrency';

const SustainabilityPage: React.FC = () => {
  const { t } = useTranslation(['sustainability', 'common']);
  const currentTenant = useCurrentTenant();
  const tenantId = currentTenant?.id || '';
  const { currencySymbol } = useTenantCurrency();

  // Date range state (default to last 30 days)
  const [dateRange, setDateRange] = useState<{ start?: string; end?: string }>({});

  // CSV Export function
  const exportToCSV = () => {
    if (!metrics) return;

    const timestamp = new Date().toISOString().split('T')[0];
    const filename = `sustainability_report_${currentTenant?.name || 'bakery'}_${timestamp}.csv`;

    // Build CSV content
    const csvRows = [
      ['Sustainability Report'],
      ['Generated:', new Date().toLocaleString()],
      ['Bakery:', currentTenant?.name || 'N/A'],
      ['Period:', `${metrics.period.start_date} to ${metrics.period.end_date}`],
      [],
      ['WASTE METRICS'],
      ['Total Waste (kg)', metrics.waste_metrics.total_waste_kg.toFixed(2)],
      ['Production Waste (kg)', metrics.waste_metrics.production_waste_kg.toFixed(2)],
      ['Expired Waste (kg)', metrics.waste_metrics.expired_waste_kg.toFixed(2)],
      ['Waste Percentage (%)', metrics.waste_metrics.waste_percentage.toFixed(2)],
      [],
      ['SDG 12.3 COMPLIANCE'],
      ['Status', metrics.sdg_compliance.sdg_12_3.status_label],
      ['Reduction Achieved (%)', metrics.sdg_compliance.sdg_12_3.reduction_achieved.toFixed(2)],
      ['Progress to Target (%)', metrics.sdg_compliance.sdg_12_3.progress_to_target.toFixed(2)],
      ['Target (%)', metrics.sdg_compliance.sdg_12_3.target_reduction],
      [],
      ['ENVIRONMENTAL IMPACT'],
      ['CO2 Emissions (kg)', metrics.environmental_impact.co2_emissions.kg.toFixed(2)],
      ['CO2 Emissions (tons)', metrics.environmental_impact.co2_emissions.tons.toFixed(4)],
      ['Trees to Offset', metrics.environmental_impact.co2_emissions.trees_to_offset.toFixed(1)],
      ['Equivalent Car KM', metrics.environmental_impact.human_equivalents.car_km_equivalent.toFixed(0)],
      ['Water Footprint (liters)', metrics.environmental_impact.water_footprint.liters.toFixed(0)],
      ['Water Footprint (m³)', metrics.environmental_impact.water_footprint.cubic_meters.toFixed(2)],
      ['Equivalent Showers', metrics.environmental_impact.human_equivalents.showers_equivalent.toFixed(0)],
      ['Land Use (m²)', metrics.environmental_impact.land_use.square_meters.toFixed(2)],
      ['Land Use (hectares)', metrics.environmental_impact.land_use.hectares.toFixed(4)],
      [],
      ['FINANCIAL IMPACT'],
      ['Waste Cost (EUR)', metrics.financial_impact.waste_cost_eur.toFixed(2)],
      ['Potential Monthly Savings (EUR)', metrics.financial_impact.potential_monthly_savings.toFixed(2)],
      ['Annual Projection (EUR)', metrics.financial_impact.annual_projection.toFixed(2)],
      [],
      ['AVOIDED WASTE (AI PREDICTIONS)'],
      ['Waste Avoided (kg)', metrics.avoided_waste.waste_avoided_kg.toFixed(2)],
      ['AI Assisted Batches', metrics.avoided_waste.ai_assisted_batches],
      ['CO2 Avoided (kg)', metrics.avoided_waste.environmental_impact_avoided.co2_kg.toFixed(2)],
      ['Water Saved (liters)', metrics.avoided_waste.environmental_impact_avoided.water_liters.toFixed(0)],
      [],
      ['GRANT READINESS'],
      ['Certification Ready', metrics.sdg_compliance.certification_ready ? 'Yes' : 'No'],
      ['Eligible Programs', Object.values(metrics.grant_readiness.grant_programs).filter(p => p.eligible).length],
      ['Recommended Applications', metrics.grant_readiness.recommended_applications.join(', ')]
    ];

    // Convert to CSV string
    const csvContent = csvRows.map(row => row.join(',')).join('\n');

    // Create download
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // Fetch sustainability metrics
  const {
    data: metrics,
    isLoading,
    error
  } = useSustainabilityMetrics(tenantId, dateRange.start, dateRange.end, {
    enabled: !!tenantId
  });

  // Build stats for StatsGrid
  const sustainabilityStats = useMemo(() => {
    if (!metrics) return [];

    return [
      {
        title: t('sustainability:stats.total_waste_reduced', 'Total Waste Reduced'),
        value: `${metrics.waste_metrics.total_waste_kg.toFixed(0)} kg`,
        icon: TrendingDown,
        variant: 'success' as const,
        subtitle: t('sustainability:stats.from_baseline', 'From baseline'),
        trend: metrics.waste_metrics.waste_percentage < 25 ? {
          value: Math.abs(25 - metrics.waste_metrics.waste_percentage),
          direction: 'down' as const,
          label: t('sustainability:stats.vs_industry', 'vs industry avg')
        } : undefined
      },
      {
        title: t('sustainability:stats.waste_reduction_percentage', 'Waste Reduction'),
        value: `${Math.abs(metrics.sdg_compliance.sdg_12_3.reduction_achieved).toFixed(1)}%`,
        icon: Target,
        variant: metrics.sdg_compliance.sdg_12_3.reduction_achieved >= 15 ? ('success' as const) : ('info' as const),
        subtitle: t('sustainability:stats.progress_to_sdg', 'Progress to SDG 12.3'),
        trend: {
          value: metrics.sdg_compliance.sdg_12_3.progress_to_target,
          direction: 'up' as const,
          label: t('sustainability:stats.to_target', 'to 50% target')
        }
      },
      {
        title: t('sustainability:stats.co2_avoided', 'CO₂ Avoided'),
        value: `${metrics.environmental_impact.co2_emissions.kg.toFixed(0)} kg`,
        icon: Leaf,
        variant: 'info' as const,
        subtitle: `≈ ${metrics.environmental_impact.co2_emissions.trees_to_offset.toFixed(1)} ${t('sustainability:stats.trees', 'trees')}`
      },
      {
        title: t('sustainability:stats.monthly_savings', 'Monthly Savings'),
        value: `${currencySymbol}${metrics.financial_impact.potential_monthly_savings.toFixed(0)}`,
        icon: Euro,
        variant: 'success' as const,
        subtitle: t('sustainability:stats.from_waste_reduction', 'From waste reduction')
      },
      {
        title: t('sustainability:stats.sdg_progress', 'SDG 12.3 Progress'),
        value: `${Math.round(metrics.sdg_compliance.sdg_12_3.progress_to_target)}%`,
        icon: Award,
        variant: metrics.sdg_compliance.sdg_12_3.status === 'sdg_compliant' ? ('success' as const) :
                metrics.sdg_compliance.sdg_12_3.status === 'on_track' ? ('info' as const) : ('warning' as const),
        subtitle: metrics.sdg_compliance.sdg_12_3.status_label
      },
      {
        title: t('sustainability:stats.grant_programs', 'Grant Programs'),
        value: Object.values(metrics.grant_readiness.grant_programs).filter(p => p.eligible).length.toString(),
        icon: FileText,
        variant: 'info' as const,
        subtitle: t('sustainability:stats.eligible', 'Eligible programs')
      }
    ];
  }, [metrics, t]);

  // Get SDG status color
  const getSDGStatusColor = (status: string) => {
    switch (status) {
      case 'sdg_compliant':
        return 'bg-green-500/10 text-green-600 border-green-500/20';
      case 'on_track':
        return 'bg-blue-500/10 text-blue-600 border-blue-500/20';
      case 'progressing':
        return 'bg-yellow-500/10 text-yellow-600 border-yellow-500/20';
      default:
        return 'bg-gray-500/10 text-gray-600 border-gray-500/20';
    }
  };

  if (isLoading) {
    return (
      <div className="space-y-6 p-4 sm:p-6">
        <PageHeader
          title={t('sustainability:page.title', 'Sostenibilidad')}
          description={t('sustainability:page.description', 'Seguimiento de impacto ambiental y cumplimiento SDG 12.3')}
        />
        <div className="flex items-center justify-center py-12">
          <LoadingSpinner size="lg" />
        </div>
      </div>
    );
  }

  if (error || !metrics) {
    return (
      <div className="space-y-6 p-4 sm:p-6">
        <PageHeader
          title={t('sustainability:page.title', 'Sostenibilidad')}
          description={t('sustainability:page.description', 'Seguimiento de impacto ambiental y cumplimiento SDG 12.3')}
        />
        <Card className="p-6">
          <div className="text-center py-8">
            <Leaf className="w-12 h-12 mx-auto mb-3 text-[var(--text-secondary)] opacity-50" />
            <p className="text-sm text-[var(--text-secondary)]">
              {t('sustainability:errors.load_failed', 'Unable to load sustainability metrics')}
            </p>
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="space-y-6 p-4 sm:p-6">
      {/* Page Header */}
      <PageHeader
        title={t('sustainability:page.title', 'Sostenibilidad')}
        description={t('sustainability:page.description', 'Seguimiento de impacto ambiental y cumplimiento SDG 12.3')}
        actions={[
          {
            id: "export-report",
            label: t('sustainability:actions.export_report', 'Exportar Informe'),
            icon: Download,
            onClick: exportToCSV,
            variant: "outline",
            size: "sm",
            disabled: !metrics
          }
        ]}
      />

      {/* Stats Grid */}
      <StatsGrid
        stats={sustainabilityStats}
        columns={3}
        gap="lg"
      />

      {/* Main Content Sections */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Waste Analytics Section */}
        <Card className="p-6">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                {t('sustainability:sections.waste_analytics', 'Análisis de Residuos')}
              </h3>
              <p className="text-sm text-[var(--text-secondary)]">
                {t('sustainability:sections.waste_subtitle', 'Desglose de residuos por tipo')}
              </p>
            </div>
            <TrendingDown className="w-6 h-6 text-green-600" />
          </div>

          <div className="space-y-4">
            {/* Waste breakdown */}
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-sm text-[var(--text-secondary)]">
                  {t('sustainability:waste.production', 'Residuos de Producción')}
                </span>
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  {metrics.waste_metrics.production_waste_kg.toFixed(1)} kg
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-[var(--text-secondary)]">
                  {t('sustainability:waste.expired', 'Producto Expirado')}
                </span>
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  {metrics.waste_metrics.expired_waste_kg.toFixed(1)} kg
                </span>
              </div>
              <div className="flex items-center justify-between pt-3 border-t border-[var(--border-primary)]">
                <span className="text-sm font-semibold text-[var(--text-primary)]">
                  {t('sustainability:waste.total', 'Total')}
                </span>
                <span className="text-sm font-bold text-[var(--text-primary)]">
                  {metrics.waste_metrics.total_waste_kg.toFixed(1)} kg
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-[var(--text-secondary)]">
                  {t('sustainability:waste.percentage', 'Porcentaje de Residuos')}
                </span>
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  {metrics.waste_metrics.waste_percentage.toFixed(2)}%
                </span>
              </div>
            </div>

            {/* AI Impact */}
            <div className="mt-4 p-4 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
              <div className="flex items-center gap-2 mb-2">
                <Info className="w-4 h-4 text-blue-600" />
                <span className="text-xs font-medium text-blue-700 dark:text-blue-400">
                  {t('sustainability:ai.impact_title', 'Impacto de IA')}
                </span>
              </div>
              <p className="text-sm text-blue-600 dark:text-blue-300">
                {t('sustainability:ai.waste_avoided', 'Residuos evitados')}: <strong>{metrics.avoided_waste.waste_avoided_kg.toFixed(1)} kg</strong>
              </p>
              <p className="text-xs text-blue-600/80 dark:text-blue-300/80 mt-1">
                {t('sustainability:ai.batches', 'Lotes asistidos por IA')}: {metrics.avoided_waste.ai_assisted_batches}
              </p>
            </div>
          </div>
        </Card>

        {/* Environmental Impact Section */}
        <Card className="p-6">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                {t('sustainability:sections.environmental_impact', 'Impacto Ambiental')}
              </h3>
              <p className="text-sm text-[var(--text-secondary)]">
                {t('sustainability:sections.environmental_subtitle', 'Métricas de huella ambiental')}
              </p>
            </div>
            <Leaf className="w-6 h-6 text-green-600" />
          </div>

          <div className="grid grid-cols-2 gap-4">
            {/* CO2 */}
            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Leaf className="w-4 h-4 text-green-600" />
                <span className="text-xs font-medium text-[var(--text-secondary)]">CO₂</span>
              </div>
              <div className="text-xl font-bold text-[var(--text-primary)]">
                {metrics.environmental_impact.co2_emissions.kg.toFixed(0)} kg
              </div>
              <p className="text-xs text-[var(--text-secondary)] mt-1">
                ≈ {metrics.environmental_impact.co2_emissions.trees_to_offset.toFixed(1)} {t('sustainability:metrics.trees', 'árboles')}
              </p>
            </div>

            {/* Water */}
            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Droplets className="w-4 h-4 text-cyan-600" />
                <span className="text-xs font-medium text-[var(--text-secondary)]">{t('sustainability:metrics.water', 'Agua')}</span>
              </div>
              <div className="text-xl font-bold text-[var(--text-primary)]">
                {metrics.environmental_impact.water_footprint.cubic_meters.toFixed(1)} m³
              </div>
              <p className="text-xs text-[var(--text-secondary)] mt-1">
                {metrics.environmental_impact.water_footprint.liters.toFixed(0)} {t('common:liters', 'litros')}
              </p>
            </div>

            {/* Land Use */}
            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <TreeDeciduous className="w-4 h-4 text-amber-600" />
                <span className="text-xs font-medium text-[var(--text-secondary)]">{t('sustainability:metrics.land', 'Tierra')}</span>
              </div>
              <div className="text-xl font-bold text-[var(--text-primary)]">
                {metrics.environmental_impact.land_use.square_meters.toFixed(0)} m²
              </div>
              <p className="text-xs text-[var(--text-secondary)] mt-1">
                {metrics.environmental_impact.land_use.hectares.toFixed(3)} {t('sustainability:metrics.hectares', 'hectáreas')}
              </p>
            </div>

            {/* Human Equivalents */}
            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Info className="w-4 h-4 text-blue-600" />
                <span className="text-xs font-medium text-[var(--text-secondary)]">{t('sustainability:metrics.equivalents', 'Equivalentes')}</span>
              </div>
              <div className="text-xs space-y-1 text-[var(--text-secondary)]">
                <div>🚗 {metrics.environmental_impact.human_equivalents.car_km_equivalent.toFixed(0)} km</div>
                <div>📱 {metrics.environmental_impact.human_equivalents.smartphone_charges.toFixed(0)} cargas</div>
                <div>🚿 {metrics.environmental_impact.human_equivalents.showers_equivalent.toFixed(0)} duchas</div>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* SDG Compliance & Grant Readiness */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* SDG 12.3 Compliance */}
        <Card className="p-6">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                {t('sustainability:sections.sdg_compliance', 'Cumplimiento SDG 12.3')}
              </h3>
              <p className="text-sm text-[var(--text-secondary)]">
                {t('sustainability:sections.sdg_subtitle', 'Progreso hacia objetivo ONU')}
              </p>
            </div>
            <div className={`px-3 py-1 rounded-full border text-xs font-medium ${getSDGStatusColor(metrics.sdg_compliance.sdg_12_3.status)}`}>
              {metrics.sdg_compliance.sdg_12_3.status_label}
            </div>
          </div>

          {/* Progress Bar */}
          <div className="mb-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium text-[var(--text-primary)]">
                {t('sustainability:sdg.progress_label', 'Progreso al Objetivo')}
              </span>
              <span className="text-sm font-bold text-[var(--color-primary)]">
                {Math.round(metrics.sdg_compliance.sdg_12_3.progress_to_target)}%
              </span>
            </div>
            <div className="w-full bg-[var(--bg-secondary)] rounded-full h-3 overflow-hidden">
              <div
                className="h-full bg-gradient-to-r from-green-500 to-emerald-600 rounded-full transition-all duration-500"
                style={{ width: `${Math.min(metrics.sdg_compliance.sdg_12_3.progress_to_target, 100)}%` }}
              />
            </div>
            <p className="text-xs text-[var(--text-secondary)] mt-2">
              {t('sustainability:sdg.target_note', 'Objetivo: 50% reducción de residuos para 2030')}
            </p>
          </div>

          {/* Metrics */}
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-sm text-[var(--text-secondary)]">
                {t('sustainability:sdg.baseline', 'Línea Base')}
              </span>
              <span className="text-sm font-medium text-[var(--text-primary)]">
                {metrics.sdg_compliance.sdg_12_3.baseline_waste_percentage.toFixed(2)}%
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-[var(--text-secondary)]">
                {t('sustainability:sdg.current', 'Actual')}
              </span>
              <span className="text-sm font-medium text-[var(--text-primary)]">
                {metrics.sdg_compliance.sdg_12_3.current_waste_percentage.toFixed(2)}%
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-[var(--text-secondary)]">
                {t('sustainability:sdg.reduction', 'Reducción Lograda')}
              </span>
              <span className="text-sm font-bold text-green-600">
                {Math.abs(metrics.sdg_compliance.sdg_12_3.reduction_achieved).toFixed(1)}%
              </span>
            </div>
            <div className="flex items-center justify-between pt-3 border-t border-[var(--border-primary)]">
              <span className="text-sm text-[var(--text-secondary)]">
                {t('sustainability:sdg.certification_ready', 'Listo para Certificación')}
              </span>
              <span className={`text-sm font-medium ${metrics.sdg_compliance.certification_ready ? 'text-green-600' : 'text-amber-600'}`}>
                {metrics.sdg_compliance.certification_ready ? t('common:yes', 'Sí') : t('common:no', 'No')}
              </span>
            </div>
          </div>
        </Card>

        {/* Grant Readiness */}
        <Card className="p-6">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                {t('sustainability:sections.grant_readiness', 'Subvenciones Disponibles')}
              </h3>
              <p className="text-sm text-[var(--text-secondary)]">
                {t('sustainability:sections.grant_subtitle', 'Programas de financiación elegibles')}
              </p>
            </div>
            <Award className="w-6 h-6 text-amber-600" />
          </div>

          {/* Overall Readiness */}
          <div className="mb-4 p-4 bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium text-amber-700 dark:text-amber-400">
                {t('sustainability:grant.overall_readiness', 'Preparación General')}
              </span>
              <span className="text-lg font-bold text-amber-600 dark:text-amber-400">
                {Math.round(metrics.grant_readiness.overall_readiness_percentage)}%
              </span>
            </div>
          </div>

          {/* Grant Programs List */}
          <div className="space-y-3">
            {Object.entries(metrics.grant_readiness.grant_programs).map(([key, program]) => (
              <div
                key={key}
                className={`p-3 rounded-lg border ${
                  program.eligible
                    ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
                    : 'bg-gray-50 dark:bg-gray-800/20 border-gray-200 dark:border-gray-700'
                }`}
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      <span className={`text-sm font-medium ${
                        program.eligible ? 'text-green-700 dark:text-green-400' : 'text-gray-600 dark:text-gray-400'
                      }`}>
                        {key.replace(/_/g, ' ')}
                      </span>
                      {program.eligible && (
                        <span className="text-xs px-2 py-0.5 bg-green-500/20 text-green-700 dark:text-green-400 rounded-full">
                          {t('sustainability:grant.eligible', 'Elegible')}
                        </span>
                      )}
                    </div>
                    {program.funding_eur && program.funding_eur > 0 && (
                      <p className="text-xs text-[var(--text-secondary)] mt-1">
                        {t('sustainability:grant.funding', 'Financiación')}: {currencySymbol}{program.funding_eur.toLocaleString()}
                      </p>
                    )}
                  </div>
                  <div className={`text-xs px-2 py-1 rounded ${
                    program.confidence === 'high'
                      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                      : program.confidence === 'medium'
                      ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
                      : 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400'
                  }`}>
                    {program.confidence}
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Spain Compliance */}
          <div className="mt-4 pt-4 border-t border-[var(--border-primary)]">
            <p className="text-xs font-medium text-[var(--text-secondary)] mb-2">
              {t('sustainability:grant.spain_compliance', 'Cumplimiento España')}
            </p>
            <div className="flex items-center gap-3 text-xs">
              <div className="flex items-center gap-1">
                {metrics.grant_readiness.spain_compliance?.law_1_2025 ? '✅' : '❌'}
                <span className="text-[var(--text-secondary)]">Ley 1/2025</span>
              </div>
              <div className="flex items-center gap-1">
                {metrics.grant_readiness.spain_compliance?.circular_economy_strategy ? '✅' : '❌'}
                <span className="text-[var(--text-secondary)]">Economía Circular 2030</span>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Financial Impact */}
      <Card className="p-6">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
              {t('sustainability:sections.financial_impact', 'Impacto Financiero')}
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              {t('sustainability:sections.financial_subtitle', 'Costes y ahorros de sostenibilidad')}
            </p>
          </div>
          <Euro className="w-6 h-6 text-green-600" />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
            <p className="text-xs font-medium text-[var(--text-secondary)] mb-2">
              {t('sustainability:financial.waste_cost', 'Coste de Residuos')}
            </p>
            <p className="text-2xl font-bold text-red-600">
              {currencySymbol}{metrics.financial_impact.waste_cost_eur.toFixed(2)}
            </p>
            <p className="text-xs text-[var(--text-secondary)] mt-1">
              {currencySymbol}{metrics.financial_impact.cost_per_kg.toFixed(2)}/kg
            </p>
          </div>

          <div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-lg border border-green-200 dark:border-green-800">
            <p className="text-xs font-medium text-green-700 dark:text-green-400 mb-2">
              {t('sustainability:financial.monthly_savings', 'Ahorro Mensual')}
            </p>
            <p className="text-2xl font-bold text-green-600 dark:text-green-400">
              {currencySymbol}{metrics.financial_impact.potential_monthly_savings.toFixed(2)}
            </p>
            <p className="text-xs text-green-600/80 dark:text-green-400/80 mt-1">
              {t('sustainability:financial.from_reduction', 'Por reducción')}
            </p>
          </div>

          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
            <p className="text-xs font-medium text-[var(--text-secondary)] mb-2">
              {t('sustainability:financial.annual_projection', 'Proyección Anual')}
            </p>
            <p className="text-2xl font-bold text-[var(--text-primary)]">
              {currencySymbol}{metrics.financial_impact.annual_projection.toFixed(2)}
            </p>
            <p className="text-xs text-[var(--text-secondary)] mt-1">
              {t('sustainability:financial.estimated', 'Estimado')}
            </p>
          </div>

          <div className="p-4 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <p className="text-xs font-medium text-blue-700 dark:text-blue-400 mb-2">
              {t('sustainability:financial.roi', 'ROI de IA')}
            </p>
            <p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
              {currencySymbol}{(metrics.avoided_waste.waste_avoided_kg * metrics.financial_impact.cost_per_kg).toFixed(2)}
            </p>
            <p className="text-xs text-blue-600/80 dark:text-blue-400/80 mt-1">
              {t('sustainability:financial.ai_savings', 'Ahorrado por IA')}
            </p>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default SustainabilityPage;
