import React from 'react';
import styled from 'styled-components';

const TooltipCard = styled.div`
  padding: ${({ theme }) => `${theme.spacing[2]} ${theme.spacing[3]}`};
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  background: ${({ theme }) => theme.colors.surfaceElevated};
  border: 1px solid ${({ theme }) => theme.colors.borderSoft};
  box-shadow: ${({ theme }) => theme.shadows.md};
  min-width: 8rem;
`;

const Label = styled.div`
  font-size: 0.6875rem;
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.wide};
  text-transform: uppercase;
  color: ${({ theme }) => theme.colors.text.tertiary};
  margin-bottom: ${({ theme }) => theme.spacing[2]};
`;

const Row = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: ${({ theme }) => theme.spacing[4]};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.primary};

  & + & {
    margin-top: ${({ theme }) => theme.spacing[1]};
  }
`;

const Swatch = styled.span<{ $color: string }>`
  width: 8px;
  height: 8px;
  border-radius: ${({ theme }) => theme.borderRadius.full};
  background: ${({ $color }) => $color};
  flex-shrink: 0;
  margin-inline-end: ${({ theme }) => theme.spacing[2]};
`;

const Name = styled.span`
  display: inline-flex;
  align-items: center;
  color: ${({ theme }) => theme.colors.text.secondary};
`;

const Value = styled.span`
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  font-variant-numeric: tabular-nums;
`;

export interface ChartTooltipEntry {
  name: string;
  value: number | string;
  color?: string;
}

export interface ChartTooltipContentProps {
  label?: string;
  entries: ChartTooltipEntry[];
}

export const ChartTooltipContent: React.FC<ChartTooltipContentProps> = ({ label, entries }) => (
  <TooltipCard>
    {label ? <Label>{label}</Label> : null}
    {entries.map((entry) => (
      <Row key={entry.name}>
        <Name>
          {entry.color ? <Swatch $color={entry.color} aria-hidden /> : null}
          {entry.name}
        </Name>
        <Value>{entry.value}</Value>
      </Row>
    ))}
  </TooltipCard>
);

interface TooltipPayloadItem {
  name?: string | number;
  value?: number | string;
  color?: string;
  dataKey?: string | number;
}

interface TooltipRenderProps {
  active?: boolean;
  payload?: TooltipPayloadItem[];
  label?: string | number;
}

export function createChartTooltipRenderer(
  formatLabel?: (label: string) => string,
  formatEntry?: (name: string, value: number) => ChartTooltipEntry,
) {
  return function ChartTooltipRenderer(props: unknown) {
    const { active, payload, label } = props as TooltipRenderProps;
    if (!active || !payload?.length) {
      return null;
    }

    const entries = payload.map((item) => {
      const value = Number(item.value ?? 0);
      const name = String(item.name ?? item.dataKey ?? '');
      if (formatEntry) {
        return formatEntry(name, value);
      }
      return {
        name,
        value: new Intl.NumberFormat().format(value),
        color: typeof item.color === 'string' ? item.color : undefined,
      };
    });

    const formattedLabel =
      label !== undefined && label !== null && formatLabel
        ? formatLabel(String(label))
        : label !== undefined && label !== null
          ? String(label)
          : undefined;

    return <ChartTooltipContent label={formattedLabel} entries={entries} />;
  };
}