import type { TooltipContentProps, TooltipPayloadEntry } from 'recharts';
import { formatCurrency, formatCompactCurrency } from '@/lib/format';
import { getChartColors } from '../utils/chart-colors';
import { isOHLCVData } from '../utils/chart-data-transformers';

type ChartTooltipProps = TooltipContentProps & {
  formatters?: {
    price?: (value: number) => string;
    date?: (value: string) => string;
    volume?: (value: number) => string;
  };
};

export function ChartTooltip(props: ChartTooltipProps) {
  const { active, payload, label, formatters } = props;

  if (!active || !payload || payload.length === 0) return null;

  const colors = getChartColors();
  const formatDate = formatters?.date || ((date: string) => new Date(date).toLocaleDateString());
  const formatPrice = formatters?.price || formatCurrency;
  const formatVolume = formatters?.volume || formatCompactCurrency;

  const data = payload[0].payload;

  return (
    <div
      className="min-w-[180px] rounded-xl border p-3 backdrop-blur-sm"
      style={{
        backgroundColor: colors.tooltipBg,
        borderColor: colors.tooltipBorder
      }}
    >
      <div className="mb-2 text-xs uppercase tracking-wider" style={{ color: colors.muted }}>
        {formatDate(label as string)}
      </div>

      {isOHLCVData(data) ? (
        <div className="space-y-1.5">
          <TooltipRow label="Open" value={formatPrice(data.open)} color={colors.text} />
          <TooltipRow label="High" value={formatPrice(data.high)} color={colors.positive} />
          <TooltipRow label="Low" value={formatPrice(data.low)} color={colors.negative} />
          <TooltipRow label="Close" value={formatPrice(data.close)} color={colors.text} />
          <div className="mt-2 border-t pt-2" style={{ borderColor: colors.tooltipBorder }}>
            <TooltipRow label="Volume" value={formatVolume(data.volume)} color={colors.muted} />
          </div>
        </div>
      ) : (
        <div className="space-y-1.5">
          {payload.map((entry: TooltipPayloadEntry, index: number) => (
            <TooltipRow
              key={index}
              label={String(entry.name || 'Value')}
              value={formatPrice(entry.value as number)}
              color={entry.color || colors.text}
            />
          ))}
        </div>
      )}
    </div>
  );
}

type TooltipRowProps = {
  label: string;
  value: string;
  color: string;
};

function TooltipRow({ label, value, color }: TooltipRowProps) {
  return (
    <div className="flex items-center justify-between gap-4 text-xs">
      <span style={{ color: color }}>{label}:</span>
      <span className="font-mono font-medium" style={{ color: color }}>
        {value}
      </span>
    </div>
  );
}