import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { motion } from 'framer-motion'
import {
  Plus,
  Copy,
  Trash2,
  ArrowLeft,
  ToggleLeft,
  ToggleRight,
  Loader2,
  Check,
  AlertCircle,
} from 'lucide-react'
import { api } from '@/lib/api'
import { toast } from '@/components/Toast'
import { Logo } from '@/components/Logo'

const BRAND = '#8B5CF6'

function formatTime(ts: number) {
  const d = new Date(ts * 1000)
  return d.toLocaleString('zh-CN')
}

export function AdminUuids() {
  const navigate = useNavigate()
  const qc = useQueryClient()
  const [label, setLabel] = useState('')
  const [copied, setCopied] = useState<string | null>(null)

  const { data: records = [], isLoading } = useQuery({
    queryKey: ['admin-uuids'],
    queryFn: () => api.listUuids(),
  })

  const create = useMutation({
    mutationFn: () => api.createUuid(label),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['admin-uuids'] })
      setLabel('')
      toast('已创建新 UUID', 'success')
    },
    onError: (err: any) => toast(err?.message || '创建失败', 'error'),
  })

  const toggle = useMutation({
    mutationFn: ({ uuid, enabled }: { uuid: string; enabled: boolean }) =>
      api.toggleUuid(uuid, enabled),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['admin-uuids'] }),
    onError: (err: any) => toast(err?.message || '操作失败', 'error'),
  })

  const remove = useMutation({
    mutationFn: (uuid: string) => api.deleteUuid(uuid),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['admin-uuids'] })
      toast('已删除', 'success')
    },
    onError: (err: any) => toast(err?.message || '删除失败', 'error'),
  })

  const handleCopy = async (uuid: string) => {
    try {
      await navigator.clipboard.writeText(uuid)
      setCopied(uuid)
      setTimeout(() => setCopied(null), 1500)
    } catch {
      toast('复制失败', 'error')
    }
  }

  return (
    <div className="relative min-h-screen bg-base overflow-hidden flex flex-col">
      {/* 背景光晕 */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div
          className="absolute -top-40 -left-40 h-[28rem] w-[28rem] rounded-full blur-[120px] opacity-20"
          style={{ background: `radial-gradient(circle, ${BRAND}, transparent 70%)` }}
        />
        <div
          className="absolute -bottom-40 -right-32 h-[26rem] w-[26rem] rounded-full blur-[120px] opacity-15"
          style={{ background: 'radial-gradient(circle, hsl(var(--accent)), transparent 70%)' }}
        />
      </div>

      {/* 顶栏 */}
      <header className="relative z-10 flex items-center justify-between px-6 py-4 border-b border-border">
        <div className="flex items-center gap-2.5 text-foreground">
          <Logo
            size={24}
            className="shrink-0"
            style={{ color: BRAND, filter: `drop-shadow(0 0 8px ${BRAND}55)` }}
          />
          <span className="text-sm font-semibold tracking-tight">Stock Panel</span>
        </div>
        <button
          onClick={() => navigate('/')}
          className="inline-flex items-center gap-1.5 px-3 h-9 rounded-btn text-sm text-secondary hover:text-foreground hover:bg-elevated transition-colors"
        >
          <ArrowLeft className="h-4 w-4" />
          返回首页
        </button>
      </header>

      {/* 内容 */}
      <main className="relative z-10 flex-1 px-6 py-10">
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
          className="max-w-3xl mx-auto"
        >
          <div className="rounded-card border border-border bg-surface/80 backdrop-blur-sm p-6">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-xl font-bold text-foreground">访问 UUID 管理</h1>
                <p className="mt-1 text-sm text-secondary">为合伙人创建、分发和管理访问 UUID。</p>
              </div>
            </div>

            {/* 创建区 */}
            <div className="mt-6 flex items-center gap-3">
              <input
                type="text"
                placeholder="备注(可选)"
                value={label}
                onChange={(e) => setLabel(e.target.value)}
                className="flex-1 px-3 py-2 rounded-input bg-base border border-border text-sm focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/30 transition-all"
              />
              <button
                onClick={() => create.mutate()}
                disabled={create.isPending}
                className="inline-flex items-center gap-2 px-4 h-10 rounded-xl bg-accent text-white text-sm font-semibold hover:bg-accent/90 disabled:opacity-60 transition-all"
              >
                {create.isPending ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Plus className="h-4 w-4" />
                )}
                创建 UUID
              </button>
            </div>

            {/* 列表 */}
            <div className="mt-6 border border-border rounded-card overflow-hidden">
              {isLoading ? (
                <div className="flex items-center justify-center py-12">
                  <Loader2 className="h-6 w-6 animate-spin text-accent" />
                </div>
              ) : records.length === 0 ? (
                <div className="py-12 text-center text-sm text-secondary">
                  暂无 UUID,点击上方按钮创建第一个。
                </div>
              ) : (
                <table className="w-full text-sm">
                  <thead className="bg-elevated/50 text-secondary">
                    <tr>
                      <th className="text-left px-4 py-2.5 font-medium">UUID</th>
                      <th className="text-left px-4 py-2.5 font-medium">备注</th>
                      <th className="text-left px-4 py-2.5 font-medium">创建时间</th>
                      <th className="text-left px-4 py-2.5 font-medium">状态</th>
                      <th className="text-right px-4 py-2.5 font-medium">操作</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {records.map((r) => (
                      <tr key={r.uuid} className="hover:bg-elevated/30 transition-colors">
                        <td className="px-4 py-3 font-mono text-xs text-foreground">
                          <div className="flex items-center gap-2">
                            <span className="truncate max-w-[12rem]">{r.uuid}</span>
                            <button
                              onClick={() => handleCopy(r.uuid)}
                              className="text-muted hover:text-accent transition-colors"
                              title="复制"
                            >
                              {copied === r.uuid ? (
                                <Check className="h-3.5 w-3.5 text-bull" />
                              ) : (
                                <Copy className="h-3.5 w-3.5" />
                              )}
                            </button>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-secondary">{r.label || '—'}</td>
                        <td className="px-4 py-3 text-secondary">{formatTime(r.created_at)}</td>
                        <td className="px-4 py-3">
                          <button
                            onClick={() => toggle.mutate({ uuid: r.uuid, enabled: !r.enabled })}
                            disabled={toggle.isPending}
                            className="text-muted hover:text-accent transition-colors"
                            title={r.enabled ? '禁用' : '启用'}
                          >
                            {r.enabled ? (
                              <ToggleRight className="h-5 w-5 text-bull" />
                            ) : (
                              <ToggleLeft className="h-5 w-5 text-muted" />
                            )}
                          </button>
                        </td>
                        <td className="px-4 py-3 text-right">
                          <button
                            onClick={() => remove.mutate(r.uuid)}
                            disabled={remove.isPending}
                            className="inline-flex items-center gap-1 text-xs text-danger hover:text-danger/80 transition-colors"
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                            删除
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>

            <div className="mt-4 flex items-start gap-2 text-xs text-secondary">
              <AlertCircle className="h-3.5 w-3.5 mt-px shrink-0" />
              <span>提示:禁用 UUID 后,持有该 UUID 的合伙人将无法继续访问,但不会删除记录。</span>
            </div>
          </div>
        </motion.div>
      </main>
    </div>
  )
}