import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { Grid } from '@/components/ui/layout';
import MetricItem from '@/components/ui/MetricItem.tsx';
import Spinner from '@/components/ui/Spinner.tsx';
import { useOrganizationStatistics } from '@/hooks/api/useAnalyticsAPI.ts';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { Activity, DollarSign, Leaf, MapPin, Target, TrendingUp } from 'lucide-react';
import React from 'react';
import { formatCurrency, formatNumber } from '../../lib/fin';

interface OrganizationStatisticsProps {
  organizationId: string;
}

const OrganizationStatistics = ({ organizationId }: OrganizationStatisticsProps) => {
  const { t } = useTranslation();
  const { data: stats, isLoading, error } = useOrganizationStatistics(organizationId);

  // use central fin utilities

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>{t('organizationPage.statistics')}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-center py-8">
            <Spinner className="h-6 w-6 text-primary" />
          </div>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>{t('organizationPage.statistics')}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center py-8 text-muted-foreground">
            <p>{t('organizationPage.statisticsError')}</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!stats) {
    return null;
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('organizationPage.statistics')}</CardTitle>
      </CardHeader>
      <CardContent>
        <Grid cols={{ sm: 2, md: 3 }} gap="md">
          <MetricItem
            icon={<MapPin className="h-4 w-4 text-current text-warning w-4" />}
            label={t('organizationPage.totalSites')}
            value={formatNumber(stats.total_sites)}
          />
          <MetricItem
            icon={<Target className="h-4 w-4 text-current text-success w-4" />}
            label={t('organizationPage.totalResourceFlows')}
            value={formatNumber(stats.total_resource_flows)}
          />
          <MetricItem
            icon={<Activity className="h-4 w-4 text-current text-primary w-4" />}
            label={t('organizationPage.activeMatches')}
            value={formatNumber(stats.active_matches)}
          />
          <MetricItem
            icon={<TrendingUp className="h-4 w-4 text-current text-purple-500 w-4" />}
            label={t('organizationPage.totalMatches')}
            value={formatNumber(stats.total_matches)}
          />
          {stats.co2_savings_tonnes > 0 && (
            <MetricItem
              icon={<Leaf className="h-4 w-4 text-current text-green-600 w-4" />}
              label={t('organizationPage.co2Savings')}
              value={`${formatNumber(stats.co2_savings_tonnes)} t`}
            />
          )}
          {stats.economic_value_eur > 0 && (
            <MetricItem
              icon={<DollarSign className="h-4 w-4 text-current text-success w-4" />}
              label={t('organizationPage.economicValue')}
              value={formatCurrency(stats.economic_value_eur)}
            />
          )}
        </Grid>
      </CardContent>
    </Card>
  );
};

export default React.memo(OrganizationStatistics);