'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useProgress } from '@/hooks/useProgress';
import { wordList, countriesWordList, everydayCategories, countriesCategories } from '@/data/words';

type View = 'everyday' | 'countries';

const badges = [
  { emoji: '⭐', name: 'First Star',   check: (s: number, _m: number) => s >= 1 },
  { emoji: '🌟', name: '10 Stars',     check: (s: number, _m: number) => s >= 10 },
  { emoji: '💫', name: '25 Stars',     check: (s: number, _m: number) => s >= 25 },
  { emoji: '🔥', name: '50 Stars',     check: (s: number, _m: number) => s >= 50 },
  { emoji: '🏅', name: 'First Master', check: (_s: number, m: number) => m >= 1 },
  { emoji: '🥈', name: '5 Mastered',   check: (_s: number, m: number) => m >= 5 },
  { emoji: '🥇', name: '15 Mastered',  check: (_s: number, m: number) => m >= 15 },
  { emoji: '🏆', name: 'Word Master',  check: (_s: number, m: number) => m >= 30 },
];

export default function ProgressPage() {
  const { progress, resetProgress, loaded } = useProgress();
  const [view, setView]           = useState<View>('everyday');
  const [confirming, setConfirming] = useState(false);

  if (!loaded) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-purple-50">
        <p className="text-xl font-bold text-gray-400">Loading…</p>
      </div>
    );
  }

  // ── per-view stats ────────────────────────────────────────────────────
  const sourceList  = view === 'everyday' ? wordList : countriesWordList;
  const sourceCategories = view === 'everyday' ? everydayCategories : countriesCategories;

  const totalWords    = sourceList.length;
  const masteredInView = sourceList.filter(w => progress.masteredWords.includes(w.id)).length;
  const masteredPct   = totalWords > 0 ? Math.round((masteredInView / totalWords) * 100) : 0;

  // global totals (across both banks)
  const totalMastered  = progress.masteredWords.length;
  const totalAttempted = Object.keys(progress.attempts).length;

  const categoryStats = sourceCategories.map(cat => {
    const catWords = sourceList.filter(w => w.category === cat);
    const mastered = catWords.filter(w => progress.masteredWords.includes(w.id)).length;
    return { cat, total: catWords.length, mastered };
  });

  const motivationMsg =
    masteredPct >= 100 ? "You've mastered every word in this bank! 🏆"
    : masteredPct >= 75 ? "Almost there – keep going! 🌟"
    : masteredPct >= 50 ? 'Halfway there! Great work! ⭐'
    : masteredInView === 0 ? 'Start practising to earn your first star!'
    : 'Great start! Keep practising! 💪';

  // all mastered words across both banks
  const allWords = [...wordList, ...countriesWordList];

  return (
    <main className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-100 p-5 pb-16">
      <div className="max-w-xl mx-auto">

        {/* Top bar */}
        <div className="flex items-center gap-3 mb-6">
          <Link href="/" className="text-purple-600 hover:text-purple-800 font-bold text-lg">
            ← Back
          </Link>
          <h1 className="text-2xl font-black text-purple-700">My Progress</h1>
        </div>

        {/* Global stat tiles (both banks combined) */}
        <div className="grid grid-cols-3 gap-3 mb-5">
          {[
            { val: progress.totalStars, label: '⭐ Stars',    color: 'text-yellow-500', border: 'border-yellow-200' },
            { val: totalMastered,       label: '🏅 Mastered', color: 'text-purple-600', border: 'border-purple-200' },
            { val: totalAttempted,      label: '📝 Tried',    color: 'text-blue-600',   border: 'border-blue-200' },
          ].map(({ val, label, color, border }) => (
            <div key={label} className={`bg-white rounded-3xl p-4 shadow-md border-2 ${border} text-center`}>
              <p className={`text-3xl font-black ${color}`}>{val}</p>
              <p className="text-xs font-bold text-gray-400 uppercase tracking-wide mt-1">{label}</p>
            </div>
          ))}
        </div>

        {/* ── Word-bank view toggle ─────────────────────────────────────── */}
        <div className="flex bg-white rounded-2xl border-2 border-purple-100 p-1 gap-1 mb-5 shadow-sm">
          <button
            onClick={() => setView('everyday')}
            className={`flex-1 py-2.5 rounded-xl text-sm font-bold transition-all ${
              view === 'everyday'
                ? 'bg-purple-600 text-white shadow'
                : 'text-gray-500 hover:text-gray-700'
            }`}
          >
            📚 Everyday Words
          </button>
          <button
            onClick={() => setView('countries')}
            className={`flex-1 py-2.5 rounded-xl text-sm font-bold transition-all ${
              view === 'countries'
                ? 'bg-blue-600 text-white shadow'
                : 'text-gray-500 hover:text-gray-700'
            }`}
          >
            🌍 Countries &amp; Nationalities
          </button>
        </div>

        {/* Per-bank progress bar */}
        <div className="bg-white rounded-3xl p-5 shadow-md border-2 border-purple-100 mb-6">
          <div className="flex justify-between mb-2">
            <span className="font-bold text-gray-700">
              {view === 'everyday' ? 'Everyday Words' : 'Countries & Nationalities'}
            </span>
            <span className="font-bold text-purple-600">{masteredInView} / {totalWords}</span>
          </div>
          <div className="w-full bg-gray-100 rounded-full h-4 overflow-hidden">
            <div
              className="h-4 rounded-full bg-gradient-to-r from-purple-500 to-pink-400 transition-all duration-700"
              style={{ width: `${masteredPct}%` }}
            />
          </div>
          <p className="text-sm text-gray-400 font-semibold mt-2">{motivationMsg}</p>
        </div>

        {/* Category breakdown for selected bank */}
        <div className="bg-white rounded-3xl p-5 shadow-md border-2 border-purple-100 mb-6">
          <h2 className="font-black text-gray-700 text-lg mb-4">By Category</h2>
          <div className="space-y-4">
            {categoryStats.map(({ cat, total, mastered }) => (
              <div key={cat}>
                <div className="flex justify-between mb-1">
                  <span className="font-bold text-gray-600 text-sm">{cat}</span>
                  <span className="text-sm font-bold text-purple-500">{mastered} / {total}</span>
                </div>
                <div className="w-full bg-gray-100 rounded-full h-3 overflow-hidden">
                  <div
                    className="bg-purple-400 h-3 rounded-full transition-all duration-500"
                    style={{ width: `${(mastered / total) * 100}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Badges (global) */}
        <div className="bg-white rounded-3xl p-5 shadow-md border-2 border-yellow-100 mb-6">
          <h2 className="font-black text-gray-700 text-lg mb-4">Badges</h2>
          <div className="flex flex-wrap gap-3">
            {badges.map(({ emoji, name, check }) => {
              const earned = check(progress.totalStars, totalMastered);
              return (
                <div
                  key={name}
                  className={`flex flex-col items-center p-3 rounded-2xl border-2 min-w-[72px] transition-all ${
                    earned
                      ? 'bg-yellow-50 border-yellow-300 shadow-sm'
                      : 'bg-gray-50 border-gray-200 opacity-40'
                  }`}
                >
                  <span className="text-3xl">{emoji}</span>
                  <span className="text-xs font-bold text-gray-600 mt-1 text-center leading-tight">
                    {name}
                  </span>
                </div>
              );
            })}
          </div>
        </div>

        {/* Mastered words list (across both banks) */}
        {totalMastered > 0 && (
          <div className="bg-white rounded-3xl p-5 shadow-md border-2 border-green-100 mb-6">
            <h2 className="font-black text-gray-700 text-lg mb-3">
              Words I&apos;ve Mastered 🏅
            </h2>
            <div className="flex flex-wrap gap-2">
              {progress.masteredWords.map(id => {
                const w = allWords.find(x => x.id === id);
                return w ? (
                  <span
                    key={id}
                    className="bg-green-100 text-green-700 text-sm font-bold px-3 py-1 rounded-full"
                  >
                    {w.word}
                  </span>
                ) : null;
              })}
            </div>
          </div>
        )}

        {/* Reset */}
        <div className="text-center">
          {!confirming ? (
            <button
              onClick={() => setConfirming(true)}
              className="text-gray-400 hover:text-red-400 text-sm font-semibold transition-colors"
            >
              Reset all progress
            </button>
          ) : (
            <div className="bg-red-50 border-2 border-red-200 rounded-2xl p-4">
              <p className="font-bold text-red-700 mb-3 text-sm">
                This will delete ALL your stars and mastered words. Are you sure?
              </p>
              <div className="flex gap-3 justify-center">
                <button
                  onClick={() => { resetProgress(); setConfirming(false); }}
                  className="px-5 py-2 bg-red-500 text-white font-bold rounded-xl hover:bg-red-600 text-sm"
                >
                  Yes, reset
                </button>
                <button
                  onClick={() => setConfirming(false)}
                  className="px-5 py-2 bg-gray-200 text-gray-700 font-bold rounded-xl hover:bg-gray-300 text-sm"
                >
                  Cancel
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </main>
  );
}