'use client';

import type { TodayChartBucket } from '@/types/today';
import {
  TODAY_CHART_TOOLTIP_BG,
  TODAY_CHART_TOOLTIP_BORDER,
} from '@/components/today/chart-theme';

type TodayBarChartTooltipProps = {
  active?: boolean;
  payload?: ReadonlyArray<{ payload?: TodayChartBucket }>;
  colorForCode?: (code: string, index: number) => string;
  chartData: TodayChartBucket[];
};

export function TodayBarChartTooltip({
  active,
  payload,
  colorForCode,
  chartData,
}: TodayBarChartTooltipProps) {
  if (!active || !payload?.length) {
    return null;
  }

  const row = payload[0]?.payload as TodayChartBucket | undefined;
  if (!row) {
    return null;
  }

  const index = chartData.findIndex((entry) => entry.code === row.code);
  const typeColor =
    colorForCode?.(row.code, index >= 0 ? index : 0) ?? '#f5f9ff';

  return (
    <div
      className="rounded-md px-3 py-2 text-xs shadow-md"
      style={{
        backgroundColor: TODAY_CHART_TOOLTIP_BG,
        border: `1px solid ${TODAY_CHART_TOOLTIP_BORDER}`,
      }}
    >
      <p className="font-medium" style={{ color: typeColor }}>
        {row.label}
      </p>
      <p className="mt-0.5 font-semibold text-white">{row.count}</p>
    </div>
  );
}
