'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { Star, Flame, Lock, Award, Medal, Crown, Sparkles, ShoppingBag, Coins } from 'lucide-react';
import Mascot from '../Mascot';
import { bn } from '@/lib/bn';

const BADGES = [
  { threshold: 1, label: 'প্রথম স্টার', icon: Sparkles, color: 'text-sun-500 bg-sun-100' },
  { threshold: 5, label: 'তারকা শিক্ষার্থী', icon: Star, color: 'text-mango-600 bg-mango-100' },
  { threshold: 10, label: 'পদক জয়ী', icon: Medal, color: 'text-leaf-600 bg-leaf-100' },
  { threshold: 20, label: 'চ্যাম্পিয়ন', icon: Award, color: 'text-mango-600 bg-mango-100' },
  { threshold: 40, label: 'রাজা/রানি', icon: Crown, color: 'text-sun-600 bg-sun-100' },
];

export default function RewardsView({
  stars,
  coins = 0,
  streak,
  subjects,
}: {
  stars: number;
  coins?: number;
  streak: number;
  subjects: { name: string; stars: number; lessons: number }[];
}) {
  return (
    <main className="mx-auto max-w-3xl px-4 pt-6 sm:px-6">
      <div className="flex flex-col items-center text-center">
        <Mascot mood="happy" size={96} />
        <h1 className="mt-3 font-heading text-2xl font-extrabold text-ink">তোমার পুরস্কার</h1>
        <p className="text-sm text-ink-soft">যত শিখবে, তত বেশি স্টার জমবে ⭐</p>
      </div>

      <div className="mt-5 grid grid-cols-2 gap-3">
        <div className="rounded-3xl bg-sun-50 p-5 text-center">
          <Star className="mx-auto h-8 w-8 fill-sun-500 text-sun-500" />
          <p className="mt-2 font-heading text-3xl font-extrabold text-ink">{bn(stars)}</p>
          <p className="text-xs text-ink-soft">মোট স্টার</p>
        </div>
        <div className="rounded-3xl bg-mango-50 p-5 text-center">
          <Flame className="mx-auto h-8 w-8 fill-mango-500 text-mango-500" />
          <p className="mt-2 font-heading text-3xl font-extrabold text-ink">{bn(streak)}</p>
          <p className="text-xs text-ink-soft">দিনের স্ট্রিক</p>
        </div>
      </div>

      {/* store */}
      <Link
        href="/app/store"
        className="mt-3 flex items-center gap-3 rounded-3xl bg-gradient-to-br from-leaf-500 to-leaf-600 p-4 text-white shadow-pop transition active:scale-[0.99]"
      >
        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/20">
          <ShoppingBag className="h-6 w-6" />
        </div>
        <div className="flex-1 text-left">
          <p className="font-heading text-lg font-extrabold">তারার দোকান</p>
          <p className="text-xs text-leaf-50">কয়েন দিয়ে নতুন তারা কিনো</p>
        </div>
        <span className="flex items-center gap-1 rounded-full bg-white/20 px-3 py-1 text-sm font-bold">
          <Coins className="h-4 w-4" /> {bn(coins)}
        </span>
      </Link>

      <h2 className="mb-3 mt-7 font-heading text-lg font-bold text-ink">ব্যাজ কালেকশন</h2>
      <div className="grid grid-cols-3 gap-3 sm:grid-cols-5">
        {BADGES.map((b, i) => {
          const unlocked = stars >= b.threshold;
          const Icon = b.icon;
          return (
            <motion.div
              key={b.label}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: i * 0.05 }}
              className={`flex flex-col items-center gap-2 rounded-2xl p-3 text-center ${
                unlocked ? 'bg-white shadow-card' : 'bg-cream-100'
              }`}
            >
              <div
                className={`flex h-12 w-12 items-center justify-center rounded-2xl ${
                  unlocked ? b.color : 'bg-cream-200 text-ink-faint'
                }`}
              >
                {unlocked ? <Icon className="h-6 w-6" /> : <Lock className="h-5 w-5" />}
              </div>
              <p className={`text-[11px] font-semibold leading-tight ${unlocked ? 'text-ink' : 'text-ink-faint'}`}>
                {b.label}
              </p>
              {!unlocked && <p className="text-[10px] text-ink-faint">{bn(b.threshold)}⭐ লাগবে</p>}
            </motion.div>
          );
        })}
      </div>

      {subjects.length > 0 && (
        <>
          <h2 className="mb-3 mt-7 font-heading text-lg font-bold text-ink">বিষয়ভিত্তিক স্টার</h2>
          <div className="space-y-2">
            {subjects.map((s) => (
              <div
                key={s.name}
                className="flex items-center justify-between rounded-2xl bg-white px-4 py-3 shadow-card"
              >
                <span className="font-semibold text-ink">{s.name}</span>
                <span className="flex items-center gap-1 font-bold text-sun-600">
                  <Star className="h-4 w-4 fill-sun-500 text-sun-500" />
                  {bn(s.stars)}
                </span>
              </div>
            ))}
          </div>
        </>
      )}
    </main>
  );
}