import type { ReactNode } from 'react';
import {
  ResponsiveContainer,
  type ResponsiveContainerProps,
} from 'recharts';
import { cn } from '@/lib/utils';

interface ChartContainerProps extends Omit<ResponsiveContainerProps, 'children'> {
  children: ReactNode;
  className?: string;
  title?: string;
  description?: string;
}

export function ChartContainer({
  children,
  className,
  title,
  description,
  ...props
}: ChartContainerProps) {
  return (
    <div className={cn('w-full', className)}>
      {(title || description) && (
        <div className="mb-4">
          {title && <h3 className="text-lg font-semibold">{title}</h3>}
          {description && (
            <p className="text-sm text-muted-foreground">{description}</p>
          )}
        </div>
      )}
      <div className="w-full overflow-hidden rounded-lg border bg-card p-4">
        <ResponsiveContainer {...props}>
          {children}
        </ResponsiveContainer>
      </div>
    </div>
  );
}

// Chart colors matching Tailwind/shadcn theme
export const CHART_COLORS = {
  primary: 'hsl(var(--primary))',
  secondary: 'hsl(var(--secondary))',
  accent: 'hsl(var(--accent))',
  muted: 'hsl(var(--muted))',
  destructive: 'hsl(var(--destructive))',
  // Service-specific colors
  sqs: '#FF9900',    // AWS Orange
  lambda: '#F97316', // Orange-500
  bedrock: '#8B5CF6', // Violet-500
  // Additional chart colors
  blue: '#3B82F6',
  green: '#10B981',
  yellow: '#F59E0B',
  red: '#EF4444',
  purple: '#8B5CF6',
  pink: '#EC4899',
  cyan: '#06B6D4',
};

// Chart color palette for multiple series
export const CHART_PALETTE = [
  CHART_COLORS.sqs,
  CHART_COLORS.lambda,
  CHART_COLORS.bedrock,
  CHART_COLORS.blue,
  CHART_COLORS.green,
  CHART_COLORS.purple,
  CHART_COLORS.pink,
  CHART_COLORS.cyan,
];

// Format currency for tooltips
export function formatCurrency(value: number): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 4,
  }).format(value);
}

// Format number for tooltips
export function formatNumber(value: number): string {
  return new Intl.NumberFormat('en-US').format(value);
}