import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import api from '../utils/api'
import { useAuth } from '../context/AuthContext'
import { useToast } from '../context/ToastContext'
import { getTenantClubDependencyKey } from '../utils/activeClub'
import { canDeleteLibraryContent, canEditLibraryContent } from '../utils/libraryContentPermissions'
import PlanTemplateStructurePreview from '../components/planning/PlanTemplateStructurePreview'

function visibilityLabel(v) {
  const x = String(v || 'club').toLowerCase()
  if (x === 'private') return 'Privat'
  if (x === 'official') return 'Offiziell'
  return 'Verein'
}

export default function TrainingPlanTemplatesListPage() {
  const { user } = useAuth()
  const toast = useToast()
  const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
  const [rows, setRows] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  const load = useCallback(async () => {
    setLoading(true)
    setError('')
    try {
      const list = await api.listTrainingPlanTemplates()
      setRows(Array.isArray(list) ? list : [])
    } catch (e) {
      setError(e.message || 'Laden fehlgeschlagen')
      setRows([])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    load()
  }, [load, tenantClubDepKey])

  async function handleDelete(tpl) {
    if (!tpl?.id) return
    const label = (tpl.name || '').trim() || `Vorlage #${tpl.id}`
    if (
      !window.confirm(
        `Trainingsvorlage „${label}“ wirklich löschen? Einheiten mit Verweis behalten ihren Ablauf; die Vorlage wird entkoppelt.`
      )
    ) {
      return
    }
    try {
      await api.deleteTrainingPlanTemplate(tpl.id)
      await load()
      toast.success('Vorlage gelöscht.')
    } catch (e) {
      toast.error(e.message || 'Löschen fehlgeschlagen')
    }
  }

  return (
    <>
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          gap: '1rem',
          marginBottom: '1.25rem',
        }}
      >
        <div>
          <h1 className="page-title" style={{ marginBottom: '0.35rem' }}>
            Trainingsvorlagen
          </h1>
          <p style={{ color: 'var(--text2)', fontSize: '0.95rem', maxWidth: '42rem', margin: 0, lineHeight: 1.5 }}>
            Mikrovorlagen für die <strong>Sektions-Gliederung</strong> einer Einheit (ohne Übungen), inklusive{' '}
            <strong>Split-Sessions</strong>. Neue Vorlagen legst du beim Bearbeiten einer Trainingseinheit über „Vorlage
            aus Aufbau speichern“ an; hier kannst du sie prüfen und anpassen.
          </p>
        </div>
      </div>

      {error ? <p style={{ color: 'var(--danger)', marginBottom: '1rem' }}>{error}</p> : null}

      {loading ? (
        <p style={{ color: 'var(--text2)' }}>Laden …</p>
      ) : rows.length === 0 ? (
        <div className="card" style={{ padding: '1.25rem' }}>
          <p style={{ margin: 0, color: 'var(--text2)', lineHeight: 1.5 }}>
            Noch keine Vorlagen gespeichert. Öffne unter <strong>Trainingsplanung</strong> eine Einheit, strukturiere
            die Abschnitte (auch parallele Gruppen) und nutze dort „Vorlage aus Aufbau speichern“.
          </p>
        </div>
      ) : (
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: '0.75rem' }}>
          {rows.map((t) => {
            const canEdit = user && canEditLibraryContent(user, t)
            const canDel = user && canDeleteLibraryContent(user, t)
            const desc = (t.description || '').trim()
            return (
              <li key={t.id} className="card" style={{ padding: '14px 16px' }}>
                <div
                  style={{
                    display: 'flex',
                    flexWrap: 'wrap',
                    alignItems: 'flex-start',
                    justifyContent: 'space-between',
                    gap: '12px',
                  }}
                >
                  <div style={{ minWidth: 0, flex: '1 1 240px' }}>
                    {canEdit ? (
                      <Link
                        to={`/planning/plan-templates/${t.id}`}
                        style={{
                          fontWeight: 700,
                          fontSize: '1rem',
                          color: 'var(--accent-dark)',
                          textDecoration: 'none',
                          wordBreak: 'break-word',
                        }}
                      >
                        {(t.name || '').trim() || `Vorlage #${t.id}`}
                      </Link>
                    ) : (
                      <strong style={{ color: 'var(--text1)', fontSize: '1rem', wordBreak: 'break-word' }}>
                        {(t.name || '').trim() || `Vorlage #${t.id}`}
                      </strong>
                    )}
                    <div style={{ fontSize: '0.85rem', color: 'var(--text2)', marginTop: '4px' }}>
                      {visibilityLabel(t.visibility)}
                      {typeof t.sections_count === 'number' ? ` · ${t.sections_count} Abschn.` : ''}
                      {t.updated_at ? (
                        <span style={{ color: 'var(--text3)' }}>
                          {' '}
                          · aktualisiert {String(t.updated_at).slice(0, 10)}
                        </span>
                      ) : null}
                    </div>
                    {desc ? (
                      <p
                        style={{
                          margin: '0.45rem 0 0',
                          fontSize: '0.88rem',
                          color: 'var(--text2)',
                          lineHeight: 1.45,
                          maxWidth: '42rem',
                        }}
                      >
                        {desc}
                      </p>
                    ) : null}
                    <PlanTemplateStructurePreview sections={t.sections} compact />
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', flexShrink: 0 }}>
                    {canEdit ? (
                      <Link
                        className="btn btn-secondary"
                        style={{ textDecoration: 'none' }}
                        to={`/planning/plan-templates/${t.id}`}
                      >
                        Bearbeiten
                      </Link>
                    ) : (
                      <span style={{ fontSize: '0.82rem', color: 'var(--text3)', alignSelf: 'center' }}>
                        nur Lesen
                      </span>
                    )}
                    {canDel ? (
                      <button
                        type="button"
                        className="btn btn-secondary"
                        style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
                        onClick={() => handleDelete(t)}
                      >
                        Löschen
                      </button>
                    ) : null}
                  </div>
                </div>
              </li>
            )
          })}
        </ul>
      )}

      <p style={{ marginTop: '1.25rem', fontSize: '0.82rem', color: 'var(--text3)', lineHeight: 1.45, maxWidth: '40rem' }}>
        Bearbeiten: eigene private Vorlagen, Vereinsinhalte für Trainer im Verein, offizielle nur als Plattform-Admin.
        Löschen nach Rolle: eigene private Vorlagen; Vereinsinhalte als Vereinsadmin; offizielle nur als Plattform-Admin.
      </p>
    </>
  )
}
