'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { useAuth } from '@/contexts/AuthContext'
import { ShieldCheck, ArrowRight } from 'lucide-react'

export default function HomePage() {
  const router = useRouter()
  const { user, isAuthenticated, isLoading } = useAuth()

  useEffect(() => {
    if (!isLoading && isAuthenticated && user) {
      switch (user.role) {
        case 'creator':
          router.push('/creator')
          break
        case 'agency':
          router.push('/agency')
          break
        case 'brand':
          router.push('/brand')
          break
      }
    }
  }, [isLoading, isAuthenticated, user, router])

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-bg-page">
        <div className="w-8 h-8 border-2 border-accent-indigo border-t-transparent rounded-full animate-spin" />
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-bg-page flex flex-col items-center justify-center px-6">
      <div className="text-center space-y-8 max-w-md">
        {/* Logo */}
        <div className="flex items-center justify-center gap-3">
          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-accent-indigo to-[#4F46E5] flex items-center justify-center shadow-[0px_8px_24px_-4px_rgba(99,102,241,0.4)]">
            <ShieldCheck className="w-7 h-7 text-white" />
          </div>
          <span className="text-3xl font-bold text-text-primary">秒思</span>
        </div>

        {/* Title */}
        <div className="space-y-3">
          <h1 className="text-2xl font-bold text-text-primary">
            AI 智能审核平台
          </h1>
          <p className="text-text-secondary">
            AI 驱动的营销内容合规审核平台，助力品牌安全投放
          </p>
        </div>

        {/* Login Button */}
        <div className="pt-4">
          <Link
            href="/login"
            className="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-gradient-to-r from-accent-indigo to-[#4F46E5] text-white font-semibold text-lg shadow-[0px_8px_24px_-4px_rgba(99,102,241,0.4)] hover:opacity-90 transition-opacity"
          >
            立即登录
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>

        {/* Role Selection */}
        <div className="pt-6 border-t border-border-subtle">
          <p className="text-sm text-text-tertiary mb-4">或选择角色体验</p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link
              href="/login?role=creator"
              className="px-6 py-3 rounded-xl bg-bg-card border border-border-subtle text-text-secondary font-medium hover:bg-bg-elevated transition-colors"
            >
              达人端
            </Link>
            <Link
              href="/login?role=agency"
              className="px-6 py-3 rounded-xl bg-bg-card border border-border-subtle text-text-secondary font-medium hover:bg-bg-elevated transition-colors"
            >
              代理商端
            </Link>
            <Link
              href="/login?role=brand"
              className="px-6 py-3 rounded-xl bg-bg-card border border-border-subtle text-text-secondary font-medium hover:bg-bg-elevated transition-colors"
            >
              品牌方端
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}