'use client';

import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import { TodayChartFrame } from '@/components/ui/today/TodayChartFrame';
import {
  TODAY_CHART_AXIS_COLOR,
  TODAY_CHART_COMPLETED_COLOR,
  TODAY_CHART_GRID_COLOR,
  TODAY_CHART_RECEIVED_COLOR,
  TODAY_CHART_TOOLTIP_STYLE,
} from '@/components/today/chart-theme';
import { todayChartDenseXAxisProps } from '@/components/today/chart-day-labels';
import type { TodayStackedDayBucket } from '@/types/today';

export type LabTaskActivityChartRow = {
  label: string;
  completed: number;
  received: number;
};

interface TodayLabTaskActivityChartProps {
  data: LabTaskActivityChartRow[];
  completedLabel: string;
  receivedLabel: string;
}

export function TodayLabTaskActivityChart({
  data,
  completedLabel,
  receivedLabel,
}: TodayLabTaskActivityChartProps) {
  const xAxis = todayChartDenseXAxisProps(data.length);
  const showDots = data.length <= 14;

  return (
    <TodayChartFrame>
      <div className="flex h-full min-h-0 flex-col">
        <div className="min-h-0 flex-1">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 2 }}>
              <defs>
                <linearGradient id="labTaskCompletedFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor={TODAY_CHART_COMPLETED_COLOR} stopOpacity={0.4} />
                  <stop offset="100%" stopColor={TODAY_CHART_COMPLETED_COLOR} stopOpacity={0.05} />
                </linearGradient>
                <linearGradient id="labTaskReceivedFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor={TODAY_CHART_RECEIVED_COLOR} stopOpacity={0.4} />
                  <stop offset="100%" stopColor={TODAY_CHART_RECEIVED_COLOR} stopOpacity={0.05} />
                </linearGradient>
              </defs>
              <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
              <XAxis
                dataKey="label"
                tick={{ 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={{ stroke: 'rgba(0, 188, 255, 0.25)' }}
                contentStyle={TODAY_CHART_TOOLTIP_STYLE}
                labelFormatter={(label) => String(label)}
              />
              <Area
                type="monotone"
                dataKey="completed"
                name={completedLabel}
                stroke={TODAY_CHART_COMPLETED_COLOR}
                strokeWidth={2}
                fill="url(#labTaskCompletedFill)"
                dot={showDots ? { r: 3, fill: TODAY_CHART_COMPLETED_COLOR, strokeWidth: 0 } : false}
                activeDot={{ r: 5, fill: TODAY_CHART_COMPLETED_COLOR }}
              />
              <Area
                type="monotone"
                dataKey="received"
                name={receivedLabel}
                stroke={TODAY_CHART_RECEIVED_COLOR}
                strokeWidth={2}
                fill="url(#labTaskReceivedFill)"
                dot={showDots ? { r: 3, fill: TODAY_CHART_RECEIVED_COLOR, strokeWidth: 0 } : false}
                activeDot={{ r: 5, fill: TODAY_CHART_RECEIVED_COLOR }}
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        <div className="mt-0.5 flex shrink-0 flex-wrap items-center justify-center gap-x-4 gap-y-0.5 pb-0 text-[11px] text-text-muted">
          <span className="inline-flex items-center gap-1.5">
            <span
              className="inline-block h-2.5 w-2.5 shrink-0 rounded-sm"
              style={{ backgroundColor: TODAY_CHART_COMPLETED_COLOR }}
              aria-hidden
            />
            {completedLabel}
          </span>
          <span className="inline-flex items-center gap-1.5">
            <span
              className="inline-block h-2.5 w-2.5 shrink-0 rounded-sm"
              style={{ backgroundColor: TODAY_CHART_RECEIVED_COLOR }}
              aria-hidden
            />
            {receivedLabel}
          </span>
        </div>
      </div>
    </TodayChartFrame>
  );
}

export function mapLabTaskActivityChartData(
  buckets: TodayStackedDayBucket[],
): LabTaskActivityChartRow[] {
  return buckets.map((bucket) => ({
    label: bucket.label,
    completed: bucket.completed,
    received: bucket.received,
  }));
}
