import { useState, useEffect, useRef, useCallback, startTransition } from 'react'
import { Upload, Pencil, Trash2, Check, X, CheckCircle } from 'lucide-react'
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts'
import { api } from '../utils/api'
import UsageBadge from '../components/UsageBadge'
import TrainingTypeSelect from '../components/TrainingTypeSelect'
import BulkCategorize from '../components/BulkCategorize'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
dayjs.locale('de')

/** Erfassungsseite /activity: erste Ladung + „Mehr laden“ (ohne Qualitätsfilter, siehe Backend). */
const ACTIVITY_LIST_PAGE_SIZE = 40

const ACTIVITY_TYPES = [
  'Traditionelles Krafttraining','Matrial Arts','Outdoor Spaziergang',
  'Innenräume Spaziergang','Laufen','Radfahren','Schwimmen',
  'Cardio Dance','Geist & Körper','Sonstiges'
]

/** Spalten, die mit ActivityEntry / UPDATE activity_log geschrieben werden dürfen (Übergang: Profilfelder → Kopfzeile). */
const ACTIVITY_LOG_PAYLOAD_KEYS = new Set([
  'date',
  'start_time',
  'end_time',
  'activity_type',
  'duration_min',
  'kcal_active',
  'kcal_resting',
  'hr_avg',
  'hr_max',
  'hr_min',
  'distance_km',
  'pace_min_per_km',
  'cadence',
  'avg_power',
  'elevation_gain',
  'temperature_celsius',
  'humidity_percent',
  'avg_hr_percent',
  'kcal_per_km',
  'rpe',
  'source',
  'notes',
  'training_type_id',
  'training_category',
  'training_subcategory',
])

function empty() {
  return {
    date: dayjs().format('YYYY-MM-DD'),
    activity_type: 'Traditionelles Krafttraining',
    duration_min: '', kcal_active: '',
    hr_avg: '', hr_max: '', rpe: '', notes: '',
    training_type_id: null,
    training_category: null,
    training_subcategory: null
  }
}

function buildMetricsPayload(schema, draft) {
  const out = []
  for (const s of schema) {
    const raw = draft[s.key]
    if (s.data_type === 'boolean') {
      if (raw === '' || raw === null || raw === undefined) {
        if (s.required) throw new Error(`Pflichtfeld: ${s.name_de}`)
        out.push({ parameter_key: s.key, value: null })
        continue
      }
      out.push({ parameter_key: s.key, value: !!raw })
      continue
    }
    if (raw === '' || raw === null || raw === undefined) {
      if (s.required) throw new Error(`Pflichtfeld: ${s.name_de}`)
      out.push({ parameter_key: s.key, value: null })
      continue
    }
    let v = raw
    if (s.data_type === 'integer') {
      v = parseInt(String(raw), 10)
      if (Number.isNaN(v)) throw new Error(`Ungültige Zahl: ${s.name_de}`)
    } else if (s.data_type === 'float') {
      v = parseFloat(String(raw))
      if (Number.isNaN(v)) throw new Error(`Ungültige Zahl: ${s.name_de}`)
    } else {
      v = String(raw)
    }
    out.push({ parameter_key: s.key, value: v })
  }
  return out
}

function SessionMetricsFields({ schema, values, setValues }) {
  if (!schema || schema.length === 0) return null
  const set = (k, v) => setValues((prev) => ({ ...prev, [k]: v }))
  return (
    <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Weitere Kennwerte (Profil)</div>
      {schema.map((s) => (
        <div key={s.key} className="form-row">
          <label className="form-label">
            {s.name_de}
            {s.required ? ' *' : ''}
            {s.unit ? ` (${s.unit})` : ''}
          </label>
          {s.data_type === 'boolean' ? (
            <input
              type="checkbox"
              style={{ width: 'auto', marginRight: 'auto' }}
              checked={!!values[s.key]}
              onChange={(e) => set(s.key, e.target.checked)}
            />
          ) : s.data_type === 'integer' || s.data_type === 'float' ? (
            <input
              type="number"
              className="form-input"
              step={s.data_type === 'integer' ? 1 : 'any'}
              value={values[s.key] ?? ''}
              onChange={(e) => set(s.key, e.target.value)}
            />
          ) : (
            <input
              type="text"
              className="form-input"
              value={values[s.key] ?? ''}
              onChange={(e) => set(s.key, e.target.value)}
            />
          )}
          <span className="form-unit" />
        </div>
      ))}
    </div>
  )
}

