"use client";

import { useState } from "react";
import {
  Avatar,
  Modal,
  CloseButton,
  Card,
  BackgroundSection,
  SectionTitle,
} from "@/components/ui";
import {
  getCharacterClassIcon,
  getCharacterClassName,
  type CharacterClass,
} from "@/lib/character-classes";

interface LeaderboardEntry {
  rank: number;
  username: string;
  email: string;
  score: number;
  level: number;
  avatar?: string | null;
  bio?: string | null;
  characterClass?: CharacterClass | null;
}

interface HouseMember {
  id: string;
  username: string;
  avatar: string | null;
  score: number;
  level: number;
  role: string;
}

interface HouseLeaderboardEntry {
  rank: number;
  houseId: string;
  houseName: string;
  totalScore: number;
  memberCount: number;
  averageScore: number;
  description: string | null;
  members: HouseMember[];
}

interface LeaderboardSectionProps {
  leaderboard: LeaderboardEntry[];
  houseLeaderboard: HouseLeaderboardEntry[];
  backgroundImage: string;
}

// Format number with consistent locale to avoid hydration mismatch
const formatScore = (score: number): string => {
  return score.toLocaleString("en-US");
};

export default function LeaderboardSection({
  leaderboard,
  houseLeaderboard,
  backgroundImage,
}: LeaderboardSectionProps) {
  const [selectedEntry, setSelectedEntry] = useState<LeaderboardEntry | null>(
    null
  );
  const [selectedHouse, setSelectedHouse] = useState<HouseLeaderboardEntry | null>(
    null
  );

  return (
    <BackgroundSection backgroundImage={backgroundImage}>
      {/* Title Section */}
      <SectionTitle
        variant="gradient"
        size="lg"
        subtitle="Top Players"
        className="mb-12 overflow-hidden"
      >
        LEADERBOARD
      </SectionTitle>

      {/* Players Leaderboard Table */}
      <div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm overflow-x-auto">
        {/* Header */}
        <div className="bg-gray-900/80 border-b border-pixel-gold/30 grid grid-cols-12 gap-2 sm:gap-4 p-2 sm:p-4 font-bold text-[10px] sm:text-xs uppercase tracking-widest text-gray-300">
          <div className="col-span-2 sm:col-span-1 text-center">Rank</div>
          <div className="col-span-5 sm:col-span-6">Player</div>
          <div className="col-span-3 text-right">Score</div>
          <div className="col-span-2 text-right">Level</div>
        </div>

        {/* Entries */}
        <div className="divide-y divide-pixel-gold/10 overflow-visible">
          {leaderboard.map((entry) => (
            <div
              key={entry.rank}
              className={`grid grid-cols-12 gap-2 sm:gap-4 p-2 sm:p-4 hover:bg-gray-900/50 transition relative ${
                entry.rank <= 3
                  ? "bg-gradient-to-r from-pixel-gold/10 via-pixel-gold/5 to-transparent"
                  : "bg-black/40"
              }`}
            >
              {/* Rank */}
              <div className="col-span-2 sm:col-span-1 flex items-center justify-center">
                <span
                  className={`inline-flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full font-bold text-xs sm:text-sm ${
                    entry.rank === 1
                      ? "bg-gradient-to-br from-pixel-gold to-orange-500 text-black shadow-lg shadow-pixel-gold/50"
                      : entry.rank === 2
                        ? "bg-gradient-to-br from-gray-400 to-gray-500 text-black"
                        : entry.rank === 3
                          ? "bg-gradient-to-br from-orange-700 to-orange-800 text-white"
                          : "bg-gray-900 text-gray-400 border border-gray-800"
                  }`}
                >
                  {entry.rank}
                </span>
              </div>

              {/* Player */}
              <div className="col-span-5 sm:col-span-6 flex items-center gap-2 sm:gap-3 min-w-0">
                <Avatar
                  src={entry.avatar}
                  username={entry.username}
                  size="sm"
                  className="flex-shrink-0"
                  borderClassName="border-pixel-gold/30"
                />
                <div
                  className="flex items-center gap-1 sm:gap-2 cursor-pointer hover:opacity-80 transition min-w-0"
                  onClick={() => setSelectedEntry(entry)}
                >
                  <span
                    className={`font-bold text-xs sm:text-sm break-words ${
                      entry.rank <= 3 ? "text-pixel-gold" : "text-white"
                    }`}
                  >
                    {entry.username}
                  </span>
                  {entry.characterClass && (
                    <span className="text-xs text-gray-400 uppercase tracking-wider">
                      [{getCharacterClassIcon(entry.characterClass)}]
                    </span>
                  )}
                  {entry.rank <= 3 && (
                    <span className="text-pixel-gold text-xs">✦</span>
                  )}
                </div>
              </div>

              {/* Score */}
              <div className="col-span-3 flex items-center justify-end">
                <span className="font-mono text-gray-300 text-xs sm:text-sm">
                  {formatScore(entry.score)}
                </span>
              </div>

              {/* Level */}
              <div className="col-span-2 flex items-center justify-end">
                <span className="font-bold text-gray-400 text-xs sm:text-sm">
                  Lv.{entry.level}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* House Leaderboard Table */}
      <div className="mt-12">
        <SectionTitle
          variant="gradient"
          size="md"
          subtitle="Top Houses"
          className="mb-8 overflow-hidden"
        >
          MAISONS
        </SectionTitle>

        <div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm overflow-x-auto">
          {/* Header */}
          <div className="bg-gray-900/80 border-b border-pixel-gold/30 grid grid-cols-12 gap-2 sm:gap-4 p-2 sm:p-4 font-bold text-[10px] sm:text-xs uppercase tracking-widest text-gray-300">
            <div className="col-span-2 sm:col-span-1 text-center">Rank</div>
            <div className="col-span-5 sm:col-span-6">Maison</div>
            <div className="col-span-3 text-right">Score Total</div>
            <div className="col-span-2 text-right">Membres</div>
          </div>

          {/* Entries */}
          <div className="divide-y divide-pixel-gold/10 overflow-visible">
            {houseLeaderboard.map((house) => (
              <div
                key={house.houseId}
                className={`grid grid-cols-12 gap-2 sm:gap-4 p-2 sm:p-4 hover:bg-gray-900/50 transition relative cursor-pointer ${
                  house.rank <= 3
                    ? "bg-gradient-to-r from-pixel-gold/10 via-pixel-gold/5 to-transparent"
                    : "bg-black/40"
                }`}
                onClick={() => setSelectedHouse(house)}
              >
                {/* Rank */}
                <div className="col-span-2 sm:col-span-1 flex items-center justify-center">
                  <span
                    className={`inline-flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full font-bold text-xs sm:text-sm ${
                      house.rank === 1
                        ? "bg-gradient-to-br from-pixel-gold to-orange-500 text-black shadow-lg shadow-pixel-gold/50"
                        : house.rank === 2
                          ? "bg-gradient-to-br from-gray-400 to-gray-500 text-black"
                          : house.rank === 3
                            ? "bg-gradient-to-br from-orange-700 to-orange-800 text-white"
                            : "bg-gray-900 text-gray-400 border border-gray-800"
                    }`}
                  >
                    {house.rank}
                  </span>
                </div>

                {/* House Name */}
                <div className="col-span-5 sm:col-span-6 flex items-center gap-2 sm:gap-3 min-w-0">
                  <div className="flex items-center gap-1 sm:gap-2 min-w-0">
                    <span
                      className={`font-bold text-xs sm:text-sm break-words ${
                        house.rank <= 3 ? "text-pixel-gold" : "text-white"
                      }`}
                    >
                      {house.houseName}
                    </span>
                    {house.rank <= 3 && (
                      <span className="text-pixel-gold text-xs">✦</span>
                    )}
                  </div>
                </div>

                {/* Total Score */}
                <div className="col-span-3 flex items-center justify-end">
                  <span className="font-mono text-gray-300 text-xs sm:text-sm">
                    {formatScore(house.totalScore)}
                  </span>
                </div>

                {/* Member Count */}
                <div className="col-span-2 flex items-center justify-end">
                  <span className="font-bold text-gray-400 text-xs sm:text-sm">
                    {house.memberCount}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Footer Info */}
      <div className="mt-8 text-center">
        <p className="text-gray-500 text-sm">
          Compete with players worldwide and climb the ranks!
        </p>
        <p className="text-gray-600 text-xs mt-2">Rankings update every hour</p>
      </div>

      {/* House Modal */}
      {selectedHouse && (
        <Modal
          isOpen={!!selectedHouse}
          onClose={() => setSelectedHouse(null)}
          size="md"
        >
          <div className="p-4 sm:p-8">
            {/* Header */}
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-xl sm:text-3xl font-bold text-pixel-gold uppercase tracking-wider break-words">
                {selectedHouse.houseName}
              </h2>
              <CloseButton onClick={() => setSelectedHouse(null)} size="md" />
            </div>

            {/* Stats */}
            <div className="grid grid-cols-3 gap-4 mb-6">
              <Card variant="default" className="p-4">
                <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
                  Rank
                </div>
                <div className="text-2xl font-bold text-pixel-gold">
                  #{selectedHouse.rank}
                </div>
              </Card>
              <Card variant="default" className="p-4">
                <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
                  Score Total
                </div>
                <div className="text-2xl font-bold text-pixel-gold">
                  {formatScore(selectedHouse.totalScore)}
                </div>
              </Card>
              <Card variant="default" className="p-4">
                <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
                  Membres
                </div>
                <div className="text-2xl font-bold text-pixel-gold">
                  {selectedHouse.memberCount}
                </div>
              </Card>
            </div>

            {/* Members List */}
            <div className="border-t border-pixel-gold/30 pt-6 mb-6">
              <div className="text-xs text-pixel-gold uppercase tracking-widest mb-4 font-bold">
                Membres ({selectedHouse.memberCount})
              </div>
              <div className="space-y-2">
                {selectedHouse.members.map((member) => (
                  <div
                    key={member.id}
                    className="flex items-center justify-between p-3 rounded"
                    style={{ backgroundColor: "var(--card-hover)" }}
                  >
                    <div className="flex items-center gap-3">
                      <Avatar
                        src={member.avatar}
                        username={member.username}
                        size="sm"
                        className="flex-shrink-0"
                        borderClassName="border-pixel-gold/30"
                      />
                      <div>
                        <div className="flex items-center gap-2">
                          <span className="font-semibold text-sm" style={{ color: "var(--foreground)" }}>
                            {member.username}
                          </span>
                          <span className="text-xs uppercase" style={{ color: "var(--accent)" }}>
                            {member.role}
                          </span>
                        </div>
                        <div className="text-xs" style={{ color: "var(--muted-foreground)" }}>
                          Niveau {member.level}
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-mono text-sm font-bold" style={{ color: "var(--foreground)" }}>
                        {formatScore(member.score)}
                      </div>
                      <div className="text-xs" style={{ color: "var(--muted-foreground)" }}>
                        points
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Description */}
            {selectedHouse.description && (
              <div className="border-t border-pixel-gold/30 pt-6">
                <div className="text-xs text-pixel-gold uppercase tracking-widest mb-3 font-bold">
                  Description
                </div>
                <p className="text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
                  {selectedHouse.description}
                </p>
              </div>
            )}
          </div>
        </Modal>
      )}

      {/* Character Modal */}
      {selectedEntry && (
        <Modal
          isOpen={!!selectedEntry}
          onClose={() => setSelectedEntry(null)}
          size="md"
        >
          <div className="p-4 sm:p-8">
            {/* Header */}
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-xl sm:text-3xl font-bold text-pixel-gold uppercase tracking-wider break-words">
                {selectedEntry.username}
              </h2>
              <CloseButton onClick={() => setSelectedEntry(null)} size="md" />
            </div>

            {/* Avatar and Class */}
            <div className="flex items-center gap-4 sm:gap-6 mb-6">
              <Avatar
                src={selectedEntry.avatar}
                username={selectedEntry.username}
                size="lg"
                className="flex-shrink-0"
                borderClassName="border-2 sm:border-4 border-pixel-gold/50"
              />
              <div>
                <div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
                  Rank #{selectedEntry.rank}
                </div>
                <div className="text-sm text-gray-300 mb-2">
                  {selectedEntry.email}
                </div>
                {selectedEntry.characterClass && (
                  <div className="flex items-center gap-2">
                    <span className="text-2xl">
                      {getCharacterClassIcon(selectedEntry.characterClass)}
                    </span>
                    <span className="text-lg font-bold text-pixel-gold uppercase tracking-wider">
                      {getCharacterClassName(selectedEntry.characterClass)}
                    </span>
                  </div>
                )}
              </div>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 gap-4 mb-6">
              <Card variant="default" className="p-4">
                <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
                  Score
                </div>
                <div className="text-2xl font-bold text-pixel-gold">
                  {formatScore(selectedEntry.score)}
                </div>
              </Card>
              <Card variant="default" className="p-4">
                <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
                  Niveau
                </div>
                <div className="text-2xl font-bold text-pixel-gold">
                  Lv.{selectedEntry.level}
                </div>
              </Card>
            </div>

            {/* Bio */}
            {selectedEntry.bio && (
              <div className="border-t border-pixel-gold/30 pt-6">
                <div className="text-xs text-pixel-gold uppercase tracking-widest mb-3 font-bold">
                  Bio
                </div>
                <p className="text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
                  {selectedEntry.bio}
                </p>
              </div>
            )}
          </div>
        </Modal>
      )}
    </BackgroundSection>
  );
}