import { useEffect, useState } from 'react'
import { Navigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import api from '../utils/api'
import AdminPageNav from '../components/AdminPageNav'

const CLUB_ROLE_OPTIONS = [
  { code: 'club_admin', label: 'Vereinsadmin' },
  { code: 'trainer', label: 'Trainer' },
  { code: 'division_lead', label: 'Spartenleitung' },
  { code: 'content_editor', label: 'Inhalte bearbeiten' },
]

const TIER_OPTIONS = ['free', 'premium', 'pro', 'enterprise']

const ROLE_LABEL = {
  user: 'Nutzer',
  trainer: 'Trainer',
  admin: 'Portal-Admin',
  superadmin: 'Super-Admin',
}

function AdminUsersPage() {
  const { user } = useAuth()
  const isSuper = user?.role === 'superadmin'
  const isPlatformAdmin = user?.role === 'admin' || user?.role === 'superadmin'
  const portalRoleChoices = isSuper
    ? ['user', 'trainer', 'admin', 'superadmin']
    : ['user', 'trainer', 'admin']

  const [users, setUsers] = useState([])
  const [clubs, setClubs] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [portalDraft, setPortalDraft] = useState({})
  const [assignModal, setAssignModal] = useState(null)
  const [assignRoles, setAssignRoles] = useState(['trainer'])
  const [clubEditModal, setClubEditModal] = useState(null)

  const load = async () => {
    setError('')
    try {
      const [u, c] = await Promise.all([api.listAdminUsers(), api.listClubs()])
      setUsers(u)
      setClubs(c)
      const d = {}
      for (const row of u) {
        d[row.id] = {
          role: (row.role || 'user').toLowerCase(),
          tier: row.tier || 'free',
        }
      }
      setPortalDraft(d)
    } catch (e) {
      setError(e.message || String(e))
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (!isPlatformAdmin) return
    load()
  }, [isPlatformAdmin])

  if (!isPlatformAdmin) {
    return <Navigate to="/" replace />
  }

  const savePortal = async (profileId) => {
    const dr = portalDraft[profileId]
    if (!dr) return
    try {
      await api.updateProfile(profileId, { role: dr.role, tier: dr.tier })
      await load()
    } catch (e) {
      alert(e.message || String(e))
    }
  }

  const submitAssignClub = async () => {
    if (!assignModal) return
    const clubId = assignModal.clubId
    const profileId = assignModal.profileId
    if (!clubId || !assignRoles.length) {
      alert('Verein und mindestens eine Rolle wählen.')
      return
    }
    try {
      await api.addClubMember(clubId, { profile_id: profileId, roles: assignRoles })
      setAssignModal(null)
      setAssignRoles(['trainer'])
      await load()
    } catch (e) {
      alert(e.message || String(e))
    }
  }

  const saveClubMembership = async () => {
    if (!clubEditModal) return
    const { clubId, profileId, roles, status } = clubEditModal
    try {
      await api.updateClubMember(clubId, profileId, { roles, status })
      setClubEditModal(null)
      await load()
    } catch (e) {
      alert(e.message || String(e))
    }
  }

  const removeClubMembership = async () => {
    if (!clubEditModal) return
    if (!confirm('Mitgliedschaft in diesem Verein wirklich entfernen?')) return
    try {
      await api.removeClubMember(clubEditModal.clubId, clubEditModal.profileId)
      setClubEditModal(null)
      await load()
    } catch (e) {
      alert(e.message || String(e))
    }
  }

  return (
    <div className="app-page">
      <AdminPageNav />
      <h1 style={{ marginTop: 0 }}>Portal-Nutzer &amp; Vereine</h1>
      <p style={{ color: 'var(--text2)', maxWidth: '52rem', lineHeight: 1.55, marginBottom: '1.25rem' }}>
        Alle Konten mit Vereinszuordnungen. Hier kannst du die <strong>Portal-Rolle</strong> (Zugriff auf
        Admin-Funktionen) und das <strong>Tier</strong> setzen sowie Nutzer explizit einem Verein mit Rollen
        zuordnen.
      </p>

      {loading ? (
        <p style={{ color: 'var(--text2)' }}>Laden…</p>
      ) : error ? (
        <div className="card" style={{ borderColor: 'var(--danger)', color: 'var(--danger)' }}>
          {error}
        </div>
      ) : (
        <div style={{ display: 'grid', gap: '1rem' }}>
          {users.map((row) => {
            const tierValue = portalDraft[row.id]?.tier ?? row.tier ?? 'free'
            const tierChoices = [...TIER_OPTIONS]
            if (tierValue && !tierChoices.includes(tierValue)) tierChoices.unshift(tierValue)
            return (
            <div key={row.id} className="card">
              <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.75rem' }}>
                <div>
                  <strong style={{ fontSize: '1.05rem' }}>
                    {row.name || '—'} <span style={{ color: 'var(--text2)', fontWeight: 400 }}>#{row.id}</span>
                  </strong>
                  <div style={{ fontSize: '0.875rem', color: 'var(--text2)' }}>{row.email || '—'}</div>
                  <div style={{ fontSize: '0.78rem', color: 'var(--text3)', marginTop: '0.35rem' }}>
                    Verifiziert: {row.email_verified ? 'ja' : 'nein'}
                  </div>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'flex-end' }}>
                  <div>
                    <label className="form-label" style={{ fontSize: '0.75rem' }}>
                      Portal-Rolle
                    </label>
                    <select
                      className="form-input"
                      style={{ minWidth: '140px' }}
                      value={(portalDraft[row.id]?.role || row.role || 'user').toLowerCase()}
                      onChange={(e) =>
                        setPortalDraft((prev) => ({
                          ...prev,
                          [row.id]: { ...prev[row.id], role: e.target.value, tier: prev[row.id]?.tier ?? row.tier },
                        }))
                      }
                    >
                      {portalRoleChoices.map((r) => (
                        <option key={r} value={r}>
                          {ROLE_LABEL[r] || r}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="form-label" style={{ fontSize: '0.75rem' }}>
                      Tier
                    </label>
                    <select
                      className="form-input"
                      style={{ minWidth: '120px' }}
                      value={tierValue}
                      onChange={(e) =>
                        setPortalDraft((prev) => ({
                          ...prev,
                          [row.id]: {
                            ...prev[row.id],
                            tier: e.target.value,
                            role: prev[row.id]?.role ?? row.role,
                          },
                        }))
                      }
                    >
                      {tierChoices.map((t) => (
                        <option key={t} value={t}>
                          {t}
                        </option>
                      ))}
                    </select>
                  </div>
                  <button type="button" className="btn btn-secondary" onClick={() => savePortal(row.id)}>
                    Portal speichern
                  </button>
                  <button
                    type="button"
                    className="btn btn-primary"
                    disabled={!clubs.length}
                    title={!clubs.length ? 'Zuerst einen Verein anlegen' : undefined}
                    onClick={() => {
                      if (!clubs.length) return
                      setAssignRoles(['trainer'])
                      setAssignModal({
                        profileId: row.id,
                        profileLabel: row.name || row.email || `#${row.id}`,
                        clubId: clubs[0]?.id ?? '',
                      })
                    }}
                  >
                    Verein zuweisen
                  </button>
                </div>
              </div>

              <div style={{ marginTop: '1rem', paddingTop: '0.75rem', borderTop: '1px solid var(--border)' }}>
                <strong style={{ fontSize: '0.85rem' }}>Vereinsmitgliedschaften</strong>
                {!row.clubs?.length ? (
                  <p style={{ color: 'var(--text2)', fontSize: '0.875rem', margin: '0.35rem 0 0' }}>
                    Keine Zuordnung.
                  </p>
                ) : (
                  <ul style={{ margin: '0.5rem 0 0', paddingLeft: '1.2rem', fontSize: '0.9rem' }}>
                    {row.clubs.map((c) => (
                      <li key={c.id} style={{ marginBottom: '0.35rem' }}>
                        <strong>{c.name}</strong>
                        {c.abbreviation ? ` (${c.abbreviation})` : ''} —{' '}
                        {(c.roles || []).join(', ') || '—'}
                        {c.membership_status === 'inactive' ? (
                          <span style={{ color: 'var(--text3)', fontSize: '0.8rem' }}> (inaktiv)</span>
                        ) : null}{' '}
                        <button
                          type="button"
                          style={{
                            marginLeft: '0.35rem',
                            fontSize: '0.75rem',
                            padding: '0.12rem 0.45rem',
                            borderRadius: '6px',
                            border: '1px solid var(--border)',
                            background: 'var(--surface2)',
                            cursor: 'pointer',
                          }}
                          onClick={() =>
                            setClubEditModal({
                              clubId: c.id,
                              clubName: c.name,
                              profileId: row.id,
                              profileLabel: row.name || row.email,
                              roles: [...(c.roles || [])],
                              status: (c.membership_status || 'active').toLowerCase(),
                            })
                          }
                        >
                          bearbeiten
                        </button>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
            )
          })}
        </div>
      )}

      {assignModal && (
        <div
          style={{
            position: 'fixed',
            inset: 0,
            background: 'rgba(0,0,0,0.5)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 1200,
            padding: '1rem',
          }}
        >
          <div
            style={{
              background: 'var(--surface)',
              borderRadius: '12px',
              padding: '1.5rem',
              maxWidth: '440px',
              width: '100%',
            }}
          >
            <h2 style={{ marginTop: 0 }}>Verein zuweisen</h2>
            <p style={{ color: 'var(--text2)', fontSize: '0.9rem' }}>{assignModal.profileLabel}</p>
            <div className="form-row">
              <label className="form-label">Verein</label>
              <select
                className="form-input"
                value={assignModal.clubId === '' ? '' : String(assignModal.clubId)}
                onChange={(e) =>
                  setAssignModal((prev) =>
                    prev ? { ...prev, clubId: e.target.value ? parseInt(e.target.value, 10) : '' } : prev
                  )
                }
              >
                {clubs.map((c) => (
                  <option key={c.id} value={String(c.id)}>
                    {c.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="form-row">
              <span className="form-label">Rollen im Verein</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
                {CLUB_ROLE_OPTIONS.map((opt) => (
                  <label key={opt.code} style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
                    <input
                      type="checkbox"
                      checked={assignRoles.includes(opt.code)}
                      onChange={() => {
                        setAssignRoles((prev) => {
                          const s = new Set(prev)
                          if (s.has(opt.code)) s.delete(opt.code)
                          else s.add(opt.code)
                          const out = Array.from(s)
                          return out.length ? out : ['trainer']
                        })
                      }}
                    />
                    {opt.label}
                  </label>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
              <button type="button" className="btn btn-primary" style={{ flex: 1 }} onClick={submitAssignClub}>
                Zuweisen
              </button>
              <button
                type="button"
                className="btn btn-secondary"
                onClick={() => setAssignModal(null)}
              >
                Abbrechen
              </button>
            </div>
          </div>
        </div>
      )}

      {clubEditModal && (
        <div
          style={{
            position: 'fixed',
            inset: 0,
            background: 'rgba(0,0,0,0.5)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 1200,
            padding: '1rem',
          }}
        >
          <div
            style={{
              background: 'var(--surface)',
              borderRadius: '12px',
              padding: '1.5rem',
              maxWidth: '440px',
              width: '100%',
            }}
          >
            <h2 style={{ marginTop: 0 }}>Vereinsmitgliedschaft</h2>
            <p style={{ color: 'var(--text2)', fontSize: '0.9rem' }}>
              {clubEditModal.profileLabel} → {clubEditModal.clubName}
            </p>
            <div className="form-row">
              <label className="form-label">Status</label>
              <select
                className="form-input"
                value={clubEditModal.status}
                onChange={(e) =>
                  setClubEditModal((prev) => (prev ? { ...prev, status: e.target.value } : prev))
                }
              >
                <option value="active">aktiv</option>
                <option value="inactive">inaktiv</option>
              </select>
            </div>
            <div className="form-row">
              <span className="form-label">Rollen</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
                {CLUB_ROLE_OPTIONS.map((opt) => (
                  <label key={opt.code} style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
                    <input
                      type="checkbox"
                      checked={clubEditModal.roles.includes(opt.code)}
                      onChange={() => {
                        setClubEditModal((prev) => {
                          if (!prev) return prev
                          const s = new Set(prev.roles)
                          if (s.has(opt.code)) s.delete(opt.code)
                          else s.add(opt.code)
                          let roles = Array.from(s)
                          if (!roles.length) roles = ['trainer']
                          return { ...prev, roles }
                        })
                      }}
                    />
                    {opt.label}
                  </label>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginTop: '1rem' }}>
              <button type="button" className="btn btn-primary" onClick={saveClubMembership}>
                Speichern
              </button>
              <button
                type="button"
                className="btn"
                style={{ background: 'var(--danger)', color: '#fff', border: 'none' }}
                onClick={removeClubMembership}
              >
                Aus Verein entfernen
              </button>
              <button type="button" className="btn btn-secondary" onClick={() => setClubEditModal(null)}>
                Schließen
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default AdminUsersPage