mockupAWS/frontend/src/components/charts/CostBreakdown.tsx

import { memo } from 'react';
import {
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Tooltip,
} from 'recharts';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { CostBreakdown as CostBreakdownType } from '@/types/api';
import { CHART_COLORS, formatCurrency } from './chart-utils';

interface CostBreakdownChartProps {
  data: CostBreakdownType[];
  title?: string;
  description?: string;
}

// Map services to colors
const SERVICE_COLORS: Record<string, string> = {
  sqs: CHART_COLORS.sqs,
  lambda: CHART_COLORS.lambda,
  bedrock: CHART_COLORS.bedrock,
  s3: CHART_COLORS.blue,
  cloudwatch: CHART_COLORS.green,
  default: CHART_COLORS.secondary,
};

const getServiceColor = (service: string): string => {
  const normalized = service.toLowerCase().replace(/[^a-z]/g, '');
  return SERVICE_COLORS[normalized] || SERVICE_COLORS.default;
};

interface CostTooltipProps {
  active?: boolean;
  payload?: Array<{ payload: CostBreakdownType }>;
}

const CostTooltip = memo(function CostTooltip({ active, payload }: CostTooltipProps) {
  if (active && payload && payload.length) {
    const item = payload[0].payload;
    return (
      <div className="rounded-lg border bg-popover p-3 shadow-md">
        <p className="font-medium text-popover-foreground">{item.service}</p>
        <p className="text-sm text-muted-foreground">
          Cost: {formatCurrency(item.cost_usd)}
        </p>
        <p className="text-sm text-muted-foreground">
          Percentage: {item.percentage.toFixed(1)}%
        </p>
      </div>
    );
  }
  return null;
});

export const CostBreakdownChart = memo(function CostBreakdownChart({
  data,
  title = 'Cost Breakdown',
  description = 'Cost distribution by service',
}: CostBreakdownChartProps) {
  const totalCost = data.reduce((sum, item) => sum + item.cost_usd, 0);

  return (
    <Card className="w-full">
      <CardHeader className="pb-2">
        <CardTitle className="text-lg font-semibold">{title}</CardTitle>
        {description && (
          <p className="text-sm text-muted-foreground">{description}</p>
        )}
        <p className="text-2xl font-bold mt-2">{formatCurrency(totalCost)}</p>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="45%"
                innerRadius={60}
                outerRadius={100}
                paddingAngle={2}
                dataKey="cost_usd"
                nameKey="service"
                animationBegin={0}
                animationDuration={800}
                isAnimationActive={true}
              >
                {data.map((entry) => (
                  <Cell
                    key={`cell-${entry.service}`}
                    fill={getServiceColor(entry.service)}
                    stroke="hsl(var(--card))"
                    strokeWidth={2}
                  />
                ))}
              </Pie>
              <Tooltip content={<CostTooltip />} />
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div 
          className="flex flex-wrap justify-center gap-4 mt-4"
          role="list"
          aria-label="Cost breakdown by service"
        >
          {data.map((item) => (
            <div
              key={item.service}
              className="flex items-center gap-2 text-sm"
              role="listitem"
            >
              <span
                className="h-3 w-3 rounded-full"
                style={{ backgroundColor: getServiceColor(item.service) }}
                aria-hidden="true"
              />
              <span className="text-muted-foreground">
                {item.service} ({item.percentage.toFixed(1)}%)
              </span>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
});