"use client";

import { useMemo } from "react";
import {
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import type { MoodChartPoint } from "@/features/reports/utils/mood-chart-data";
import { reportsDict } from "@/features/reports/dict";
import { toPersianDigits } from "@/lib/to-english-digits";

type MoodTrendChartProps = {
  points: MoodChartPoint[];
};

type ChartRow = {
  label: string;
  dayRating: number | null;
  energyLevel: number | null;
  mood: number | null;
};

type TooltipPayloadItem = {
  color?: string;
  name?: string;
  value?: number | null;
};

function MoodChartTooltip({
  active,
  payload,
  label,
}: {
  active?: boolean;
  payload?: TooltipPayloadItem[];
  label?: string;
}) {
  if (!active || !payload?.length) {
    return null;
  }

  return (
    <div className="rounded-2xl border border-border bg-card px-3 py-2 text-xs shadow-soft-sm">
      <p className="mb-2 font-medium text-card-foreground">{label}</p>
      <div className="space-y-1 text-muted-foreground">
        {payload.map((entry) => {
          if (entry.value === null || entry.value === undefined) {
            return null;
          }

          return (
            <p key={entry.name} style={{ color: entry.color }}>
              {entry.name}: {toPersianDigits(entry.value)}
            </p>
          );
        })}
      </div>
    </div>
  );
}

export function MoodTrendChart({ points }: MoodTrendChartProps) {
  const chartData = useMemo<ChartRow[]>(
    () =>
      points.map((point) => ({
        label: point.label,
        dayRating: point.dayRating,
        energyLevel: point.energyLevel,
        mood: point.mood,
      })),
    [points],
  );

  return (
    <div
      className="h-[280px] w-full min-w-0"
      role="img"
      aria-label={reportsDict.moodSectionTitle}
    >
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={chartData} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
          <CartesianGrid strokeDasharray="4 4" className="stroke-border" />
          <XAxis
            dataKey="label"
            tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
            interval={4}
            tickMargin={8}
          />
          <YAxis
            domain={[0, 10]}
            ticks={[0, 2, 4, 6, 8, 10]}
            tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
            width={28}
          />
          <Tooltip content={<MoodChartTooltip />} />
          <Legend
            wrapperStyle={{ fontSize: 12, paddingTop: 12 }}
            formatter={(value) => (
              <span className="text-muted-foreground">{value}</span>
            )}
          />
          <Line
            type="monotone"
            dataKey="dayRating"
            name={reportsDict.legendDayRating}
            stroke="var(--primary)"
            strokeWidth={2.5}
            dot={{ r: 3, fill: "var(--primary)", strokeWidth: 0 }}
            activeDot={{ r: 4 }}
            connectNulls={false}
          />
          <Line
            type="monotone"
            dataKey="energyLevel"
            name={reportsDict.legendEnergy}
            stroke="#f59e0b"
            strokeWidth={2}
            strokeDasharray="5 4"
            dot={false}
            connectNulls={false}
          />
          <Line
            type="monotone"
            dataKey="mood"
            name={reportsDict.legendMood}
            stroke="#10b981"
            strokeWidth={2}
            strokeDasharray="2 4"
            dot={false}
            connectNulls={false}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}