'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { KeyRound, Shield, Terminal } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import { AdminUnauthorizedError, API_BASE, adminFetchJson, clearAdminToken } from '@/lib/admin-api'

export default function SettingsPage() {
  const router = useRouter()
  const [username, setUsername] = useState<string>('')
  const [tokenExp, setTokenExp] = useState<number | null>(null)
  const [healthOk, setHealthOk] = useState<boolean | null>(null)

  const [oldPassword, setOldPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')

  const [isSaving, setIsSaving] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  const fetchMe = async () => {
    setError('')
    try {
      const data = await adminFetchJson<{ username?: string; exp?: number }>('/api/v1/admin/me')
      setUsername(data.username || '')
      setTokenExp(typeof data.exp === 'number' ? data.exp : null)
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '加载失败')
    }
  }

  const fetchHealth = async () => {
    try {
      const res = await fetch(`${API_BASE}/health`)
      setHealthOk(res.ok)
    } catch {
      setHealthOk(false)
    }
  }

  useEffect(() => {
    fetchMe()
    fetchHealth()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

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

    if (!oldPassword.trim() || !newPassword.trim()) {
      setError('请输入原密码和新密码')
      return
    }
    if (newPassword.trim().length < 8) {
      setError('新密码至少 8 位')
      return
    }
    if (newPassword !== confirmPassword) {
      setError('两次输入的新密码不一致')
      return
    }

    setIsSaving(true)
    try {
      await adminFetchJson('/api/v1/admin/change-password', {
        method: 'POST',
        body: JSON.stringify({
          old_password: oldPassword,
          new_password: newPassword,
        }),
      })
      setSuccess('密码已更新，请重新登录')
      clearAdminToken()
      router.replace('/login')
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '更新失败')
    } finally {
      setIsSaving(false)
    }
  }

  const expText = tokenExp ? new Date(tokenExp * 1000).toLocaleString() : '未知'

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">设置</h1>
        <p className="text-sm text-muted-foreground">账号安全与系统信息</p>
      </div>

      {(error || success) && (
        <div
          className={
            success
              ? 'rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300'
              : 'rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive'
          }
        >
          {success || error}
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="border-muted bg-background/50 backdrop-blur-sm">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="h-5 w-5" />
              账号安全
            </CardTitle>
            <CardDescription>查看登录信息并更新管理员密码</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="rounded-md border bg-background p-4 space-y-2">
              <div className="text-sm text-muted-foreground">当前用户</div>
              <div className="flex items-center gap-2">
                <div className="text-lg font-semibold">{username || '—'}</div>
                {username && <Badge variant="secondary">管理员</Badge>}
              </div>
              <div className="text-xs text-muted-foreground">Token 过期时间：{expText}</div>
            </div>

            <form onSubmit={handleChangePassword} className="space-y-4">
              <div className="space-y-1.5">
                <Label>原密码</Label>
                <Input
                  type="password"
                  value={oldPassword}
                  onChange={(e) => setOldPassword(e.target.value)}
                  autoComplete="current-password"
                />
              </div>
              <div className="space-y-1.5">
                <Label>新密码</Label>
                <Input
                  type="password"
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  autoComplete="new-password"
                />
                <div className="text-xs text-muted-foreground">至少 8 位</div>
              </div>
              <div className="space-y-1.5">
                <Label>确认新密码</Label>
                <Input
                  type="password"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  autoComplete="new-password"
                />
              </div>

              <Button type="submit" disabled={isSaving} className="w-full">
                <KeyRound className="mr-2 h-4 w-4" />
                {isSaving ? '更新中...' : '更新密码'}
              </Button>
            </form>
          </CardContent>
        </Card>

        <Card className="border-muted bg-background/50 backdrop-blur-sm">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Terminal className="h-5 w-5" />
              系统信息
            </CardTitle>
            <CardDescription>当前 API Base 与健康检查</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="rounded-md border bg-background p-4 space-y-2">
              <div className="text-sm text-muted-foreground">API Base URL</div>
              <div className="font-mono text-xs break-all">{API_BASE}</div>
            </div>

            <div className="rounded-md border bg-background p-4 space-y-2">
              <div className="text-sm text-muted-foreground">API 健康</div>
              <div className="flex items-center gap-2">
                {healthOk === null ? (
                  <Badge variant="outline">未知</Badge>
                ) : healthOk ? (
                  <Badge variant="success">OK</Badge>
                ) : (
                  <Badge variant="destructive">异常</Badge>
                )}
                <Button variant="outline" size="sm" onClick={fetchHealth}>
                  刷新
                </Button>
              </div>
            </div>

            <div className="text-xs text-muted-foreground">
              若健康检查异常，请确认后端服务可访问，并检查数据库/Redis 配置。
            </div>

            <Button
              variant="destructive"
              onClick={() => {
                clearAdminToken()
                router.replace('/login')
              }}
            >
              退出登录
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}