"use client"

import Image from "next/image"
import {
  ArrowLeft,
  Play,
  ChevronDown,
  Clock,
  MapPin,
  Maximize2,
  Users,
  Eye,
  Share2,
  Heart,
  MoreHorizontal,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"

export default function ZoneVenuePage() {
  const [activeTab, setActiveTab] = useState("highlights")

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
      {/* Header with premium background */}
      <div className="relative h-64 bg-gradient-to-br from-gray-900 via-blue-900 to-red-900 overflow-hidden">
        <div className="absolute inset-0 bg-black bg-opacity-40"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20"></div>

        {/* Header Controls */}
        <div className="relative z-10 p-4 flex items-center justify-between">
          <div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
            <ArrowLeft className="w-5 h-5 text-white" />
          </div>
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
              <Share2 className="w-5 h-5 text-white" />
            </div>
            <div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
              <MoreHorizontal className="w-5 h-5 text-white" />
            </div>
          </div>
        </div>

        {/* Venue Info Card with glassmorphism */}
        <div className="absolute bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl rounded-t-3xl p-6 border-t border-white/20">
          <div className="flex items-center space-x-4">
            <div className="relative">
              <div className="w-20 h-20 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl flex items-center justify-center overflow-hidden shadow-xl">
                <span className="text-white font-bold text-2xl">R</span>
              </div>
              <div className="absolute -top-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white flex items-center justify-center">
                <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
              </div>
            </div>
            <div className="flex-1">
              <h1 className="text-2xl font-bold text-gray-900 mb-1">RONIN黄金篮球馆</h1>
              <p className="text-sm text-gray-500 flex items-center mb-2">
                <MapPin className="w-4 h-4 mr-1" />
                杭州拱墅区黑马路124号（肯德基对面）
              </p>
              <div className="flex items-center space-x-4 text-xs text-gray-500">
                <div className="flex items-center space-x-1">
                  <Users className="w-3 h-3" />
                  <span>1,234 关注</span>
                </div>
                <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
                <div className="flex items-center space-x-1">
                  <Eye className="w-3 h-3" />
                  <span>今日 856 观看</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Video Player with enhanced styling */}
      <div className="px-4 pt-8">
        <div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-2xl shadow-gray-200/50 border border-gray-100/50">
          <div className="relative">
            <Image
              src="/placeholder.svg?height=300&width=600&text=Basketball+Game"
              alt="Basketball game"
              width={600}
              height={300}
              className="w-full h-64 object-cover"
            />
            <div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
              <div className="w-20 h-20 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 hover:scale-110">
                <Play className="w-10 h-10 text-gray-800 ml-1" fill="currentColor" />
              </div>
            </div>
            <div className="absolute bottom-4 right-4">
              <div className="bg-black/30 backdrop-blur-sm rounded-xl p-2 transition-all duration-300 hover:scale-105">
                <Maximize2 className="w-5 h-5 text-white" />
              </div>
            </div>
            <div className="absolute bottom-4 left-4 flex space-x-2">
              <div className="w-2 h-2 bg-white rounded-full"></div>
              <div className="w-2 h-2 bg-white bg-opacity-50 rounded-full"></div>
              <div className="w-2 h-2 bg-white bg-opacity-50 rounded-full"></div>
            </div>
            <div className="absolute top-4 left-4">
              <div className="bg-red-500/90 backdrop-blur-sm text-white px-3 py-1 rounded-xl text-sm font-semibold flex items-center">
                <div className="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
                直播中
              </div>
            </div>
          </div>
          <div className="p-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="flex items-center space-x-2">
                  <Heart className="w-5 h-5 text-red-500" />
                  <span className="text-sm font-medium text-gray-600">2.1k</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Eye className="w-5 h-5 text-gray-400" />
                  <span className="text-sm font-medium text-gray-600">856</span>
                </div>
              </div>
              <div className="text-xs text-gray-500">2分钟前更新</div>
            </div>
          </div>
        </div>
      </div>

      {/* Navigation Tabs with enhanced styling */}
      <div className="px-4 mt-8">
        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-1 shadow-lg shadow-gray-200/30 border border-gray-100/50">
          <div className="flex">
            <button
              onClick={() => setActiveTab("highlights")}
              className={`flex-1 py-3 px-4 rounded-xl font-semibold text-sm transition-all duration-300 ${
                activeTab === "highlights"
                  ? "bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] text-white shadow-lg shadow-[#05C7C7]/20"
                  : "text-gray-500 hover:text-gray-700"
              }`}
            >
              精彩瞬间
            </button>
            <button
              onClick={() => setActiveTab("replay")}
              className={`flex-1 py-3 px-4 rounded-xl font-semibold text-sm transition-all duration-300 ${
                activeTab === "replay"
                  ? "bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] text-white shadow-lg shadow-[#05C7C7]/20"
                  : "text-gray-500 hover:text-gray-700"
              }`}
            >
              直播回放
            </button>
          </div>
        </div>
      </div>

      {/* Court and Time Selection with premium styling */}
      <div className="px-4 mt-6 flex space-x-3">
        <div className="flex items-center space-x-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-3 shadow-lg shadow-gray-200/30 border border-gray-100/50 transition-all duration-300 hover:scale-[1.02]">
          <div className="w-4 h-4 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full shadow-sm"></div>
          <span className="text-sm font-semibold text-gray-900">1号篮球场</span>
          <ChevronDown className="w-4 h-4 text-gray-400" />
        </div>
        <div className="flex items-center space-x-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-3 shadow-lg shadow-gray-200/30 border border-gray-100/50 transition-all duration-300 hover:scale-[1.02]">
          <Clock className="w-4 h-4 text-gray-400" />
          <span className="text-sm font-semibold text-gray-900">今日 08:20 ~ 22:00</span>
          <ChevronDown className="w-4 h-4 text-gray-400" />
        </div>
      </div>

      {/* Video Grid with enhanced styling */}
      <div className="px-4 mt-6 grid grid-cols-2 gap-4">
        {/* Live Video */}
        <div className="relative group">
          <div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
            <div className="relative">
              <Image
                src="/placeholder.svg?height=150&width=200&text=Live+Game"
                alt="Live basketball game"
                width={200}
                height={150}
                className="w-full h-32 object-cover"
              />
              <div className="absolute top-2 left-2">
                <div className="bg-[#05C7C7]/90 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-semibold flex items-center">
                  <div className="w-1.5 h-1.5 bg-white rounded-full mr-1 animate-pulse"></div>
                  正在播放
                </div>
              </div>
              <div className="absolute top-2 right-2">
                <div className="w-6 h-6 bg-white/80 backdrop-blur-sm rounded-full"></div>
              </div>
            </div>
          </div>
        </div>

        {/* Other Videos */}
        {[1, 2, 3, 4, 5].map((index) => (
          <div key={index} className="relative group">
            <div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
              <div className="relative">
                <Image
                  src={`/placeholder.svg?height=150&width=200&text=Game+${index + 1}`}
                  alt={`Basketball game ${index + 1}`}
                  width={200}
                  height={150}
                  className="w-full h-32 object-cover"
                />
                <div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center rounded-3xl">
                  <div className="w-10 h-10 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center transition-all duration-300 group-hover:scale-110">
                    <Play className="w-5 h-5 text-gray-800 ml-0.5" fill="currentColor" />
                  </div>
                </div>
                <div className="absolute top-2 right-2">
                  <div className="w-6 h-6 bg-white/80 backdrop-blur-sm rounded-full"></div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Bottom Notice with enhanced styling */}
      <div className="px-4 mt-8">
        <div className="bg-orange-50/80 backdrop-blur-sm border border-orange-200/50 rounded-2xl p-4 flex items-center justify-center">
          <div className="w-5 h-5 border-2 border-orange-400 rounded-full flex items-center justify-center mr-3">
            <span className="text-orange-400 text-xs font-bold">!</span>
          </div>
          <span className="text-sm text-orange-600 font-medium">视频云端保存仅7天，请及时下载</span>
        </div>
      </div>

      {/* Bottom Actions - Fixed with glassmorphism */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl border-t border-gray-200/50 px-4 py-4 flex space-x-4">
        <Button className="flex-1 bg-gradient-to-r from-orange-400 to-red-500 hover:from-orange-500 hover:to-red-600 text-white py-4 rounded-2xl font-bold shadow-xl shadow-orange-400/30 transition-all duration-300 hover:scale-[1.02]">
          合成剪辑
        </Button>
        <Button
          variant="ghost"
          className="text-gray-600 font-semibold px-6 py-4 rounded-2xl transition-all duration-300 hover:bg-gray-100/50"
        >
          创作记录 →
        </Button>
      </div>

      {/* Bottom Spacing for Fixed Actions */}
      <div className="h-24"></div>
    </div>
  )
}