video-flow-b/components/pages/home-page2.tsx

"use client";

import { useState, useRef } from "react";
import { ArrowRight, Plus, Table, AlignHorizontalSpaceAround } from "lucide-react";
import "./style/home-page2.css";
import { useRouter } from "next/navigation";
import { VideoScreenLayout } from '@/components/video-screen-layout';
import { VideoGridLayout } from '@/components/video-grid-layout';
import LiquidGlass from '@/plugins/liquid-glass';
import { motion } from "framer-motion";

export function HomePage2() {
  const router = useRouter();
  const [activeTool, setActiveTool] = useState("stretch");
  const containerRef = useRef<HTMLDivElement>(null);

  // 示例视频数据
  const videos = [
    {
      id: '1',
      url: 'https://cdn.qikongjian.com/videos/1750385931_99a8fb42-af89-4ae9-841a-a49869f026bd_text_to_video_0.mp4',
      title: '视频标题 1'
    },
    {
      id: '2',
      url: 'https://cdn.qikongjian.com/videos/1750389908_37d4fffa-8516-43a3-a423-fc0274f40e8a_text_to_video_0.mp4',
      title: '视频标题 2'
    },
    {
      id: '3',
      url: 'https://cdn.qikongjian.com/videos/1750384661_d8e30b79-828e-48cd-9025-ab62a996717c_text_to_video_0.mp4',
      title: '视频标题 3'
    },
    {
      id: '4',
      url: 'https://cdn.qikongjian.com/videos/1750320040_4b47996e-7c70-490e-8433-80c7df990fdd_text_to_video_0.mp4',
      title: '视频标题 4'
    },
  ];

  // 处理编辑视频
  const handleEdit = (id: string) => {
    console.log('Edit video:', id);
    // TODO: 实现编辑功能
  };

  // 处理删除视频
  const handleDelete = (id: string) => {
    console.log('Delete video:', id);
    // TODO: 实现删除功能
  };

  return (
    <div className="min-h-screen bg-[var(--background)]" ref={containerRef}>
      <div className="min-h-[100%] flex relative">
        {/* 工具栏-列表形式切换 */}
        <div className="absolute top-[1rem] right-6 w-[8rem] flex justify-end">
          <div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]">
            <button 
              className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
                ${activeTool === "stretch" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`} 
              onClick={() => setActiveTool("stretch")}
            >
              <AlignHorizontalSpaceAround className="w-5 h-5" />
            </button>
            <button 
              className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
                ${activeTool === "table" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`} 
              onClick={() => setActiveTool("table")}
            >
              <Table className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* 屏风式视频布局 */}
        <div 
          className={`absolute top-[4rem] w-full transition-all duration-500
            ${activeTool === "stretch" ? "opacity-100 translate-x-0" : "opacity-0 translate-x-[-100%] pointer-events-none"}
          `}
        >
          <VideoScreenLayout videos={videos} />
        </div>

        {/* 网格式视频布局 */}
        <div 
          className={`absolute top-[4rem] w-full transition-all duration-500 max-h-[calc(100vh-8rem)] overflow-y-auto hide-scrollbar
            ${activeTool === "table" ? "opacity-100 translate-x-0" : "opacity-0 translate-x-[100%] pointer-events-none"}
          `}
        >
          <VideoGridLayout 
            videos={videos}
            onEdit={handleEdit}
            onDelete={handleDelete}
          />
        </div>

        {/* Create Project Button */}
        <div className="fixed bottom-[5rem] left-[50%] -translate-x-1/2 z-50">
          <motion.div
            className="relative group"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => {
              console.log("Create Project")
              router.push("/create")
            }}
          >
            
            {/* 玻璃按钮 */}
            <motion.div
              className="add-project-btn relative flex items-center gap-3 px-6 py-4 rounded-2xl 
                bg-white/20 backdrop-blur-md cursor-pointer
                shadow-[0_8px_32px_rgba(0,0,0,0.2)] group-hover:shadow-[0_8px_32px_rgba(0,0,0,0.4)]
                transition-all duration-300"
              initial={false}
              whileHover={{
                backgroundColor: "rgba(255, 255, 255, 0.15)"
              }}
            >
              <Plus className="w-6 h-6 text-white" />
              <div className="btn-text text-lg font-medium bg-gradient-to-r text-white
                  bg-clip-text text-transparent">Create</div>
            </motion.div>
          </motion.div>
        </div>
        
      </div>
    </div>
  );
}