// ─── صفحه نشان‌های فروشنده ───────────────────────────────────

const BADGE_DEFS = [
  { key: 'record_breaker',  title: 'رکوردشکن',        sub: 'بیشترین فروش فصل تاریخ شرکت',    icon: '🏆', color: '#F59E0B', bg: 'rgba(245,158,11,.12)' },
  { key: 'month_top',       title: 'نفر اول ماه',      sub: 'رتبه ۱ در حجم فروش ماه',         icon: '👑', color: '#EAB308', bg: 'rgba(234,179,8,.12)'  },
  { key: 'premium_sale',    title: 'فروش گران‌قیمت',   sub: 'بستن یک معامله پریمیوم',          icon: '💎', color: '#8B5CF6', bg: 'rgba(139,92,246,.12)' },
  { key: 'high_avg',        title: 'میانگین بالا',      sub: 'بالاترین ارزش میانگین فروش تیم', icon: '📈', color: '#10B981', bg: 'rgba(16,185,129,.12)' },
  { key: 'high_conv',       title: 'نرخ تبدیل بالا',   sub: '۴۰٪+ لیدها به فروش تبدیل شد',   icon: '🎯', color: '#3B82F6', bg: 'rgba(59,130,246,.12)' },
  { key: 'cheap_lead',      title: 'لید گران‌خرج',      sub: 'کمترین هزینه جذب لید در تیم',    icon: '🧲', color: '#06B6D4', bg: 'rgba(6,182,212,.12)'  },
  { key: 'target_bust',     title: 'رد کردن تارگت',    sub: '۱۲۰٪+ بالای هدف ماه',            icon: '🚀', color: '#F97316', bg: 'rgba(249,115,22,.12)' },
  { key: 'stable_3m',       title: 'ثبات ۳ ماهه',       sub: '۳ ماه پشت سر هم تارگت زده',     icon: '📅', color: '#6366F1', bg: 'rgba(99,102,241,.12)' },
  { key: 'puzzle_complete', title: 'کامل‌کننده پازل',  sub: 'همه ۸ نشان بالا کسب شده',        icon: '🧩', color: '#EC4899', bg: 'rgba(236,72,153,.12)' },
];

