"use client";

import Link from "next/link";
import {
  ChevronLeft,
  Heart,
  Check,
  Quote as QuoteIcon,
  Sparkles,
  Compass,
  MessageCircle,
  User,
  Ruler,
  Calendar,
  BookOpen,
} from "lucide-react";
import type { Artist } from "@/types/artist";
import { TAG_LABEL } from "@/types/artist";
import ArtistPortrait from "@/components/cards/ArtistPortrait";
import VoteModal from "@/components/VoteModal";
import Button from "@/components/ui/Button";
import RankCard from "./RankCard";
import PerformanceVideo from "./PerformanceVideo";
import PerformanceGallery from "./PerformanceGallery";
import FloatingVoteButton from "@/components/FloatingVoteButton";
import FloatingBackButton from "@/components/FloatingBackButton";
import { useVoteStore, selectArtist, selectHasVoted } from "@/lib/store";
import { useVoteAction } from "@/hooks/useVoteAction";
import { cn } from "@/lib/cn";

interface ArtistDetailContentProps {
  artist: Artist;
  allArtists: Artist[];
}

/** 把 "、 / , ，" 分隔的串切成 chip 数组 */
function parseChips(text?: string): string[] {
  if (!text) return [];
  return text
    .split(/[、，,/]/)
    .map((s) => s.trim())
    .filter(Boolean);
}

export default function ArtistDetailContent({
  artist: initialArtist,
  allArtists: initialAll,
}: ArtistDetailContentProps) {
  // 用 store 数据覆盖（投票后票数能马上变）
  const storeArtist = useVoteStore(selectArtist(initialArtist.id));
  const storeAll = useVoteStore((s) => s.artists);
  const hasVoted = useVoteStore(selectHasVoted(initialArtist.id));

  const artist = storeArtist ?? initialArtist;
  const allArtists = storeAll.length ? storeAll : initialAll;

  const { target, remaining, totalQuota, openVote, closeVote, confirmVote } =
    useVoteAction();

  return (
    <>
      {/* 面包屑 */}
      <div className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pt-4">
        <div className="h-12 flex items-center gap-3 text-sm">
          <Link
            href="/"
            className="inline-flex items-center gap-1 text-white/65 hover:text-purple-300 transition-colors"
          >
            <ChevronLeft size={14} />
            全部艺人
          </Link>
          <span className="text-white/30">/</span>
          <span className="text-white/85 truncate">{artist.name}</span>
        </div>
      </div>

      {/* HERO · 立绘 + 身份信息 */}
      <section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-10">
        <HeroPanel
          artist={artist}
          allArtists={allArtists}
          onVote={() => openVote(artist)}
          hasVoted={hasVoted}
        />
      </section>

      {/* 性格 · 口头禅 */}
      {(artist.personality || artist.catchphrase) && (
        <section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-10">
          <div className="grid lg:grid-cols-[1.5fr_1fr] gap-4">
            {artist.personality && <PersonalityCard text={artist.personality} />}
            {artist.catchphrase && <CatchphraseCard text={artist.catchphrase} />}
          </div>
        </section>
      )}

      {/* 核心技能 · 核心赛道 */}
      {(artist.skills || artist.track) && (
        <section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-10">
          <div className="grid md:grid-cols-2 gap-4">
            {artist.skills && (
              <ChipCard
                label="核心技能"
                subtitle="Core Skills"
                icon={<Sparkles size={14} />}
                chips={parseChips(artist.skills)}
              />
            )}
            {artist.track && (
              <ChipCard
                label="核心赛道"
                subtitle="Career Track"
                icon={<Compass size={14} />}
                chips={parseChips(artist.track)}
              />
            )}
          </div>
        </section>
      )}

      {/* 人物小传 · 长简介 */}
      {artist.bio && (
        <section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-12">
          <BiographyCard bio={artist.bio} />
        </section>
      )}

      {/* 表演视频 · 与版心同宽,首帧自动作为封面,整个视频区域可点击播放/暂停 */}
      {artist.videoUrl && (
        <section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-12">
          <SectionHeading title="表演视频" subtitle="Solo Performance" />
          <div className="mt-4">
            <PerformanceVideo src={artist.videoUrl} poster={artist.videoPoster} />
          </div>
          <p className="text-xs text-white/40 mt-3">
            视频不会自动播放，避免流量浪费
          </p>
        </section>
      )}

      {/* 表演图片 · 三张氛围图,左对齐,竖向 3:4 */}
      {artist.gallery && artist.gallery.filter(Boolean).length > 0 && (
        <section className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 pb-20">
          <SectionHeading title="表演图片" subtitle="Performance Gallery" />
          <div className="mt-4">
            <PerformanceGallery images={artist.gallery} />
          </div>
        </section>
      )}

      <FloatingBackButton fallbackHref="/" />
      <FloatingVoteButton onClick={() => openVote(artist)} hasVoted={hasVoted} />

      <VoteModal
        artist={target}
        remaining={remaining}
        totalQuota={totalQuota}
        onClose={closeVote}
        onConfirm={confirmVote}
      />
    </>
  );
}

