/* global React, Icon, Pill, fmt,
   TASKS, TEAM,
   BlockCard, Punch, BigStat */
const { useState: useStateG, useMemo: useMemoG } = React;

/* ============================================================
   GAMIFICATION · streaks, badges, achievements
   ============================================================ */

// BEZA:ACHIEVEMENTS
const ACHIEVEMENTS = [
  // Velocidade
  { id: 'a1', icon: '⚡',  label: 'Bate-pronto',          desc: 'Aprovação aceita no mesmo dia',           tier: 'bronze', points: 10 },
  { id: 'a2', icon: '🔥', label: 'Sequência de 7',        desc: '7 dias sem atraso',                       tier: 'silver', points: 50 },
  { id: 'a3', icon: '🚀', label: 'Maratona',              desc: '30 dias sem atraso',                      tier: 'gold',   points: 200 },
  // Qualidade
  { id: 'a4', icon: '✨', label: 'Primeira aprovação',    desc: 'Cliente aprovou sem pedir alteração',     tier: 'bronze', points: 15 },
  { id: 'a5', icon: '🎯', label: 'Hat-trick',             desc: '3 peças aprovadas em sequência',          tier: 'silver', points: 40 },
  { id: 'a6', icon: '💎', label: 'Viral',                 desc: 'Peça passou de 100k de alcance',          tier: 'gold',   points: 150 },
  // Cooperação
  { id: 'a7', icon: '🤝', label: 'Reforço',               desc: 'Ajudou colega com tarefa fora do escopo', tier: 'bronze', points: 12 },
  { id: 'a8', icon: '🧠', label: 'Inteligência coletiva', desc: 'Insight virou padrão da agência',         tier: 'silver', points: 60 },
  // Crescimento
  { id: 'a9', icon: '🌱', label: 'Onboarding completo',   desc: 'Primeiro mês inteiro entregue',           tier: 'bronze', points: 20 },
  { id: 'a10',icon: '⭐', label: 'Cliente premium',       desc: 'Upgrade de plano graças a você',          tier: 'gold',   points: 250 },
];

const TIER_META = {
  bronze: { label: 'Bronze', color: '#A0794F', bg: 'rgba(160,121,79,0.10)' },
  silver: { label: 'Prata',  color: '#A8A6BE', bg: 'rgba(168,166,190,0.12)' },
  gold:   { label: 'Ouro',   color: '#F3AE4D', bg: 'rgba(243,174,77,0.10)' },
};

const LEVEL_THRESHOLDS = [
  { level: 1, name: 'Iniciante',     min: 0 },
  { level: 2, name: 'Operacional',   min: 100 },
  { level: 3, name: 'Construtor',    min: 300 },
  { level: 4, name: 'Estrategista',  min: 700 },
  { level: 5, name: 'Mentor',        min: 1500 },
  { level: 6, name: 'Lenda Beza',    min: 3000 },
];

function getLevel(points) {
  let current = LEVEL_THRESHOLDS[0];
  let next = LEVEL_THRESHOLDS[1];
  for (let i = 0; i < LEVEL_THRESHOLDS.length; i++) {
    if (points >= LEVEL_THRESHOLDS[i].min) {
      current = LEVEL_THRESHOLDS[i];
      next = LEVEL_THRESHOLDS[i + 1] || null;
    }
  }
  const progress = next ? ((points - current.min) / (next.min - current.min)) * 100 : 100;
  return { current, next, progress };
}

// Mock data por membro do time (depois vem da API)
const MEMBER_STATS = {
  grazi: {
    points: 480, streak: 12, weekStreak: 4,
    achievements: ['a1', 'a2', 'a4', 'a5', 'a7', 'a9'],
    monthDelivered: 18, monthOnTime: 17, monthApproved: 16,
    rank: 1,
  },
  reinaldy: {
    points: 380, streak: 8, weekStreak: 3,
    achievements: ['a2', 'a4', 'a5', 'a7', 'a9'],
    monthDelivered: 22, monthOnTime: 19, monthApproved: 18,
    rank: 2,
  },
  lucas: {
    points: 720, streak: 18, weekStreak: 6,
    achievements: ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a8', 'a9'],
    monthDelivered: 14, monthOnTime: 14, monthApproved: 13,
    rank: 1,
  },
};

/* ============================================================
   ACHIEVEMENTS WIDGET · pra colocar na Morning ou na Pauta
   ============================================================ */
