'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import {
  Upload,
  X,
  AlertTriangle,
  Check,
  Plus,
  Trash2,
  Loader,
  Image,
  ChevronDown,
  ChevronUp,
} from 'lucide-react';
import { Exercise } from '@prisma/client';
import {
  ParsedWorkout,
  ParsedExercise,
  ParsedSet,
  ImportParseResponse,
  ReviewedWorkout,
} from '@/types';

interface WorkoutImportClientProps {
  hasApiKey: boolean;
  exercises: Exercise[];
}

type Phase = 'upload' | 'review' | 'save';

interface ImageFile {
  id: string;
  file: File;
  preview: string;
}

interface EditableSet extends ParsedSet {
  id: string;
}

interface EditableExercise extends ParsedExercise {
  id: string;
  sets: EditableSet[];
}

interface EditableWorkout extends ParsedWorkout {
  id: string;
  exercises: EditableExercise[];
  overallConfidence?: string;
  warnings?: string[];
}

const WorkoutImportClient: React.FC<WorkoutImportClientProps> = ({
  hasApiKey,
  exercises: _exercises,
}) => {
  const [phase, setPhase] = useState<Phase>('upload');
  const [images, setImages] = useState<ImageFile[]>([]);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [editableWorkouts, setEditableWorkouts] = useState<EditableWorkout[]>([]);
  const [expandedWorkouts, setExpandedWorkouts] = useState<Set<string>>(new Set());
  const [isSaving, setIsSaving] = useState(false);
  const [_saveProgress, setSaveProgress] = useState<{
    current: number;
    total: number;
  } | null>(null);
  const [saveSuccess, setSuccess] = useState<{ ids: string[] } | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  // File upload handlers
  const fileToBase64 = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    const files = Array.from(e.dataTransfer.files).filter((f) =>
      f.type.startsWith('image/')
    );
    addImages(files);
  };

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.currentTarget.files || []);
    addImages(files);
  };

  const addImages = (files: File[]) => {
    const newImages: ImageFile[] = files.map((file) => ({
      id: Math.random().toString(36).slice(2),
      file,
      preview: URL.createObjectURL(file),
    }));
    setImages((prev) => [...prev, ...newImages]);
  };

  const removeImage = (id: string) => {
    setImages((prev) => {
      const img = prev.find((i) => i.id === id);
      if (img) URL.revokeObjectURL(img.preview);
      return prev.filter((i) => i.id !== id);
    });
  };

  const handleAnalyze = async () => {
    setIsAnalyzing(true);
    setErrorMessage(null);
    try {
      const base64Images = await Promise.all(images.map((img) => fileToBase64(img.file)));

      const response = await fetch('/api/workouts/import', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ images: base64Images }),
      });

      if (!response.ok) {
        throw new Error(`Analysis failed: ${response.statusText}`);
      }

      const data: ImportParseResponse = await response.json();

      // Convert to editable format with unique IDs
      const editable: EditableWorkout[] = data.workouts.map((w) => ({
        ...w,
        id: Math.random().toString(36).slice(2),
        date: w.date || new Date().toISOString().split('T')[0],
        exercises: w.exercises.map((e) => ({
          ...e,
          id: Math.random().toString(36).slice(2),
          sets: e.sets.map((s) => ({
            ...s,
            id: Math.random().toString(36).slice(2),
          })),
        })),
      }));

      setEditableWorkouts(editable);
      setExpandedWorkouts(new Set(editable.map((w) => w.id)));
      setPhase('review');
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Unknown error');
    } finally {
      setIsAnalyzing(false);
    }
  };

  const toggleWorkoutExpanded = (id: string) => {
    setExpandedWorkouts((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  const updateWorkoutField = (
    workoutId: string,
    field: keyof EditableWorkout,
    value: unknown
  ) => {
    setEditableWorkouts((prev) =>
      prev.map((w) =>
        w.id === workoutId ? { ...w, [field]: value } : w
      )
    );
  };

  const updateExerciseField = (
    workoutId: string,
    exerciseId: string,
    field: keyof EditableExercise,
    value: unknown
  ) => {
    setEditableWorkouts((prev) =>
      prev.map((w) =>
        w.id === workoutId
          ? {
              ...w,
              exercises: w.exercises.map((e) =>
                e.id === exerciseId ? { ...e, [field]: value } : e
              ),
            }
          : w
      )
    );
  };

  const updateSetField = (
    workoutId: string,
    exerciseId: string,
    setId: string,
    field: keyof EditableSet,
    value: unknown
  ) => {
    setEditableWorkouts((prev) =>
      prev.map((w) =>
        w.id === workoutId
          ? {
              ...w,
              exercises: w.exercises.map((e) =>
                e.id === exerciseId
                  ? {
                      ...e,
                      sets: e.sets.map((s) =>
                        s.id === setId ? { ...s, [field]: value } : s
                      ),
                    }
                  : e
              ),
            }
          : w
      )
    );
  };

  const addSet = (workoutId: string, exerciseId: string) => {
    const newSet: EditableSet = {
      id: Math.random().toString(36).slice(2),
      reps: null,
      weight: null,
      weightUnit: 'lb',
      durationSeconds: null,
      distance: null,
      distanceUnit: 'mi',
      calories: null,
      rpe: null,
      notes: null,
    };

    setEditableWorkouts((prev) =>
      prev.map((w) =>
        w.id === workoutId
          ? {
              ...w,
              exercises: w.exercises.map((e) =>
                e.id === exerciseId
                  ? { ...e, sets: [...e.sets, newSet] }
                  : e
              ),
            }
          : w
      )
    );
  };

  const removeSet = (workoutId: string, exerciseId: string, setId: string) => {
    setEditableWorkouts((prev) =>
      prev.map((w) =>
        w.id === workoutId
          ? {
              ...w,
              exercises: w.exercises.map((e) =>
                e.id === exerciseId
                  ? { ...e, sets: e.sets.filter((s) => s.id !== setId) }
                  : e
              ),
            }
          : w
      )
    );
  };

  const addExercise = (workoutId: string) => {
    const newExercise: EditableExercise = {
      id: Math.random().toString(36).slice(2),
      name: 'New Exercise',
      uncertain: false,
      uncertainReason: undefined,
      sets: [
        {
          id: Math.random().toString(36).slice(2),
          reps: null,
          weight: null,
          weightUnit: 'lb',
          durationSeconds: null,
          distance: null,
          distanceUnit: 'mi',
          calories: null,
          rpe: null,
          notes: null,
        },
      ],
    };

    setEditableWorkouts((prev) =>
      prev.map((w) =>
        w.id === workoutId
          ? { ...w, exercises: [...w.exercises, newExercise] }
          : w
      )
    );
  };

  const removeExercise = (workoutId: string, exerciseId: string) => {
    setEditableWorkouts((prev) =>
      prev.map((w) =>
        w.id === workoutId
          ? { ...w, exercises: w.exercises.filter((e) => e.id !== exerciseId) }
          : w
      )
    );
  };

  const removeWorkout = (workoutId: string) => {
    setEditableWorkouts((prev) => prev.filter((w) => w.id !== workoutId));
  };

  const handleSaveAll = async () => {
    setIsSaving(true);
    setSaveProgress({ current: 0, total: editableWorkouts.length });
    setErrorMessage(null);

    const createdIds: string[] = [];

    try {
      for (let i = 0; i < editableWorkouts.length; i++) {
        const workout = editableWorkouts[i];
        setSaveProgress({ current: i + 1, total: editableWorkouts.length });

        // Prepare reviewed data (remove internal IDs)
        const reviewedWorkout: ReviewedWorkout = {
          date: workout.date,
          name: workout.name,
          notes: workout.notes,
          exercises: workout.exercises.map((e) => ({
            name: e.name,
            sets: e.sets.map((s) => ({
              reps: s.reps,
              weight: s.weight,
              weightUnit: s.weightUnit,
              durationSeconds: s.durationSeconds,
              distance: s.distance,
              distanceUnit: s.distanceUnit,
              calories: s.calories,
              rpe: s.rpe,
              notes: s.notes,
            })),
          })),
        };

        const response = await fetch('/api/workouts/import/save', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(reviewedWorkout),
        });

        if (!response.ok) {
          throw new Error(`Failed to save workout: ${response.statusText}`);
        }

        const result = await response.json();
        if (result.id) {
          createdIds.push(result.id);
        }
      }

      setSuccess({ ids: createdIds });
      setEditableWorkouts([]);
      setPhase('save');
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Unknown error');
    } finally {
      setIsSaving(false);
      setSaveProgress(null);
    }
  };

  const resetToUpload = () => {
    setPhase('upload');
    setImages([]);
    setEditableWorkouts([]);
    setExpandedWorkouts(new Set());
    setSuccess(null);
    setErrorMessage(null);
  };

  // Phase 1: Upload
  if (phase === 'upload') {
    if (!hasApiKey) {
      return (
        <div className="min-h-screen bg-[#0A0A0A] p-4 md:p-8">
          <div className="mx-auto max-w-2xl">
            <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-8">
              <div className="flex items-start gap-4">
                <AlertTriangle className="h-6 w-6 flex-shrink-0 text-amber-500 mt-1" />
                <div>
                  <h3 className="text-lg font-semibold text-white mb-2">
                    Claude API Key Required
                  </h3>
                  <p className="text-zinc-400 mb-4">
                    Configure your Claude API key in Settings to use import.
                  </p>
                  <Link
                    href="/main/settings"
                    className="inline-block px-4 py-2 bg-white text-black font-medium rounded-lg hover:bg-zinc-100 transition-colors"
                  >
                    Go to Settings
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div className="min-h-screen bg-[#0A0A0A] p-4 md:p-8">
        <div className="mx-auto max-w-2xl">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-white mb-2">Import Workouts</h1>
            <p className="text-zinc-400">
              Upload images of your workout to have Claude automatically parse them.
            </p>
          </div>

          <div className="space-y-6">
            {/* Drag and Drop Zone */}
            <div
              onDragOver={handleDragOver}
              onDrop={handleDrop}
              className="rounded-lg border-2 border-dashed border-zinc-700 bg-zinc-900/50 p-8 text-center transition-colors hover:border-zinc-500"
            >
              <Image className="mx-auto h-12 w-12 text-zinc-500 mb-4" />
              <h3 className="text-lg font-semibold text-white mb-2">
                Drop your workout images here
              </h3>
              <p className="text-zinc-400 mb-6">
                or use the button below to select files
              </p>
              <label>
                <input
                  type="file"
                  multiple
                  accept="image/*"
                  onChange={handleFileSelect}
                  className="hidden"
                />
                <span className="inline-block px-6 py-2 bg-white text-black font-medium rounded-lg hover:bg-zinc-100 transition-colors cursor-pointer">
                  Select Images
                </span>
              </label>
            </div>

            {/* Image Previews */}
            {images.length > 0 && (
              <div>
                <h3 className="text-lg font-semibold text-white mb-4">
                  Selected Images ({images.length})
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {images.map((img) => (
                    <div
                      key={img.id}
                      className="relative group rounded-lg overflow-hidden bg-zinc-800"
                    >
                      <img
                        src={img.preview}
                        alt="Preview"
                        className="w-full h-32 object-cover"
                      />
                      <button
                        onClick={() => removeImage(img.id)}
                        className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                      >
                        <X className="h-6 w-6 text-white" />
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Error Message */}
            {errorMessage && (
              <div className="rounded-lg border border-red-800 bg-red-900/20 p-4">
                <p className="text-red-400">{errorMessage}</p>
              </div>
            )}

            {/* Analyze Button */}
            <button
              onClick={handleAnalyze}
              disabled={images.length === 0 || isAnalyzing}
              className="w-full py-3 bg-white text-black font-semibold rounded-lg hover:bg-zinc-100 transition-colors disabled:bg-zinc-700 disabled:text-zinc-400 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              {isAnalyzing ? (
                <>
                  <Loader className="h-5 w-5 animate-spin" />
                  Analyzing Images...
                </>
              ) : (
                <>
                  <Upload className="h-5 w-5" />
                  Analyze ({images.length})
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    );
  }

  // Phase 2: Review & Edit
  if (phase === 'review') {
    return (
      <div className="min-h-screen bg-[#0A0A0A] p-4 md:p-8">
        <div className="mx-auto max-w-4xl">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-white mb-2">Review Workouts</h1>
            <p className="text-zinc-400">
              Verify and edit the parsed workout data before saving.
            </p>
          </div>

          {/* Error Message */}
          {errorMessage && (
            <div className="mb-6 rounded-lg border border-red-800 bg-red-900/20 p-4">
              <p className="text-red-400">{errorMessage}</p>
            </div>
          )}

          {/* Workouts */}
          <div className="space-y-4 mb-8">
            {editableWorkouts.map((workout) => {
              const isExpanded = expandedWorkouts.has(workout.id);
              const confidenceColor =
                workout.overallConfidence === 'high'
                  ? 'bg-green-900/20 border-green-800'
                  : workout.overallConfidence === 'medium'
                    ? 'bg-amber-900/20 border-amber-800'
                    : 'bg-red-900/20 border-red-800';

              return (
                <div
                  key={workout.id}
                  className="rounded-lg border border-zinc-800 bg-zinc-900 overflow-hidden"
                >
                  {/* Workout Header */}
                  <div className="border-b border-zinc-800 p-4">
                    <button
                      onClick={() => toggleWorkoutExpanded(workout.id)}
                      className="w-full flex items-center justify-between text-left"
                    >
                      <div className="flex-1">
                        <div className="flex items-center gap-3 mb-2">
                          <h3 className="text-lg font-semibold text-white">
                            {workout.name || 'Unnamed Workout'}
                          </h3>
                          {workout.overallConfidence !== 'high' && (
                            <span
                              className={`text-xs px-2 py-1 rounded border ${confidenceColor}`}
                            >
                              {workout.overallConfidence?.toUpperCase()}
                            </span>
                          )}
                        </div>
                        <p className="text-sm text-zinc-400">{workout.date}</p>
                      </div>
                      {isExpanded ? (
                        <ChevronUp className="h-5 w-5 text-zinc-400" />
                      ) : (
                        <ChevronDown className="h-5 w-5 text-zinc-400" />
                      )}
                    </button>
                  </div>

                  {/* Expanded Content */}
                  {isExpanded && (
                    <div className="p-4 space-y-6 border-t border-zinc-800">
                      {/* Workout Fields */}
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium text-white mb-1">
                            Date
                          </label>
                          <input
                            type="date"
                            value={workout.date}
                            onChange={(e) =>
                              updateWorkoutField(workout.id, 'date', e.target.value)
                            }
                            className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-600"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-white mb-1">
                            Workout Name
                          </label>
                          <input
                            type="text"
                            value={workout.name || ''}
                            onChange={(e) =>
                              updateWorkoutField(workout.id, 'name', e.target.value)
                            }
                            placeholder="e.g., Upper Body Day"
                            className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-600"
                          />
                        </div>
                      </div>

                      {/* Warnings */}
                      {workout.warnings && workout.warnings.length > 0 && (
                        <div className="rounded-lg border border-amber-800 bg-amber-900/20 p-4">
                          <p className="text-sm font-medium text-amber-400 mb-2">
                            Warnings:
                          </p>
                          <ul className="space-y-1">
                            {workout.warnings.map((warning, idx) => (
                              <li key={idx} className="text-sm text-amber-300">
                                • {warning}
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}

                      {/* Exercises */}
                      <div className="space-y-4">
                        {workout.exercises.map((exercise) => (
                          <div
                            key={exercise.id}
                            className="rounded-lg border border-zinc-700 bg-zinc-800/50 p-4"
                          >
                            {/* Exercise Header */}
                            <div className="flex items-start justify-between gap-4 mb-4">
                              <div className="flex-1">
                                <label className="block text-sm font-medium text-white mb-1">
                                  Exercise Name
                                </label>
                                <input
                                  type="text"
                                  value={exercise.name || ''}
                                  onChange={(e) =>
                                    updateExerciseField(
                                      workout.id,
                                      exercise.id,
                                      'name',
                                      e.target.value
                                    )
                                  }
                                  className="w-full px-3 py-2 bg-zinc-700 border border-zinc-600 rounded text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500"
                                />
                              </div>
                              <button
                                onClick={() =>
                                  removeExercise(workout.id, exercise.id)
                                }
                                className="mt-6 p-2 text-red-400 hover:bg-red-900/20 rounded transition-colors"
                              >
                                <Trash2 className="h-5 w-5" />
                              </button>
                            </div>

                            {/* Uncertain Warning */}
                            {exercise.uncertain && (
                              <div className="mb-4 rounded-lg border border-amber-800 bg-amber-900/20 p-3 flex items-start gap-2">
                                <AlertTriangle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
                                <p className="text-sm text-amber-300">
                                  {exercise.uncertainReason ||
                                    'Please verify this exercise name'}
                                </p>
                              </div>
                            )}

                            {/* Sets */}
                            <div className="space-y-3 mb-4">
                              {exercise.sets.map((set, setIdx) => (
                                <div
                                  key={set.id}
                                  className="bg-zinc-700/50 p-3 rounded border border-zinc-600"
                                >
                                  <div className="flex items-center justify-between mb-2">
                                    <span className="text-xs font-medium text-zinc-400">
                                      Set {setIdx + 1}
                                    </span>
                                    <button
                                      onClick={() =>
                                        removeSet(workout.id, exercise.id, set.id)
                                      }
                                      className="p-1 text-red-400 hover:bg-red-900/20 rounded"
                                    >
                                      <X className="h-4 w-4" />
                                    </button>
                                  </div>

                                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
                                    {/* Reps */}
                                    <div>
                                      <label className="block text-xs text-zinc-400 mb-1">
                                        Reps
                                      </label>
                                      <input
                                        type="number"
                                        value={set.reps ?? ''}
                                        onChange={(e) =>
                                          updateSetField(
                                            workout.id,
                                            exercise.id,
                                            set.id,
                                            'reps',
                                            e.target.value ? parseInt(e.target.value) : null
                                          )
                                        }
                                        className="w-full px-2 py-1 bg-zinc-600 border border-zinc-500 rounded text-white text-sm placeholder-zinc-400 focus:outline-none focus:border-zinc-400"
                                      />
                                    </div>

                                    {/* Weight */}
                                    <div>
                                      <label className="block text-xs text-zinc-400 mb-1">
                                        Weight ({set.weightUnit})
                                      </label>
                                      <input
                                        type="number"
                                        step="0.5"
                                        value={set.weight ?? ''}
                                        onChange={(e) =>
                                          updateSetField(
                                            workout.id,
                                            exercise.id,
                                            set.id,
                                            'weight',
                                            e.target.value ? parseFloat(e.target.value) : null
                                          )
                                        }
                                        className="w-full px-2 py-1 bg-zinc-600 border border-zinc-500 rounded text-white text-sm placeholder-zinc-400 focus:outline-none focus:border-zinc-400"
                                      />
                                    </div>

                                    {/* Duration */}
                                    <div>
                                      <label className="block text-xs text-zinc-400 mb-1">
                                        Time (mm:ss)
                                      </label>
                                      <DurationInput
                                        value={set.durationSeconds ?? null}
                                        onChange={(seconds) =>
                                          updateSetField(
                                            workout.id,
                                            exercise.id,
                                            set.id,
                                            'durationSeconds',
                                            seconds
                                          )
                                        }
                                      />
                                    </div>

                                    {/* Distance */}
                                    <div>
                                      <label className="block text-xs text-zinc-400 mb-1">
                                        Distance
                                      </label>
                                      <input
                                        type="number"
                                        step="0.1"
                                        value={set.distance ?? ''}
                                        onChange={(e) =>
                                          updateSetField(
                                            workout.id,
                                            exercise.id,
                                            set.id,
                                            'distance',
                                            e.target.value ? parseFloat(e.target.value) : null
                                          )
                                        }
                                        className="w-full px-2 py-1 bg-zinc-600 border border-zinc-500 rounded text-white text-sm placeholder-zinc-400 focus:outline-none focus:border-zinc-400"
                                      />
                                    </div>

                                    {/* RPE */}
                                    <div>
                                      <label className="block text-xs text-zinc-400 mb-1">
                                        RPE
                                      </label>
                                      <input
                                        type="number"
                                        min="1"
                                        max="10"
                                        value={set.rpe ?? ''}
                                        onChange={(e) =>
                                          updateSetField(
                                            workout.id,
                                            exercise.id,
                                            set.id,
                                            'rpe',
                                            e.target.value ? parseInt(e.target.value) : null
                                          )
                                        }
                                        className="w-full px-2 py-1 bg-zinc-600 border border-zinc-500 rounded text-white text-sm placeholder-zinc-400 focus:outline-none focus:border-zinc-400"
                                      />
                                    </div>

                                    {/* Calories */}
                                    <div className="col-span-2 md:col-span-1 lg:col-span-1">
                                      <label className="block text-xs text-zinc-400 mb-1">
                                        Calories
                                      </label>
                                      <input
                                        type="number"
                                        value={set.calories ?? ''}
                                        onChange={(e) =>
                                          updateSetField(
                                            workout.id,
                                            exercise.id,
                                            set.id,
                                            'calories',
                                            e.target.value ? parseInt(e.target.value) : null
                                          )
                                        }
                                        className="w-full px-2 py-1 bg-zinc-600 border border-zinc-500 rounded text-white text-sm placeholder-zinc-400 focus:outline-none focus:border-zinc-400"
                                      />
                                    </div>

                                    {/* Notes */}
                                    <div className="col-span-2 md:col-span-3 lg:col-span-2">
                                      <label className="block text-xs text-zinc-400 mb-1">
                                        Notes
                                      </label>
                                      <input
                                        type="text"
                                        value={set.notes ?? ''}
                                        onChange={(e) =>
                                          updateSetField(
                                            workout.id,
                                            exercise.id,
                                            set.id,
                                            'notes',
                                            e.target.value || null
                                          )
                                        }
                                        className="w-full px-2 py-1 bg-zinc-600 border border-zinc-500 rounded text-white text-sm placeholder-zinc-400 focus:outline-none focus:border-zinc-400"
                                      />
                                    </div>
                                  </div>
                                </div>
                              ))}
                            </div>

                            {/* Add Set Button */}
                            <button
                              onClick={() => addSet(workout.id, exercise.id)}
                              className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
                            >
                              <Plus className="h-4 w-4" />
                              Add Set
                            </button>
                          </div>
                        ))}
                      </div>

                      {/* Add Exercise Button */}
                      <button
                        onClick={() => addExercise(workout.id)}
                        className="flex items-center gap-2 text-white font-medium px-4 py-2 rounded-lg border border-zinc-700 hover:bg-zinc-800 transition-colors"
                      >
                        <Plus className="h-5 w-5" />
                        Add Exercise
                      </button>

                      {/* Remove Workout Button */}
                      <button
                        onClick={() => removeWorkout(workout.id)}
                        className="w-full flex items-center justify-center gap-2 text-red-400 hover:bg-red-900/20 px-4 py-2 rounded-lg border border-red-800 transition-colors"
                      >
                        <Trash2 className="h-5 w-5" />
                        Remove Workout
                      </button>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          {/* Action Buttons */}
          <div className="flex gap-4">
            <button
              onClick={resetToUpload}
              className="flex-1 py-3 px-4 border border-zinc-700 text-white font-semibold rounded-lg hover:bg-zinc-800 transition-colors"
            >
              Back to Upload
            </button>
            <button
              onClick={handleSaveAll}
              disabled={editableWorkouts.length === 0 || isSaving}
              className="flex-1 py-3 px-4 bg-white text-black font-semibold rounded-lg hover:bg-zinc-100 transition-colors disabled:bg-zinc-700 disabled:text-zinc-400 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              {isSaving ? (
                <>
                  <Loader className="h-5 w-5 animate-spin" />
                  Saving...
                </>
              ) : (
                <>
                  <Check className="h-5 w-5" />
                  Save All Workouts
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    );
  }

  // Phase 3: Save Success
  return (
    <div className="min-h-screen bg-[#0A0A0A] p-4 md:p-8">
      <div className="mx-auto max-w-2xl">
        <div className="rounded-lg border border-green-800 bg-green-900/20 p-8 text-center">
          <Check className="mx-auto h-16 w-16 text-green-500 mb-4" />
          <h1 className="text-3xl font-bold text-white mb-2">Workouts Saved!</h1>
          <p className="text-zinc-400 mb-6">
            Successfully imported {saveSuccess?.ids.length || 0} workout(s).
          </p>

          {saveSuccess?.ids && saveSuccess.ids.length > 0 && (
            <div className="mb-8 space-y-2">
              {saveSuccess.ids.map((id) => (
                <Link
                  key={id}
                  href={`/main/workouts/${id}`}
                  className="block py-2 px-4 bg-zinc-800 hover:bg-zinc-700 rounded transition-colors text-white"
                >
                  View Workout
                </Link>
              ))}
            </div>
          )}

          <button
            onClick={resetToUpload}
            className="inline-block px-6 py-2 bg-white text-black font-medium rounded-lg hover:bg-zinc-100 transition-colors"
          >
            Import More Workouts
          </button>
        </div>
      </div>
    </div>
  );
};

// Helper component for duration input
const DurationInput: React.FC<{
  value: number | null;
  onChange: (seconds: number | null) => void;
}> = ({ value, onChange }) => {
  const [minutes, setMinutes] = React.useState<string>(
    value ? Math.floor(value / 60).toString() : ''
  );
  const [seconds, setSeconds] = React.useState<string>(
    value ? (value % 60).toString() : ''
  );

  const handleChange = (min: string, sec: string) => {
    setMinutes(min);
    setSeconds(sec);

    const minNum = min ? parseInt(min) : 0;
    const secNum = sec ? parseInt(sec) : 0;
    const totalSeconds = minNum * 60 + secNum;

    onChange(totalSeconds || null);
  };

  return (
    <div className="flex gap-1">
      <input
        type="number"
        min="0"
        max="59"
        value={minutes}
        onChange={(e) => handleChange(e.target.value, seconds)}
        placeholder="0"
        className="w-2/3 px-2 py-1 bg-zinc-600 border border-zinc-500 rounded text-white text-sm placeholder-zinc-400 focus:outline-none focus:border-zinc-400"
      />
      <span className="flex items-center text-white text-sm">:</span>
      <input
        type="number"
        min="0"
        max="59"
        value={seconds}
        onChange={(e) => handleChange(minutes, e.target.value)}
        placeholder="0"
        className="w-2/3 px-2 py-1 bg-zinc-600 border border-zinc-500 rounded text-white text-sm placeholder-zinc-400 focus:outline-none focus:border-zinc-400"
      />
    </div>
  );
};

export default WorkoutImportClient;