/**
 * Crossword Leaderboard Page
 *
 * Top students by total points_earned across all crossword sessions.
 * Open to any authenticated user.
 */

import { useEffect } from 'react';
import { useCrosswordStore, LeaderboardRow } from '../../store/crossword';
import { Trophy, Sparkles, ChevronRight, Crown } from 'lucide-react';

export function CrosswordLeaderboardPage() {
  const { leaderboard, fetchLeaderboard, isLoading, error } = useCrosswordStore();

  useEffect(() => {
    fetchLeaderboard(50);
  }, [fetchLeaderboard]);

  return (
    <div className="space-y-8 animate-in fade-in duration-700 pb-10">
      {/* Header */}
      <div className="flex items-center gap-6">
        <div className="w-16 h-16 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center border border-amber-100 shadow-sm">
          <Trophy size={32} />
        </div>
        <div>
          <h1 className="text-3xl font-black text-text tracking-tight uppercase">
            Crossword Leaderboard
          </h1>
          <nav className="flex text-[0.65rem] font-black uppercase tracking-[2px] text-text-muted gap-2 items-center mt-1">
            <span>Recognition</span>
            <ChevronRight size={12} className="text-text-muted/30" />
            <span className="text-primary">Top Puzzle Solvers</span>
          </nav>
        </div>
      </div>

      {/* Error */}
      {error && (
        <div className="bg-rose-50 border border-rose-100 rounded-2xl p-5 text-rose-700 text-sm font-bold">
          {error}
        </div>
      )}

      {/* Loading */}
      {isLoading && (
        <div className="flex justify-center py-12">
          <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin" />
        </div>
      )}

      {/* Podium for top 3 */}
      {!isLoading && leaderboard.length >= 3 && (
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          {[1, 0, 2].map((idx) => {
            const row = leaderboard[idx];
            if (!row) return <div key={idx} />;
            const place = idx + 1;
            const colors = [
              { bg: 'bg-amber-50', text: 'text-amber-600', border: 'border-amber-100', label: '2nd' },
              { bg: 'bg-emerald-50', text: 'text-emerald-600', border: 'border-emerald-100', label: '1st' },
              { bg: 'bg-blue-50', text: 'text-blue-600', border: 'border-blue-100', label: '3rd' },
            ];
            const c = colors[idx === 0 ? 1 : idx === 1 ? 0 : 2];
            return (
              <div
                key={row.student_id}
                className={`bg-card border ${c.border} rounded-[2rem] p-6 text-center shadow-sm hover:shadow-lg transition-all`}
              >
                <div
                  className={`w-16 h-16 mx-auto rounded-full ${c.bg} ${c.text} border-2 ${c.border} flex items-center justify-center mb-3`}
                >
                  {place === 1 ? <Crown size={28} /> : <Trophy size={26} />}
                </div>
                <p className="text-[0.6rem] font-black uppercase tracking-widest text-text-muted">
                  {c.label} Place
                </p>
                <p className="text-lg font-black text-text mt-1 truncate">
                  {row.first_name} {row.last_name}
                </p>
                <p className={`text-2xl font-black mt-2 ${c.text}`}>{row.total_points} pts</p>
                <p className="text-[0.6rem] font-bold text-text-muted mt-1">
                  {row.sessions_completed} session{row.sessions_completed === 1 ? '' : 's'}
                  {' · '}
                  {row.perfect_completions} perfect
                </p>
              </div>
            );
          })}
        </div>
      )}

      {/* Full list */}
      {!isLoading && (
        <div className="bg-card border border-border rounded-[2rem] overflow-hidden">
          <div className="p-5 bg-muted/30 border-b border-border">
            <h2 className="text-sm font-black uppercase tracking-widest text-primary">
              Full Standings
            </h2>
          </div>
          {leaderboard.length === 0 ? (
            <div className="text-center py-20 opacity-50">
              <Sparkles size={48} className="mx-auto text-text-muted/30 mb-3" />
              <p className="font-black uppercase tracking-widest text-[0.65rem] text-text-muted">
                No points earned yet — be the first!
              </p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-left">
                <thead>
                  <tr className="bg-muted/50 border-b border-border">
                    <th className="px-6 py-3 text-[0.6rem] font-black text-primary uppercase tracking-widest w-16">
                      Rank
                    </th>
                    <th className="px-6 py-3 text-[0.6rem] font-black text-primary uppercase tracking-widest">
                      Student
                    </th>
                    <th className="px-6 py-3 text-[0.6rem] font-black text-primary uppercase tracking-widest text-center">
                      Sessions
                    </th>
                    <th className="px-6 py-3 text-[0.6rem] font-black text-primary uppercase tracking-widest text-center">
                      Perfect
                    </th>
                    <th className="px-6 py-3 text-[0.6rem] font-black text-primary uppercase tracking-widest text-right">
                      Total Points
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {leaderboard.map((row, i) => (
                    <tr key={row.student_id} className="hover:bg-muted/30 transition-colors">
                      <td className="px-6 py-3 text-sm font-black text-primary">
                        #{i + 1}
                      </td>
                      <td className="px-6 py-3 text-sm font-bold text-text">
                        {row.first_name} {row.last_name}
                      </td>
                      <td className="px-6 py-3 text-center text-sm text-text-secondary">
                        {row.sessions_completed}
                      </td>
                      <td className="px-6 py-3 text-center text-sm text-text-secondary">
                        {row.perfect_completions}
                      </td>
                      <td className="px-6 py-3 text-right">
                        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-amber-50 text-amber-700 border border-amber-100 text-[0.7rem] font-black">
                          <Trophy size={12} /> {row.total_points}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default CrosswordLeaderboardPage;