// ── Import Panel ──────────────────────────────────────────────────────────────
function ImportPanel({ onImported }) {
  const fileRef = useRef()
  const [status,   setStatus]   = useState(null)
  const [error,    setError]    = useState(null)
  const [dragging, setDragging] = useState(false)

  const runImport = async (file) => {
    setStatus('loading'); setError(null)
    try {
      const result = await api.importActivityCsv(file)
      setStatus(result); onImported()
    } catch(err) {
      setError('Import fehlgeschlagen: ' + err.message); setStatus(null)
    }
  }

  return (
    <div className="card section-gap">
      <div className="card-title">📥 Apple Health Import</div>
      <p style={{fontSize:13,color:'var(--text2)',marginBottom:10,lineHeight:1.6}}>
        <strong>Health Auto Export App</strong> → Workouts exportieren → CSV → hier hochladen.<br/>
        Nur die <em>Workouts-…csv</em> Datei wird benötigt (nicht die Detaildateien).
      </p>
      <input ref={fileRef} type="file" accept=".csv" style={{display:'none'}}
        onChange={e=>{ const f=e.target.files[0]; if(f) runImport(f); e.target.value='' }}/>
      <div
        onDragOver={e=>{e.preventDefault();setDragging(true)}}
        onDragLeave={()=>setDragging(false)}
        onDrop={e=>{e.preventDefault();setDragging(false);const f=e.dataTransfer.files[0];if(f)runImport(f)}}
        onClick={()=>fileRef.current.click()}
        style={{border:`2px dashed ${dragging?'var(--accent)':'var(--border2)'}`,borderRadius:10,
          padding:'20px 16px',textAlign:'center',background:dragging?'var(--accent-light)':'var(--surface2)',
          cursor:'pointer',transition:'all 0.15s'}}>
        <Upload size={24} style={{color:dragging?'var(--accent)':'var(--text3)',marginBottom:6}}/>
        <div style={{fontSize:13,color:dragging?'var(--accent-dark)':'var(--text2)'}}>
          {dragging?'Datei loslassen…':'CSV hierher ziehen oder tippen'}
        </div>
      </div>
      {status==='loading' && (
        <div style={{marginTop:8,display:'flex',gap:8,fontSize:13,color:'var(--text2)'}}>
          <div className="spinner" style={{width:14,height:14}}/> Importiere…
        </div>
      )}
      {error && <div style={{marginTop:8,padding:'8px 12px',background:'#FCEBEB',borderRadius:8,fontSize:13,color:'#D85A30'}}>{error}</div>}
      {status && status!=='loading' && (
        <div style={{marginTop:8,padding:'10px 12px',background:'var(--accent-light)',borderRadius:8,fontSize:13,color:'var(--accent-dark)'}}>
          <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:2}}>
            <CheckCircle size={14}/><strong>Import erfolgreich</strong>
          </div>
          <div>{status.inserted} Trainings importiert · {status.skipped} übersprungen</div>
        </div>
      )}
    </div>
  )
}

