wzdj/app/moments/[id]/page.tsx

"use client" // Convert to client component

import { Heart, MessageCircle, Share2, Gift, ArrowLeft, Send, BookOpen } from 'lucide-react';
import Image from "next/image";
import Link from "next/link";
import { toast } from "@/hooks/use-toast"; // Import toast

// Mock data - in a real app this would come from an API based on params.id
const momentData = {
  id: 1,
  user: "GM-远洋",
  avatar: "/gamer-girl-headphones.jpg",
  desc: "可惜不是你喜欢的甜妹音 😷 #电竞少女 #英雄联盟 #日常",
  video: "/esports-gamer-girl-streaming-vertical.jpg",
  likes: "1.2w",
  comments: 458,
  isLive: true,
  hasCourse: true,
  courseId: "101",
  courseTitle: "打野进阶课：从入门到王者",
  commentsList: [
    { user: "User1", text: "声音好听！", time: "1m ago" },
    { user: "User2", text: "求BGM", time: "5m ago" },
    { user: "User3", text: "这波操作666", time: "10m ago" },
  ]
};

export default function MomentDetailPage({ params }: { params: { id: string } }) {
  const handleLike = () => toast({ title: "点赞成功", description: "已添加到我喜欢的视频" });
  const handleShare = () => toast({ title: "分享成功", description: "链接已复制到剪贴板" });
  const handleGift = () => toast({ title: "礼物发送成功", description: "主播已收到您的心意" });

  return (
    <div className="h-screen bg-black text-white relative flex flex-col">
      {/* Header */}
      <div className="absolute top-0 left-0 right-0 z-30 pt-safe px-4 py-3 flex items-center gap-4 bg-gradient-to-b from-black/60 to-transparent">
        <Link href="/moments" className="p-2 -ml-2 rounded-full hover:bg-white/10 transition-colors">
          <ArrowLeft size={24} />
        </Link>
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-full overflow-hidden border border-white/20">
            <Image src={momentData.avatar || "/placeholder.svg"} alt={momentData.user} width={32} height={32} className="object-cover" />
          </div>
          <span className="font-bold text-sm">{momentData.user}</span>
          <button className="px-3 py-1 rounded-full bg-primary text-black text-xs font-bold">关注</button>
        </div>
      </div>

      {/* Video Area */}
      <div className="flex-1 relative bg-zinc-900">
        <Image
          src={momentData.video || "/placeholder.svg"}
          alt="Video"
          fill
          className="object-cover opacity-90"
        />
        
        {/* Right Sidebar Actions */}
        <div className="absolute right-2 bottom-32 flex flex-col items-center gap-6 z-20">
          <button 
            className="flex flex-col items-center gap-1 group"
            onClick={handleLike} // Add click handler
          >
            <Heart size={32} className="text-white drop-shadow-lg group-hover:text-red-500 transition-colors" />
            <span className="text-xs font-medium drop-shadow-md">{momentData.likes}</span>
          </button>
          
          <button className="flex flex-col items-center gap-1 group">
            <MessageCircle size={32} className="text-white drop-shadow-lg group-hover:text-primary transition-colors" />
            <span className="text-xs font-medium drop-shadow-md">{momentData.comments}</span>
          </button>
          
          <button 
            className="flex flex-col items-center gap-1 group"
            onClick={handleShare} // Add click handler
          >
            <Share2 size={32} className="text-white drop-shadow-lg group-hover:text-green-400 transition-colors" />
            <span className="text-xs font-medium drop-shadow-md">分享</span>
          </button>

          <button 
            className="flex flex-col items-center gap-1 group"
            onClick={handleGift} // Add click handler
          >
             <div className="w-10 h-10 rounded-full bg-gradient-to-br from-secondary to-accent flex items-center justify-center animate-spin-slow group-hover:scale-110 transition-transform">
                <Gift size={20} />
             </div>
             <span className="text-xs font-medium text-secondary drop-shadow-md">礼物</span>
          </button>
        </div>

        {/* Bottom Info */}
        <div className="absolute left-0 bottom-0 w-full p-4 z-20 bg-gradient-to-t from-black via-black/60 to-transparent pt-20">
          {/* Course Link */}
          {momentData.hasCourse && (
            <Link href={`/course/${momentData.courseId}`} className="flex items-center justify-between w-full p-3 rounded-xl bg-white/10 backdrop-blur-md border border-white/10 mb-4 hover:bg-white/20 transition-colors group">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                  <BookOpen size={20} />
                </div>
                <div>
                  <div className="text-xs text-primary font-bold mb-0.5">同款课程</div>
                  <div className="text-sm font-bold text-white group-hover:text-primary transition-colors">{momentData.courseTitle}</div>
                </div>
              </div>
              <div className="px-3 py-1.5 rounded-lg bg-primary text-black text-xs font-bold">
                去学习
              </div>
            </Link>
          )}

          <h3 className="font-bold text-lg mb-2">@{momentData.user}</h3>
          <p className="text-sm text-white/90 leading-relaxed mb-4">
            {momentData.desc}
          </p>
          
          {/* Comment Input Mock */}
          <div className="flex items-center gap-3">
            <div className="flex-1 h-10 bg-white/10 rounded-full px-4 flex items-center text-white/50 text-sm">
              说点什么...
            </div>
            <button className="p-2 rounded-full bg-white/10 hover:bg-primary hover:text-black transition-colors">
              <Send size={20} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}