"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/contexts/auth-context"
import { useEffect } from "react"

export default function Home() {
  const { isAuthenticated, user } = useAuth()

  useEffect(() => {
    createStarfield()
  }, [])

  const createStarfield = () => {
    const starfield = document.getElementById('starfield')
    if (!starfield) return

    const numStars = 100
    
    for (let i = 0; i < numStars; i++) {
      const star = document.createElement('div')
      star.className = 'star'
      star.style.left = Math.random() * 100 + '%'
      star.style.top = Math.random() * 100 + '%'
      star.style.width = Math.random() * 3 + 1 + 'px'
      star.style.height = star.style.width
      star.style.animationDelay = Math.random() * 2 + 's'
      starfield.appendChild(star)
    }
    
    // Add falling meteors
    const createMeteor = () => {
      const meteor = document.createElement('div')
      meteor.className = 'meteor'
      meteor.style.left = Math.random() * 100 + '%'
      meteor.style.animationDuration = (Math.random() * 2 + 2) + 's'
      starfield.appendChild(meteor)
      
      setTimeout(() => {
        meteor.remove()
      }, 5000)
    }

    setInterval(createMeteor, 3000)
  }

  return (
    <div className="min-h-screen flex flex-col relative">
      <div id="starfield" className="starfield"></div>
      
      {/* Navigation */}
      <header className="absolute top-0 right-0 p-6 z-10">
        <div className="flex items-center gap-4">
          {isAuthenticated ? (
            <>
              <span className="text-sm text-gray-300">
                Welcome, {user?.email}
              </span>
              <Button asChild>
                <Link href="/dashboard">Dashboard</Link>
              </Button>
            </>
          ) : (
            <>
              <Button variant="outline" asChild>
                <Link href="/login">Sign In</Link>
              </Button>
              <Button asChild>
                <Link href="/register">Get Started</Link>
              </Button>
            </>
          )}
        </div>
      </header>

      {/* Hero Section */}
      <section className="min-h-screen flex flex-col justify-center items-center text-center px-4 relative">
        <h1 className="text-6xl font-bold mb-4 hero-title-gradient">
          分布式流星监测网络
        </h1>
        <p className="text-xl text-gray-300 mb-8 max-w-2xl">
          连接全球观测者，记录天空中每一道流星的轨迹，为科学研究提供珍贵数据
        </p>
        <p className="text-lg text-gray-400 mb-8">
          Distributed Meteor Monitoring Network
        </p>
        
        {!isAuthenticated && (
          <div className="flex items-center justify-center gap-4 flex-wrap">
            <Button size="lg" asChild className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700">
              <Link href="/register">加入监测网络</Link>
            </Button>
            <Button variant="outline" size="lg" asChild className="border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white">
              <Link href="/login">Sign In</Link>
            </Button>
          </div>
        )}
      </section>

      {/* Feature Cards Section */}
      <section className="py-16 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="glass-card p-8 text-center">
              <div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl mx-auto mb-6 flex items-center justify-center text-2xl">
                🛰️
              </div>
              <h3 className="text-xl font-semibold mb-4 text-white">设备网络</h3>
              <p className="text-gray-300 leading-relaxed">
                分布在全球的高精度监测设备，24小时不间断捕捉流星事件，构建完整的观测网络。
              </p>
            </div>
            
            <div className="glass-card p-8 text-center">
              <div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl mx-auto mb-6 flex items-center justify-center text-2xl">
                📸
              </div>
              <h3 className="text-xl font-semibold mb-4 text-white">事件画廊</h3>
              <p className="text-gray-300 leading-relaxed">
                精彩的流星照片和视频集合，每一帧都记录着宇宙的壮丽瞬间，见证天空的奇迹。
              </p>
            </div>
            
            <div className="glass-card p-8 text-center">
              <div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl mx-auto mb-6 flex items-center justify-center text-2xl">
                📊
              </div>
              <h3 className="text-xl font-semibold mb-4 text-white">研究数据</h3>
              <p className="text-gray-300 leading-relaxed">
                开放的科学数据平台，为天文学家和研究人员提供准确、详细的流星观测数据。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      {!isAuthenticated && (
        <section className="py-16 px-4 text-center">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-4xl font-bold mb-6 text-orange-500">
              开始您的星空探索之旅
            </h2>
            <p className="text-xl text-gray-300 mb-8">
              注册账户，访问实时数据，加入全球观测者社区
            </p>
            <div className="flex items-center justify-center gap-4 flex-wrap">
              <Button size="lg" asChild className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 px-8 py-3 text-lg">
                <Link href="/register">立即注册</Link>
              </Button>
              <Button variant="outline" size="lg" asChild className="border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-8 py-3 text-lg">
                <Link href="/gallery">了解更多</Link>
              </Button>
            </div>
          </div>
        </section>
      )}
    </div>
  )
}