shinkan-jinkendo/frontend/src/pages/SkillsPage.jsx

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

function SkillsPage() {
  const { user } = useAuth()
  const [activeTab, setActiveTab] = useState('skills')
  const [skills, setSkills] = useState([])
  const [methods, setMethods] = useState([])
  const [loading, setLoading] = useState(true)
  const [showModal, setShowModal] = useState(false)
  const [editing, setEditing] = useState(null)
  const [modalType, setModalType] = useState('skill')
  const [formData, setFormData] = useState({})

  const isAdmin = user?.role === 'admin' || user?.role === 'superadmin'

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

  const loadData = async () => {
    try {
      const [skillsData, methodsData] = await Promise.all([
        api.listSkills(),
        api.listMethods()
      ])
      setSkills(skillsData)
      setMethods(methodsData)
    } catch (err) {
      console.error('Failed to load data:', err)
      alert('Fehler beim Laden: ' + err.message)
    } finally {
      setLoading(false)
    }
  }

  const handleCreate = (type) => {
    setEditing(null)
    setModalType(type)

    if (type === 'skill') {
      setFormData({
        name: '',
        category: '',
        description: '',
        importance: 3,
        keywords: [],
        status: 'active'
      })
    } else {
      setFormData({
        name: '',
        abbreviation: '',
        category: '',
        description: '',
        typical_duration: '',
        typical_group_size: '',
        related_skills: [],
        keywords: [],
        status: 'active'
      })
    }

    setShowModal(true)
  }

  const handleEdit = (item, type) => {
    setEditing(item)
    setModalType(type)
    setFormData({ ...item })
    setShowModal(true)
  }

  const handleDelete = async (item, type) => {
    const confirmMsg = type === 'skill'
      ? `Fähigkeit "${item.name}" wirklich löschen?`
      : `Trainingsmethode "${item.name}" wirklich löschen?`

    if (!confirm(confirmMsg)) return

    try {
      if (type === 'skill') {
        await api.deleteSkill(item.id)
      } else {
        await api.deleteMethod(item.id)
      }
      await loadData()
    } catch (err) {
      alert('Fehler beim Löschen: ' + err.message)
    }
  }

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

    try {
      if (modalType === 'skill') {
        if (editing) {
          await api.updateSkill(editing.id, formData)
        } else {
          await api.createSkill(formData)
        }
      } else {
        if (editing) {
          await api.updateMethod(editing.id, formData)
        } else {
          await api.createMethod(formData)
        }
      }

      setShowModal(false)
      await loadData()
    } catch (err) {
      alert('Fehler beim Speichern: ' + err.message)
    }
  }

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

  const groupByCategory = (items) => {
    const grouped = {}
    items.forEach(item => {
      const cat = item.category || 'Ohne Kategorie'
      if (!grouped[cat]) grouped[cat] = []
      grouped[cat].push(item)
    })
    return grouped
  }

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

  const skillsByCategory = groupByCategory(skills)
  const methodsByCategory = groupByCategory(methods)

  return (
    <div style={{ padding: '2rem' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <h1 style={{ marginBottom: '1.5rem' }}>Fähigkeiten & Methoden</h1>

        {/* Tabs */}
        <div style={{
          display: 'flex',
          gap: '0.5rem',
          marginBottom: '1.5rem',
          borderBottom: '2px solid var(--border)'
        }}>
          {['skills', 'methods'].map(tab => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              style={{
                padding: '0.75rem 1.5rem',
                background: activeTab === tab ? 'var(--accent)' : 'transparent',
                color: activeTab === tab ? 'white' : 'var(--text1)',
                border: 'none',
                borderRadius: '8px 8px 0 0',
                cursor: 'pointer',
                fontWeight: activeTab === tab ? 'bold' : 'normal'
              }}
            >
              {tab === 'skills' ? 'Fähigkeiten' : 'Trainingsmethoden'}
            </button>
          ))}
        </div>

        {/* Skills Tab */}
        {activeTab === 'skills' && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
              <p style={{ color: 'var(--text2)' }}>
                Fähigkeiten sind Kompetenzen, die in Übungen trainiert werden.
              </p>
              {isAdmin && (
                <button className="btn btn-primary" onClick={() => handleCreate('skill')}>
                  + Neue Fähigkeit
                </button>
              )}
            </div>

            {Object.keys(skillsByCategory).length === 0 ? (
              <div className="card">
                <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
                  Keine Fähigkeiten gefunden
                </p>
              </div>
            ) : (
              Object.keys(skillsByCategory).sort().map(category => (
                <div key={category} style={{ marginBottom: '2rem' }}>
                  <h2 style={{ marginBottom: '1rem', textTransform: 'capitalize' }}>
                    {category}
                  </h2>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
                    gap: '1rem'
                  }}>
                    {skillsByCategory[category].map(skill => (
                      <div key={skill.id} className="card">
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '0.5rem' }}>
                          <h3 style={{ fontSize: '1rem' }}>{skill.name}</h3>
                          {skill.importance && (
                            <span style={{
                              fontSize: '0.875rem',
                              padding: '0.25rem 0.5rem',
                              borderRadius: '4px',
                              background: 'var(--accent)',
                              color: 'white'
                            }}>
                              ⭐ {skill.importance}/5
                            </span>
                          )}
                        </div>

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

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

        {/* Methods Tab */}
        {activeTab === 'methods' && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
              <p style={{ color: 'var(--text2)' }}>
                Trainingsmethoden sind didaktische Ansätze für die Trainingsgestaltung.
              </p>
              {isAdmin && (
                <button className="btn btn-primary" onClick={() => handleCreate('method')}>
                  + Neue Methode
                </button>
              )}
            </div>

            {Object.keys(methodsByCategory).length === 0 ? (
              <div className="card">
                <p style={{ color: 'var(--text2)', textAlign: 'center' }}>
                  Keine Trainingsmethoden gefunden
                </p>
              </div>
            ) : (
              Object.keys(methodsByCategory).sort().map(category => (
                <div key={category} style={{ marginBottom: '2rem' }}>
                  <h2 style={{ marginBottom: '1rem', textTransform: 'capitalize' }}>
                    {category}
                  </h2>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
                    gap: '1rem'
                  }}>
                    {methodsByCategory[category].map(method => (
                      <div key={method.id} className="card">
                        <div style={{ marginBottom: '0.5rem' }}>
                          <h3 style={{ fontSize: '1rem', marginBottom: '0.25rem' }}>
                            {method.name}
                            {method.abbreviation && (
                              <span style={{ color: 'var(--text2)', fontSize: '0.875rem', marginLeft: '0.5rem' }}>
                                ({method.abbreviation})
                              </span>
                            )}
                          </h3>
                          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                            {method.typical_duration && (
                              <span style={{
                                fontSize: '0.75rem',
                                padding: '0.25rem 0.5rem',
                                borderRadius: '4px',
                                background: 'var(--surface2)',
                                color: 'var(--text2)'
                              }}>
                                ⏱️ {method.typical_duration} min
                              </span>
                            )}
                            {method.typical_group_size && (
                              <span style={{
                                fontSize: '0.75rem',
                                padding: '0.25rem 0.5rem',
                                borderRadius: '4px',
                                background: 'var(--surface2)',
                                color: 'var(--text2)'
                              }}>
                                👥 {method.typical_group_size}
                              </span>
                            )}
                          </div>
                        </div>

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

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

        {/* Modal */}
        {showModal && isAdmin && (
          <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' }}>
                {editing
                  ? (modalType === 'skill' ? 'Fähigkeit bearbeiten' : 'Methode bearbeiten')
                  : (modalType === 'skill' ? 'Neue Fähigkeit' : 'Neue Methode')
                }
              </h2>

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

                {modalType === 'method' && (
                  <div className="form-row">
                    <label className="form-label">Kürzel</label>
                    <input
                      type="text"
                      className="form-input"
                      value={formData.abbreviation || ''}
                      onChange={(e) => updateFormField('abbreviation', e.target.value)}
                      maxLength={20}
                    />
                  </div>
                )}

                <div className="form-row">
                  <label className="form-label">Kategorie</label>
                  <input
                    type="text"
                    className="form-input"
                    value={formData.category || ''}
                    onChange={(e) => updateFormField('category', e.target.value)}
                    placeholder={modalType === 'skill' ? 'z.B. kihon, kumite, kata' : 'z.B. kondition, didaktik'}
                  />
                </div>

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

                {modalType === 'skill' && (
                  <div className="form-row">
                    <label className="form-label">Wichtigkeit (1-5)</label>
                    <input
                      type="number"
                      className="form-input"
                      min={1}
                      max={5}
                      value={formData.importance || 3}
                      onChange={(e) => updateFormField('importance', parseInt(e.target.value))}
                    />
                  </div>
                )}

                {modalType === 'method' && (
                  <>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
                      <div className="form-row">
                        <label className="form-label">Typische Dauer (min)</label>
                        <input
                          type="number"
                          className="form-input"
                          value={formData.typical_duration || ''}
                          onChange={(e) => updateFormField('typical_duration', e.target.value ? parseInt(e.target.value) : '')}
                        />
                      </div>

                      <div className="form-row">
                        <label className="form-label">Gruppengröße</label>
                        <input
                          type="text"
                          className="form-input"
                          value={formData.typical_group_size || ''}
                          onChange={(e) => updateFormField('typical_group_size', e.target.value)}
                          placeholder="z.B. 10-20"
                        />
                      </div>
                    </div>
                  </>
                )}

                <div className="form-row">
                  <label className="form-label">Status</label>
                  <select
                    className="form-input"
                    value={formData.status || 'active'}
                    onChange={(e) => updateFormField('status', e.target.value)}
                  >
                    <option value="active">Aktiv</option>
                    <option value="inactive">Inaktiv</option>
                  </select>
                </div>

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

export default SkillsPage