import { createFileRoute } from '@tanstack/react-router'
import { PERM, requirePermission } from '@/auth/permissions'
import { useQuery } from '@tanstack/react-query'
import { useEffect, useState } from 'react'
import type { ColumnDef } from '@tanstack/react-table'
import { toast } from 'sonner'
import type { RoleUser } from '@/api/types'
import { fetchRoles, searchRoleUsers, syncUserRoles } from '@/api/modules/roles'
import { useAuthStore } from '@/auth/store'
import { handleApiError } from '@/lib/errors'
import { DataTable } from '@/components/data-table/data-table'
import { PageHeader } from '@/components/page-header'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'

export const Route = createFileRoute('/_authed/admin-users')({
  beforeLoad: () => requirePermission(PERM.ROLE_ASSIGN),
  component: AdminUsersPage,
})

function AdminUsersPage() {
  const myUid = useAuthStore((s) => s.user?.uid)
  // search applies on Enter to avoid a request per keystroke
  const [queryInput, setQueryInput] = useState('')
  const [query, setQuery] = useState('')
  const [editing, setEditing] = useState<RoleUser | null>(null)

  const results = useQuery({
    queryKey: ['role-users', query],
    queryFn: () => searchRoleUsers(query),
    enabled: query.length > 0,
  })

  const columns: ColumnDef<RoleUser>[] = [
    {
      header: '用户',
      cell: ({ row }) => (
        <div>
          <div className="font-medium">{row.original.display_name ?? row.original.username ?? '—'}</div>
          <div className="text-xs text-muted-foreground">
            {row.original.email}
            <code className="ml-2 font-mono">{row.original.uid}</code>
          </div>
        </div>
      ),
    },
    {
      header: '角色',
      cell: ({ row }) =>
        row.original.roles.length > 0 ? (
          <div className="flex flex-wrap gap-1">
            {row.original.roles.map((role) => (
              <Badge key={role} variant="secondary">
                {role}
              </Badge>
            ))}
          </div>
        ) : (
          '—'
        ),
    },
    {
      header: '操作',
      cell: ({ row }) =>
        row.original.uid === myUid ? (
          <span className="text-xs text-muted-foreground">不能修改自己</span>
        ) : (
          <Button size="sm" variant="outline" onClick={() => setEditing(row.original)}>
            分配角色
          </Button>
        ),
    },
  ]

  return (
    <div>
      <PageHeader
        title="用户角色"
        description="搜索用户并分配角色（不能修改自己的角色）"
        actions={
          <Input
            value={queryInput}
            onChange={(e) => setQueryInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') setQuery(queryInput.trim())
            }}
            placeholder="邮箱 / 用户名 / UID，回车搜索"
            className="h-8 w-64"
          />
        }
      />
      <DataTable
        columns={columns}
        data={results.data?.data ?? []}
        loading={query.length > 0 && results.isPending}
        emptyText={query ? '没有匹配的用户' : '输入关键字并回车搜索'}
      />
      <AssignRolesDialog
        user={editing}
        onClose={() => setEditing(null)}
        onSaved={() => void results.refetch()}
      />
    </div>
  )
}

function AssignRolesDialog({
  user,
  onClose,
  onSaved,
}: {
  user: RoleUser | null
  onClose: () => void
  onSaved: () => void
}) {
  const roles = useQuery({ queryKey: ['roles'], queryFn: fetchRoles, enabled: user !== null })
  const [selected, setSelected] = useState<Set<string>>(new Set())
  const [busy, setBusy] = useState(false)

  useEffect(() => {
    setSelected(new Set(user?.roles ?? []))
  }, [user])

  const toggle = (name: string, checked: boolean) => {
    setSelected((prev) => {
      const next = new Set(prev)
      if (checked) next.add(name)
      else next.delete(name)
      return next
    })
  }

  const save = async () => {
    if (!user) return
    setBusy(true)
    try {
      await syncUserRoles(user.uid, [...selected])
      toast.success(`已更新 ${user.display_name ?? user.email} 的角色`)
      onSaved()
      onClose()
    } catch (error) {
      handleApiError(error)
    } finally {
      setBusy(false)
    }
  }

  return (
    <Dialog open={user !== null} onOpenChange={(open) => !open && onClose()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>分配角色：{user?.display_name ?? user?.email}</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-2">
          {(roles.data?.data ?? []).map((role) => (
            <label key={role.name} className="flex items-center gap-2 text-sm">
              <Checkbox
                checked={selected.has(role.name)}
                onCheckedChange={(checked) => toggle(role.name, checked === true)}
              />
              <span className="font-medium">{role.name}</span>
              {role.builtin && <Badge variant="secondary">内建</Badge>}
              <span className="ml-auto text-xs text-muted-foreground">
                {role.name === 'super-admin' ? '全部权限' : `${role.permissions.length} 项权限`}
              </span>
            </label>
          ))}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            取消
          </Button>
          <Button onClick={save} disabled={busy}>
            {busy ? '保存中…' : '保存'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}