"use client";

import { useSession } from "next-auth/react";
import { Check, LogIn } from "lucide-react";
import { useVoteStore, TOTAL_VOTE_QUOTA } from "@/lib/store";
import { useLoginModalStore } from "@/lib/login-modal-store";
import { cn } from "@/lib/cn";

/**
 * Hero 区域右上角的"应援进度"小组件,替代原 Countdown。
 * 视觉对齐 Countdown compact 模式:同高度 h-9、同位置、同毛玻璃质感(深底 + backdrop-blur + 浅紫边框)。
 *
 * 三态:
 * 1. 未登录 → "登录后开始投票" 可点击 CTA · 12 格全暗
 * 2. 已登录,未投满 → "应援进度 X/12" · 已投点亮、未投暗紫描边
 * 3. 投满 12 票 → "✓ 12 票全部投出" · 12 格全亮 · 紫色强辉光
 */
export default function HeroVoteProgress({ className }: { className?: string }) {
  const { status } = useSession();
  const votedCount = useVoteStore((s) => s.votedArtists.length);
  const openLogin = useLoginModalStore((s) => s.show);

  const authed = status === "authenticated";
  const filled = authed ? votedCount : 0;
  const exhausted = authed && votedCount >= TOTAL_VOTE_QUOTA;

  // 未登录 → 可点击 CTA;其它态 → 普通信息容器
  const isClickable = !authed;

  const containerCls = cn(
    "inline-flex items-center gap-2.5 h-9 px-4 rounded-full",
    "bg-[rgba(13,10,36,0.55)] backdrop-blur-md",
    "border transition-colors",
    exhausted
      ? "border-purple-300/70 shadow-[0_0_18px_rgba(139,92,246,0.45)]"
      : "border-purple-300/40",
    isClickable && "cursor-pointer hover:bg-[rgba(13,10,36,0.7)] hover:border-purple-300/60",
    className,
  );

  const content = (
    <>
      {/* 左侧文字状态 */}
      {!authed ? (
        <span className="inline-flex items-center gap-1.5 text-white/85 text-xs leading-none">
          <LogIn size={11} className="text-purple-300" />
          登录后开始投票
        </span>
      ) : exhausted ? (
        <span className="inline-flex items-center gap-1.5 text-purple-200 text-xs leading-none font-medium">
          <Check size={12} strokeWidth={3} />
          12 票全部投出
        </span>
      ) : (
        <span className="inline-flex items-center gap-1.5 text-white/85 text-xs leading-none">
          应援进度
          <span className="font-display text-purple-300 tabular-nums tracking-wider">
            {filled}/{TOTAL_VOTE_QUOTA}
          </span>
        </span>
      )}

      {/* 12 格点亮式进度条 */}
      <span
        aria-hidden
        className="inline-flex items-center gap-[3px] ml-0.5"
      >
        {Array.from({ length: TOTAL_VOTE_QUOTA }).map((_, i) => {
          const lit = i < filled;
          return (
            <span
              key={i}
              className={cn(
                "w-1.5 h-1.5 rounded-full transition-all duration-300",
                lit
                  ? exhausted
                    ? "bg-purple-200 shadow-[0_0_6px_rgba(196,181,253,0.95)]"
                    : "bg-purple-400 shadow-[0_0_4px_rgba(167,139,250,0.85)]"
                  : "bg-purple-500/15 border border-purple-300/25",
              )}
            />
          );
        })}
      </span>
    </>
  );

  if (isClickable) {
    return (
      <button
        type="button"
        onClick={() => openLogin()}
        aria-label="登录后开始投票"
        data-hero-vote-progress
        className={containerCls}
      >
        {content}
      </button>
    );
  }

  return (
    <div
      className={containerCls}
      data-hero-vote-progress
      aria-label={
        exhausted
          ? "12 票已全部投出"
          : `应援进度 ${filled} 票 / 共 ${TOTAL_VOTE_QUOTA} 票`
      }
    >
      {content}
    </div>
  );
}