/* ============================================================
 * 子组件 · 统一品牌紫色，无 per-artist themeColor
 * ============================================================ */

interface HeroPanelProps {
  artist: Artist;
  allArtists: Artist[];
  onVote: () => void;
  hasVoted: boolean;
}

function HeroPanel({ artist, allArtists, onVote, hasVoted }: HeroPanelProps) {
  return (
    <div className="relative rounded-2xl border border-purple-500/20 overflow-hidden grid gap-6 lg:grid-cols-[420px_1fr] lg:gap-8 p-5 sm:p-8 bg-[linear-gradient(135deg,rgba(139,92,246,0.10)_0%,rgba(13,10,36,0.6)_100%)]">
      {/* 装饰光晕 */}
      <div
        aria-hidden
        className="absolute -top-24 -right-16 w-[420px] h-[420px] pointer-events-none bg-[radial-gradient(circle,rgba(139,92,246,0.22)_0%,transparent_60%)]"
      />

      {/* 立绘 */}
      <div className="relative">
        <ArtistPortrait
          artist={artist}
          rounded="rounded-xl"
          className="w-full aspect-[4/5]"
        />
        {hasVoted && (
          <div className="absolute top-3 right-3 w-9 h-9 rounded-full bg-purple-500 shadow-[0_0_16px_rgba(139,92,246,0.8)] flex items-center justify-center border-2 border-white/30">
            <Check size={20} strokeWidth={3} className="text-white" />
          </div>
        )}
      </div>

      {/* 身份信息 */}
      <div className="relative flex flex-col gap-4">
        {/* 编号 */}
        <div className="font-label text-[10px] tracking-[0.3em] uppercase text-purple-300/80">
          No.{artist.no}
        </div>

        {/* 中文名 / 英文名 */}
        <div>
          <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-tight mb-1">
            {artist.name}
          </h1>
          <p className="font-display text-xl sm:text-2xl tracking-[0.22em] uppercase text-purple-300 glow-text-purple">
            {artist.enName}
          </p>
        </div>

        {/* 实力标签 */}
        <div className="flex gap-2 flex-wrap">
          {artist.tags.map((t) => (
            <span
              key={t}
              className="px-2.5 py-1 rounded-full bg-purple-500/12 border border-purple-500/30 text-purple-300 text-[11px]"
            >
              {TAG_LABEL[t]}
            </span>
          ))}
        </div>

        {/* 年龄 / 身高 / 性别 */}
        <div className="grid grid-cols-3 gap-2">
          <MetaCell
            icon={<Calendar size={13} />}
            label="年龄"
            value={artist.age != null ? `${artist.age} 岁` : "未公开"}
          />
          <MetaCell
            icon={<Ruler size={13} />}
            label="身高"
            value={`${artist.height} cm`}
          />
          <MetaCell
            icon={<User size={13} />}
            label="性别"
            value={
              artist.gender === "M"
                ? "男生"
                : artist.gender === "F"
                  ? "女生"
                  : "未公开"
            }
          />
        </div>

        {/* 座右铭 · 品牌紫引文,保持与全站视觉一致 */}
        {artist.motto && (
          <div className="relative pl-6 pr-4 py-3.5 rounded-r-lg bg-[linear-gradient(90deg,rgba(139,92,246,0.10)_0%,transparent_100%)] border-l-[3px] border-purple-400">
            <QuoteIcon size={14} className="absolute top-3 left-2 text-purple-400/50" />
            <p className="text-base sm:text-lg italic font-medium text-white/95 leading-snug">
              {artist.motto}
            </p>
            <p className="mt-1.5 font-label text-[10px] tracking-[0.25em] uppercase text-purple-300/70">
              Motto · 座右铭
            </p>
          </div>
        )}

        {/* 排名卡片 */}
        <RankCard artist={artist} allArtists={allArtists} />

        {/* 操作按钮 · 仅投票 */}
        <div className="pt-1">
          <Button
            variant={hasVoted ? "outline" : "primary"}
            size="lg"
            pulse={!hasVoted}
            className={cn("w-full", hasVoted && "cursor-not-allowed opacity-80")}
            leftIcon={
              hasVoted ? (
                <Check size={16} strokeWidth={3} />
              ) : (
                <Heart size={16} fill="currentColor" />
              )
            }
            onClick={onVote}
          >
            {hasVoted ? "已投票" : "投票"}
          </Button>
        </div>
      </div>
    </div>
  );
}

