import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { Stack } from '@/components/ui/layout';
import Spinner from '@/components/ui/Spinner.tsx';
import { formatCurrency } from '@/lib/fin';
import SimpleBarChart from './SimpleBarChart';

type Props = {
  isLoading: boolean;
  matchSuccessRate: number;
  avgMatchTime: number;
  totalMatchValue: number;
  topResourceTypes: Array<{ type: string; count: number }>;
  t: (key: string) => string;
};

const MatchingPerformanceSection = ({
  isLoading,
  matchSuccessRate,
  avgMatchTime,
  totalMatchValue,
  topResourceTypes,
  t,
}: Props) => {
  const formatPercentage = (value: number) => `${(value * 100).toFixed(1)}%`;

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          {t('analyticsDashboard.matchingPerformance')}
        </CardTitle>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="flex items-center justify-center py-8">
            <Spinner className="h-6 w-6" />
          </div>
        ) : (
          <Stack spacing="md">
            <div className="grid grid-cols-2 gap-4">
              <div className="text-center">
                <div className="text-2xl font-bold text-success mb-1">
                  {formatPercentage(matchSuccessRate)}
                </div>
                <p className="text-xs text-muted-foreground">
                  {t('analyticsDashboard.successRate')}
                </p>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-primary mb-1">
                  {avgMatchTime.toFixed(1)}
                </div>
                <p className="text-xs text-muted-foreground">{t('analyticsDashboard.avgDays')}</p>
              </div>
            </div>

            <div>
              <div className="text-sm font-medium mb-2">
                {t('analyticsDashboard.totalMatchValue')}
              </div>
              <div className="text-lg font-bold text-success">
                {formatCurrency(totalMatchValue)}
              </div>
            </div>

            {topResourceTypes.length > 0 && (
              <SimpleBarChart
                data={topResourceTypes
                  .slice(0, 5)
                  .map((item) => ({ label: item.type, value: item.count }))}
                title={t('analyticsDashboard.topResourceTypes')}
              />
            )}
          </Stack>
        )}
      </CardContent>
    </Card>
  );
};

export default MatchingPerformanceSection;