import { useState, useEffect } from 'react'
import { useNavigate } from '@tanstack/react-router'
import { Key, Lock, AlertCircle, Moon, Sun, HelpCircle, FileText, Terminal, Zap } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { WavesBackground } from '@/components/waves-background'
import { useAnimation } from '@/hooks/use-animation'
import { useTheme } from '@/components/use-theme'
import { checkAuthStatus } from '@/lib/fetch-with-auth'
import { cn } from '@/lib/utils'
import { APP_FULL_NAME } from '@/lib/version'

export function AuthPage() {
  const [token, setToken] = useState('')
  const [isValidating, setIsValidating] = useState(false)
  const [error, setError] = useState('')
  const [checkingAuth, setCheckingAuth] = useState(true)
  const navigate = useNavigate()
  const { enableWavesBackground, setEnableWavesBackground } = useAnimation()
  const { theme, setTheme } = useTheme()

  // 如果已经认证，直接跳转到首页
  useEffect(() => {
    const verifyAuth = async () => {
      try {
        const isAuth = await checkAuthStatus()
        if (isAuth) {
          navigate({ to: '/' })
        }
      } catch {
        // 忽略错误，保持在登录页
      } finally {
        setCheckingAuth(false)
      }
    }
    verifyAuth()
  }, [navigate])

  // 获取实际应用的主题（处理 system 情况）
  const getActualTheme = () => {
    if (theme === 'system') {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }
    return theme
  }

  const actualTheme = getActualTheme()

  // 主题切换（无动画）
  const toggleTheme = () => {
    const newTheme = actualTheme === 'dark' ? 'light' : 'dark'
    setTheme(newTheme)
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (!token.trim()) {
      setError('请输入 Access Token')
      return
    }

    setIsValidating(true)
    
    console.log('开始验证 token...')

    try {
      // 向后端发送请求验证 token（后端会设置 HttpOnly Cookie）
      const response = await fetch('/api/webui/auth/verify', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include', // 确保接收并存储 Cookie
        body: JSON.stringify({ token: token.trim() }),
      })

      console.log('Token 验证响应状态:', response.status)
      
      const data = await response.json()
      console.log('Token 验证响应数据:', data)

      if (response.ok && data.valid) {
        console.log('Token 验证成功，准备跳转...')
        console.log('is_first_setup:', data.is_first_setup)
        
        // Token 验证成功，Cookie 已由后端设置
        // 等待一小段时间确保 Cookie 已设置
        await new Promise(resolve => setTimeout(resolve, 100))
        
        // 再次检查认证状态
        const authCheck = await checkAuthStatus()
        console.log('跳转前认证状态检查:', authCheck)
        
        // 直接使用验证响应中的 is_first_setup 字段，避免额外请求
        if (data.is_first_setup) {
          console.log('跳转到首次配置页面')
          // 需要首次配置，跳转到配置向导
          navigate({ to: '/setup' })
        } else {
          console.log('跳转到首页')
          // 不需要配置或配置已完成，跳转到首页
          navigate({ to: '/' })
        }
      } else {
        console.error('Token 验证失败:', data.message)
        setError(data.message || 'Token 验证失败，请检查后重试')
      }
    } catch (err) {
      console.error('Token 验证错误:', err)
      setError('连接服务器失败，请检查网络连接')
    } finally {
      setIsValidating(false)
    }
  }

  // 正在检查认证状态时显示加载
  if (checkingAuth) {
    return (
      <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background p-4">
        {enableWavesBackground && <WavesBackground />}
        <div className="text-muted-foreground">正在检查登录状态...</div>
      </div>
    )
  }

  return (
    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background p-4">
      {/* 波浪背景 - 独立控制 */}
      {enableWavesBackground && <WavesBackground />}

      {/* 认证卡片 - 磨砂玻璃效果 */}
      <Card className="relative z-10 w-full max-w-md shadow-2xl backdrop-blur-xl bg-card/80 border-border/50">
        {/* 主题切换按钮 */}
        <button
          onClick={toggleTheme}
          className="absolute right-4 top-4 rounded-lg p-2 hover:bg-accent transition-colors z-10 text-foreground"
          title={actualTheme === 'dark' ? '切换到浅色模式' : '切换到深色模式'}
        >
          {actualTheme === 'dark' ? (
            <Sun className="h-5 w-5" strokeWidth={2.5} fill="none" />
          ) : (
            <Moon className="h-5 w-5" strokeWidth={2.5} fill="none" />
          )}
        </button>

        <CardHeader className="space-y-4 text-center">
          {/* Logo/Icon */}
          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
            <Lock className="h-8 w-8 text-primary" strokeWidth={2} fill="none" />
          </div>

          <div className="space-y-2">
            <CardTitle className="text-2xl font-bold">欢迎使用 MaiBot</CardTitle>
            <CardDescription className="text-base">
              请输入您的 Access Token 以继续访问系统
            </CardDescription>
          </div>
        </CardHeader>

        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            {/* Token 输入框 */}
            <div className="space-y-2">
              <Label htmlFor="token" className="text-sm font-medium">
                Access Token
              </Label>
              <div className="relative">
                <Key className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" strokeWidth={2} fill="none" />
                <Input
                  id="token"
                  type="password"
                  placeholder="请输入您的 Access Token"
                  value={token}
                  onChange={(e) => setToken(e.target.value)}
                  className={cn('pl-10', error && 'border-red-500 focus-visible:ring-red-500')}
                  disabled={isValidating}
                  autoFocus
                  autoComplete="off"
                />
              </div>
            </div>

            {/* 错误提示 */}
            {error && (
              <div className="flex items-center gap-2 rounded-md bg-red-50 p-3 text-sm text-red-600 dark:bg-red-950/50 dark:text-red-400">
                <AlertCircle className="h-4 w-4 flex-shrink-0" strokeWidth={2} fill="none" />
                <span>{error}</span>
              </div>
            )}

            {/* 提交按钮 */}
            <Button type="submit" className="w-full" disabled={isValidating}>
              {isValidating ? (
                <>
                  <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                  验证中...
                </>
              ) : (
                '验证并进入'
              )}
            </Button>

            {/* 帮助文本 */}
            <Dialog>
              <DialogTrigger asChild>
                <button className="w-full text-center text-sm text-primary hover:text-primary/80 transition-colors underline-offset-4 hover:underline flex items-center justify-center gap-1">
                  <HelpCircle className="h-4 w-4" strokeWidth={2} fill="none" />
                  我没有 Token，我该去哪里获得 Token？
                </button>
              </DialogTrigger>
              <DialogContent className="sm:max-w-md">
                <DialogHeader>
                  <DialogTitle className="flex items-center gap-2">
                    <Lock className="h-5 w-5 text-primary" strokeWidth={2} fill="none" />
                    如何获取 Access Token
                  </DialogTitle>
                  <DialogDescription>
                    Access Token 是访问 MaiBot WebUI 的唯一凭证，请按以下方式获取
                  </DialogDescription>
                </DialogHeader>

                <div className="space-y-4">
                  {/* 方式一：查看控制台 */}
                  <div className="rounded-lg border bg-muted/50 p-4 space-y-2">
                    <div className="flex items-start gap-3">
                      <Terminal className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" strokeWidth={2} fill="none" />
                      <div className="flex-1 space-y-2">
                        <h4 className="font-semibold text-sm">方式一：查看启动日志</h4>
                        <p className="text-sm text-muted-foreground">
                          在 MaiBot 启动时，控制台会显示 WebUI Access Token。
                        </p>
                        <div className="rounded bg-background p-2 font-mono text-xs">
                          <p className="text-muted-foreground">🔑 WebUI Access Token: abc123...</p>
                          <p className="text-muted-foreground">💡 请使用此 Token 登录 WebUI</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* 方式二：查看配置文件 */}
                  <div className="rounded-lg border bg-muted/50 p-4 space-y-2">
                    <div className="flex items-start gap-3">
                      <FileText className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" strokeWidth={2} fill="none" />
                      <div className="flex-1 space-y-2">
                        <h4 className="font-semibold text-sm">方式二：查看配置文件</h4>
                        <p className="text-sm text-muted-foreground">
                          Token 保存在项目根目录的配置文件中：
                        </p>
                        <div className="rounded bg-background p-2 font-mono text-xs break-all">
                          <code className="text-primary">data/webui.json</code>
                        </div>
                        <p className="text-xs text-muted-foreground">
                          打开此文件，复制 <code className="px-1 py-0.5 bg-background rounded">access_token</code> 字段的值
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* 安全提示 */}
                  <div className="rounded-lg border border-yellow-200 dark:border-yellow-900 bg-yellow-50 dark:bg-yellow-950/30 p-3">
                    <div className="flex gap-2">
                      <AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" strokeWidth={2} fill="none" />
                      <div className="text-sm text-yellow-800 dark:text-yellow-300 space-y-1">
                        <p className="font-semibold">安全提示</p>
                        <ul className="list-disc list-inside space-y-0.5 text-xs">
                          <li>请妥善保管您的 Token，不要泄露给他人</li>
                          <li>如需重置 Token，请在登录后前往系统设置</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </DialogContent>
            </Dialog>

            {/* 性能优化选项 */}
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <button className="w-full text-center text-sm text-muted-foreground hover:text-foreground transition-colors underline-offset-4 hover:underline flex items-center justify-center gap-1">
                  <Zap className="h-4 w-4" strokeWidth={2} fill="none" />
                  我觉得这个界面很卡怎么办？
                </button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle className="flex items-center gap-2">
                    <Zap className="h-5 w-5 text-primary" strokeWidth={2} fill="none" />
                    关闭背景动画
                  </AlertDialogTitle>
                  <AlertDialogDescription>
                    背景动画可能会在低性能设备上造成卡顿。关闭动画可以显著提升界面流畅度。
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <div className="rounded-lg border bg-muted/50 p-4 space-y-2">
                  <p className="text-sm text-muted-foreground">
                    关闭动画后，背景将变为纯色，但不影响任何功能的使用。您可以随时在系统设置中重新开启动画。
                  </p>
                </div>
                <AlertDialogFooter>
                  <AlertDialogCancel>取消</AlertDialogCancel>
                  <AlertDialogAction
                    onClick={() => setEnableWavesBackground(false)}
                  >
                    关闭动画
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </form>
        </CardContent>
      </Card>

      {/* 页脚信息 */}
      <div className="absolute bottom-4 left-0 right-0 text-center text-xs text-muted-foreground">
        <p>{APP_FULL_NAME}</p>
      </div>
    </div>
  )
}