import Badge from '@/components/ui/Badge.tsx';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { Grid } from '@/components/ui/layout';
import Spinner from '@/components/ui/Spinner.tsx';
import { formatCurrency, formatNumber } from '@/lib/fin';
import { ArrowUp, BarChart3, Clock } from 'lucide-react';

type Props = {
  isLoading: boolean;
  totalCo2Saved: number;
  totalEconomicValue: number;
  activeMatchesCount: number;
  environmentalBreakdown: Record<string, unknown>;
  t: (key: string) => string;
};

const ImpactBreakdownSection = ({
  isLoading,
  totalCo2Saved,
  totalEconomicValue,
  activeMatchesCount,
  environmentalBreakdown,
  t,
}: Props) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          {t('analyticsDashboard.environmentalImpact')}
        </CardTitle>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="flex items-center justify-center py-8">
            <Spinner className="h-6 w-6" />
          </div>
        ) : (
          <Grid cols={{ md: 2, lg: 4 }} gap="md">
            <div className="text-center">
              <div className="text-3xl font-bold text-green-600 mb-2">
                {formatNumber(totalCo2Saved)}
              </div>
              <p className="text-sm text-muted-foreground">
                {t('analyticsDashboard.tonnesCo2Saved')}
              </p>
              <Badge variant="outline" className="mt-2">
                <ArrowUp className="h-4 w-4 mr-1 text-current" />
                {t('analyticsDashboard.perYear')}
              </Badge>
            </div>

            <div className="text-center">
              <div className="text-3xl font-bold text-success mb-2">
                {formatCurrency(totalEconomicValue)}
              </div>
              <p className="text-sm text-muted-foreground">
                {t('analyticsDashboard.economicValueCreated')}
              </p>
              <Badge variant="outline" className="mt-2">
                <ArrowUp className="h-4 w-4 mr-1 text-current" />
                {t('analyticsDashboard.annual')}
              </Badge>
            </div>

            <div className="text-center">
              <div className="text-3xl font-bold text-blue-600 mb-2">
                {formatNumber(activeMatchesCount)}
              </div>
              <p className="text-sm text-muted-foreground">
                {t('analyticsDashboard.activeMatches')}
              </p>
              <Badge variant="outline" className="mt-2">
                <Clock className="h-4 w-4 mr-1 text-current" />
                {t('analyticsDashboard.operational')}
              </Badge>
            </div>

            <div className="text-center">
              <div className="text-3xl font-bold text-purple-600 mb-2">
                {Object.keys(environmentalBreakdown || {}).length}
              </div>
              <p className="text-sm text-muted-foreground">
                {t('analyticsDashboard.impactCategories')}
              </p>
              <Badge variant="outline" className="mt-2">
                <BarChart3 className="h-4 w-4 mr-1 text-current" />
                {t('analyticsDashboard.tracked')}
              </Badge>
            </div>
          </Grid>
        )}
      </CardContent>
    </Card>
  );
};

export default ImpactBreakdownSection;