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

function unitWhenLabel(u) {
  const d = u.planned_date ? String(u.planned_date).slice(0, 10) : ''
  const t = u.planned_time_start ? String(u.planned_time_start).slice(0, 5) : ''
  const bits = [d, t].filter(Boolean)
  return bits.length ? bits.join(' · ') : 'Termin'
}

function Dashboard() {
  const [version, setVersion] = useState(null)
  const [profile, setProfile] = useState(null)
  const [loading, setLoading] = useState(true)
  const [trainingHome, setTrainingHome] = useState(null)
  const [trainingHomeErr, setTrainingHomeErr] = useState(null)
  const { user } = useAuth()

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

  useEffect(() => {
    if (!user?.id) {
      setTrainingHome(null)
      setTrainingHomeErr(null)
      return undefined
    }
    let cancelled = false
    ;(async () => {
      setTrainingHomeErr(null)
      try {
        const today = new Date().toISOString().slice(0, 10)
        const [upcomingRaw, recentRaw, plannedPool] = await Promise.all([
          api.listTrainingUnits({
            assigned_to_me: true,
            status: 'planned',
            start_date: today,
            sort: 'asc',
            limit: 8
          }),
          api.listTrainingUnits({
            assigned_to_me: true,
            status: 'completed',
            sort: 'desc',
            limit: 6
          }),
          api.listTrainingUnits({
            assigned_to_me: true,
            status: 'planned',
            start_date: today,
            sort: 'asc',
            limit: 40
          })
        ])
        const noteHits = (plannedPool || []).filter((u) => {
          const tn = (u.trainer_notes || '').trim()
          const n = (u.notes || '').trim()
          return Boolean(tn || n)
        }).slice(0, 5)
        if (!cancelled) {
          setTrainingHome({
            upcoming: Array.isArray(upcomingRaw) ? upcomingRaw : [],
            recent: Array.isArray(recentRaw) ? recentRaw : [],
            plannedWithNotes: noteHits
          })
        }
      } catch (e) {
        if (!cancelled) {
          console.error('Dashboard Trainingsübersicht:', e)
          setTrainingHomeErr(e.message || 'Konnte Trainingsdaten nicht laden')
          setTrainingHome(null)
        }
      }
    })()
    return () => {
      cancelled = true
    }
  }, [user?.id])

  const loadData = async () => {
    try {
      const [versionData, profileData] = await Promise.all([
        api.getVersion(),
        api.getCurrentProfile()
      ])
      setVersion(versionData)
      setProfile(profileData)
    } catch (err) {
      console.error('Failed to load data:', err)
    } finally {
      setLoading(false)
    }
  }

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

  return (
    <div className="app-page">
        <h1>Dashboard</h1>
        <p style={{ color: 'var(--text2)', marginTop: '0.5rem' }}>
          Willkommen, {user?.name || user?.email}!
        </p>
        {profile && <EmailVerificationBanner profile={profile} />}
        {/* Welcome Card */}
        <div className="card" style={{ marginTop: '1.5rem', marginBottom: '1.5rem' }}>
          <h2>Willkommen bei Shinkan Jinkendo</h2>
          <p style={{ color: 'var(--text2)' }}>
            Trainer- und Vereinsplattform für Kampfsport-Trainingsplanung
          </p>
        </div>

        {user?.id && (
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))',
              gap: '1rem',
              marginBottom: '1.5rem'
            }}
          >
            <div className="card">
              <h3 style={{ fontSize: '1.05rem', marginBottom: '0.65rem' }}>Deine nächsten Trainings</h3>
              {trainingHomeErr ? (
                <p style={{ color: 'var(--danger)', fontSize: '0.9rem' }}>{trainingHomeErr}</p>
              ) : trainingHome?.upcoming?.length ? (
                <ul style={{ margin: 0, paddingLeft: '1.15rem', color: 'var(--text2)', fontSize: '0.9rem', lineHeight: 1.55 }}>
                  {trainingHome.upcoming.map((u) => (
                    <li key={u.id} style={{ marginBottom: '0.35rem' }}>
                      <Link to={`/planning/run/${u.id}`} style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
                        {unitWhenLabel(u)}
                      </Link>
                      {u.group_name ? (
                        <span style={{ color: 'var(--text3)' }}>{` — ${u.group_name}`}</span>
                      ) : null}
                      {u.lead_trainer_name ? (
                        <span style={{ display: 'block', fontSize: '0.82rem', color: 'var(--text3)', marginTop: '2px' }}>
                          Leitung: {u.lead_trainer_name}
                        </span>
                      ) : null}
                    </li>
                  ))}
                </ul>
              ) : (
                <p style={{ color: 'var(--text2)', fontSize: '0.9rem', margin: 0 }}>
                  Keine anstehenden Termine mit dir als Leitung oder Co‑Trainer. Unter{' '}
                  <Link to="/planning" style={{ color: 'var(--accent-dark)' }}>
                    Trainingsplanung
                  </Link>{' '}
                  kannst du den Vereins‑ oder Gruppen‑Zeitraum einblenden.
                </p>
              )}
            </div>

            <div className="card">
              <h3 style={{ fontSize: '1.05rem', marginBottom: '0.65rem' }}>Vermerk / Hinweise (anstehend)</h3>
              {trainingHomeErr ? (
                <p style={{ color: 'var(--danger)', fontSize: '0.9rem' }}>{trainingHomeErr}</p>
              ) : trainingHome?.plannedWithNotes?.length ? (
                <ul style={{ margin: 0, paddingLeft: '1.15rem', color: 'var(--text2)', fontSize: '0.88rem', lineHeight: 1.5 }}>
                  {trainingHome.plannedWithNotes.map((u) => {
                    const snippet = (u.trainer_notes || u.notes || '').trim().slice(0, 120)
                    return (
                      <li key={`n-${u.id}`} style={{ marginBottom: '0.5rem' }}>
                        <Link to={`/planning/run/${u.id}`} style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
                          {unitWhenLabel(u)}
                        </Link>
                        {u.group_name ? <span style={{ color: 'var(--text3)' }}>{` · ${u.group_name}`}</span> : null}
                        <div style={{ color: 'var(--text2)', marginTop: '4px' }}>
                          {snippet}
                          {(u.trainer_notes || u.notes || '').trim().length > 120 ? '…' : ''}
                        </div>
                      </li>
                    )
                  })}
                </ul>
              ) : (
                <p style={{ color: 'var(--text2)', fontSize: '0.9rem', margin: 0 }}>
                  Keine Einträge mit Allgemein‑ oder Trainer‑Notizen in deinen nächsten geplanten Terminen.
                </p>
              )}
            </div>

            <div className="card">
              <h3 style={{ fontSize: '1.05rem', marginBottom: '0.65rem' }}>Rückschau (durchgeführt)</h3>
              {trainingHomeErr ? (
                <p style={{ color: 'var(--danger)', fontSize: '0.9rem' }}>{trainingHomeErr}</p>
              ) : trainingHome?.recent?.length ? (
                <ul style={{ margin: 0, paddingLeft: '1.15rem', color: 'var(--text2)', fontSize: '0.9rem', lineHeight: 1.55 }}>
                  {trainingHome.recent.map((u) => (
                    <li key={`r-${u.id}`} style={{ marginBottom: '0.35rem' }}>
                      <Link to={`/planning/run/${u.id}`} style={{ fontWeight: 600, color: 'var(--accent-dark)' }}>
                        {(u.actual_date || u.planned_date || '').toString().slice(0, 10) || 'Datum'}
                      </Link>
                      {u.group_name ? (
                        <span style={{ color: 'var(--text3)' }}>{` — ${u.group_name}`}</span>
                      ) : null}
                    </li>
                  ))}
                </ul>
              ) : (
                <p style={{ color: 'var(--text2)', fontSize: '0.9rem', margin: 0 }}>Noch keine abgeschlossenen Einheiten in der Kurzliste.</p>
              )}
            </div>
          </div>
        )}

        {/* Status Grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))',
          gap: '1rem',
          marginBottom: '1.5rem'
        }}>
          <div className="card">
            <h3>✅ Fertig</h3>
            <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
              <li>Backend-Basis</li>
              <li>Datenbank-Schema</li>
              <li>Auth-System</li>
              <li>Login & Registrierung</li>
            </ul>
          </div>

          <div className="card">
            <h3>🚧 In Arbeit</h3>
            <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
              <li>Übungsverwaltung</li>
              <li>Trainingsplanung</li>
              <li>Kataloge (Skills, Methods)</li>
            </ul>
          </div>

          <div className="card">
            <h3>📋 Geplant</h3>
            <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
              <li>MediaWiki-Import</li>
              <li>Trainingsprogramme</li>
              <li>Admin-Panel</li>
            </ul>
          </div>
        </div>

        {/* System Info */}
        {version && (
          <div className="card">
            <h3>System-Information</h3>
            <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr', gap: '0.5rem', marginTop: '1rem' }}>
              <strong>Version:</strong>
              <span>{version.app_version}</span>

              <strong>Build:</strong>
              <span>{version.build_date}</span>

              <strong>Umgebung:</strong>
              <span>{version.environment}</span>

              <strong>DB Schema:</strong>
              <span>{version.db_schema_version}</span>

              <strong>Dein Tier:</strong>
              <span style={{
                padding: '0.25rem 0.5rem',
                background: profile?.tier === 'premium' ? 'var(--accent)' : 'var(--surface2)',
                color: profile?.tier === 'premium' ? 'white' : 'var(--text1)',
                borderRadius: '4px',
                display: 'inline-block'
              }}>
                {profile?.tier || 'free'}
              </span>

              <strong>Rolle:</strong>
              <span>{profile?.role || 'user'}</span>
            </div>
          </div>
        )}
    </div>
  )
}

export default Dashboard