// ── Manual Entry ──────────────────────────────────────────────────────────────
function EntryForm({
  form,
  setForm,
  onSave,
  onCancel,
  saveLabel = 'Speichern',
  saving = false,
  error = null,
  usage = null,
  formExtras = null,
}) {
  const set = (k,v) => setForm(f=>({...f,[k]:v}))
  return (
    <div>
      <div className="form-row">
        <label className="form-label">Datum</label>
        <input type="date" className="form-input" style={{width:140}} value={form.date} onChange={e=>set('date',e.target.value)}/>
        <span className="form-unit"/>
      </div>
      <div style={{marginBottom:12}}>
        <TrainingTypeSelect
          value={form.training_type_id}
          onChange={(typeId, category, subcategory) => {
            setForm(f => ({
              ...f,
              training_type_id: typeId,
              training_category: category,
              training_subcategory: subcategory
            }))
          }}
          required={false}
        />
      </div>
      <div className="form-row">
        <label className="form-label">Dauer</label>
        <input type="number" className="form-input" min={1} max={600} step={1}
          placeholder="–" value={form.duration_min||''} onChange={e=>set('duration_min',e.target.value)}/>
        <span className="form-unit">Min</span>
      </div>
      <div className="form-row">
        <label className="form-label">Kcal (aktiv)</label>
        <input type="number" className="form-input" min={0} max={5000} step={1}
          placeholder="–" value={form.kcal_active||''} onChange={e=>set('kcal_active',e.target.value)}/>
        <span className="form-unit">kcal</span>
      </div>
      <div className="form-row">
        <label className="form-label">HF Ø</label>
        <input type="number" className="form-input" min={40} max={220} step={1}
          placeholder="–" value={form.hr_avg||''} onChange={e=>set('hr_avg',e.target.value)}/>
        <span className="form-unit">bpm</span>
      </div>
      <div className="form-row">
        <label className="form-label">HF Max</label>
        <input type="number" className="form-input" min={40} max={220} step={1}
          placeholder="–" value={form.hr_max||''} onChange={e=>set('hr_max',e.target.value)}/>
        <span className="form-unit">bpm</span>
      </div>
      <div className="form-row">
        <label className="form-label">Intensität</label>
        <input type="number" className="form-input" min={1} max={10} step={1}
          placeholder="1–10" value={form.rpe||''} onChange={e=>set('rpe',e.target.value)}/>
        <span className="form-unit">RPE</span>
      </div>
      <div className="form-row">
        <label className="form-label">Notiz</label>
        <input type="text" className="form-input" placeholder="optional"
          value={form.notes||''} onChange={e=>set('notes',e.target.value)}/>
        <span className="form-unit"/>
      </div>
      {formExtras}
      {error && (
        <div style={{padding:'10px',background:'var(--danger-bg)',border:'1px solid var(--danger)',borderRadius:8,fontSize:13,color:'var(--danger)',marginBottom:8}}>
          {error}
        </div>
      )}
      <div style={{display:'flex',gap:6,marginTop:8}}>
        <div
          title={usage && !usage.allowed ? `Limit erreicht (${usage.used}/${usage.limit}). Kontaktiere den Admin oder warte bis zum nächsten Reset.` : ''}
          style={{flex:1,display:'inline-block'}}
        >
          <button
            className="btn btn-primary"
            style={{width:'100%', cursor: (usage && !usage.allowed) ? 'not-allowed' : 'pointer'}}
            onClick={onSave}
            disabled={saving || (usage && !usage.allowed)}
          >
            {(usage && !usage.allowed) ? '🔒 Limit erreicht' : saveLabel}
          </button>
        </div>
        {onCancel && <button className="btn btn-secondary" style={{flex:1}} onClick={onCancel}><X size={13}/> Abbrechen</button>}
      </div>
    </div>
  )
}

