"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';

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 z-[100] 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-[10rem] left-[50%]">
          <LiquidGlass
            displacementScale={58}
            blurAmount={0.5}
            saturation={130}
            aberrationIntensity={2}
            elasticity={0.35}
            cornerRadius={32}
            mouseContainer={containerRef}
            overLight={false}
            mode="standard"
            padding="unset"
            onClick={() => {
              console.log("Create Project")
              router.push("/create")
            }}
            style={{
              position: "absolute"
            }}
          >
            <div className="add-project-btn">
              <Plus className="w-6 h-6 icon" />
              <div className="btn-text">Create Project</div>
            </div>
          </LiquidGlass>
        </div>
        
      </div>
    </div>
  );
}