import {
  ArrowLeft,
  Settings,
  Heart,
  Clock,
  MapPin,
  Home,
  User,
  Crown,
  Star,
  ChevronRight,
  Bell,
  Shield,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function ProfilePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
      {/* Header with glassmorphism */}
      <div className="bg-white/80 backdrop-blur-xl px-4 py-4 sticky top-0 z-10 border-b border-gray-100/50">
        <div className="flex items-center justify-between">
          <Link href="/">
            <div className="w-10 h-10 bg-gray-100/80 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
              <ArrowLeft className="w-5 h-5 text-gray-600" />
            </div>
          </Link>
          <h1 className="text-xl font-bold text-gray-900">我的</h1>
          <div className="w-10 h-10 bg-gray-100/80 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
            <Settings className="w-5 h-5 text-gray-600" />
          </div>
        </div>
      </div>

      {/* User Profile Section with premium styling */}
      <div className="bg-gradient-to-br from-white to-gray-50/50 mx-4 mt-6 rounded-3xl p-6 shadow-xl shadow-gray-200/50 border border-gray-100/50">
        <div className="flex items-center space-x-4">
          <div className="relative">
            <div className="w-20 h-20 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-3xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
              <User className="w-10 h-10 text-white" />
            </div>
            <div className="absolute -bottom-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"></div>
            </div>
          </div>
          <div className="flex-1">
            <div className="flex items-center space-x-2 mb-1">
              <h2 className="text-2xl font-bold text-gray-900">用户昵称</h2>
              <div className="bg-gradient-to-r from-yellow-400 to-orange-500 px-2 py-0.5 rounded-lg">
                <Crown className="w-3 h-3 text-white" />
              </div>
            </div>
            <p className="text-sm text-gray-500 mb-2">ID: 123456789</p>
            <div className="flex items-center space-x-4 text-xs text-gray-500">
              <div className="flex items-center space-x-1">
                <Star className="w-3 h-3 text-yellow-500" />
                <span>积分: 2,580</span>
              </div>
              <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
              <span>等级: LV.8</span>
            </div>
          </div>
        </div>
        <Button className="w-full mt-4 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] hover:from-[#04B5B5] hover:to-[#039999] text-white py-3 rounded-2xl font-semibold shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-[1.02]">
          编辑资料
        </Button>
      </div>

      {/* Stats Cards */}
      <div className="px-4 mt-6 grid grid-cols-3 gap-3">
        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
          <div className="text-2xl font-bold text-gray-900 mb-1">12</div>
          <div className="text-xs text-gray-500">观看场次</div>
        </div>
        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
          <div className="text-2xl font-bold text-gray-900 mb-1">5</div>
          <div className="text-xs text-gray-500">收藏场馆</div>
        </div>
        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
          <div className="text-2xl font-bold text-gray-900 mb-1">28</div>
          <div className="text-xs text-gray-500">观看时长(h)</div>
        </div>
      </div>

      {/* Menu Items with premium styling */}
      <div className="mx-4 mt-6 bg-white/80 backdrop-blur-sm rounded-3xl shadow-xl shadow-gray-200/50 border border-gray-100/50 overflow-hidden">
        <Link
          href="/vip"
          className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50"
        >
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center shadow-lg shadow-yellow-400/30">
              <Crown className="w-6 h-6 text-white" />
            </div>
            <div>
              <span className="text-gray-900 font-semibold text-base">VIP会员</span>
              <div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium mt-1 inline-block">
                开通享特权
              </div>
            </div>
          </div>
          <ChevronRight className="w-5 h-5 text-gray-400" />
        </Link>

        <div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-2xl flex items-center justify-center">
              <Heart className="w-6 h-6 text-red-500" />
            </div>
            <span className="text-gray-900 font-medium text-base">我的收藏</span>
          </div>
          <div className="flex items-center space-x-2">
            <div className="bg-red-500 text-white text-xs px-2 py-1 rounded-full font-medium">5</div>
            <ChevronRight className="w-5 h-5 text-gray-400" />
          </div>
        </div>

        <div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-50 rounded-2xl flex items-center justify-center">
              <Clock className="w-6 h-6 text-blue-500" />
            </div>
            <span className="text-gray-900 font-medium text-base">观看历史</span>
          </div>
          <ChevronRight className="w-5 h-5 text-gray-400" />
        </div>

        <div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-green-100 to-green-50 rounded-2xl flex items-center justify-center">
              <MapPin className="w-6 h-6 text-green-500" />
            </div>
            <span className="text-gray-900 font-medium text-base">常用地址</span>
          </div>
          <ChevronRight className="w-5 h-5 text-gray-400" />
        </div>

        <div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-50 rounded-2xl flex items-center justify-center">
              <Bell className="w-6 h-6 text-purple-500" />
            </div>
            <span className="text-gray-900 font-medium text-base">消息通知</span>
          </div>
          <div className="flex items-center space-x-2">
            <div className="bg-red-500 w-2 h-2 rounded-full"></div>
            <ChevronRight className="w-5 h-5 text-gray-400" />
          </div>
        </div>

        <div className="px-6 py-5 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-gray-100 to-gray-50 rounded-2xl flex items-center justify-center">
              <Shield className="w-6 h-6 text-gray-500" />
            </div>
            <span className="text-gray-900 font-medium text-base">隐私设置</span>
          </div>
          <ChevronRight className="w-5 h-5 text-gray-400" />
        </div>
      </div>

      {/* Recent Activity with enhanced styling */}
      <div className="mx-4 mt-6 bg-white/80 backdrop-blur-sm rounded-3xl p-6 shadow-xl shadow-gray-200/50 border border-gray-100/50">
        <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center">
          <div className="w-1 h-6 bg-gradient-to-b from-[#05C7C7] to-[#04B5B5] rounded-full mr-3"></div>
          最近活动
        </h3>
        <div className="space-y-4">
          <div className="flex items-center space-x-4 p-3 bg-gray-50/50 rounded-2xl transition-all duration-300 hover:bg-gray-100/50">
            <div className="w-12 h-12 bg-gradient-to-br from-orange-100 to-orange-50 rounded-2xl overflow-hidden">
              <div className="w-full h-full bg-orange-200"></div>
            </div>
            <div className="flex-1">
              <p className="text-sm font-semibold text-gray-900">观看了 RONIN黄金篮球馆</p>
              <p className="text-xs text-gray-500 mt-1">2小时前 · 观看时长 45分钟</p>
            </div>
            <div className="text-xs text-[#05C7C7] font-medium">+10积分</div>
          </div>
          <div className="flex items-center space-x-4 p-3 bg-gray-50/50 rounded-2xl transition-all duration-300 hover:bg-gray-100/50">
            <div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-2xl overflow-hidden">
              <div className="w-full h-full bg-red-200"></div>
            </div>
            <div className="flex-1">
              <p className="text-sm font-semibold text-gray-900">收藏了 Panda惊怒熊猫运动俱乐部</p>
              <p className="text-xs text-gray-500 mt-1">1天前</p>
            </div>
            <div className="text-xs text-[#05C7C7] font-medium">+5积分</div>
          </div>
        </div>
      </div>

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

      {/* Bottom Navigation with glassmorphism */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50 px-4 py-3">
        <div className="flex justify-around">
          <Link href="/" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
            <div className="w-8 h-8 bg-gray-100 rounded-xl flex items-center justify-center">
              <Home className="w-4 h-4 text-gray-400" />
            </div>
            <span className="text-xs text-gray-400 mt-1">首页</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
            <div className="w-8 h-8 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
              <User className="w-4 h-4 text-white" />
            </div>
            <span className="text-xs text-[#05C7C7] font-semibold mt-1">我的</span>
          </Link>
        </div>
      </div>
    </div>
  )
}