'use client'

import { useState } from 'react'
import useSWR from 'swr'
import {
  Plus,
  Loader2,
  ChevronLeft,
  ChevronRight,
  Trash2,
  Copy,
  Check,
  AlertTriangle,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from '@/components/ui/dialog'
import { api } from '@/lib/api-client'
import { ErrorBanner, EmptyState } from '@/components/ui/state'
import { ApiRequestError } from '@/lib/api-client'
import { formatDate, getSwrErrorMessage } from '@/lib/utils'
import { TableSkeleton } from '@/components/ui/skeleton'
import type { TokenInfo } from '@/lib/types'

const PAGE_SIZE = 20

const allPermissions = [
  { key: 'chat', label: '对话' },
  { key: 'relay', label: '中转' },
  { key: 'admin', label: '管理' },
]

export default function ApiKeysPage() {
  const [page, setPage] = useState(1)
  const [mutationError, setMutationError] = useState('')

  const { data, error: swrError, isLoading, mutate } = useSWR(
    ['tokens', page],
    () => api.tokens.list({ page, page_size: PAGE_SIZE }),
  )

  const tokens = data?.items ?? []
  const total = data?.total ?? 0
  const error = getSwrErrorMessage(swrError) || mutationError

  // 创建 Dialog
  const [createOpen, setCreateOpen] = useState(false)
  const [createForm, setCreateForm] = useState({ name: '', expires_days: '', permissions: ['chat'] as string[] })
  const [creating, setCreating] = useState(false)

  // 创建成功显示 token
  const [createdToken, setCreatedToken] = useState<TokenInfo | null>(null)
  const [copied, setCopied] = useState(false)

  // 撤销确认
  const [revokeTarget, setRevokeTarget] = useState<TokenInfo | null>(null)
  const [revoking, setRevoking] = useState(false)

  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))

  function togglePermission(perm: string) {
    setCreateForm((prev) => ({
      ...prev,
      permissions: prev.permissions.includes(perm)
        ? prev.permissions.filter((p) => p !== perm)
        : [...prev.permissions, perm],
    }))
  }

  async function handleCreate() {
    if (!createForm.name.trim() || createForm.permissions.length === 0) return
    setCreating(true)
    try {
      const payload = {
        name: createForm.name.trim(),
        expires_days: createForm.expires_days ? parseInt(createForm.expires_days, 10) : undefined,
        permissions: createForm.permissions,
      }
      const res = await api.tokens.create(payload)
      setCreateOpen(false)
      setCreatedToken(res)
      setCreateForm({ name: '', expires_days: '', permissions: ['chat'] })
      mutate()
    } catch (err) {
      if (err instanceof ApiRequestError) setMutationError(err.body.message)
    } finally {
      setCreating(false)
    }
  }

  async function handleRevoke() {
    if (!revokeTarget) return
    setRevoking(true)
    try {
      await api.tokens.revoke(revokeTarget.id)
      setRevokeTarget(null)
      mutate()
    } catch (err) {
      if (err instanceof ApiRequestError) setMutationError(err.body.message)
    } finally {
      setRevoking(false)
    }
  }

  async function copyToken() {
    if (!createdToken?.token) return
    try {
      await navigator.clipboard.writeText(createdToken.token)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch {
      // Fallback
      const textarea = document.createElement('textarea')
      textarea.value = createdToken.token
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div />
        <Button onClick={() => setCreateOpen(true)}>
          <Plus className="h-4 w-4 mr-2" />
          新建密钥
        </Button>
      </div>

      {error && <ErrorBanner message={error} onDismiss={() => setMutationError('')} />}

      {isLoading ? (
        <TableSkeleton rows={6} cols={7} />
      ) : error ? null : tokens.length === 0 ? (
        <EmptyState />
      ) : (
        <>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>名称</TableHead>
                <TableHead>前缀</TableHead>
                <TableHead>权限</TableHead>
                <TableHead>最后使用</TableHead>
                <TableHead>过期时间</TableHead>
                <TableHead>创建时间</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {tokens.map((t) => (
                <TableRow key={t.id}>
                  <TableCell className="font-medium">{t.name}</TableCell>
                  <TableCell className="font-mono text-xs text-muted-foreground">
                    {t.token_prefix}...
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      {t.permissions.map((p) => (
                        <Badge key={p} variant="outline" className="text-xs">
                          {p}
                        </Badge>
                      ))}
                    </div>
                  </TableCell>
                  <TableCell className="font-mono text-xs text-muted-foreground">
                    {t.last_used_at ? formatDate(t.last_used_at) : '未使用'}
                  </TableCell>
                  <TableCell className="font-mono text-xs text-muted-foreground">
                    {t.expires_at ? formatDate(t.expires_at) : '永不过期'}
                  </TableCell>
                  <TableCell className="font-mono text-xs text-muted-foreground">
                    {formatDate(t.created_at)}
                  </TableCell>
                  <TableCell className="text-right">
                    <Button variant="ghost" size="icon" onClick={() => setRevokeTarget(t)} title="撤销">
                      <Trash2 className="h-4 w-4 text-destructive" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

          <div className="flex items-center justify-between text-sm">
            <p className="text-muted-foreground">
              第 {page} 页 / 共 {totalPages} 页 ({total} 条)
            </p>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
                <ChevronLeft className="h-4 w-4 mr-1" />
                上一页
              </Button>
              <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
                下一页
                <ChevronRight className="h-4 w-4 ml-1" />
              </Button>
            </div>
          </div>
        </>
      )}

      {/* 创建 Dialog */}
      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>新建 API 密钥</DialogTitle>
            <DialogDescription>创建新的 API 密钥用于接口调用</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>名称 *</Label>
              <Input
                value={createForm.name}
                onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
                placeholder="例如: 生产环境"
              />
            </div>
            <div className="space-y-2">
              <Label>过期天数 (留空则永不过期)</Label>
              <Input
                type="number"
                value={createForm.expires_days}
                onChange={(e) => setCreateForm({ ...createForm, expires_days: e.target.value })}
                placeholder="365"
              />
            </div>
            <div className="space-y-2">
              <Label>权限 *</Label>
              <div className="flex flex-wrap gap-3 mt-1">
                {allPermissions.map((perm) => (
                  <label
                    key={perm.key}
                    className="flex items-center gap-2 cursor-pointer"
                  >
                    <input
                      type="checkbox"
                      checked={createForm.permissions.includes(perm.key)}
                      onChange={() => togglePermission(perm.key)}
                      className="h-4 w-4 rounded border-input bg-transparent accent-primary cursor-pointer"
                    />
                    <span className="text-sm text-foreground">{perm.label}</span>
                  </label>
                ))}
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateOpen(false)}>取消</Button>
            <Button onClick={handleCreate} disabled={creating || !createForm.name.trim() || createForm.permissions.length === 0}>
              {creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              创建
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 创建成功 Dialog */}
      <Dialog open={!!createdToken} onOpenChange={() => setCreatedToken(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-yellow-400" />
              密钥已创建
            </DialogTitle>
            <DialogDescription>
              请立即复制并安全保存此密钥，关闭后将无法再次查看完整密钥。
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="rounded-md bg-muted p-4">
              <p className="text-xs text-muted-foreground mb-2">完整密钥</p>
              <p className="font-mono text-sm break-all text-foreground">
                {createdToken?.token}
              </p>
            </div>
            <div className="rounded-md bg-yellow-500/10 border border-yellow-500/20 p-3 text-sm text-yellow-400">
              此密钥仅显示一次。请确保已保存到安全的位置。
            </div>
          </div>
          <DialogFooter>
            <Button onClick={copyToken} variant="outline">
              {copied ? <Check className="h-4 w-4 mr-2" /> : <Copy className="h-4 w-4 mr-2" />}
              {copied ? '已复制' : '复制密钥'}
            </Button>
            <Button onClick={() => setCreatedToken(null)}>我已保存</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 撤销确认 */}
      <Dialog open={!!revokeTarget} onOpenChange={() => setRevokeTarget(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>确认撤销</DialogTitle>
            <DialogDescription>
              确定要撤销密钥 &quot;{revokeTarget?.name}&quot; 吗？使用此密钥的应用将立即失去访问权限。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRevokeTarget(null)}>取消</Button>
            <Button variant="destructive" onClick={handleRevoke} disabled={revoking}>
              {revoking && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              撤销
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}