"use client";

import { useMemo, useState } from "react";
import { Sparkles } from "lucide-react";
import Top3Podium from "@/components/ranking/Top3Podium";
import RankingRow from "@/components/ranking/RankingRow";
import DebutLineDivider from "@/components/ranking/DebutLineDivider";
import VoteModal from "@/components/VoteModal";
import Countdown from "@/components/ui/Countdown";
import { ARTISTS, getActivityEndTime, sortArtists } from "@/lib/mock-data";
import type { Artist } from "@/types/artist";

export default function RankingPage() {
  const [voteTarget, setVoteTarget] = useState<Artist | null>(null);

  const sorted = useMemo(() => sortArtists(ARTISTS, "votes"), []);
  const endTime = useMemo(() => getActivityEndTime(), []);

  const top3 = sorted.slice(0, 3);
  const top4to12 = sorted.slice(3, 12);
  const candidates = sorted.slice(12);

  // 计算 #13 与第 12 名的差距，用于"救援投票"
  const debutCutoff = sorted[11]?.votes ?? 0;

  const handleVote = async (a: Artist, count: number) => {
    await new Promise((r) => setTimeout(r, 400));
    console.log(`Vote: ${a.name} × ${count}`);
    setVoteTarget(null);
  };

  return (
    <>
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
        {/* 头部 */}
        <div className="text-center mb-10">
          <p className="font-label text-[10px] sm:text-xs tracking-[0.4em] uppercase text-purple-300 mb-2">
            Live Ranking · 2026
          </p>
          <h1 className="font-logo text-4xl sm:text-5xl tracking-[0.3em] uppercase glow-text-purple mb-3 inline-flex items-baseline">
            Top
            <span className="text-purple-300 mx-2 text-2xl sm:text-3xl">✦</span>
            35
          </h1>
          <p className="text-white/55 text-sm mb-5">35 位候选人 · 实时排名</p>
          <div className="flex justify-center">
            <Countdown endTime={endTime} compact />
          </div>
        </div>

        {/* Top3 领奖台 */}
        <Top3Podium top3={top3} />

        {/* Top 4-12 标题 */}
        <div className="flex items-center gap-2 mt-10 mb-4">
          <Sparkles size={14} className="text-purple-300" />
          <h2 className="font-display text-sm tracking-[0.25em] text-white uppercase">
            出道位 · Top 4 ~ 12
          </h2>
        </div>

        {/* 表头 */}
        <div className="hidden sm:grid grid-cols-[64px_64px_1fr_100px_140px_110px] gap-4 px-3 py-2 text-[10px] tracking-widest uppercase text-white/40 font-label">
          <span className="text-center">排名</span>
          <span>头像</span>
          <span>艺人</span>
          <span className="text-right">票数</span>
          <span className="text-right">距上一名</span>
          <span className="text-center">操作</span>
        </div>

        {/* Top4-12 行 */}
        <div className="space-y-2">
          {top4to12.map((a, idx) => {
            const prev = idx === 0 ? top3[2] : top4to12[idx - 1];
            const gap = prev ? prev.votes - a.votes : undefined;
            return (
              <RankingRow
                key={a.id}
                artist={a}
                gapAbove={gap}
                onVote={setVoteTarget}
              />
            );
          })}
        </div>

        {/* 出道线 */}
        <DebutLineDivider />

        {/* 候补区 */}
        <div className="space-y-2">
          {candidates.map((a, idx) => {
            const prev = idx === 0 ? top4to12[top4to12.length - 1] : candidates[idx - 1];
            const gap = prev ? prev.votes - a.votes : undefined;
            const isRescue = idx === 0; // 第 13 位
            const gapToDebut = isRescue ? debutCutoff - a.votes + 1 : undefined;
            return (
              <RankingRow
                key={a.id}
                artist={a}
                gapAbove={gap}
                gapToDebut={gapToDebut}
                isRescue={isRescue}
                onVote={setVoteTarget}
              />
            );
          })}
        </div>

        {/* 底部提示 */}
        <p className="text-xs text-white/35 text-center mt-10">
          排名每分钟更新一次 · 投票后立即生效
        </p>
      </div>

      <VoteModal
        artist={voteTarget}
        onClose={() => setVoteTarget(null)}
        onConfirm={handleVote}
      />
    </>
  );
}