import React, { useState, useEffect } from 'react'
import api from '../utils/api'

function ExercisesPage() {
  const [exercises, setExercises] = useState([])
  const [skills, setSkills] = useState([])
  const [focusAreas, setFocusAreas] = useState([])
  const [trainingStyles, setTrainingStyles] = useState([])
  const [trainingCharacters, setTrainingCharacters] = useState([])
  const [loading, setLoading] = useState(true)
  const [showModal, setShowModal] = useState(false)
  const [editingExercise, setEditingExercise] = useState(null)
  const [filters, setFilters] = useState({
    focus_area: '',
    visibility: '',
    status: ''
  })

  // Form state
  const [formData, setFormData] = useState({
    title: '',
    summary: '',
    goal: '',
    execution: '',
    preparation: '',
    trainer_notes: '',
    equipment: [],
    duration_min: '',
    duration_max: '',
    group_size_min: '',
    group_size_max: '',
    age_groups: [],
    focus_area: '',
    focus_area_id: null,
    secondary_areas: [],
    training_style_id: null,
    training_character: '',
    training_character_id: null,
    visibility: 'private',
    status: 'draft',
    skills: []
  })

  useEffect(() => {
    loadData()
  }, [filters])

  const loadData = async () => {
    try {
      const [exercisesData, skillsData, focusAreasData, stylesData, charactersData] = await Promise.all([
        api.listExercises(filters),
        api.listSkills(),
        api.listFocusAreas(),
        api.listTrainingStyles(),
        api.listTrainingCharacters()
      ])
      setExercises(exercisesData)
      setSkills(skillsData)
      setFocusAreas(focusAreasData)
      setTrainingStyles(stylesData)
      setTrainingCharacters(charactersData)
    } catch (err) {
      console.error('Failed to load data:', err)
      alert('Fehler beim Laden: ' + err.message)
    } finally {
      setLoading(false)
    }
  }

  const handleCreate = () => {
    setEditingExercise(null)
    setFormData({
      title: '',
      summary: '',
      goal: '',
      execution: '',
      preparation: '',
      trainer_notes: '',
      equipment: [],
      duration_min: '',
      duration_max: '',
      group_size_min: '',
      group_size_max: '',
      age_groups: [],
      focus_area: '',
      focus_area_id: null,
      secondary_areas: [],
      training_style_id: null,
      training_character: '',
      training_character_id: null,
      visibility: 'private',
      status: 'draft',
      skills: []
    })
    setShowModal(true)
  }

  const handleEdit = (exercise) => {
    setEditingExercise(exercise)
    setFormData({
      title: exercise.title || '',
      summary: exercise.summary || '',
      goal: exercise.goal || '',
      execution: exercise.execution || '',
      preparation: exercise.preparation || '',
      trainer_notes: exercise.trainer_notes || '',
      equipment: exercise.equipment || [],
      duration_min: exercise.duration_min || '',
      duration_max: exercise.duration_max || '',
      group_size_min: exercise.group_size_min || '',
      group_size_max: exercise.group_size_max || '',
      age_groups: exercise.age_groups || [],
      focus_area: exercise.focus_area || '',
      focus_area_id: exercise.focus_area_id || null,
      secondary_areas: exercise.secondary_areas || [],
      training_style_id: exercise.training_style_id || null,
      training_character: exercise.training_character || '',
      training_character_id: exercise.training_character_id || null,
      visibility: exercise.visibility || 'private',
      status: exercise.status || 'draft',
      skills: exercise.skills?.map(s => ({
        skill_id: s.skill_id,
        is_primary: s.is_primary || false,
        intensity: s.intensity || null,
        development_contribution: s.development_contribution || null,
        required_level: s.required_level || null,
        target_level: s.target_level || null
      })) || []
    })
    setShowModal(true)
  }

  const handleDelete = async (exercise) => {
    if (!confirm(`Übung "${exercise.title}" wirklich löschen?`)) return

    try {
      await api.deleteExercise(exercise.id)
      await loadData()
    } catch (err) {
      alert('Fehler beim Löschen: ' + err.message)
    }
  }

  const handleSubmit = async (e) => {
    e.preventDefault()

    if (!formData.title || !formData.goal || !formData.execution) {
      alert('Titel, Ziel und Durchführung sind Pflichtfelder')
      return
    }

    try {
      if (editingExercise) {
        await api.updateExercise(editingExercise.id, formData)
      } else {
        await api.createExercise(formData)
      }
      setShowModal(false)
      await loadData()
    } catch (err) {
      alert('Fehler beim Speichern: ' + err.message)
    }
  }

  const updateFormField = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }))
  }

  const toggleSkill = (skillId) => {
    const existing = formData.skills.find(s => s.skill_id === skillId)
    if (existing) {
      updateFormField('skills', formData.skills.filter(s => s.skill_id !== skillId))
    } else {
      updateFormField('skills', [...formData.skills, {
        skill_id: skillId,
        is_primary: false,
        intensity: null,
        development_contribution: null,
        required_level: null,
        target_level: null
      }])
    }
  }

  if (loading) {
    return (
      <div style={{ padding: '2rem', textAlign: 'center' }}>
        <div className="spinner"></div>
        <p>Laden...</p>
      </div>
    )
  }

  return (
    <div style={{ padding: '2rem' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
          <h1>Übungen</h1>
          <button className="btn btn-primary" onClick={handleCreate}>
            + Neue Übung
          </button>
        </div>

        {/* Filters */}
        <div className="card" style={{ marginBottom: '1.5rem' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }}>
            <div>
              <label className="form-label">Fokusbereich</label>
              <select
                className="form-input"
                value={filters.focus_area}
                onChange={(e) => setFilters({ ...filters, focus_area: e.target.value })}
              >
                <option value="">Alle</option>
                {focusAreas.map(fa => (
                  <option key={fa.id} value={fa.id}>
                    {fa.icon} {fa.name}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="form-label">Sichtbarkeit</label>
              <select
                className="form-input"
                value={filters.visibility}
                onChange={(e) => setFilters({ ...filters, visibility: e.target.value })}
              >
                <option value="">Alle</option>
                <option value="private">Privat</option>
                <option value="club">Verein</option>
                <option value="official">Offiziell</option>
              </select>
            </div>

            <div>
              <label className="form-label">Status</label>
              <select
                className="form-input"
                value={filters.status}
                onChange={(e) => setFilters({ ...filters, status: e.target.value })}
              >
                <option value="">Alle</option>
                <option value="draft">Entwurf</option>
                <option value="in_review">In Prüfung</option>
                <option value="approved">Freigegeben</option>
                <option value="archived">Archiviert</option>
              </select>
            </div>
          </div>
        </div>

        {/* Exercises Grid */}
        {exercises.length === 0 ? (
          <div className="card">
            <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
              Keine Übungen gefunden. Lege jetzt deine erste Übung an!
            </p>
          </div>
        ) : (
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
            gap: '1rem'
          }}>
            {exercises.map(exercise => (
              <div key={exercise.id} className="card">
                <div style={{ marginBottom: '1rem' }}>
                  <h3 style={{ marginBottom: '0.5rem' }}>{exercise.title}</h3>
                  <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                    <span style={{
                      fontSize: '0.75rem',
                      padding: '0.25rem 0.5rem',
                      borderRadius: '4px',
                      background: 'var(--surface2)',
                      color: 'var(--text2)'
                    }}>
                      {exercise.focus_area || 'Ohne Fokus'}
                    </span>
                    <span style={{
                      fontSize: '0.75rem',
                      padding: '0.25rem 0.5rem',
                      borderRadius: '4px',
                      background: exercise.visibility === 'official' ? 'var(--accent)' : 'var(--surface2)',
                      color: exercise.visibility === 'official' ? 'white' : 'var(--text2)'
                    }}>
                      {exercise.visibility}
                    </span>
                    <span style={{
                      fontSize: '0.75rem',
                      padding: '0.25rem 0.5rem',
                      borderRadius: '4px',
                      background: exercise.status === 'approved' ? '#2ea44f' : 'var(--surface2)',
                      color: exercise.status === 'approved' ? 'white' : 'var(--text2)'
                    }}>
                      {exercise.status}
                    </span>
                  </div>
                </div>

                {exercise.summary && (
                  <p style={{ color: 'var(--text2)', fontSize: '0.875rem', marginBottom: '1rem' }}>
                    {exercise.summary}
                  </p>
                )}

                <div style={{ display: 'flex', gap: '0.5rem', marginTop: 'auto' }}>
                  <button
                    className="btn btn-secondary"
                    style={{ flex: 1 }}
                    onClick={() => handleEdit(exercise)}
                  >
                    Bearbeiten
                  </button>
                  <button
                    className="btn"
                    style={{
                      background: 'var(--danger)',
                      color: 'white',
                      border: 'none'
                    }}
                    onClick={() => handleDelete(exercise)}
                  >
                    Löschen
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Create/Edit Modal */}
        {showModal && (
          <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0,0,0,0.5)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 1000,
            padding: '1rem'
          }}>
            <div style={{
              background: 'var(--surface)',
              borderRadius: '12px',
              padding: '2rem',
              maxWidth: '600px',
              width: '100%',
              maxHeight: '90vh',
              overflowY: 'auto'
            }}>
              <h2 style={{ marginBottom: '1.5rem' }}>
                {editingExercise ? 'Übung bearbeiten' : 'Neue Übung'}
              </h2>

              <form onSubmit={handleSubmit}>
                <div className="form-row">
                  <label className="form-label">Titel *</label>
                  <input
                    type="text"
                    className="form-input"
                    value={formData.title}
                    onChange={(e) => updateFormField('title', e.target.value)}
                    required
                  />
                </div>

                <div className="form-row">
                  <label className="form-label">Kurzbeschreibung</label>
                  <textarea
                    className="form-input"
                    rows={2}
                    value={formData.summary}
                    onChange={(e) => updateFormField('summary', e.target.value)}
                  />
                </div>

                <div className="form-row">
                  <label className="form-label">Ziel der Übung *</label>
                  <textarea
                    className="form-input"
                    rows={3}
                    value={formData.goal}
                    onChange={(e) => updateFormField('goal', e.target.value)}
                    required
                  />
                </div>

                <div className="form-row">
                  <label className="form-label">Durchführung *</label>
                  <textarea
                    className="form-input"
                    rows={4}
                    value={formData.execution}
                    onChange={(e) => updateFormField('execution', e.target.value)}
                    required
                  />
                </div>

                <div className="form-row">
                  <label className="form-label">Vorbereitung / Aufbau</label>
                  <textarea
                    className="form-input"
                    rows={3}
                    value={formData.preparation}
                    onChange={(e) => updateFormField('preparation', e.target.value)}
                  />
                </div>

                <div className="form-row">
                  <label className="form-label">Hinweise für Trainer</label>
                  <textarea
                    className="form-input"
                    rows={2}
                    value={formData.trainer_notes}
                    onChange={(e) => updateFormField('trainer_notes', e.target.value)}
                  />
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
                  <div className="form-row">
                    <label className="form-label">Dauer Min (Minuten)</label>
                    <input
                      type="number"
                      className="form-input"
                      value={formData.duration_min}
                      onChange={(e) => updateFormField('duration_min', e.target.value ? parseInt(e.target.value) : '')}
                    />
                  </div>

                  <div className="form-row">
                    <label className="form-label">Dauer Max (Minuten)</label>
                    <input
                      type="number"
                      className="form-input"
                      value={formData.duration_max}
                      onChange={(e) => updateFormField('duration_max', e.target.value ? parseInt(e.target.value) : '')}
                    />
                  </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
                  <div className="form-row">
                    <label className="form-label">Gruppengröße Min</label>
                    <input
                      type="number"
                      className="form-input"
                      value={formData.group_size_min}
                      onChange={(e) => updateFormField('group_size_min', e.target.value ? parseInt(e.target.value) : '')}
                    />
                  </div>

                  <div className="form-row">
                    <label className="form-label">Gruppengröße Max</label>
                    <input
                      type="number"
                      className="form-input"
                      value={formData.group_size_max}
                      onChange={(e) => updateFormField('group_size_max', e.target.value ? parseInt(e.target.value) : '')}
                    />
                  </div>
                </div>

                <div className="form-row">
                  <label className="form-label">Fokusbereich</label>
                  <select
                    className="form-input"
                    value={formData.focus_area_id || ''}
                    onChange={(e) => updateFormField('focus_area_id', e.target.value ? parseInt(e.target.value) : null)}
                  >
                    <option value="">Bitte wählen</option>
                    {focusAreas.map(fa => (
                      <option key={fa.id} value={fa.id}>
                        {fa.icon} {fa.name}
                      </option>
                    ))}
                  </select>
                </div>

                <div className="form-row">
                  <label className="form-label">Trainingsstil</label>
                  <select
                    className="form-input"
                    value={formData.training_style_id || ''}
                    onChange={(e) => updateFormField('training_style_id', e.target.value ? parseInt(e.target.value) : null)}
                  >
                    <option value="">Bitte wählen</option>
                    {trainingStyles.map(ts => (
                      <option key={ts.id} value={ts.id}>
                        {ts.name}
                        {ts.parent_style_name ? ` (${ts.parent_style_name})` : ''}
                      </option>
                    ))}
                  </select>
                </div>

                <div className="form-row">
                  <label className="form-label">Trainingscharakter</label>
                  <select
                    className="form-input"
                    value={formData.training_character_id || ''}
                    onChange={(e) => updateFormField('training_character_id', e.target.value ? parseInt(e.target.value) : null)}
                  >
                    <option value="">Bitte wählen</option>
                    {trainingCharacters.map(tc => (
                      <option key={tc.id} value={tc.id}>
                        {tc.name}
                      </option>
                    ))}
                  </select>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
                  <div className="form-row">
                    <label className="form-label">Sichtbarkeit</label>
                    <select
                      className="form-input"
                      value={formData.visibility}
                      onChange={(e) => updateFormField('visibility', e.target.value)}
                    >
                      <option value="private">Privat</option>
                      <option value="club">Verein</option>
                      <option value="official">Offiziell</option>
                    </select>
                  </div>

                  <div className="form-row">
                    <label className="form-label">Status</label>
                    <select
                      className="form-input"
                      value={formData.status}
                      onChange={(e) => updateFormField('status', e.target.value)}
                    >
                      <option value="draft">Entwurf</option>
                      <option value="in_review">In Prüfung</option>
                      <option value="approved">Freigegeben</option>
                      <option value="archived">Archiviert</option>
                    </select>
                  </div>
                </div>

                {/* Skills Selection */}
                <div className="form-row">
                  <label className="form-label">Fähigkeiten</label>
                  <div style={{
                    maxHeight: '200px',
                    overflowY: 'auto',
                    border: '1px solid var(--border)',
                    borderRadius: '8px',
                    padding: '0.5rem'
                  }}>
                    {skills.map(skill => (
                      <label
                        key={skill.id}
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          padding: '0.5rem',
                          cursor: 'pointer',
                          borderRadius: '4px',
                          transition: 'background 0.2s'
                        }}
                        onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface2)'}
                        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                      >
                        <input
                          type="checkbox"
                          checked={formData.skills.some(s => s.skill_id === skill.id)}
                          onChange={() => toggleSkill(skill.id)}
                          style={{ marginRight: '0.5rem' }}
                        />
                        <span style={{ fontSize: '0.875rem' }}>
                          {skill.name} <span style={{ color: 'var(--text2)' }}>({skill.category})</span>
                        </span>
                      </label>
                    ))}
                  </div>
                </div>

                {/* Buttons */}
                <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1.5rem' }}>
                  <button type="submit" className="btn btn-primary" style={{ flex: 1 }}>
                    {editingExercise ? 'Speichern' : 'Erstellen'}
                  </button>
                  <button
                    type="button"
                    className="btn btn-secondary"
                    onClick={() => setShowModal(false)}
                  >
                    Abbrechen
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default ExercisesPage