'use client';

import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import type { TodayChartBucket } from '@/types/today';
import { TodayChartFrame } from '@/components/ui/today/TodayChartFrame';
import { TodayBarChartTooltip } from '@/components/ui/today/TodayBarChartTooltip';
import {
  TODAY_CHART_AXIS_COLOR,
  TODAY_CHART_COLORS,
  TODAY_CHART_GRID_COLOR,
  TODAY_CHART_TOOLTIP_BG,
  TODAY_CHART_TOOLTIP_BORDER,
} from '@/components/today/chart-theme';
import { todayChartCategoryXAxisProps } from '@/components/today/chart-day-labels';

interface TodayBarChartProps {
  data: TodayChartBucket[];
  colorForCode?: (code: string, index: number) => string;
  onBarClick?: (bucket: TodayChartBucket) => void;
}

export function TodayBarChart({ data, colorForCode, onBarClick }: TodayBarChartProps) {
  const xAxis = todayChartCategoryXAxisProps(data.length);
  const chartData = data.map((item) => ({
    ...item,
    shortLabel: truncateLabel(item.label, xAxis.truncateMax),
  }));

  return (
    <TodayChartFrame>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          data={chartData}
          margin={{ top: 8, right: 8, left: -12, bottom: 0 }}
        >
        <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
        <XAxis
          dataKey="shortLabel"
          tick={
            colorForCode
              ? (props) => {
                  const { x, y, payload } = props as {
                    x: number;
                    y: number;
                    payload: { value: string };
                  };
                  const index = chartData.findIndex((row) => row.shortLabel === payload.value);
                  const entry = chartData[index];
                  const fill =
                    entry != null
                      ? colorForCode(entry.code, index >= 0 ? index : 0)
                      : TODAY_CHART_AXIS_COLOR;
                  return (
                    <text
                      x={x}
                      y={y}
                      dy={14}
                      textAnchor="middle"
                      fill={fill}
                      fontSize={xAxis.fontSize}
                    >
                      {payload.value}
                    </text>
                  );
                }
              : { fill: TODAY_CHART_AXIS_COLOR, fontSize: xAxis.fontSize }
          }
          axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
          tickLine={false}
          interval={xAxis.interval}
          minTickGap={xAxis.minTickGap}
        />
        <YAxis
          allowDecimals={false}
          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
          axisLine={false}
          tickLine={false}
          width={32}
        />
        <Tooltip
          cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
          content={
            colorForCode ? (
              <TodayBarChartTooltip colorForCode={colorForCode} chartData={chartData} />
            ) : undefined
          }
          contentStyle={
            colorForCode
              ? undefined
              : {
                  backgroundColor: TODAY_CHART_TOOLTIP_BG,
                  border: `1px solid ${TODAY_CHART_TOOLTIP_BORDER}`,
                  borderRadius: '6px',
                  color: '#f5f9ff',
                  fontSize: '12px',
                }
          }
          labelFormatter={
            colorForCode
              ? undefined
              : (_, payload) => {
                  const row = payload?.[0]?.payload as TodayChartBucket | undefined;
                  return row?.label ?? '';
                }
          }
        />
        <Bar dataKey="count" radius={[4, 4, 0, 0]} maxBarSize={48}>
          {chartData.map((entry, index) => (
            <Cell
              key={entry.code}
              fill={
                colorForCode?.(entry.code, index) ??
                TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]
              }
              className={onBarClick ? 'cursor-pointer' : undefined}
              onClick={() => onBarClick?.(entry)}
            />
          ))}
        </Bar>
      </BarChart>
      </ResponsiveContainer>
    </TodayChartFrame>
  );
}

function truncateLabel(label: string, max = 12): string {
  if (label.length <= max) return label;
  return `${label.slice(0, max - 1)}…`;
}