// ── Main Page ─────────────────────────────────────────────────────────────────
export default function ActivityPage() {
  const [entries,  setEntries]  = useState([])
  const [stats,    setStats]    = useState(null)
  const [tab,      setTab]      = useState('list')
  const [form,     setForm]     = useState(empty())
  const [editing,  setEditing]  = useState(null)
  const [saving,   setSaving]   = useState(false)
  const [saved,    setSaved]    = useState(false)
  const [error,    setError]    = useState(null)
  const [activityUsage, setActivityUsage] = useState(null)  // Phase 4: Usage badge
  const [categories, setCategories] = useState({})  // v9d: Training categories
  const [sessionDetail, setSessionDetail] = useState(null)
  const [metricDraft, setMetricDraft] = useState({})
  const [sessionLoadError, setSessionLoadError] = useState(null)
  const [savingEdit, setSavingEdit] = useState(false)
  const [listHasMore, setListHasMore] = useState(false)
  const [listLoadingMore, setListLoadingMore] = useState(false)

  const loadFirstPage = useCallback(async () => {
    const n = ACTIVITY_LIST_PAGE_SIZE
    const [e, s] = await Promise.all([
      api.listActivity(n, undefined, { skipQualityFilter: true, offset: 0 }),
      api.activityStats({ skipQualityFilter: true }),
    ])
    setEntries(e)
    setStats(s)
    setListHasMore(e.length === n)
  }, [])

  const entriesRef = useRef(entries)
  useEffect(() => {
    entriesRef.current = entries
  }, [entries])

  const loadMore = async () => {
    if (listLoadingMore || !listHasMore) return
    setListLoadingMore(true)
    try {
      const n = ACTIVITY_LIST_PAGE_SIZE
      const offset = entriesRef.current.length
      const more = await api.listActivity(n, undefined, {
        skipQualityFilter: true,
        offset,
      })
      if (more.length === 0) {
        setListHasMore(false)
        return
      }
      const prev = entriesRef.current
      const seen = new Set(prev.map((r) => r.id))
      const add = more.filter((r) => r.id && !seen.has(r.id))
      if (add.length === 0) {
        setListHasMore(false)
        return
      }
      setEntries((p) => [...p, ...add])
      setListHasMore(more.length === n)
    } finally {
      setListLoadingMore(false)
    }
  }

  const load = loadFirstPage

  const loadUsage = () => {
    api.getFeatureUsage().then(features => {
      const activityFeature = features.find(f => f.feature_id === 'activity_entries')
      setActivityUsage(activityFeature)
    }).catch(err => console.error('Failed to load usage:', err))
  }

  useEffect(() => {
    void loadFirstPage()
    loadUsage()
    api.getTrainingCategories().then(setCategories).catch(err => console.error('Failed to load categories:', err))
  }, [loadFirstPage])

  useEffect(() => {
    if (!editing?.id) {
      setSessionDetail(null)
      setMetricDraft({})
      setSessionLoadError(null)
      return
    }
    let cancelled = false
    setSessionLoadError(null)
    ;(async () => {
      try {
        const d = await api.getActivitySession(editing.id)
        if (!cancelled) setSessionDetail(d)
      } catch (err) {
        if (!cancelled) {
          setSessionDetail(null)
          setSessionLoadError(err.message || 'Zusatzfelder konnten nicht geladen werden')
        }
      }
    })()
    return () => { cancelled = true }
  }, [editing?.id])

  useEffect(() => {
    if (!sessionDetail) {
      setMetricDraft({})
      return
    }
    const m = {}
    for (const row of sessionDetail.metrics || []) {
      m[row.key] = row.value
    }
    for (const s of sessionDetail.schema || []) {
      if (!(s.key in m)) {
        m[s.key] = s.data_type === 'boolean' ? false : ''
      }
    }
    setMetricDraft(m)
  }, [sessionDetail])

  const handleSave = async () => {
    setSaving(true)
    setError(null)
    try {
      const payload = {...form}
      if(payload.duration_min) payload.duration_min = parseFloat(payload.duration_min)
      if(payload.kcal_active)  payload.kcal_active  = parseFloat(payload.kcal_active)
      if(payload.hr_avg)       payload.hr_avg       = parseFloat(payload.hr_avg)
      if(payload.hr_max)       payload.hr_max       = parseFloat(payload.hr_max)
      if(payload.rpe)          payload.rpe          = parseInt(payload.rpe)
      payload.source = 'manual'
      await api.createActivity(payload)
      setSaved(true)
      await load()
      await loadUsage()  // Reload usage after save
      setTimeout(()=>{ setSaved(false); setForm(empty()) }, 1500)
    } catch (err) {
      console.error('Save failed:', err)
      setError(err.message || 'Fehler beim Speichern')
      setTimeout(()=>setError(null), 5000)
    } finally {
      setSaving(false)
    }
  }

  const handleUpdate = async () => {
    setSavingEdit(true)
    setError(null)
    try {
      const payload = { ...editing }
      delete payload.id
      for (const s of sessionDetail?.schema || []) {
        const col = s.source_field
        if (!col || !ACTIVITY_LOG_PAYLOAD_KEYS.has(col)) continue
        if (!(s.key in metricDraft)) continue
        const raw = metricDraft[s.key]
        if (raw === '' || raw === null || raw === undefined) {
          payload[col] = null
          continue
        }
        let v = raw
        if (s.data_type === 'integer') {
          v = parseInt(String(raw), 10)
          if (Number.isNaN(v)) continue
        } else if (s.data_type === 'float') {
          v = parseFloat(String(raw))
          if (Number.isNaN(v)) continue
        } else if (s.data_type === 'boolean') {
          v = !!raw
        } else {
          v = String(raw)
        }
        payload[col] = v
      }
      if (payload.duration_min !== '' && payload.duration_min != null) payload.duration_min = parseFloat(payload.duration_min)
      if (payload.kcal_active !== '' && payload.kcal_active != null) payload.kcal_active = parseFloat(payload.kcal_active)
      if (payload.hr_avg !== '' && payload.hr_avg != null) payload.hr_avg = parseFloat(payload.hr_avg)
      if (payload.hr_max !== '' && payload.hr_max != null) payload.hr_max = parseFloat(payload.hr_max)
      if (payload.rpe !== '' && payload.rpe != null) payload.rpe = parseInt(payload.rpe, 10)
      await api.updateActivity(editing.id, payload)
      if (sessionDetail?.schema?.length > 0) {
        const metrics = buildMetricsPayload(sessionDetail.schema, metricDraft)
        await api.putActivityMetrics(editing.id, { metrics })
      }
      setEditing(null)
      setSessionDetail(null)
      startTransition(() => {
        void load()
      })
    } catch (err) {
      setError(err.message || 'Speichern fehlgeschlagen')
      setTimeout(() => setError(null), 6000)
    } finally {
      setSavingEdit(false)
    }
  }

  const handleDelete = async (id) => {
    if(!confirm('Training löschen?')) return
    await api.deleteActivity(id); await load()
  }

  // Chart data: kcal per day (last 30 days)
  const chartData = (() => {
    const byDate = {}
    entries.forEach(e=>{
      byDate[e.date] = (byDate[e.date]||0) + (e.kcal_active||0)
    })
    return Object.entries(byDate).sort((a,b)=>a[0].localeCompare(b[0])).slice(-30).map(([date,kcal])=>({
      date: dayjs(date).format('DD.MM'), kcal: Math.round(kcal)
    }))
  })()

  const TYPE_COLORS = {
    'Traditionelles Krafttraining':'#1D9E75','Matrial Arts':'#D85A30',
    'Outdoor Spaziergang':'#378ADD','Innenräume Spaziergang':'#7F77DD',
    'Laufen':'#EF9F27','Radfahren':'#D4537E','Sonstiges':'#888780'
  }

  return (
    <div className="capture-page">
      <h1 className="page-title">Aktivität</h1>

      <div className="tabs" style={{overflowX:'auto',flexWrap:'nowrap'}}>
        <button className={'tab'+(tab==='list'?' active':'')} onClick={()=>setTab('list')}>Verlauf</button>
        <button className={'tab'+(tab==='add'?' active':'')} onClick={()=>setTab('add')}>+ Manuell</button>
        <button className={'tab'+(tab==='import'?' active':'')} onClick={()=>setTab('import')}>Import</button>
        <button className={'tab'+(tab==='categorize'?' active':'')} onClick={()=>setTab('categorize')}>Kategorisieren</button>
        <button className={'tab'+(tab==='stats'?' active':'')} onClick={()=>setTab('stats')}>Statistik</button>
      </div>

      {/* Übersicht */}
      {stats && (stats.total_in_profile > 0 || stats.count > 0) && (
        <div className="card section-gap">
          <div style={{ fontSize: 11, color: 'var(--text3)', marginBottom: 8, lineHeight: 1.45 }}>
            <strong>{stats.total_in_profile ?? '–'}</strong> Einträge im Profil (gleicher Filter wie diese Seite). Die Summen
            Kcal/Stunden beziehen sich auf die <strong>neuesten {stats.sample_size ?? stats.count}</strong> Einträge (max.
            30).
          </div>
          <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
            {[
              ['Neueste (max. 30)', stats.count, 'var(--text1)'],
              ['Kcal (darin)', Math.round(stats.total_kcal), '#EF9F27'],
              ['Stunden (darin)', Math.round(stats.total_min / 60 * 10) / 10, '#378ADD'],
            ].map(([l, v, c]) => (
              <div key={l} style={{flex:1,minWidth:80,background:'var(--surface2)',borderRadius:8,padding:'8px 10px',textAlign:'center'}}>
                <div style={{fontSize:18,fontWeight:700,color:c}}>{v}</div>
                <div style={{fontSize:10,color:'var(--text3)'}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab==='import' && <ImportPanel onImported={load}/>}

      {tab==='categorize' && (
        <div className="card section-gap">
          <div className="card-title">🏷️ Aktivitäten kategorisieren</div>
          <BulkCategorize onComplete={() => { load(); setTab('list'); }} />
        </div>
      )}

      {tab==='add' && (
        <div className="card section-gap">
          <div className="card-title badge-container-right">
            <span>Training eintragen</span>
            {activityUsage && <UsageBadge {...activityUsage} />}
          </div>
          <EntryForm form={form} setForm={setForm}
            onSave={handleSave} saveLabel={saved?'✓ Gespeichert!':'Speichern'}
            saving={saving} error={error} usage={activityUsage}/>
        </div>
      )}

      {tab==='stats' && stats && (
        <div>
          {chartData.length>=2 && (
            <div className="card section-gap">
              <div className="card-title">Aktive Kalorien pro Tag</div>
              <ResponsiveContainer width="100%" height={160}>
                <BarChart data={chartData} margin={{top:4,right:8,bottom:0,left:-20}}>
                  <CartesianGrid stroke="var(--border)" strokeDasharray="3 3"/>
                  <XAxis dataKey="date" tick={{fontSize:9,fill:'var(--text3)'}} tickLine={false}
                    interval={Math.max(0,Math.floor(chartData.length/6)-1)}/>
                  <YAxis tick={{fontSize:9,fill:'var(--text3)'}} tickLine={false}/>
                  <Tooltip contentStyle={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:8,fontSize:11}}
                    formatter={v=>[`${v} kcal`,'Aktiv']}/>
                  <Bar dataKey="kcal" fill="#EF9F27" radius={[3,3,0,0]}/>
                </BarChart>
              </ResponsiveContainer>
            </div>
          )}
          <div className="card section-gap">
            <div className="card-title">Nach Trainingsart</div>
            {Object.entries(stats.by_type).sort((a,b)=>b[1].kcal-a[1].kcal).map(([type,data])=>(
              <div key={type} style={{display:'flex',alignItems:'center',gap:10,padding:'6px 0',borderBottom:'1px solid var(--border)'}}>
                <div style={{width:10,height:10,borderRadius:2,background:TYPE_COLORS[type]||'#888',flexShrink:0}}/>
                <div style={{flex:1,fontSize:13}}>{type}</div>
                <div style={{fontSize:12,color:'var(--text3)'}}>{data.count}× · {Math.round(data.min)} Min · {Math.round(data.kcal)} kcal</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab==='list' && (
        <div>
          <p style={{ fontSize: 12, color: 'var(--text3)', margin: '0 0 12px', lineHeight: 1.5 }}>
            Hier sind <strong>alle</strong> Trainings sichtbar (Profil-Qualitätsfilter aus — auch ohne Bewertung oder bei
            abweichender Einordnung). Unter „Verlauf“ / Auswertung bleibt der Filter aktiv. Es werden jeweils bis zu{' '}
            {ACTIVITY_LIST_PAGE_SIZE} Einträge nachgeladen.
          </p>
          {entries.length===0 && (
            <div className="empty-state">
              <h3>Keine Trainings</h3>
              <p>Importiere deine Apple Health Daten oder trage manuell ein.</p>
            </div>
          )}
          {entries.map(e=>{
            const isEd = editing?.id===e.id
            const color = TYPE_COLORS[e.activity_type]||'#888'
            return (
              <div key={e.id} className="card" style={{marginBottom:8,borderLeft:`3px solid ${color}`}}>
                {isEd ? (
                  <EntryForm
                    form={editing}
                    setForm={setEditing}
                    onSave={handleUpdate}
                    onCancel={() => { setEditing(null); setSessionDetail(null); setSessionLoadError(null) }}
                    saveLabel="Speichern"
                    saving={savingEdit}
                    error={error}
                    formExtras={
                      <>
                        {sessionLoadError && (
                          <div style={{ fontSize: 12, color: 'var(--text3)', marginBottom: 8 }}>{sessionLoadError}</div>
                        )}
                        <SessionMetricsFields
                          schema={sessionDetail?.schema}
                          values={metricDraft}
                          setValues={setMetricDraft}
                        />
                      </>
                    }
                  />
                ) : (
                  <div>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
                      <div style={{flex:1}}>
                        <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:2}}>
                          {/* Evaluation Status Indicator */}
                          {e.quality_label ? (
                            <div
                              style={{
                                display:'inline-flex',
                                alignItems:'center',
                                justifyContent:'center',
                                width:18,
                                height:18,
                                borderRadius:9,
                                background: e.quality_label === 'excellent' || e.quality_label === 'good' ? '#1D9E75' :
                                           e.quality_label === 'acceptable' ? '#EF9F27' : '#D85A30',
                                color:'white',
                                fontSize:10,
                                fontWeight:700,
                                flexShrink:0
                              }}
                              title={`Evaluation: ${e.quality_label} (Score: ${e.overall_score || 'n/a'})`}
                            >
                              ✓
                            </div>
                          ) : e.training_type_id ? (
                            <div
                              style={{
                                display:'inline-flex',
                                alignItems:'center',
                                justifyContent:'center',
                                width:18,
                                height:18,
                                borderRadius:9,
                                background:'#EF9F27',
                                color:'white',
                                fontSize:10,
                                fontWeight:700,
                                flexShrink:0
                              }}
                              title="Trainingstyp zugeordnet, aber nicht evaluiert (kein Profil konfiguriert)"
                            >
                              ⚠
                            </div>
                          ) : (
                            <div
                              style={{
                                display:'inline-flex',
                                alignItems:'center',
                                justifyContent:'center',
                                width:18,
                                height:18,
                                borderRadius:9,
                                background:'#888780',
                                color:'white',
                                fontSize:10,
                                fontWeight:700,
                                flexShrink:0
                              }}
                              title="Kein Trainingstyp zugeordnet"
                            >
                              ✕
                            </div>
                          )}
                          <div style={{fontSize:14,fontWeight:600}}>{e.activity_type}</div>
                          {e.training_category && categories[e.training_category] && (
                            <div style={{
                              display:'inline-flex',
                              alignItems:'center',
                              gap:3,
                              padding:'2px 6px',
                              background:categories[e.training_category].color + '22',
                              border:`1px solid ${categories[e.training_category].color}`,
                              borderRadius:4,
                              fontSize:10,
                              fontWeight:600,
                              color:categories[e.training_category].color
                            }}>
                              <span>{categories[e.training_category].icon}</span>
                              <span>{categories[e.training_category].name_de}</span>
                            </div>
                          )}
                        </div>
                        <div style={{fontSize:11,color:'var(--text3)',marginBottom:4}}>
                          {dayjs(e.date).format('dd, DD. MMMM YYYY')}
                          {e.start_time && e.start_time.length>10 && ` · ${e.start_time.slice(11,16)}`}
                        </div>
                        <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
                          {e.duration_min && <span style={{fontSize:12,color:'var(--text2)'}}>⏱ {Math.round(e.duration_min)} Min</span>}
                          {e.kcal_active  && <span style={{fontSize:12,color:'#EF9F27'}}>🔥 {Math.round(e.kcal_active)} kcal</span>}
                          {e.hr_avg       && <span style={{fontSize:12,color:'var(--text2)'}}>❤️ Ø{Math.round(e.hr_avg)} bpm</span>}
                          {e.hr_max       && <span style={{fontSize:12,color:'var(--text2)'}}>↑{Math.round(e.hr_max)} bpm</span>}
                          {e.distance_km  && e.distance_km>0 && <span style={{fontSize:12,color:'var(--text2)'}}>📍 {Math.round(e.distance_km*10)/10} km</span>}
                          {e.rpe          && <span style={{fontSize:12,color:'var(--text2)'}}>RPE {e.rpe}/10</span>}
                          {e.source==='apple_health' && <span style={{fontSize:10,color:'var(--text3)'}}>Apple Health</span>}
                        </div>
                        {e.notes && <p style={{fontSize:12,color:'var(--text2)',fontStyle:'italic',marginTop:4}}>"{e.notes}"</p>}
                      </div>
                      <div style={{display:'flex',gap:6,marginLeft:8}}>
                        <button className="btn btn-secondary" style={{padding:'5px 8px'}} onClick={()=>setEditing({...e})}><Pencil size={13}/></button>
                        <button className="btn btn-danger" style={{padding:'5px 8px'}} onClick={()=>handleDelete(e.id)}><Trash2 size={13}/></button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )
          })}
          {listHasMore && (
            <div style={{ marginTop: 12, marginBottom: 8 }}>
              <button
                type="button"
                className="btn btn-secondary"
                style={{ width: '100%' }}
                disabled={listLoadingMore}
                onClick={() => void loadMore()}
              >
                {listLoadingMore ? 'Lade…' : 'Weitere Einträge laden'}
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  )
}