const SellerBadges = ({ seller }) => {
  const [badges, setBadges] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const token = localStorage.getItem(window.TOKEN_KEY);

  React.useEffect(() => {
    fetch('/api/seller/badges', {
      headers: { Authorization: 'Bearer ' + token }
    })
      .then(r => r.json())
      .then(d => {
        if (d.success) {
          const map = {};
          for (const b of d.data.badges) map[b.badge_key] = b.unlocked_at;
          setBadges(map);
        }
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  const unlockedCount = Object.keys(badges).length;
  const pct = Math.round(unlockedCount / BADGE_DEFS.length * 100);

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 300, color: 'rgba(255,255,255,.3)', fontFamily: 'Vazirmatn' }}>در حال بارگذاری…</div>
  );

  return (
    <div style={{ padding: 24, maxWidth: 800, margin: '0 auto' }}>

      {/* ── هدر ── */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontSize: 22 }}>🏅</span>
          <span style={{ fontSize: 18, fontWeight: 800, color: '#fff' }}>نشان‌های تو</span>
        </div>
        <div style={{
          padding: '5px 16px', borderRadius: 999, fontSize: 13, fontWeight: 700,
          background: unlockedCount > 0 ? 'rgba(34,197,94,.15)' : 'rgba(255,255,255,.06)',
          border: `1px solid ${unlockedCount > 0 ? 'rgba(34,197,94,.4)' : 'rgba(255,255,255,.1)'}`,
          color: unlockedCount > 0 ? '#22C55E' : 'rgba(255,255,255,.4)',
        }}>
          ⭐ {unlockedCount} از {BADGE_DEFS.length} باز شده
        </div>
      </div>

      {/* ── نوار پیشرفت ── */}
      <div style={{
        background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.07)',
        borderRadius: 14, padding: '14px 20px', marginBottom: 24,
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <span style={{ fontSize: 18 }}>🧩</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,.4)', marginBottom: 7 }}>
            پیشرفت پازل — {unlockedCount} از {BADGE_DEFS.length} نشان
          </div>
          <div style={{ height: 7, background: 'rgba(255,255,255,.08)', borderRadius: 99, overflow: 'hidden' }}>
            <div style={{
              height: '100%', borderRadius: 99,
              background: unlockedCount === BADGE_DEFS.length ? '#EC4899' : '#22C55E',
              width: pct + '%', transition: 'width .6s ease',
            }} />
          </div>
        </div>
        <div style={{ fontSize: 16, fontWeight: 800, color: '#fff', minWidth: 36, textAlign: 'center' }}>
          {pct}٪
        </div>
      </div>

      {/* ── گرید نشان‌ها ── */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {BADGE_DEFS.map(b => {
          const unlockedAt = badges[b.key];
          const unlocked = !!unlockedAt;
          const dateStr = unlockedAt
            ? new Date(unlockedAt).toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' })
            : null;

          return (
            <div key={b.key} style={{
              background: unlocked ? b.bg : 'rgba(255,255,255,.03)',
              border: `1.5px solid ${unlocked ? b.color + '44' : 'rgba(255,255,255,.07)'}`,
              borderRadius: 16, padding: '20px 14px 16px',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
              position: 'relative', opacity: unlocked ? 1 : 0.5,
              transition: 'all .2s',
            }}>
              {/* status */}
              <div style={{
                position: 'absolute', top: 10, right: 10,
                width: 20, height: 20, borderRadius: '50%',
                background: unlocked ? '#22C55E' : 'rgba(255,255,255,.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, color: unlocked ? '#fff' : 'rgba(255,255,255,.3)',
              }}>
                {unlocked ? '✓' : '🔒'}
              </div>

              {/* آیکون */}
              <div style={{
                width: 56, height: 56, borderRadius: '50%',
                background: unlocked ? b.color + '22' : 'rgba(255,255,255,.05)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 26, filter: unlocked ? 'none' : 'grayscale(1)',
              }}>
                {b.icon}
              </div>

              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: unlocked ? '#fff' : 'rgba(255,255,255,.35)', marginBottom: 4 }}>
                  {b.title}
                </div>
                <div style={{ fontSize: 11, color: unlocked ? 'rgba(255,255,255,.5)' : 'rgba(255,255,255,.2)', lineHeight: 1.6 }}>
                  {b.sub}
                </div>
              </div>

              {unlocked && (
                <div style={{
                  background: 'rgba(255,255,255,.06)', border: `1px solid ${b.color}33`,
                  borderRadius: 8, padding: '5px 10px',
                  fontSize: 11, color: b.color, fontWeight: 600,
                  display: 'flex', alignItems: 'center', gap: 5,
                }}>
                  🎁 جایزه در انتظار دریافت
                </div>
              )}

              {dateStr && (
                <div style={{ fontSize: 10, color: 'rgba(255,255,255,.25)' }}>{dateStr}</div>
              )}
            </div>
          );
        })}
      </div>

      {/* ── جایزه کامل ── */}
      {unlockedCount === BADGE_DEFS.length && (
        <div style={{
          marginTop: 24, borderRadius: 14, padding: '18px 24px', textAlign: 'center',
          background: 'rgba(236,72,153,.08)', border: '1px solid rgba(236,72,153,.25)',
        }}>
          <div style={{ fontSize: 28, marginBottom: 6 }}>🎉</div>
          <div style={{ fontSize: 15, fontWeight: 800, color: '#EC4899', marginBottom: 4 }}>پازل کامل شد!</div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,.4)' }}>واجد شرایط جایزه بزرگ سالانه هستی</div>
        </div>
      )}
    </div>
  );
};

window.SellerBadges = SellerBadges;