gravl/frontend/src/components/WorkoutSwapPanel.jsx

/**
 * WorkoutSwapPanel.jsx
 * Modal/panel for swapping current workout with another available workout
 */

import { useState, useEffect } from 'react'
import { Icon } from './Icons'
import './WorkoutSwapPanel.css'

const API_URL = '/api'

function WorkoutSwapPanel({
  currentWorkout = null,
  onSwap = null,
  onClose = null,
  loading = false
}) {
  const [availableWorkouts, setAvailableWorkouts] = useState([])
  const [listLoading, setListLoading] = useState(false)
  const [error, setError] = useState('')
  const [selectedWorkout, setSelectedWorkout] = useState(null)

  useEffect(() => {
    if (!currentWorkout) return
    fetchAvailableWorkouts()
  }, [currentWorkout])

  const fetchAvailableWorkouts = async () => {
    try {
      setListLoading(true)
      setError('')

      const response = await fetch(`${API_URL}/workouts/available`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
        }
      })

      if (!response.ok) {
        throw new Error('Failed to fetch workouts')
      }

      const data = await response.json()
      // Filter out current workout
      const filtered = data.filter(w => w.id !== currentWorkout?.id)
      setAvailableWorkouts(filtered)
    } catch (err) {
      console.error('Failed to fetch workouts:', err)
      setError('Kunde inte hämta tillgängliga pass')
      // Mock data for testing
      setAvailableWorkouts([
        {
          id: 2,
          name: 'Push (Bröst/Axlar/Triceps)',
          type: 'PUSH',
          exercises: 9,
          duration: 60,
          targetMuscles: ['Bröst', 'Axlar', 'Triceps']
        },
        {
          id: 3,
          name: 'Cardio',
          type: 'CARDIO',
          exercises: 3,
          duration: 30,
          targetMuscles: ['Cardiovascular']
        },
        {
          id: 4,
          name: 'Full Body',
          type: 'FULL',
          exercises: 8,
          duration: 75,
          targetMuscles: ['Hela kroppen']
        }
      ])
    } finally {
      setListLoading(false)
    }
  }

  const handleSwap = async () => {
    if (!selectedWorkout || !onSwap) return

    try {
      setListLoading(true)
      setError('')
      await onSwap(selectedWorkout)
    } catch (err) {
      console.error('Swap failed:', err)
      setError('Kunde inte byta pass')
    } finally {
      setListLoading(false)
    }
  }

  return (
    <div className="workout-swap-panel">
      <div className="workout-swap-header">
        <h2>Byt pass</h2>
        {onClose && (
          <button
            className="workout-swap-close"
            onClick={onClose}
            aria-label="Stäng"
            title="Stäng"
          >
            <Icon name="x" size={20} />
          </button>
        )}
      </div>

      {currentWorkout && (
        <div className="workout-swap-current">
          <div className="workout-swap-label">Nuvarande pass</div>
          <div className="workout-swap-card workout-swap-card--current">
            <div className="workout-card-badge">{currentWorkout.type || 'WORKOUT'}</div>
            <div className="workout-card-title">{currentWorkout.name}</div>
            {currentWorkout.exercises && (
              <div className="workout-card-meta">
                {currentWorkout.exercises} övningar • {currentWorkout.duration || 60} min
              </div>
            )}
          </div>
        </div>
      )}

      <div className="workout-swap-divider">
        <Icon name="arrowDown" size={16} />
      </div>

      {error && (
        <div className="workout-swap-error">
          <Icon name="alertCircle" size={16} />
          <span>{error}</span>
        </div>
      )}

      {listLoading ? (
        <div className="workout-swap-loading">
          <div className="workout-swap-spinner" />
          <p>Laddar alternativ...</p>
        </div>
      ) : (
        <>
          <div className="workout-swap-label">Välj pass att byta till</div>
          <div className="workout-swap-list">
            {availableWorkouts.length === 0 ? (
              <div className="workout-swap-empty">
                <p>Inga andra pass tillgängliga</p>
              </div>
            ) : (
              availableWorkouts.map((workout) => (
                <div
                  key={workout.id}
                  className={`workout-swap-item ${selectedWorkout?.id === workout.id ? 'selected' : ''}`}
                  onClick={() => setSelectedWorkout(workout)}
                >
                  <div className="workout-swap-item-header">
                    <div className="workout-swap-item-info">
                      <div className="workout-swap-item-name">{workout.name}</div>
                      <div className="workout-swap-item-meta">
                        {workout.exercises || 0} övningar • {workout.duration || 60} min
                      </div>
                    </div>
                    <div className={`workout-swap-item-select ${selectedWorkout?.id === workout.id ? 'checked' : ''}`}>
                      {selectedWorkout?.id === workout.id && <Icon name="check" size={16} />}
                    </div>
                  </div>
                  {workout.targetMuscles && workout.targetMuscles.length > 0 && (
                    <div className="workout-swap-item-muscles">
                      {workout.targetMuscles.map((muscle, idx) => (
                        <span key={idx} className="muscle-tag">{muscle}</span>
                      ))}
                    </div>
                  )}
                </div>
              ))
            )}
          </div>
        </>
      )}

      <div className="workout-swap-actions">
        {onClose && (
          <button
            className="workout-swap-btn-cancel"
            onClick={onClose}
            disabled={loading || listLoading}
          >
            Avbryt
          </button>
        )}
        <button
          className="workout-swap-btn-confirm"
          onClick={handleSwap}
          disabled={!selectedWorkout || loading || listLoading}
        >
          {loading ? 'Byter...' : 'Byt pass'}
        </button>
      </div>
    </div>
  )
}

export default WorkoutSwapPanel