"use client";

import { Trash2, Check, Pencil, CornerDownLeft } from "lucide-react";
import { useState, useCallback } from "react";

export type InputField = "sets" | "reps" | "weight" | "duration" | "distance" | "calories" | "notes";

export interface SetRowProps {
  setNumber: number;
  inputFields?: InputField[];
  weightUnit?: string;
  initialReps?: number;
  initialWeight?: number;
  initialRpe?: number;
  initialNotes?: string;
  initialDuration?: number;
  initialDistance?: number;
  initialCalories?: number;
  initialLocked?: boolean;
  autoFocus?: boolean;
  onUpdate: (data: {
    reps?: number;
    weight?: number;
    rpe?: number;
    notes?: string;
    durationSeconds?: number;
    distance?: number;
    calories?: number;
  }) => void;
  onConfirm?: () => void;
  onNextSet?: (currentValues: {
    weight?: string;
    reps?: string;
    rpe?: string;
    notes?: string;
    duration?: string;
    distance?: string;
    calories?: string;
  }) => void;
  onDelete: () => void;
}

export default function SetRow({
  setNumber,
  inputFields = ["sets", "reps", "weight"],
  weightUnit = "lbs",
  initialReps,
  initialWeight,
  initialRpe,
  initialNotes,
  initialDuration,
  initialDistance,
  initialCalories,
  initialLocked = false,
  autoFocus = false,
  onUpdate,
  onConfirm,
  onNextSet,
  onDelete,
}: SetRowProps) {
  const [reps, setReps] = useState(initialReps?.toString() || "");
  const [weight, setWeight] = useState(initialWeight?.toString() || "");
  const [rpe, setRpe] = useState(initialRpe?.toString() || "");
  const [notes, setNotes] = useState(initialNotes || "");
  const [duration, setDuration] = useState(initialDuration?.toString() || "");
  const [distance, setDistance] = useState(initialDistance?.toString() || "");
  const [calories, setCalories] = useState(initialCalories?.toString() || "");
  const [showNotes, setShowNotes] = useState(!!initialNotes);
  const [locked, setLocked] = useState(initialLocked);

  const showReps = inputFields.includes("reps");
  const showWeight = inputFields.includes("weight");
  const showDuration = inputFields.includes("duration");
  const showDistance = inputFields.includes("distance");
  const showCalories = inputFields.includes("calories");
  const showNotesField = inputFields.includes("notes");

  const emitUpdate = useCallback(
    (overrides: {
      reps?: string;
      weight?: string;
      rpe?: string;
      notes?: string;
      duration?: string;
      distance?: string;
      calories?: string;
    }) => {
      const r = overrides.reps ?? reps;
      const w = overrides.weight ?? weight;
      const p = overrides.rpe ?? rpe;
      const n = overrides.notes ?? notes;
      const dur = overrides.duration ?? duration;
      const dist = overrides.distance ?? distance;
      const cal = overrides.calories ?? calories;

      onUpdate({
        reps: r ? parseInt(r) : undefined,
        weight: w ? parseFloat(w) : undefined,
        rpe: p ? parseInt(p) : undefined,
        notes: n || undefined,
        durationSeconds: dur ? parseInt(dur) : undefined,
        distance: dist ? parseFloat(dist) : undefined,
        calories: cal ? parseInt(cal) : undefined,
      });
    },
    [reps, weight, rpe, notes, duration, distance, calories, onUpdate]
  );

  const handleConfirm = () => {
    emitUpdate({});
    setLocked(true);
    onConfirm?.();
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault();
      handleConfirm();
    }
  };

  const handleUnlock = () => {
    setLocked(false);
  };

  const handleNextSet = () => {
    emitUpdate({});
    setLocked(true);
    onNextSet?.({ weight, reps, rpe, notes, duration, distance, calories });
  };

  // Build a summary string for the locked view
  const buildSummary = () => {
    const parts: string[] = [];
    if (showWeight && weight) parts.push(`${weight} ${weightUnit}`);
    if (showReps && reps) parts.push(`${reps} reps`);
    if (showDuration && duration) parts.push(`${duration}s`);
    if (showDistance && distance) parts.push(`${distance} mi`);
    if (showCalories && calories) parts.push(`${calories} cal`);
    if (rpe) parts.push(`RPE ${rpe}`);
    if (showNotesField && notes) parts.push(notes);
    return parts.length > 0 ? parts.join(" · ") : "No data";
  };

  // ---------- LOCKED VIEW ----------
  if (locked) {
    return (
      <div className="space-y-1.5">
        <div className="flex items-center gap-1.5">
          {/* Set number badge */}
          <div className="bg-white text-black rounded-full w-6 h-6 flex items-center justify-center font-semibold text-xs flex-shrink-0">
            {setNumber}
          </div>

          {/* Summary text */}
          <div className="flex-1 min-w-0">
            <p className="text-sm text-zinc-300 truncate">{buildSummary()}</p>
            {!showNotesField && notes && (
              <p className="text-[10px] text-zinc-500 truncate mt-0.5">{notes}</p>
            )}
          </div>

          {/* Edit (unlock) button */}
          <button
            type="button"
            onClick={handleUnlock}
            className="p-1.5 rounded-md flex-shrink-0 transition-colors text-zinc-400 hover:text-white hover:bg-zinc-800"
            aria-label="Edit set"
          >
            <Pencil className="w-4 h-4" />
          </button>

          {/* Delete button */}
          <button
            type="button"
            onClick={onDelete}
            className="p-1.5 text-red-500 hover:bg-red-950/30 rounded-md flex-shrink-0 active:bg-red-900/30"
            aria-label="Delete set"
          >
            <Trash2 className="w-4 h-4" />
          </button>
        </div>
      </div>
    );
  }

  // Determine which field gets autoFocus
  const firstField = showWeight ? "weight" : showReps ? "reps" : showDuration ? "duration" : showDistance ? "distance" : showCalories ? "calories" : null;

  // ---------- EDIT VIEW ----------
  return (
    <div className="space-y-1.5" onKeyDown={handleKeyDown}>
      <div className="flex items-end gap-1.5">
        {/* Set number badge */}
        <div className="bg-white text-black rounded-full w-6 h-6 flex items-center justify-center font-semibold text-xs flex-shrink-0 mb-0.5">
          {setNumber}
        </div>

        {/* Weight input */}
        {showWeight && (
          <div className="flex-1 min-w-[55px]">
            <label className="block text-[10px] font-medium text-zinc-500 mb-0.5">
              Weight
            </label>
            <input
              type="number"
              step="0.5"
              autoFocus={autoFocus && firstField === "weight"}
              value={weight}
              onChange={(e) => {
                const val = e.target.value;
                setWeight(val);
                emitUpdate({ weight: val });
              }}
              placeholder="0"
              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"
            />
          </div>
        )}

        {/* Reps input */}
        {showReps && (
          <div className="flex-1 min-w-[55px]">
            <label className="block text-[10px] font-medium text-zinc-500 mb-0.5">
              Reps
            </label>
            <input
              type="number"
              autoFocus={autoFocus && firstField === "reps"}
              value={reps}
              onChange={(e) => {
                const val = e.target.value;
                setReps(val);
                emitUpdate({ reps: val });
              }}
              placeholder="0"
              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"
            />
          </div>
        )}

        {/* Duration input (seconds) */}
        {showDuration && (
          <div className="flex-1 min-w-[55px]">
            <label className="block text-[10px] font-medium text-zinc-500 mb-0.5">
              Time (s)
            </label>
            <input
              type="number"
              autoFocus={autoFocus && firstField === "duration"}
              value={duration}
              onChange={(e) => {
                const val = e.target.value;
                setDuration(val);
                emitUpdate({ duration: val });
              }}
              placeholder="0"
              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"
            />
          </div>
        )}

        {/* Distance input */}
        {showDistance && (
          <div className="flex-1 min-w-[55px]">
            <label className="block text-[10px] font-medium text-zinc-500 mb-0.5">
              Dist (mi)
            </label>
            <input
              type="number"
              step="0.1"
              autoFocus={autoFocus && firstField === "distance"}
              value={distance}
              onChange={(e) => {
                const val = e.target.value;
                setDistance(val);
                emitUpdate({ distance: val });
              }}
              placeholder="0"
              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"
            />
          </div>
        )}

        {/* Calories input */}
        {showCalories && (
          <div className="flex-1 min-w-[55px]">
            <label className="block text-[10px] font-medium text-zinc-500 mb-0.5">
              Cals
            </label>
            <input
              type="number"
              autoFocus={autoFocus && firstField === "calories"}
              value={calories}
              onChange={(e) => {
                const val = e.target.value;
                setCalories(val);
                emitUpdate({ calories: val });
              }}
              placeholder="0"
              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"
            />
          </div>
        )}

        {/* RPE select — always shown */}
        <div className="flex-1 min-w-[50px] max-w-[60px]">
          <label className="block text-[10px] font-medium text-zinc-500 mb-0.5">
            RPE
          </label>
          <select
            value={rpe}
            onChange={(e) => {
              const val = e.target.value;
              setRpe(val);
              emitUpdate({ rpe: val });
            }}
            className="w-full px-1.5 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"
          >
            <option value="">-</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
          </select>
        </div>

        {/* Next set button — confirm + add new pre-filled set */}
        {onNextSet && (
          <button
            type="button"
            onClick={handleNextSet}
            className="p-1.5 rounded-md flex-shrink-0 transition-colors text-zinc-400 hover:text-blue-400 hover:bg-blue-950/30"
            aria-label="Save and start next set"
          >
            <CornerDownLeft className="w-4 h-4" />
          </button>
        )}

        {/* Confirm button */}
        <button
          type="button"
          onClick={handleConfirm}
          className="p-1.5 rounded-md flex-shrink-0 transition-colors text-zinc-400 hover:text-green-400 hover:bg-green-950/30"
          aria-label="Confirm set"
        >
          <Check className="w-4 h-4" />
        </button>

        {/* Delete button */}
        <button
          type="button"
          onClick={onDelete}
          className="p-1.5 text-red-500 hover:bg-red-950/30 rounded-md flex-shrink-0 active:bg-red-900/30"
          aria-label="Delete set"
        >
          <Trash2 className="w-4 h-4" />
        </button>
      </div>

      {/* Notes — always visible when configured as input field */}
      {showNotesField && (
        <div className="ml-8">
          <input
            type="text"
            value={notes}
            onChange={(e) => {
              const val = e.target.value;
              setNotes(val);
              emitUpdate({ notes: val });
            }}
            placeholder="e.g. weighted vest, ankle weights..."
            className="w-full px-2 py-1 border border-zinc-700 rounded-md text-xs bg-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-white/20 placeholder:text-zinc-600"
          />
        </div>
      )}

      {/* Toggle notes button (fallback when notes is not a configured input field) */}
      {!showNotesField && showNotes && (
        <div className="ml-8">
          <input
            type="text"
            value={notes}
            onChange={(e) => {
              const val = e.target.value;
              setNotes(val);
              emitUpdate({ notes: val });
            }}
            placeholder="Add notes (optional)"
            className="w-full px-2 py-1 border border-zinc-700 rounded-md text-xs bg-zinc-800 text-white focus:outline-none focus:ring-2 focus:ring-white/20 placeholder:text-zinc-600"
          />
        </div>
      )}
      {!showNotesField && !showNotes && (
        <button
          type="button"
          onClick={() => setShowNotes(true)}
          className="text-[10px] text-zinc-500 hover:text-zinc-300 ml-8"
        >
          + Add notes
        </button>
      )}
    </div>
  );
}