function AchievementsCard({ viewerId, compact = false }) {
  const stats = MEMBER_STATS[viewerId];
  if (!stats) return null;

  const { current, next, progress } = getLevel(stats.points);
  const achievementsEarned = ACHIEVEMENTS.filter(a => stats.achievements.includes(a.id));
  const pointsToNext = next ? next.min - stats.points : 0;

  if (compact) {
    return (
      <div style={{
        padding: 14,
        background: 'linear-gradient(135deg, rgba(154,155,229,0.10), rgba(154,155,229,0.02))',
        border: '1px solid rgba(154,155,229,0.30)',
        borderRadius: 'var(--r-card)',
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          background: 'linear-gradient(135deg, var(--accent), var(--beza-deep))',
          color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 20, fontWeight: 600,
          boxShadow: '0 4px 12px rgba(154,155,229,0.30)',
        }}>{current.level}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)' }}>{current.name}</div>
          <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2 }}>
            {stats.points} pts · 🔥 {stats.streak} dias
          </div>
          {next && (
            <div style={{ marginTop: 6, height: 4, background: 'var(--surface-soft)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: progress + '%', background: 'var(--accent)' }} />
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <BlockCard kicker={`✨ jogo da agência · ${stats.streak === 0 ? 'comece um streak' : `streak de ${stats.streak} dias`}`} title="**Suas conquistas**">
      {/* Level + progress */}
      <div style={{
        padding: 'var(--space-5)',
        background: 'linear-gradient(135deg, var(--beza-deep), var(--beza-purple))',
        borderRadius: 'var(--r-card)',
        color: '#fff',
        position: 'relative', overflow: 'hidden',
        marginBottom: 18,
      }}>
        <div aria-hidden="true" style={{
          position: 'absolute', top: '-40%', right: '-10%',
          width: 300, height: 300, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,255,255,0.20), transparent 60%)',
          filter: 'blur(40px)', pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24, alignItems: 'center' }}>
          <div style={{
            width: 80, height: 80, borderRadius: '50%',
            background: 'rgba(255,255,255,0.20)',
            border: '2px solid rgba(255,255,255,0.40)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            color: '#fff',
          }}>
            <span style={{ fontSize: 11, opacity: 0.85, letterSpacing: '0.08em' }}>NÍVEL</span>
            <span className="num" style={{ fontSize: 32, fontWeight: 600, lineHeight: 1 }}>{current.level}</span>
          </div>
          <div>
            <div style={{ fontSize: 11, opacity: 0.85, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>{current.name}</div>
            <div style={{ fontSize: 28, fontWeight: 500, marginBottom: 8 }}>
              <span className="num">{stats.points}</span>
              <span style={{ fontSize: 14, opacity: 0.7, marginLeft: 6 }}>pontos</span>
            </div>
            {next ? (
              <>
                <div style={{ height: 8, background: 'rgba(255,255,255,0.20)', borderRadius: 999, overflow: 'hidden', marginBottom: 6 }}>
                  <div style={{ height: '100%', width: progress + '%', background: '#fff', borderRadius: 999, transition: 'width var(--t-slow)' }} />
                </div>
                <div style={{ fontSize: 12, opacity: 0.85 }}>
                  faltam <strong>{pointsToNext} pts</strong> para <strong>{next.name}</strong>
                </div>
              </>
            ) : (
              <div style={{ fontSize: 13, fontWeight: 500 }}>⭐ Nível máximo atingido · Lenda Beza</div>
            )}
          </div>
        </div>
      </div>

      {/* Stats da semana */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 10, marginBottom: 18 }}>
        <Stat label="🔥 Streak"  value={stats.streak + 'd'}  sub={stats.weekStreak + ' semanas seguidas'} />
        <Stat label="Entregas mês"  value={stats.monthDelivered} accent />
        <Stat label="No prazo"      value={stats.monthOnTime + '/' + stats.monthDelivered} />
        <Stat label="Aprovadas"     value={Math.round((stats.monthApproved / stats.monthDelivered) * 100) + '%'} />
      </div>

      {/* Conquistas */}
      <div className="t-overline" style={{ color: 'var(--accent)', marginBottom: 12 }}>
        conquistas · {achievementsEarned.length} de {ACHIEVEMENTS.length}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 8 }}>
        {ACHIEVEMENTS.map(a => {
          const earned = stats.achievements.includes(a.id);
          const tier = TIER_META[a.tier];
          return (
            <div key={a.id} title={a.desc} style={{
              padding: 12,
              background: earned ? tier.bg : 'var(--surface-soft)',
              border: '1px solid',
              borderColor: earned ? tier.color + '40' : 'var(--border)',
              borderRadius: 'var(--r-card)',
              opacity: earned ? 1 : 0.45,
              filter: earned ? 'none' : 'grayscale(0.7)',
              textAlign: 'center',
            }}>
              <div style={{ fontSize: 28, marginBottom: 4 }}>{a.icon}</div>
              <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text)' }}>{a.label}</div>
              <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 4 }}>
                {earned ? (
                  <span style={{ color: tier.color, fontWeight: 500 }}>+{a.points} pts</span>
                ) : (
                  <span>bloqueado</span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </BlockCard>
  );
}

function Stat({ label, value, sub, accent }) {
  return (
    <div style={{
      padding: 12,
      background: 'var(--surface-soft)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--r-btn)',
    }}>
      <div style={{ fontSize: 10, color: 'var(--text-faint)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
      <div className="num" style={{ fontSize: 20, fontWeight: 500, color: accent ? 'var(--accent)' : 'var(--text)', lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

/* ============================================================
   LEADERBOARD · ranking do time
   ============================================================ */
function TeamLeaderboard() {
  const ranking = useMemoG(() => {
    return Object.entries(MEMBER_STATS).map(([id, s]) => {
      const member = (window.TEAM || []).find(t => t.id === id) || { name: id, color: '#9A9BE5', avatar: id[0].toUpperCase() };
      return { ...s, ...member, id };
    }).sort((a, b) => b.points - a.points);
  }, []);

  return (
    <BlockCard kicker="🏆 ranking · este mês" title="**Liderança** do time">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {ranking.map((m, idx) => {
          const { current } = getLevel(m.points);
          const medal = idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : `${idx + 1}.`;
          return (
            <div key={m.id} style={{
              padding: 'var(--space-3) var(--space-4)',
              background: idx === 0 ? 'linear-gradient(135deg, rgba(243,174,77,0.10), rgba(243,174,77,0.02))' : 'var(--surface)',
              border: '1px solid',
              borderColor: idx === 0 ? 'rgba(243,174,77,0.30)' : 'var(--border)',
              borderRadius: 'var(--r-card)',
              display: 'grid', gridTemplateColumns: '32px 44px 1fr auto auto', gap: 14, alignItems: 'center',
            }}>
              <span style={{ fontSize: idx < 3 ? 20 : 13, color: 'var(--text-faint)', textAlign: 'center', fontWeight: 500 }}>
                {medal}
              </span>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: m.color, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 500, fontSize: 14,
              }}>{m.avatar}</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>{m.name}</div>
                <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{current.name} · 🔥 {m.streak}d</div>
              </div>
              <div className="num" style={{ fontSize: 18, fontWeight: 500, color: 'var(--accent)' }}>
                {m.points}<span style={{ fontSize: 11, color: 'var(--text-faint)', fontWeight: 400 }}> pts</span>
              </div>
              <div style={{ display: 'flex', gap: 3 }}>
                {m.achievements.slice(0, 4).map(aid => {
                  const a = ACHIEVEMENTS.find(x => x.id === aid);
                  return <span key={aid} title={a?.label} style={{ fontSize: 16 }}>{a?.icon}</span>;
                })}
                {m.achievements.length > 4 && (
                  <span style={{ fontSize: 11, color: 'var(--text-faint)', alignSelf: 'center' }}>+{m.achievements.length - 4}</span>
                )}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{
        marginTop: 14, padding: '10px 14px',
        background: 'var(--surface-soft)', border: '1px dashed var(--border-strong)',
        borderRadius: 'var(--r-btn)',
        fontSize: 11, color: 'var(--text-faint)', lineHeight: 1.5,
      }}>
        🎯 Pontos resetam mês a mês · streaks acumulam · níveis são pra sempre.
      </div>
    </BlockCard>
  );
}

Object.assign(window, {
  ACHIEVEMENTS, MEMBER_STATS, TIER_META, LEVEL_THRESHOLDS,
  getLevel, AchievementsCard, TeamLeaderboard,
});