function MetaCell({
  icon,
  label,
  value,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
}) {
  return (
    <div className="bg-deep/60 border border-white/[0.06] rounded-lg px-3 py-2.5">
      <div className="flex items-center gap-1.5 text-purple-300/60 mb-0.5">
        {icon}
        <span className="font-label text-[9px] tracking-widest uppercase">
          {label}
        </span>
      </div>
      <div className="text-sm text-white/90 truncate">{value}</div>
    </div>
  );
}

/**
 * 性格 / 口头禅 双卡使用完全相同的容器规范：
 *   - 圆角 2xl + 玻璃化 surface 背景 + 同样的 border / padding
 *   - 左上角同样的紫色装饰条
 *   - 同款 SectionHeading
 * 唯一差异:内容呈现 —— 性格是段落正文，口头禅是大字引号。
 */
function ProfileInfoCard({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle: string;
  children: React.ReactNode;
}) {
  return (
    <div className="relative rounded-2xl border border-white/[0.08] bg-surface/50 backdrop-blur-md p-6 sm:p-8 overflow-hidden min-h-[200px]">
      <div
        aria-hidden
        className="absolute top-0 left-0 w-1 h-16 rounded-r bg-[linear-gradient(180deg,#a78bfa_0%,transparent_100%)]"
      />
      <SectionHeading title={title} subtitle={subtitle} />
      <div className="mt-5">{children}</div>
    </div>
  );
}

function PersonalityCard({ text }: { text: string }) {
  return (
    <ProfileInfoCard title="性格" subtitle="Personality">
      <p
        className="text-sm sm:text-base leading-relaxed"
        style={{ color: "rgba(255,255,255,0.95)" }}
      >
        {text}
      </p>
    </ProfileInfoCard>
  );
}

function CatchphraseCard({ text }: { text: string }) {
  return (
    <ProfileInfoCard title="口头禅" subtitle="Catchphrase">
      <div className="flex items-start gap-3 h-full">
        <MessageCircle
          size={22}
          className="flex-shrink-0 mt-1 text-purple-400/70"
        />
        <p className="text-lg sm:text-xl font-semibold text-white/95 leading-snug tracking-wide italic">
          “{text}”
        </p>
      </div>
    </ProfileInfoCard>
  );
}

function ChipCard({
  label,
  subtitle,
  icon,
  chips,
}: {
  label: string;
  subtitle: string;
  icon: React.ReactNode;
  chips: string[];
}) {
  return (
    <div className="rounded-2xl border border-white/[0.08] bg-surface/40 backdrop-blur-md p-5 sm:p-6">
      <div className="flex items-center justify-between">
        <SectionHeading title={label} subtitle={subtitle} />
        <span className="text-purple-300/60">{icon}</span>
      </div>
      {chips.length > 0 ? (
        <div className="flex flex-wrap gap-2 mt-5">
          {chips.map((c, i) => (
            <span
              key={`${c}-${i}`}
              className={cn(
                "px-3 py-1.5 rounded-full border text-xs whitespace-nowrap",
                "bg-purple-500/12 border-purple-400/30 text-purple-200",
              )}
            >
              {c}
            </span>
          ))}
        </div>
      ) : (
        <p className="mt-4 text-sm text-white/45">未公开</p>
      )}
    </div>
  );
}

function BiographyCard({ bio }: { bio: string }) {
  return (
    <div className="rounded-2xl border border-white/[0.08] bg-surface/50 backdrop-blur-md p-6 sm:p-10">
      <div className="flex items-baseline justify-between mb-2">
        <SectionHeading title="人物小传" subtitle="Biography" />
        <span className="text-purple-300/60">
          <BookOpen size={14} />
        </span>
      </div>
      <p
        className={cn(
          "mt-5 text-base sm:text-lg text-white/85 leading-[2.05]",
          // 首字下沉
          "first-letter:text-4xl sm:first-letter:text-5xl first-letter:font-display first-letter:text-purple-300",
          "first-letter:mr-2 first-letter:float-left first-letter:leading-none first-letter:mt-1",
        )}
      >
        {bio}
      </p>
    </div>
  );
}

function SectionHeading({
  title,
  subtitle,
}: {
  title: string;
  subtitle: string;
}) {
  return (
    <div className="inline-flex items-baseline gap-3">
      <span
        aria-hidden
        className="w-1 h-4 rounded-full bg-purple-400 shadow-[0_0_8px_rgba(167,139,250,0.7)]"
      />
      <h2 className="font-display text-base sm:text-lg text-white tracking-[0.2em]">
        {title}
      </h2>
      <span className="font-label text-[10px] tracking-[0.3em] uppercase text-purple-300/70">
        {subtitle}
      </span>
    </div>
  );
}