import { useEffect, useState } from 'react'
import './Profil.css'
import { useAuth } from '../context/AuthContext'
import { getProfilData, getActiveLearningPair, getLanguageOptions, langById } from '../api/directus'

const SKILLS = [
  { label: 'Vokabular', value: 0.78 },
  { label: 'Grammatik', value: 0.65 },
  { label: 'Sprechen',  value: 0.60 },
  { label: 'Hören',     value: 0.52 },
  { label: 'Lesen',     value: 0.62 },
]

/* ── Radar Chart ─────────────────────────────────────────────── */
function RadarChart({ skills, animate }) {
  const size = 220
  const cx = 110
  const cy = 105
  const r  = 70
  const n  = skills.length

  const angle = (i) => (Math.PI * 2 * i) / n - Math.PI / 2

  const point = (i, ratio) => ({
    x: cx + r * ratio * Math.cos(angle(i)),
    y: cy + r * ratio * Math.sin(angle(i)),
  })

  const gridPoly = (ratio) =>
    skills.map((_, i) => `${point(i, ratio).x},${point(i, ratio).y}`).join(' ')

  const dataPoly = skills
    .map((s, i) => `${point(i, animate ? s.value : 0).x},${point(i, animate ? s.value : 0).y}`)
    .join(' ')

  const labelAnchor = (i) => {
    const x = Math.cos(angle(i))
    if (x > 0.1)  return 'start'
    if (x < -0.1) return 'end'
    return 'middle'
  }

  const labelOffset = (i) => {
    const y = Math.sin(angle(i))
    return y > 0.1 ? 10 : y < -0.1 ? -4 : 4
  }

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} overflow="visible">
      {[1, 0.8, 0.6, 0.4].map((lvl, idx) => (
        <polygon key={lvl} points={gridPoly(lvl)}
          fill="none" stroke="#D4B896" strokeWidth={idx === 0 ? 1 : 0.7} />
      ))}
      {skills.map((_, i) => {
        const p = point(i, 1)
        return <line key={i} x1={cx} y1={cy} x2={p.x} y2={p.y}
          stroke="#D4B896" strokeWidth="0.7" />
      })}
      <polygon points={dataPoly}
        fill="#C4A882" fillOpacity="0.45"
        stroke="#7A5C3A" strokeWidth="1.5" strokeLinejoin="round"
        style={{ transition: animate ? 'all 0.7s ease-out' : 'none' }}
      />
      {skills.map((s, i) => {
        const p = point(i, animate ? s.value : 0)
        return <circle key={i} cx={p.x} cy={p.y} r="4" fill="#7A5C3A"
          style={{ transition: animate ? `all 0.7s ease-out ${i * 0.06}s` : 'none' }} />
      })}
      {skills.map((s, i) => {
        const p = point(i, 1.28)
        return (
          <text key={i}
            x={p.x} y={p.y + labelOffset(i)}
            textAnchor={labelAnchor(i)}
            dominantBaseline="middle"
            fontSize="11" fill="#4A3728" fontFamily="Nunito, sans-serif">
            {s.label}
          </text>
        )
      })}
    </svg>
  )
}

/* ── Main Component ──────────────────────────────────────────── */
export default function Profil() {
  const { user, token } = useAuth()
  const [radarReady, setRadarReady] = useState(false)
  const [profil, setProfil]         = useState(null)
  const [pair, setPair]             = useState(null)
  const [langs, setLangs]           = useState([])

  useEffect(() => {
    const t = setTimeout(() => setRadarReady(true), 120)
    return () => clearTimeout(t)
  }, [])

  useEffect(() => {
    async function load() {
      try {
        const [p, lp, langs] = await Promise.all([
          getProfilData(token),
          getActiveLearningPair(user.username, token),
          getLanguageOptions(),
        ])
        setProfil(p)
        setPair(lp)
        setLangs(langs)
      } catch {
        // Profildaten nicht ladbar – zeige Fallback
      }
    }
    load()
  }, [token, user.username])

  const displayName = profil?.username?.username_public || user?.username || '…'
  const initials    = displayName.slice(0, 2).toUpperCase()
  const points      = pair?.points ?? profil?.points_total ?? 0
  const level       = pair?.current_level ?? 1
  const xpMax       = level * 500
  const xpPct       = Math.min((points / xpMax) * 100, 100)
  const toLang      = pair ? langById(pair.language_to, langs) : null
  const langLabel   = toLang ? `${toLang.flag} ${toLang.label}` : 'Zielsprache'
  const streak      = profil?.streak_days ?? 0

  return (
    <div className="profil">
      {/* ── Header ── */}
      <div className="profil-header">
        <div className="avatar-wrap">
          <div className="avatar-ring">
            <div className="avatar-inner">
              <div className="avatar">{initials}</div>
            </div>
          </div>
          <span className="online-dot" />
          <div className="avatar-level-badge">
            <svg viewBox="0 0 48 54" width="28" height="32">
              <defs>
                <linearGradient id="hexGold2" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%"   stopColor="#C4A882" />
                  <stop offset="50%"  stopColor="#7A5C3A" />
                  <stop offset="100%" stopColor="#4A3728" />
                </linearGradient>
              </defs>
              <polygon points="24,2 46,14 46,40 24,52 2,40 2,14"
                fill="url(#hexGold2)" stroke="rgba(255,220,100,0.2)" strokeWidth="1" />
              <text x="24" y="30" textAnchor="middle" dominantBaseline="middle"
                fontSize="16" fontWeight="800" fill="#F5EFE6" fontFamily="inherit">
                {level}
              </text>
            </svg>
          </div>
        </div>

        <div className="profil-info">
          <h2 className="profil-name">{displayName}</h2>
          <p className="profil-handle">@{displayName.toLowerCase()}</p>
          {streak > 0 && (
            <p style={{ fontSize: '12px', color: '#C4853A', marginTop: '4px' }}>
              🔥 {streak} Tag{streak !== 1 ? 'e' : ''} Streak
            </p>
          )}
        </div>
      </div>

      {/* ── Progress Card ── */}
      <div className="progress-card">
        <p className="card-title">DEIN FORTSCHRITT</p>

        <div className="xp-row">
          <span className="lang-label">{langLabel}</span>
          <span className="xp-value">{points.toLocaleString('de')} / {xpMax.toLocaleString('de')} XP</span>
        </div>

        <div className="xp-bar">
          <div className="xp-fill" style={{ width: `${xpPct}%` }} />
        </div>

        <div className="level-row">
          <span className="level-pill">Level {level}</span>
          <span className="level-hint">{(xpMax - points).toLocaleString('de')} XP bis Level {level + 1}</span>
        </div>
      </div>

      {/* ── Skills Card ── */}
      <div className="skills-card">
        <p className="card-title">FÄHIGKEITEN</p>
        <div className="radar-wrap">
          <RadarChart skills={SKILLS} animate={radarReady} />
        </div>
      </div>
    </div>
  )
}
