"use client";

import { useEffect, useRef, useState } from "react";
import { Volume2, VolumeX } from "lucide-react";
import Countdown from "./ui/Countdown";
import { cn } from "@/lib/cn";

interface HeroBannerProps {
  /** PV 视频 URL（MP4） */
  videoSrc?: string;
  /** 视频封面图 */
  poster?: string;
  /** 活动结束时间 */
  endTime: Date | string | number;
  className?: string;
}

/**
 * 全屏沉浸式 Hero：
 * - 容器宽度铺满视口（视频背景），但内部文案在 1500 版心内
 * - 高度 = 100svh - 80px 导航
 * - 声音按钮在右下角，即使视频未加载也能切换图标状态（视觉即时反馈）
 */
export default function HeroBanner({
  videoSrc,
  poster,
  endTime,
  className,
}: HeroBannerProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isMuted, setIsMuted] = useState(true);

  useEffect(() => {
    const v = videoRef.current;
    if (!v || !videoSrc) return;
    v.muted = isMuted;
    v.play().catch(() => {});
    // 仅在 videoSrc 变化时执行 · 不依赖 isMuted（mute 切换由按钮处理）
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [videoSrc]);

  const toggleMute = () => {
    setIsMuted((prev) => {
      const next = !prev;
      const v = videoRef.current;
      if (v) v.muted = next;
      return next;
    });
  };

  return (
    <section
      className={cn(
        "relative w-full overflow-hidden bg-deepest",
        "min-h-[560px]",
        className,
      )}
      style={{
        height: "calc(100svh - 80px)",
        minHeight: "560px",
      }}
    >
      {/* 背景视频 / 渐变占位 */}
      {videoSrc ? (
        <video
          ref={videoRef}
          src={videoSrc}
          poster={poster}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          className="absolute inset-0 w-full h-full object-cover"
        />
      ) : (
        <div className="absolute inset-0 bg-grad-hero" />
      )}

      {/* 蒙层渐变 */}
      <div
        aria-hidden
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "linear-gradient(180deg, rgba(8,5,26,0.45) 0%, rgba(8,5,26,0.12) 40%, rgba(8,5,26,0.85) 100%)",
        }}
      />

      {/* 版心容器：1500px max-width，所有文案 / 倒计时 / 声音按钮全部在内 */}
      <div className="absolute inset-0 max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8">
        {/* Eyebrow 左上 */}
        <div className="absolute top-6 sm:top-10 left-4 sm:left-6 lg:left-8 z-10">
          <p className="font-label text-[10px] sm:text-xs tracking-[0.4em] uppercase text-purple-200/90">
            Top 12 · Virtual Idol Debut Project
          </p>
        </div>

        {/* 浅紫边框倒计时 右上 */}
        <div className="absolute top-5 sm:top-8 right-4 sm:right-6 lg:right-8 z-10">
          <Countdown endTime={endTime} compact />
        </div>

        {/* 中央 CYBER ✦ STAR */}
        <div className="absolute inset-0 flex flex-col items-center justify-center z-10 px-6 text-center">
          <h1 className="font-logo text-6xl sm:text-8xl lg:text-9xl tracking-[0.2em] glow-text-purple inline-flex items-baseline text-white">
            CYBER
            <span className="text-purple-300 mx-2 sm:mx-4 text-4xl sm:text-6xl lg:text-7xl">
              ✦
            </span>
            STAR
          </h1>
          <p className="mt-6 text-white/80 text-base sm:text-lg tracking-[0.4em]">
            虚 拟 偶 像 出 道 企 划
          </p>
        </div>

        {/* 声音按钮 右下 */}
        <button
          type="button"
          onClick={toggleMute}
          aria-label={isMuted ? "取消静音" : "静音"}
          aria-pressed={!isMuted}
          className="absolute bottom-6 sm:bottom-8 right-4 sm:right-6 lg:right-8 z-10 w-10 h-10 rounded-full bg-black/55 backdrop-blur-md border border-white/15 flex items-center justify-center text-white/85 hover:text-white hover:bg-black/75 active:scale-95 transition-all cursor-pointer"
        >
          {isMuted ? <VolumeX size={16} /> : <Volume2 size={16} />}
        </button>
      </div>

      {/* 底部渐隐 */}
      <div
        aria-hidden
        className="absolute inset-x-0 bottom-0 h-24 pointer-events-none"
        style={{
          background:
            "linear-gradient(180deg, transparent 0%, var(--color-deepest) 100%)",
        }}
      />
    </section>
  );
}
