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

export default function AdminCatalogsPage() {
  const [activeTab, setActiveTab] = useState('focus-areas')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  // Focus Areas
  const [focusAreas, setFocusAreas] = useState([])
  const [editingFA, setEditingFA] = useState(null)
  const [newFA, setNewFA] = useState({ name: '', description: '', color: '#1D9E75', icon: '' })

  // Training Styles
  const [trainingStyles, setTrainingStyles] = useState([])
  const [editingTS, setEditingTS] = useState(null)
  const [newTS, setNewTS] = useState({ name: '', description: '', parent_style_id: null })

  // Training Characters
  const [trainingCharacters, setTrainingCharacters] = useState([])
  const [editingTC, setEditingTC] = useState(null)
  const [newTC, setNewTC] = useState({ name: '', description: '' })

  // Skill Categories
  const [skillCategories, setSkillCategories] = useState([])
  const [editingSC, setEditingSC] = useState(null)
  const [newSC, setNewSC] = useState({ name: '', description: '', parent_category_id: null })

  // Target Groups
  const [targetGroups, setTargetGroups] = useState([])
  const [editingTG, setEditingTG] = useState(null)
  const [newTG, setNewTG] = useState({ name: '', description: '', training_style_id: null, min_age: null, max_age: null })

  // Trainer Focus Areas
  const [trainerAssignments, setTrainerAssignments] = useState([])
  const [profiles, setProfiles] = useState([])
  const [newAssignment, setNewAssignment] = useState({ profile_id: '', focus_area_id: '' })

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

  async function loadData() {
    setLoading(true)
    setError('')
    try {
      if (activeTab === 'focus-areas') {
        const data = await api.listFocusAreas()
        setFocusAreas(data)
      } else if (activeTab === 'training-styles') {
        const data = await api.listTrainingStyles()
        setTrainingStyles(data)
      } else if (activeTab === 'training-characters') {
        const data = await api.listTrainingCharacters()
        setTrainingCharacters(data)
      } else if (activeTab === 'skill-categories') {
        const data = await api.listSkillCategories()
        setSkillCategories(data)
      } else if (activeTab === 'target-groups') {
        const [groups, styles] = await Promise.all([
          api.listTargetGroups(),
          api.listTrainingStyles()
        ])
        setTargetGroups(groups)
        setTrainingStyles(styles)
      } else if (activeTab === 'trainer-assignments') {
        const [assignments, profs, areas] = await Promise.all([
          api.listTrainerFocusAreas(),
          fetch('/api/profiles').then(r => r.json()),
          api.listFocusAreas()
        ])
        setTrainerAssignments(assignments)
        setProfiles(profs)
        setFocusAreas(areas)
      }
    } catch (e) {
      setError(e.message)
    } finally {
      setLoading(false)
    }
  }

  // Focus Areas
  async function createFocusArea() {
    try {
      await api.createFocusArea(newFA)
      setNewFA({ name: '', description: '', color: '#1D9E75', icon: '' })
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function updateFocusArea(id, data) {
    try {
      await api.updateFocusArea(id, data)
      setEditingFA(null)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function deleteFocusArea(id) {
    if (!confirm('Fokusbereich wirklich löschen?')) return
    try {
      await api.deleteFocusArea(id)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  // Training Styles
  async function createTrainingStyle() {
    try {
      await api.createTrainingStyle(newTS)
      setNewTS({ name: '', description: '', parent_style_id: null })
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function updateTrainingStyle(id, data) {
    try {
      await api.updateTrainingStyle(id, data)
      setEditingTS(null)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function deleteTrainingStyle(id) {
    if (!confirm('Trainingsstil wirklich löschen?')) return
    try {
      await api.deleteTrainingStyle(id)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  // Training Characters
  async function createTrainingCharacter() {
    try {
      await api.createTrainingCharacter(newTC)
      setNewTC({ name: '', description: '' })
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function updateTrainingCharacter(id, data) {
    try {
      await api.updateTrainingCharacter(id, data)
      setEditingTC(null)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function deleteTrainingCharacter(id) {
    if (!confirm('Trainingscharakter wirklich löschen?')) return
    try {
      await api.deleteTrainingCharacter(id)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  // Skill Categories
  async function createSkillCategory() {
    try {
      await api.createSkillCategory(newSC)
      setNewSC({ name: '', description: '', parent_category_id: null })
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function updateSkillCategory(id, data) {
    try {
      await api.updateSkillCategory(id, data)
      setEditingSC(null)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function deleteSkillCategory(id) {
    if (!confirm('Fähigkeitskategorie wirklich löschen?')) return
    try {
      await api.deleteSkillCategory(id)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  // Target Groups
  async function createTargetGroup() {
    try {
      await api.createTargetGroup(newTG)
      setNewTG({ name: '', description: '', training_style_id: null, min_age: null, max_age: null })
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function updateTargetGroup(id, data) {
    try {
      await api.updateTargetGroup(id, data)
      setEditingTG(null)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function deleteTargetGroup(id) {
    if (!confirm('Zielgruppe wirklich löschen?')) return
    try {
      await api.deleteTargetGroup(id)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  // Trainer Assignments
  async function assignTrainer() {
    try {
      await api.assignTrainerFocusArea(newAssignment)
      setNewAssignment({ profile_id: '', focus_area_id: '' })
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  async function removeAssignment(id) {
    if (!confirm('Zuordnung wirklich entfernen?')) return
    try {
      await api.deleteTrainerFocusArea(id)
      loadData()
    } catch (e) {
      setError(e.message)
    }
  }

  return (
    <div style={{ padding: '16px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1 style={{ marginBottom: '24px' }}>Stammdaten-Kataloge</h1>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: '8px', borderBottom: '2px solid var(--border)', marginBottom: '24px', overflowX: 'auto' }}>
        {[
          { id: 'focus-areas', label: 'Fokusbereiche' },
          { id: 'training-styles', label: 'Trainingsstile' },
          { id: 'training-characters', label: 'Trainingscharakter' },
          { id: 'skill-categories', label: 'Fähigkeitskategorien' },
          { id: 'target-groups', label: 'Zielgruppen' },
          { id: 'trainer-assignments', label: 'Trainer-Zuordnungen' }
        ].map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className="btn"
            style={{
              borderBottom: activeTab === tab.id ? '3px solid var(--accent)' : 'none',
              borderRadius: 0,
              fontWeight: activeTab === tab.id ? 600 : 400,
              color: activeTab === tab.id ? 'var(--accent)' : 'var(--text2)',
              padding: '12px 16px',
              whiteSpace: 'nowrap'
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {error && (
        <div style={{ padding: '12px', background: 'var(--danger)', color: 'white', borderRadius: '8px', marginBottom: '16px' }}>
          {error}
        </div>
      )}

      {loading ? (
        <div className="spinner" />
      ) : (
        <>
          {/* Focus Areas */}
          {activeTab === 'focus-areas' && (
            <div>
              <div className="card" style={{ marginBottom: '24px' }}>
                <h3>Neuer Fokusbereich</h3>
                <div className="form-row">
                  <label className="form-label">Name</label>
                  <input
                    className="form-input"
                    value={newFA.name}
                    onChange={e => setNewFA({ ...newFA, name: e.target.value })}
                    placeholder="z.B. Karate"
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Beschreibung</label>
                  <textarea
                    className="form-input"
                    value={newFA.description}
                    onChange={e => setNewFA({ ...newFA, description: e.target.value })}
                    rows={3}
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Farbe</label>
                  <input
                    type="color"
                    className="form-input"
                    value={newFA.color}
                    onChange={e => setNewFA({ ...newFA, color: e.target.value })}
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Icon</label>
                  <input
                    className="form-input"
                    value={newFA.icon}
                    onChange={e => setNewFA({ ...newFA, icon: e.target.value })}
                    placeholder="z.B. 🥋"
                  />
                </div>
                <button className="btn btn-primary" onClick={createFocusArea}>Anlegen</button>
              </div>

              <div style={{ display: 'grid', gap: '16px' }}>
                {focusAreas.map(fa => (
                  <div key={fa.id} className="card">
                    {editingFA?.id === fa.id ? (
                      <div>
                        <div className="form-row">
                          <label className="form-label">Name</label>
                          <input
                            className="form-input"
                            value={editingFA.name}
                            onChange={e => setEditingFA({ ...editingFA, name: e.target.value })}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Beschreibung</label>
                          <textarea
                            className="form-input"
                            value={editingFA.description || ''}
                            onChange={e => setEditingFA({ ...editingFA, description: e.target.value })}
                            rows={3}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Farbe</label>
                          <input
                            type="color"
                            className="form-input"
                            value={editingFA.color}
                            onChange={e => setEditingFA({ ...editingFA, color: e.target.value })}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Icon</label>
                          <input
                            className="form-input"
                            value={editingFA.icon || ''}
                            onChange={e => setEditingFA({ ...editingFA, icon: e.target.value })}
                          />
                        </div>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn btn-primary" onClick={() => updateFocusArea(fa.id, editingFA)}>Speichern</button>
                          <button className="btn" onClick={() => setEditingFA(null)}>Abbrechen</button>
                        </div>
                      </div>
                    ) : (
                      <div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '8px' }}>
                          <span style={{ fontSize: '24px' }}>{fa.icon}</span>
                          <div style={{ flex: 1 }}>
                            <h3 style={{ margin: 0 }}>{fa.name}</h3>
                            <p style={{ margin: '4px 0 0', color: 'var(--text2)', fontSize: '14px' }}>{fa.description}</p>
                          </div>
                          <div
                            style={{
                              width: '32px',
                              height: '32px',
                              borderRadius: '4px',
                              background: fa.color
                            }}
                          />
                        </div>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn" onClick={() => setEditingFA(fa)}>Bearbeiten</button>
                          <button className="btn" onClick={() => deleteFocusArea(fa.id)}>Löschen</button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Training Styles */}
          {activeTab === 'training-styles' && (
            <div>
              <div className="card" style={{ marginBottom: '24px' }}>
                <h3>Neuer Trainingsstil</h3>
                <div className="form-row">
                  <label className="form-label">Name</label>
                  <input
                    className="form-input"
                    value={newTS.name}
                    onChange={e => setNewTS({ ...newTS, name: e.target.value })}
                    placeholder="z.B. Shotokan"
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Beschreibung</label>
                  <textarea
                    className="form-input"
                    value={newTS.description}
                    onChange={e => setNewTS({ ...newTS, description: e.target.value })}
                    rows={3}
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Übergeordneter Stil (optional)</label>
                  <select
                    className="form-input"
                    value={newTS.parent_style_id || ''}
                    onChange={e => setNewTS({ ...newTS, parent_style_id: e.target.value ? parseInt(e.target.value) : null })}
                  >
                    <option value="">- Kein -</option>
                    {trainingStyles.map(ts => (
                      <option key={ts.id} value={ts.id}>{ts.name}</option>
                    ))}
                  </select>
                </div>
                <button className="btn btn-primary" onClick={createTrainingStyle}>Anlegen</button>
              </div>

              <div style={{ display: 'grid', gap: '16px' }}>
                {trainingStyles.map(ts => (
                  <div key={ts.id} className="card">
                    {editingTS?.id === ts.id ? (
                      <div>
                        <div className="form-row">
                          <label className="form-label">Name</label>
                          <input
                            className="form-input"
                            value={editingTS.name}
                            onChange={e => setEditingTS({ ...editingTS, name: e.target.value })}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Beschreibung</label>
                          <textarea
                            className="form-input"
                            value={editingTS.description || ''}
                            onChange={e => setEditingTS({ ...editingTS, description: e.target.value })}
                            rows={3}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Übergeordneter Stil</label>
                          <select
                            className="form-input"
                            value={editingTS.parent_style_id || ''}
                            onChange={e => setEditingTS({ ...editingTS, parent_style_id: e.target.value ? parseInt(e.target.value) : null })}
                          >
                            <option value="">- Kein -</option>
                            {trainingStyles.filter(x => x.id !== ts.id).map(x => (
                              <option key={x.id} value={x.id}>{x.name}</option>
                            ))}
                          </select>
                        </div>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn btn-primary" onClick={() => updateTrainingStyle(ts.id, editingTS)}>Speichern</button>
                          <button className="btn" onClick={() => setEditingTS(null)}>Abbrechen</button>
                        </div>
                      </div>
                    ) : (
                      <div>
                        <h3>{ts.name}</h3>
                        {ts.parent_style_name && (
                          <p style={{ margin: '4px 0', color: 'var(--text2)', fontSize: '14px' }}>
                            → {ts.parent_style_name}
                          </p>
                        )}
                        <p style={{ margin: '8px 0', color: 'var(--text2)' }}>{ts.description}</p>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn" onClick={() => setEditingTS(ts)}>Bearbeiten</button>
                          <button className="btn" onClick={() => deleteTrainingStyle(ts.id)}>Löschen</button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Training Characters */}
          {activeTab === 'training-characters' && (
            <div>
              <div className="card" style={{ marginBottom: '24px' }}>
                <h3>Neuer Trainingscharakter</h3>
                <div className="form-row">
                  <label className="form-label">Name</label>
                  <input
                    className="form-input"
                    value={newTC.name}
                    onChange={e => setNewTC({ ...newTC, name: e.target.value })}
                    placeholder="z.B. Technisch"
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Beschreibung</label>
                  <textarea
                    className="form-input"
                    value={newTC.description}
                    onChange={e => setNewTC({ ...newTC, description: e.target.value })}
                    rows={3}
                  />
                </div>
                <button className="btn btn-primary" onClick={createTrainingCharacter}>Anlegen</button>
              </div>

              <div style={{ display: 'grid', gap: '16px' }}>
                {trainingCharacters.map(tc => (
                  <div key={tc.id} className="card">
                    {editingTC?.id === tc.id ? (
                      <div>
                        <div className="form-row">
                          <label className="form-label">Name</label>
                          <input
                            className="form-input"
                            value={editingTC.name}
                            onChange={e => setEditingTC({ ...editingTC, name: e.target.value })}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Beschreibung</label>
                          <textarea
                            className="form-input"
                            value={editingTC.description || ''}
                            onChange={e => setEditingTC({ ...editingTC, description: e.target.value })}
                            rows={3}
                          />
                        </div>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn btn-primary" onClick={() => updateTrainingCharacter(tc.id, editingTC)}>Speichern</button>
                          <button className="btn" onClick={() => setEditingTC(null)}>Abbrechen</button>
                        </div>
                      </div>
                    ) : (
                      <div>
                        <h3>{tc.name}</h3>
                        <p style={{ margin: '8px 0', color: 'var(--text2)' }}>{tc.description}</p>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn" onClick={() => setEditingTC(tc)}>Bearbeiten</button>
                          <button className="btn" onClick={() => deleteTrainingCharacter(tc.id)}>Löschen</button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Skill Categories */}
          {activeTab === 'skill-categories' && (
            <div>
              <div className="card" style={{ marginBottom: '24px' }}>
                <h3>Neue Fähigkeitskategorie</h3>
                <div className="form-row">
                  <label className="form-label">Name</label>
                  <input
                    className="form-input"
                    value={newSC.name}
                    onChange={e => setNewSC({ ...newSC, name: e.target.value })}
                    placeholder="z.B. Technik"
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Beschreibung</label>
                  <textarea
                    className="form-input"
                    value={newSC.description}
                    onChange={e => setNewSC({ ...newSC, description: e.target.value })}
                    rows={3}
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Übergeordnete Kategorie (optional)</label>
                  <select
                    className="form-input"
                    value={newSC.parent_category_id || ''}
                    onChange={e => setNewSC({ ...newSC, parent_category_id: e.target.value ? parseInt(e.target.value) : null })}
                  >
                    <option value="">- Keine -</option>
                    {skillCategories.map(sc => (
                      <option key={sc.id} value={sc.id}>{sc.name}</option>
                    ))}
                  </select>
                </div>
                <button className="btn btn-primary" onClick={createSkillCategory}>Anlegen</button>
              </div>

              <div style={{ display: 'grid', gap: '16px' }}>
                {skillCategories.map(sc => (
                  <div key={sc.id} className="card">
                    {editingSC?.id === sc.id ? (
                      <div>
                        <div className="form-row">
                          <label className="form-label">Name</label>
                          <input
                            className="form-input"
                            value={editingSC.name}
                            onChange={e => setEditingSC({ ...editingSC, name: e.target.value })}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Beschreibung</label>
                          <textarea
                            className="form-input"
                            value={editingSC.description || ''}
                            onChange={e => setEditingSC({ ...editingSC, description: e.target.value })}
                            rows={3}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Übergeordnete Kategorie</label>
                          <select
                            className="form-input"
                            value={editingSC.parent_category_id || ''}
                            onChange={e => setEditingSC({ ...editingSC, parent_category_id: e.target.value ? parseInt(e.target.value) : null })}
                          >
                            <option value="">- Keine -</option>
                            {skillCategories.filter(x => x.id !== sc.id).map(x => (
                              <option key={x.id} value={x.id}>{x.name}</option>
                            ))}
                          </select>
                        </div>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn btn-primary" onClick={() => updateSkillCategory(sc.id, editingSC)}>Speichern</button>
                          <button className="btn" onClick={() => setEditingSC(null)}>Abbrechen</button>
                        </div>
                      </div>
                    ) : (
                      <div>
                        <h3>{sc.name}</h3>
                        {sc.parent_category_name && (
                          <p style={{ margin: '4px 0', color: 'var(--text2)', fontSize: '14px' }}>
                            → {sc.parent_category_name}
                          </p>
                        )}
                        <p style={{ margin: '8px 0', color: 'var(--text2)' }}>{sc.description}</p>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn" onClick={() => setEditingSC(sc)}>Bearbeiten</button>
                          <button className="btn" onClick={() => deleteSkillCategory(sc.id)}>Löschen</button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Target Groups */}
          {activeTab === 'target-groups' && (
            <div>
              <div className="card" style={{ marginBottom: '24px' }}>
                <h3>Neue Zielgruppe</h3>
                <div className="form-row">
                  <label className="form-label">Trainingsstil</label>
                  <select
                    className="form-input"
                    value={newTG.training_style_id || ''}
                    onChange={e => setNewTG({ ...newTG, training_style_id: e.target.value ? parseInt(e.target.value) : null })}
                  >
                    <option value="">- Stil auswählen -</option>
                    {trainingStyles.map(ts => (
                      <option key={ts.id} value={ts.id}>{ts.name}</option>
                    ))}
                  </select>
                </div>
                <div className="form-row">
                  <label className="form-label">Name</label>
                  <input
                    className="form-input"
                    value={newTG.name}
                    onChange={e => setNewTG({ ...newTG, name: e.target.value })}
                    placeholder="z.B. Breitensportler"
                  />
                </div>
                <div className="form-row">
                  <label className="form-label">Beschreibung (optional)</label>
                  <textarea
                    className="form-input"
                    value={newTG.description || ''}
                    onChange={e => setNewTG({ ...newTG, description: e.target.value })}
                    rows="3"
                  />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                  <div className="form-row">
                    <label className="form-label">Min. Alter (optional)</label>
                    <input
                      type="number"
                      className="form-input"
                      value={newTG.min_age || ''}
                      onChange={e => setNewTG({ ...newTG, min_age: e.target.value ? parseInt(e.target.value) : null })}
                    />
                  </div>
                  <div className="form-row">
                    <label className="form-label">Max. Alter (optional)</label>
                    <input
                      type="number"
                      className="form-input"
                      value={newTG.max_age || ''}
                      onChange={e => setNewTG({ ...newTG, max_age: e.target.value ? parseInt(e.target.value) : null })}
                    />
                  </div>
                </div>
                <button className="btn btn-primary" onClick={createTargetGroup}>Erstellen</button>
              </div>

              <div style={{ display: 'grid', gap: '16px' }}>
                {targetGroups.map(tg => (
                  <div key={tg.id} className="card">
                    {editingTG === tg.id ? (
                      <div>
                        <div className="form-row">
                          <label className="form-label">Trainingsstil</label>
                          <select
                            className="form-input"
                            value={tg.training_style_id || ''}
                            onChange={e => setTargetGroups(targetGroups.map(x =>
                              x.id === tg.id ? { ...x, training_style_id: e.target.value ? parseInt(e.target.value) : null } : x
                            ))}
                          >
                            <option value="">- Stil auswählen -</option>
                            {trainingStyles.map(ts => (
                              <option key={ts.id} value={ts.id}>{ts.name}</option>
                            ))}
                          </select>
                        </div>
                        <div className="form-row">
                          <label className="form-label">Name</label>
                          <input
                            className="form-input"
                            value={tg.name}
                            onChange={e => setTargetGroups(targetGroups.map(x =>
                              x.id === tg.id ? { ...x, name: e.target.value } : x
                            ))}
                          />
                        </div>
                        <div className="form-row">
                          <label className="form-label">Beschreibung</label>
                          <textarea
                            className="form-input"
                            value={tg.description || ''}
                            onChange={e => setTargetGroups(targetGroups.map(x =>
                              x.id === tg.id ? { ...x, description: e.target.value } : x
                            ))}
                            rows="3"
                          />
                        </div>
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                          <div className="form-row">
                            <label className="form-label">Min. Alter</label>
                            <input
                              type="number"
                              className="form-input"
                              value={tg.min_age || ''}
                              onChange={e => setTargetGroups(targetGroups.map(x =>
                                x.id === tg.id ? { ...x, min_age: e.target.value ? parseInt(e.target.value) : null } : x
                              ))}
                            />
                          </div>
                          <div className="form-row">
                            <label className="form-label">Max. Alter</label>
                            <input
                              type="number"
                              className="form-input"
                              value={tg.max_age || ''}
                              onChange={e => setTargetGroups(targetGroups.map(x =>
                                x.id === tg.id ? { ...x, max_age: e.target.value ? parseInt(e.target.value) : null } : x
                              ))}
                            />
                          </div>
                        </div>
                        <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
                          <button className="btn btn-primary" onClick={() => updateTargetGroup(tg.id, tg)}>Speichern</button>
                          <button className="btn" onClick={() => setEditingTG(null)}>Abbrechen</button>
                        </div>
                      </div>
                    ) : (
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div>
                          <h3 style={{ margin: 0 }}>{tg.name}</h3>
                          <p style={{ margin: '4px 0', color: 'var(--text2)', fontSize: '14px' }}>
                            {tg.focus_area_name} → {tg.training_style_name}
                            {(tg.min_age || tg.max_age) && (
                              <span style={{ marginLeft: '8px' }}>
                                ({tg.min_age || '∞'}-{tg.max_age || '∞'} Jahre)
                              </span>
                            )}
                          </p>
                          {tg.description && (
                            <p style={{ margin: '8px 0 0 0', fontSize: '14px' }}>{tg.description}</p>
                          )}
                        </div>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button className="btn" onClick={() => setEditingTG(tg.id)}>Bearbeiten</button>
                          <button className="btn" style={{ background: 'var(--danger)', color: 'white' }} onClick={() => deleteTargetGroup(tg.id)}>Löschen</button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Trainer Assignments */}
          {activeTab === 'trainer-assignments' && (
            <div>
              <div className="card" style={{ marginBottom: '24px' }}>
                <h3>Neue Zuordnung</h3>
                <div className="form-row">
                  <label className="form-label">Trainer</label>
                  <select
                    className="form-input"
                    value={newAssignment.profile_id}
                    onChange={e => setNewAssignment({ ...newAssignment, profile_id: parseInt(e.target.value) })}
                  >
                    <option value="">- Trainer auswählen -</option>
                    {profiles.filter(p => p.role === 'trainer' || p.role === 'admin').map(p => (
                      <option key={p.id} value={p.id}>{p.name} ({p.email})</option>
                    ))}
                  </select>
                </div>
                <div className="form-row">
                  <label className="form-label">Fokusbereich</label>
                  <select
                    className="form-input"
                    value={newAssignment.focus_area_id}
                    onChange={e => setNewAssignment({ ...newAssignment, focus_area_id: parseInt(e.target.value) })}
                  >
                    <option value="">- Fokusbereich auswählen -</option>
                    {focusAreas.map(fa => (
                      <option key={fa.id} value={fa.id}>{fa.icon} {fa.name}</option>
                    ))}
                  </select>
                </div>
                <button className="btn btn-primary" onClick={assignTrainer}>Zuordnen</button>
              </div>

              <div style={{ display: 'grid', gap: '16px' }}>
                {trainerAssignments.map(ta => (
                  <div key={ta.id} className="card">
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <div>
                        <h3 style={{ margin: 0 }}>{ta.trainer_name}</h3>
                        <p style={{ margin: '4px 0', color: 'var(--text2)', fontSize: '14px' }}>
                          {ta.focus_area_icon} {ta.focus_area_name}
                        </p>
                      </div>
                      <button className="btn" onClick={() => removeAssignment(ta.id)}>Entfernen</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </>
      )}
    </div>
  )
}