"use client";

import { useState, useCallback, useRef, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Exercise } from "@prisma/client";
import { ChevronDown, ChevronUp, Loader, Trash2, Plus, Save, Pencil, Check, ArrowUp, ArrowDown, Clock, X } from "lucide-react";
import ExercisePicker from "./ExercisePicker";
import SetRow, { InputField } from "./SetRow";
import { formatSetsSummary } from "@/lib/formatSets";

// --------------- Exercise History Popup ---------------
function ExerciseHistoryPopup({
  exerciseId,
  onClose,
}: {
  exerciseId: string;
  onClose: () => void;
}) {
  const [history, setHistory] = useState<
    Array<{ workout: { id: string; date: string; name?: string }; sets: Array<{ weight?: number; reps?: number; weightUnit?: string }> }>
  >([]);
  const [loading, setLoading] = useState(true);
  const popupRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch(`/api/exercises/${exerciseId}`);
        if (res.ok) {
          const data = await res.json();
          if (!cancelled) setHistory(data.history || []);
        }
      } catch {}
      if (!cancelled) setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [exerciseId]);

  // Close on outside click
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (popupRef.current && !popupRef.current.contains(e.target as Node)) {
        onClose();
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [onClose]);

  return (
    <div
      ref={popupRef}
      className="absolute left-0 right-0 top-full mt-1 z-50 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl max-h-64 overflow-y-auto"
    >
      <div className="flex items-center justify-between px-3 py-2 border-b border-zinc-800 sticky top-0 bg-zinc-900">
        <span className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Recent History</span>
        <button type="button" onClick={onClose} className="p-0.5 text-zinc-500 hover:text-white">
          <X className="w-3.5 h-3.5" />
        </button>
      </div>
      {loading ? (
        <div className="flex items-center justify-center py-6">
          <Loader className="w-4 h-4 animate-spin text-zinc-500" />
        </div>
      ) : history.length === 0 ? (
        <p className="text-xs text-zinc-500 text-center py-4">No history yet</p>
      ) : (
        <div className="divide-y divide-zinc-800/50">
          {history.slice(0, 10).map((entry) => {
            const d = new Date(entry.workout.date);
            const dateStr = d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
            const summary = formatSetsSummary(entry.sets);
            return (
              <div key={entry.workout.id} className="px-3 py-2">
                <div className="flex items-baseline gap-2">
                  <span className="text-[11px] text-zinc-500 flex-shrink-0">{dateStr}</span>
                  <span className="text-[11px] text-zinc-600">·</span>
                  <span className="text-[11px] text-zinc-500">{entry.sets.length} set{entry.sets.length !== 1 ? "s" : ""}</span>
                </div>
                {summary && (
                  <p className="text-xs text-zinc-300 mt-0.5">{summary}</p>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function parseInputFields(exercise: Exercise): InputField[] {
  try {
    const raw = (exercise as any).inputFields;
    if (raw && typeof raw === "string") {
      return JSON.parse(raw);
    }
  } catch {}
  return ["sets", "reps", "weight"];
}

interface ExerciseWithSets {
  exercise: Exercise;
  sets: Array<{
    setNumber: number;
    reps?: number;
    weight?: number;
    rpe?: number;
    notes?: string;
    forceEdit?: boolean; // When true, start in edit mode even if data is pre-filled
  }>;
}

export interface EditWorkoutData {
  id: string;
  name: string;
  date: string; // ISO string
  durationMinutes?: number | null;
  difficulty?: number | null;
  caloriesBurned?: number | null;
  notes?: string | null;
  exercises: Array<{
    exercise: Exercise;
    sets: Array<{
      setNumber: number;
      reps?: number;
      weight?: number;
      rpe?: number;
      notes?: string;
    }>;
  }>;
}

interface WorkoutFormProps {
  exercises: Exercise[];
  recentlyUsedExercises?: string[];
  editWorkout?: EditWorkoutData;
}

export default function WorkoutForm({
  exercises: initialExercises,
  recentlyUsedExercises = [],
  editWorkout,
}: WorkoutFormProps) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [exercises, setExercises] = useState<Exercise[]>(initialExercises);

  const [workoutName, setWorkoutName] = useState(editWorkout?.name || "");
  const [workoutDate, setWorkoutDate] = useState(() => {
    if (editWorkout?.date) {
      return new Date(editWorkout.date).toISOString().split("T")[0];
    }
    return new Date().toISOString().split("T")[0];
  });
  const [duration, setDuration] = useState(editWorkout?.durationMinutes?.toString() || "");
  const [difficulty, setDifficulty] = useState(editWorkout?.difficulty?.toString() || "");
  const [workoutCalories, setWorkoutCalories] = useState(editWorkout?.caloriesBurned?.toString() || "");
  const [notes, setNotes] = useState(editWorkout?.notes || "");
  const [notesLocked, setNotesLocked] = useState(!!editWorkout?.notes);
  const [addedExercises, setAddedExercises] = useState<ExerciseWithSets[]>(
    editWorkout?.exercises || []
  );
  const [expandedExercise, setExpandedExercise] = useState<string | null>(null);
  const [historyPopupExercise, setHistoryPopupExercise] = useState<string | null>(null);

  // Header lock state (name + date lock after first save, or immediately for edits)
  const [headerLocked, setHeaderLocked] = useState(!!editWorkout);

  // Auto-save state — if editing, start with existing workout ID
  const [savedWorkoutId, setSavedWorkoutId] = useState<string | null>(editWorkout?.id || null);
  const [autoSaving, setAutoSaving] = useState(false);
  const [showSavedFlash, setShowSavedFlash] = useState(false);
  const savingRef = useRef(false);
  const savedFlashTimer = useRef<NodeJS.Timeout | null>(null);

  // Flash "Saved ✓" briefly after each successful save
  const triggerSavedFlash = useCallback(() => {
    setShowSavedFlash(true);
    if (savedFlashTimer.current) clearTimeout(savedFlashTimer.current);
    savedFlashTimer.current = setTimeout(() => setShowSavedFlash(false), 2000);
  }, []);

  // Cleanup timer on unmount
  useEffect(() => {
    return () => {
      if (savedFlashTimer.current) clearTimeout(savedFlashTimer.current);
    };
  }, []);

  // ---------- Build payload from current state ----------
  const buildPayload = useCallback(
    (currentExercises?: ExerciseWithSets[]) => {
      const exs = currentExercises ?? addedExercises;
      return {
        name: workoutName,
        durationMinutes: duration ? parseInt(duration) : undefined,
        difficulty: difficulty ? parseInt(difficulty) : undefined,
        caloriesBurned: workoutCalories ? parseInt(workoutCalories) : undefined,
        notes: notes || undefined,
        date: new Date(workoutDate + "T12:00:00").toISOString(),
        sets: exs.flatMap((e) =>
          e.sets.map((s) => ({
            exerciseId: e.exercise.id,
            setNumber: s.setNumber,
            reps: s.reps,
            weight: s.weight,
            weightUnit: (e.exercise as any).defaultWeightUnit || "lbs",
            rpe: s.rpe,
            notes: s.notes,
          }))
        ),
      };
    },
    [workoutName, workoutDate, duration, difficulty, workoutCalories, notes, addedExercises]
  );

  // ---------- Auto-save: create or update ----------
  const autoSave = useCallback(
    async (overrideExercises?: ExerciseWithSets[]) => {
      if (savingRef.current) return;
      savingRef.current = true;
      setAutoSaving(true);

      try {
        const payload = buildPayload(overrideExercises);

        if (!savedWorkoutId) {
          // First save — POST to create
          const response = await fetch("/api/workouts", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          });

          if (response.ok) {
            const created = await response.json();
            setSavedWorkoutId(created.id);
            triggerSavedFlash();
            setHeaderLocked(true);
          }
        } else {
          // Subsequent save — PATCH to update
          const response = await fetch(`/api/workouts/${savedWorkoutId}`, {
            method: "PATCH",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              ...payload,
              durationMinutes: payload.durationMinutes ?? null,
              difficulty: payload.difficulty ?? null,
              caloriesBurned: payload.caloriesBurned ?? null,
              notes: payload.notes ?? null,
            }),
          });

          if (response.ok) {
            triggerSavedFlash();
            setHeaderLocked(true);
          }
        }
      } catch (error) {
        console.error("Auto-save failed:", error);
      } finally {
        savingRef.current = false;
        setAutoSaving(false);
      }
    },
    [buildPayload, savedWorkoutId, triggerSavedFlash]
  );

  // ---------- Exercise handlers ----------
  const handleAddExercise = (exercise: Exercise) => {
    if (addedExercises.some((e) => e.exercise.id === exercise.id)) {
      setExpandedExercise(exercise.id);
      return;
    }

    setAddedExercises((prev) => [
      ...prev,
      {
        exercise,
        sets: [{ setNumber: 1, reps: undefined, weight: undefined }],
      },
    ]);
    setExpandedExercise(exercise.id);
  };

  const handleExerciseCreated = (exercise: Exercise) => {
    setExercises((prev) => [...prev, exercise]);
  };

  const handleMoveExercise = (exerciseId: string, direction: "up" | "down") => {
    setAddedExercises((prev) => {
      const idx = prev.findIndex((e) => e.exercise.id === exerciseId);
      if (idx < 0) return prev;
      const swapIdx = direction === "up" ? idx - 1 : idx + 1;
      if (swapIdx < 0 || swapIdx >= prev.length) return prev;
      const updated = [...prev];
      [updated[idx], updated[swapIdx]] = [updated[swapIdx], updated[idx]];
      return updated;
    });
  };

  const handleRemoveExercise = (exerciseId: string) => {
    setAddedExercises((prev) => {
      const updated = prev.filter((e) => e.exercise.id !== exerciseId);
      // Auto-save after removing exercise
      setTimeout(() => autoSave(updated), 0);
      return updated;
    });
    if (expandedExercise === exerciseId) setExpandedExercise(null);
  };

  const handleAddSet = (exerciseId: string) => {
    setAddedExercises((prev) =>
      prev.map((e) => {
        if (e.exercise.id === exerciseId) {
          const nextSetNumber =
            Math.max(...e.sets.map((s) => s.setNumber), 0) + 1;
          return {
            ...e,
            sets: [
              ...e.sets,
              { setNumber: nextSetNumber, reps: undefined, weight: undefined },
            ],
          };
        }
        return e;
      })
    );
  };

  const handleRemoveSet = (exerciseId: string, setNumber: number) => {
    setAddedExercises((prev) => {
      const updated = prev.map((e) => {
        if (e.exercise.id === exerciseId) {
          return {
            ...e,
            sets: e.sets.filter((s) => s.setNumber !== setNumber),
          };
        }
        return e;
      });
      // Auto-save after removing set
      setTimeout(() => autoSave(updated), 0);
      return updated;
    });
  };

  const handleUpdateSet = (
    exerciseId: string,
    setNumber: number,
    data: { reps?: number; weight?: number; rpe?: number; notes?: string }
  ) => {
    setAddedExercises((prev) =>
      prev.map((e) => {
        if (e.exercise.id === exerciseId) {
          return {
            ...e,
            sets: e.sets.map((s) =>
              s.setNumber === setNumber ? { ...s, ...data } : s
            ),
          };
        }
        return e;
      })
    );
  };

  // Called when user confirms a set (check icon) — triggers auto-save
  // Also clears forceEdit so the set stays locked when the exercise is collapsed/re-expanded
  const handleSetConfirmed = (exerciseId?: string, setNumber?: number) => {
    if (exerciseId && setNumber !== undefined) {
      setAddedExercises((prev) =>
        prev.map((e) => {
          if (e.exercise.id === exerciseId) {
            return {
              ...e,
              sets: e.sets.map((s) =>
                s.setNumber === setNumber ? { ...s, forceEdit: false } : s
              ),
            };
          }
          return e;
        })
      );
    }
    // Small delay to let state settle after the SetRow's emitUpdate
    setTimeout(() => autoSave(), 50);
  };

  // Called when user taps "next set" arrow — confirm current set + add new pre-filled set
  const handleNextSet = (
    exerciseId: string,
    currentValues: {
      weight?: string;
      reps?: string;
      rpe?: string;
      notes?: string;
      duration?: string;
      distance?: string;
      calories?: string;
    }
  ) => {
    setAddedExercises((prev) =>
      prev.map((e) => {
        if (e.exercise.id === exerciseId) {
          const nextSetNumber =
            Math.max(...e.sets.map((s) => s.setNumber), 0) + 1;
          return {
            ...e,
            // Clear forceEdit on all existing sets (they're confirmed now)
            sets: [
              ...e.sets.map((s) => (s.forceEdit ? { ...s, forceEdit: false } : s)),
              {
                setNumber: nextSetNumber,
                weight: currentValues.weight ? parseFloat(currentValues.weight) : undefined,
                reps: undefined, // User typically changes reps per set
                rpe: currentValues.rpe ? parseInt(currentValues.rpe) : undefined,
                notes: currentValues.notes || undefined,
                forceEdit: true, // Start in edit mode even though weight is pre-filled
              },
            ],
          };
        }
        return e;
      })
    );
    // Auto-save after confirming the current set
    setTimeout(() => autoSave(), 50);
  };

  // Called when user saves notes — triggers auto-save
  const handleNotesSave = () => {
    setNotesLocked(true);
    setTimeout(() => autoSave(), 50);
  };

  // ---------- Save and Close ----------
  const handleSaveAndClose = async (e: React.FormEvent) => {
    e.preventDefault();

    if (addedExercises.length === 0) {
      alert("Please add at least one exercise");
      return;
    }

    setLoading(true);

    try {
      // Wait for any in-flight auto-save to finish to avoid race conditions
      // (both would delete-all-sets + recreate simultaneously)
      while (savingRef.current) {
        await new Promise((r) => setTimeout(r, 100));
      }
      // Prevent auto-saves from starting while we do the final save
      savingRef.current = true;

      const payload = buildPayload();

      if (!savedWorkoutId) {
        // Never saved before — create
        const response = await fetch("/api/workouts", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });

        if (!response.ok) throw new Error("Failed to save workout");
      } else {
        // Already saved — final update
        const response = await fetch(`/api/workouts/${savedWorkoutId}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            ...payload,
            durationMinutes: payload.durationMinutes ?? null,
            difficulty: payload.difficulty ?? null,
            caloriesBurned: payload.caloriesBurned ?? null,
            notes: payload.notes ?? null,
          }),
        });

        if (!response.ok) throw new Error("Failed to save workout");
      }

      // Navigate back: to detail page if editing, otherwise to list
      if (editWorkout) {
        router.push(`/main/workouts/${savedWorkoutId || editWorkout.id}`);
      } else {
        router.push("/main/workouts");
      }
    } catch (error) {
      console.error("Error saving workout:", error);
      alert("Failed to save workout. Please try again.");
    } finally {
      savingRef.current = false;
      setLoading(false);
    }
  };

  return (
    <form
      onSubmit={handleSaveAndClose}
      onKeyDown={(e) => {
        // Prevent Enter from submitting form when editing inputs
        if (e.key === "Enter") {
          const target = e.target as HTMLElement;
          const tag = target.tagName.toLowerCase();
          // Allow submit only from the submit button itself
          if (tag === "input" || tag === "textarea" || tag === "select") {
            e.preventDefault();
          }
        }
      }}
      className="space-y-6"
    >
      {/* Auto-save indicator — fixed height to prevent layout shift */}
      <div className="h-4 flex items-center justify-center">
        <div className={`flex items-center gap-1.5 text-[10px] transition-opacity duration-300 ${autoSaving || showSavedFlash ? "opacity-100" : "opacity-0"} ${autoSaving ? "text-zinc-500" : "text-green-500"}`}>
          {autoSaving ? (
            <>
              <Loader className="w-3 h-3 animate-spin" />
              <span>Saving...</span>
            </>
          ) : (
            <>
              <Check className="w-3 h-3" />
              <span>Saved</span>
            </>
          )}
        </div>
      </div>

      {/* Workout name & date */}
      {headerLocked ? (
        <div className="flex items-center gap-3">
          <div className="flex-1 min-w-0">
            <h2 className="text-lg font-bold text-white truncate">{workoutName || "Unnamed Workout"}</h2>
            <p className="text-sm text-zinc-400">
              {new Date(workoutDate + "T12:00:00").toLocaleDateString("en-US", {
                weekday: "short",
                month: "short",
                day: "numeric",
                year: "numeric",
              })}
            </p>
          </div>
          <button
            type="button"
            onClick={() => setHeaderLocked(false)}
            className="p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800 transition-colors flex-shrink-0"
            aria-label="Edit name and date"
          >
            <Pencil className="w-4 h-4" />
          </button>
        </div>
      ) : (
        <>
          <div>
            <label className="block text-sm font-medium text-zinc-400 mb-1">
              Workout Name
            </label>
            <input
              type="text"
              value={workoutName}
              onChange={(e) => setWorkoutName(e.target.value)}
              placeholder="- -"
              className="w-full px-4 py-3 border border-zinc-700 rounded-lg bg-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-white/20 placeholder:text-zinc-600"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-zinc-400 mb-1">
              Date
            </label>
            <input
              type="date"
              value={workoutDate}
              onChange={(e) => setWorkoutDate(e.target.value)}
              className="w-full px-4 py-3 border border-zinc-700 rounded-lg bg-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-white/20 [color-scheme:dark]"
            />
          </div>
        </>
      )}

      {/* Exercises */}
      <div>
        <h3 className="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-3">
          Exercises
        </h3>

        {/* Added exercises */}
        {addedExercises.length > 0 && (
          <div className="space-y-2 mb-4">
            {addedExercises.map((item, exIdx) => (
              <div
                key={item.exercise.id}
                className="border border-zinc-800 rounded-lg bg-zinc-900 relative"
              >
                {/* Exercise header — compact with reorder */}
                <div className="flex items-center">
                  {/* Reorder buttons */}
                  {addedExercises.length > 1 && (
                    <div className="flex flex-col pl-1.5 -mr-1 flex-shrink-0">
                      <button
                        type="button"
                        onClick={() => handleMoveExercise(item.exercise.id, "up")}
                        disabled={exIdx === 0}
                        className="p-0.5 text-zinc-600 hover:text-zinc-300 disabled:opacity-20 disabled:hover:text-zinc-600 transition-colors"
                        aria-label="Move exercise up"
                      >
                        <ArrowUp className="w-3 h-3" />
                      </button>
                      <button
                        type="button"
                        onClick={() => handleMoveExercise(item.exercise.id, "down")}
                        disabled={exIdx === addedExercises.length - 1}
                        className="p-0.5 text-zinc-600 hover:text-zinc-300 disabled:opacity-20 disabled:hover:text-zinc-600 transition-colors"
                        aria-label="Move exercise down"
                      >
                        <ArrowDown className="w-3 h-3" />
                      </button>
                    </div>
                  )}

                  <button
                    type="button"
                    onClick={() =>
                      setExpandedExercise(
                        expandedExercise === item.exercise.id
                          ? null
                          : item.exercise.id
                      )
                    }
                    className="flex-1 flex items-center justify-between px-3 py-2.5 hover:bg-zinc-800/50 transition-colors rounded-lg min-w-0"
                  >
                    <div className="text-left flex-1 min-w-0">
                      <div className="flex items-baseline gap-2">
                        <h4 className="font-semibold text-white text-sm truncate">
                          {item.exercise.name}
                        </h4>
                        <span className="text-xs text-zinc-500 flex-shrink-0">
                          {item.sets.length} set{item.sets.length !== 1 ? "s" : ""}
                        </span>
                      </div>
                      {item.sets.some((s) => s.reps || s.weight) && (
                        <p className="text-xs text-zinc-400 mt-0.5 truncate">
                          {formatSetsSummary(item.sets)}
                        </p>
                      )}
                    </div>
                    {expandedExercise === item.exercise.id ? (
                      <ChevronUp className="w-4 h-4 text-zinc-500 flex-shrink-0 ml-2" />
                    ) : (
                      <ChevronDown className="w-4 h-4 text-zinc-500 flex-shrink-0 ml-2" />
                    )}
                  </button>

                  {/* History popup toggle */}
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      setHistoryPopupExercise(
                        historyPopupExercise === item.exercise.id ? null : item.exercise.id
                      );
                    }}
                    className="p-2 mr-1 rounded-md flex-shrink-0 transition-colors text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800"
                    aria-label="View exercise history"
                    title="View history"
                  >
                    <Clock className="w-4 h-4" />
                  </button>
                </div>

                {/* Exercise history popup */}
                {historyPopupExercise === item.exercise.id && (
                  <ExerciseHistoryPopup
                    exerciseId={item.exercise.id}
                    onClose={() => setHistoryPopupExercise(null)}
                  />
                )}

                {/* Exercise body (expanded) */}
                {expandedExercise === item.exercise.id && (
                  <div className="border-t border-zinc-800 p-3 space-y-3">
                    <div className="space-y-2">
                      {item.sets.map((set, idx) => (
                        <SetRow
                          key={`${item.exercise.id}-${set.setNumber}`}
                          setNumber={set.setNumber}
                          inputFields={parseInputFields(item.exercise)}
                          weightUnit={(item.exercise as any).defaultWeightUnit || "lbs"}
                          initialReps={set.reps}
                          initialWeight={set.weight}
                          initialRpe={set.rpe}
                          initialNotes={set.notes}
                          initialLocked={set.forceEdit ? false : !!(set.reps || set.weight)}
                          autoFocus={set.forceEdit || (idx === item.sets.length - 1 && !set.reps && !set.weight)}
                          onUpdate={(data) =>
                            handleUpdateSet(
                              item.exercise.id,
                              set.setNumber,
                              data
                            )
                          }
                          onConfirm={() => handleSetConfirmed(item.exercise.id, set.setNumber)}
                          onNextSet={(vals) => handleNextSet(item.exercise.id, vals)}
                          onDelete={() =>
                            handleRemoveSet(item.exercise.id, set.setNumber)
                          }
                        />
                      ))}
                    </div>

                    <div className="flex gap-2">
                      <button
                        type="button"
                        onClick={() => handleAddSet(item.exercise.id)}
                        className="flex-1 py-1.5 border border-dashed border-zinc-700 rounded-lg text-zinc-400 text-sm font-medium hover:text-white hover:border-zinc-600 transition-colors flex items-center justify-center gap-1.5"
                      >
                        <Plus className="w-3.5 h-3.5" />
                        Add Set
                      </button>

                      <button
                        type="button"
                        onClick={() => handleRemoveExercise(item.exercise.id)}
                        className="py-1.5 px-3 text-red-500 text-sm font-medium hover:bg-red-950/30 rounded-lg transition-colors flex items-center gap-1.5"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                        Remove
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {/* Inline exercise search */}
        <ExercisePicker
          exercises={exercises}
          recentlyUsed={recentlyUsedExercises}
          onSelect={handleAddExercise}
          onExerciseCreated={handleExerciseCreated}
        />
      </div>

      {/* Post-workout: Notes, Duration, Calories, Difficulty */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold text-zinc-400 uppercase tracking-wider">
          Post-Workout
        </h3>

        {/* Notes — lockable */}
        <div>
          <div className="flex items-center justify-between mb-1">
            <label className="text-[10px] font-medium text-zinc-500">Notes</label>
            {notes && (
              <button
                type="button"
                onClick={notesLocked ? () => setNotesLocked(false) : handleNotesSave}
                className="text-[10px] text-zinc-500 hover:text-zinc-300 transition-colors"
              >
                {notesLocked ? "Edit" : "Save"}
              </button>
            )}
          </div>
          {notesLocked ? (
            <button
              type="button"
              onClick={() => setNotesLocked(false)}
              className="w-full text-left px-3 py-2 border border-zinc-700 rounded-md bg-zinc-900 text-sm text-zinc-300 hover:bg-zinc-800 transition-colors"
            >
              <p className="line-clamp-2">{notes}</p>
            </button>
          ) : (
            <textarea
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Type notes as you go..."
              className="w-full px-3 py-2 border border-zinc-700 rounded-md bg-zinc-800 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white/20 placeholder:text-zinc-600 resize-none"
              rows={2}
            />
          )}
        </div>

        <div className="grid grid-cols-3 gap-3">
          {/* Duration */}
          <div>
            <div className="flex items-center gap-2 mb-1">
              <label className="text-[10px] font-medium text-zinc-500 whitespace-nowrap">Duration</label>
              {duration && (
                <button type="button" onClick={() => setDuration("")} className="text-[9px] text-zinc-600 hover:text-zinc-400">✕</button>
              )}
            </div>
            {duration ? (
              <input
                type="number"
                value={duration}
                onChange={(e) => setDuration(e.target.value)}
                placeholder="min"
                className="w-full px-2 py-1.5 border border-zinc-700 rounded-md text-sm bg-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-white/20 placeholder:text-zinc-600"
              />
            ) : (
              <button
                type="button"
                onClick={() => setDuration("45")}
                className="w-full py-1.5 border border-dashed border-zinc-700 rounded-md text-zinc-500 text-xs hover:text-white hover:border-zinc-600 transition-colors"
              >
                N/A
              </button>
            )}
          </div>

          {/* Calories */}
          <div>
            <div className="flex items-center gap-2 mb-1">
              <label className="text-[10px] font-medium text-zinc-500 whitespace-nowrap">Calories</label>
              {workoutCalories && (
                <button type="button" onClick={() => setWorkoutCalories("")} className="text-[9px] text-zinc-600 hover:text-zinc-400">✕</button>
              )}
            </div>
            {workoutCalories ? (
              <input
                type="number"
                value={workoutCalories}
                onChange={(e) => setWorkoutCalories(e.target.value)}
                placeholder="kcal"
                className="w-full px-2 py-1.5 border border-zinc-700 rounded-md text-sm bg-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-white/20 placeholder:text-zinc-600"
              />
            ) : (
              <button
                type="button"
                onClick={() => setWorkoutCalories("300")}
                className="w-full py-1.5 border border-dashed border-zinc-700 rounded-md text-zinc-500 text-xs hover:text-white hover:border-zinc-600 transition-colors"
              >
                N/A
              </button>
            )}
          </div>

          {/* Difficulty */}
          <div>
            <div className="flex items-center gap-2 mb-1">
              <label className="text-[10px] font-medium text-zinc-500 whitespace-nowrap">Difficulty</label>
              {difficulty && (
                <button type="button" onClick={() => setDifficulty("")} className="text-[9px] text-zinc-600 hover:text-zinc-400">✕</button>
              )}
            </div>
            {difficulty ? (
              <select
                value={difficulty}
                onChange={(e) => setDifficulty(e.target.value)}
                className="w-full px-2 py-1.5 border border-zinc-700 rounded-md text-sm bg-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-white/20"
              >
                {Array.from({ length: 10 }, (_, i) => (
                  <option key={i + 1} value={String(i + 1)}>{i + 1}/10</option>
                ))}
              </select>
            ) : (
              <button
                type="button"
                onClick={() => setDifficulty("5")}
                className="w-full py-1.5 border border-dashed border-zinc-700 rounded-md text-zinc-500 text-xs hover:text-white hover:border-zinc-600 transition-colors"
              >
                N/A
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Save and Close button */}
      <button
        type="submit"
        disabled={loading}
        className="w-full py-3 bg-white text-black font-semibold rounded-lg hover:bg-zinc-200 disabled:bg-zinc-700 disabled:text-zinc-500 disabled:cursor-not-allowed flex items-center justify-center gap-2 transition"
      >
        {loading ? (
          <>
            <Loader className="w-5 h-5 animate-spin" />
            Saving...
          </>
        ) : (
          <>
            <Save className="w-4 h-4" />
            Save and Close
          </>
        )}
      </button>
    </form>
  );
}