import { notFound } from "next/navigation";
import { AiAnalysisCard } from "@/components/ai-analysis-card";
import { ExerciseProgressChart } from "@/components/exercise-progress-chart";
import { InfoTooltip } from "@/components/info-tooltip";
import { formatDate, formatDateShort } from "@/lib/format";
import { getLatestAnalysisForTarget } from "@/lib/models/analysis";
import { getStrengthWorkout, listStrengthWorkouts } from "@/lib/models/strength";
import { getExerciseHistory } from "@/lib/strength/stats";

export const dynamic = "force-dynamic";

const EXERCISE_HISTORY_LIMIT = 8;

export default async function StrengthWorkoutPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const workout = await getStrengthWorkout(id);

  if (!workout) {
    notFound();
  }

  const analysis = await getLatestAnalysisForTarget("strength", workout._id);
  const allWorkouts = await listStrengthWorkouts();
  const pastWorkouts = allWorkouts.filter((w) => w.date <= workout.date);

  const exercisesWithHistory = workout.exercises.map((exercise) => ({
    exercise,
    history: getExerciseHistory(exercise.name, pastWorkouts, EXERCISE_HISTORY_LIMIT),
  }));

  return (
    <div className="flex flex-col gap-5">
      <div>
        <h1 className="text-2xl font-bold text-fg">{workout.name}</h1>
        <p className="mt-1 text-sm text-fg/60">{formatDate(workout.date)}</p>
        {workout.notes ? <p className="mt-1.5 text-sm text-fg/70">{workout.notes}</p> : null}
      </div>

      <AiAnalysisCard targetType="strength" targetId={workout._id.toString()} analysis={analysis} />

      <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3">
        {exercisesWithHistory.map(({ exercise }, index) => (
          <div key={index} className="flex flex-col gap-2 rounded-lg border border-muted/40 bg-surface px-3 py-2.5">
            <p className="text-xs font-semibold text-fg">{exercise.name}</p>
            {exercise.notes ? <p className="text-xs text-fg/50 italic">{exercise.notes}</p> : null}
            <div className="flex flex-wrap gap-1">
              {exercise.sets.map((set) => (
                <span key={set.order} className="rounded bg-bg px-1.5 py-0.5 text-xs text-fg/70">
                  {set.reps ?? "?"}×{set.weightKg !== undefined ? `${set.weightKg} kg` : "—"}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>

      {exercisesWithHistory.some(({ history }) => history.length >= 2) ? (
        <div className="flex flex-col gap-3">
          <h2 className="flex items-center gap-1.5 text-sm font-semibold text-fg/70">
              Postęp ćwiczeń
              <InfoTooltip text="Wolumen (ciężar × powtórzenia) i maksymalny ciężar na tle poprzednich sesji z tym samym ćwiczeniem." />
            </h2>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            {exercisesWithHistory
              .filter(({ history }) => history.length >= 2)
              .map(({ exercise, history }) => (
                <ExerciseProgressChart
                  key={exercise.name}
                  name={exercise.name}
                  data={history.map((point) => ({
                    label: formatDateShort(point.date),
                    volumeKg: point.volumeKg,
                    topWeightKg: point.topWeightKg,
                  }))}
                />
              ))}
          </div>
        </div>
      ) : null}

      {workout.sourceUrl ? (
        <a
          href={workout.sourceUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="text-xs text-fg/40 hover:text-accent"
        >
          {workout.sourceUrl}
        </a>
      ) : null}
    </div>
  );
}