import { useState, type FormEvent } from "react"
import { Loader2Icon, SearchIcon, XIcon } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { useAdminBorrows, useSearchBorrows, useAdminReturnBook } from "./hooks"
import { useIsMobile } from "@/hooks/useIsMobile"
import { formatDateTime } from "@/lib/formatters"
import { getErrorMessage } from "@/lib/errors"
import type { BorrowInfoVo } from "@/types/api"

export default function AdminBorrowsPage() {
  const isMobile = useIsMobile()
  const sel = { "data-selectable": true } as const

  const [searchText, setSearchText] = useState("")
  const [submitted, setSubmitted] = useState("")

  const isSearching = submitted.length > 0
  const allQuery = useAdminBorrows()
  const searchQuery = useSearchBorrows(submitted)
  const { data, isLoading, error } = isSearching ? searchQuery : allQuery

  function doSearch(e: FormEvent) {
    e.preventDefault()
    setSubmitted(searchText.trim())
  }

  function clearSearch() {
    setSearchText("")
    setSubmitted("")
  }

  const returnMutation = useAdminReturnBook()
  const [returnTarget, setReturnTarget] = useState<BorrowInfoVo | null>(null)

  const list = data ?? []

  const content = isLoading ? (
    <AdminBorrowsSkeleton isMobile={isMobile} />
  ) : error ? (
    <div className="rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">
      加载失败：{getErrorMessage(error)}
    </div>
  ) : list.length === 0 ? (
    <p className="py-16 text-center text-muted-foreground">
      {isSearching ? "无匹配记录" : "暂无借阅记录"}
    </p>
  ) : !isMobile ? (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[60px]">ID</TableHead>
          <TableHead>书名</TableHead>
          <TableHead>借阅用户</TableHead>
          <TableHead>借阅时间</TableHead>
          <TableHead>归还时间</TableHead>
          <TableHead>状态</TableHead>
          <TableHead className="w-[110px]">操作</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {list.map((r) => (
          <BorrowRow
            key={r.id}
            record={r}
            isMobile={false}
            returning={returnMutation.isPending}
            onReturn={() => setReturnTarget(r)}
            sel={sel}
          />
        ))}
      </TableBody>
    </Table>
  ) : (
    <div className="space-y-3">
      {list.map((r) => (
        <Card key={r.id}>
          <CardContent className="space-y-1.5 p-4">
            <BorrowRow
              record={r}
              isMobile
              returning={returnMutation.isPending}
              onReturn={() => setReturnTarget(r)}
              sel={sel}
            />
          </CardContent>
        </Card>
      ))}
    </div>
  )

  return (
    <div>
      <h1 className="mb-4 text-xl font-semibold">借阅管理</h1>
      <form onSubmit={doSearch} className="mb-4 flex gap-2">
        <div className="relative flex-1 max-w-sm">
          <Input
            placeholder="搜索借阅记录（书名/用户名）..."
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
          />
          {isSearching && (
            <button
              type="button"
              onClick={clearSearch}
              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            >
              <XIcon className="size-4" />
            </button>
          )}
        </div>
        <Button type="submit" size="icon-sm" variant="outline">
          <SearchIcon className="size-4" />
        </Button>
      </form>

      {content}

      <AlertDialog open={!!returnTarget} onOpenChange={(o) => !o && setReturnTarget(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认归还</AlertDialogTitle>
            <AlertDialogDescription>
              确定要代 {returnTarget?.userBorrowVo.username} 归还《{returnTarget?.bookBorrowVo.name}》吗？
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={returnMutation.isPending}>取消</AlertDialogCancel>
            <AlertDialogAction
              disabled={returnMutation.isPending}
              onClick={() => returnMutation.mutateAsync(returnTarget!.id).then(() => setReturnTarget(null))}
            >
              {returnMutation.isPending && <Loader2Icon className="animate-spin" />}
              确认归还
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

function BorrowRow({
  record,
  isMobile,
  returning,
  onReturn,
  sel,
}: {
  record: BorrowInfoVo
  isMobile: boolean
  returning: boolean
  onReturn: () => void
  sel: Record<string, unknown>
}) {
  const statusBadge = (
    <Badge variant={record.status === "BORROWED" ? "default" : "secondary"}>
      {record.status === "BORROWED" ? "借阅中" : "已归还"}
    </Badge>
  )

  const returnButton = record.status === "BORROWED" && (
    <Button size={isMobile ? "sm" : "xs"} variant="outline" disabled={returning} onClick={onReturn}>
      {returning && <Loader2Icon className="animate-spin" />}
      代为归还
    </Button>
  )

  if (!isMobile) {
    return (
      <TableRow>
        <TableCell>{record.id}</TableCell>
        <TableCell className="font-medium" {...sel}>{record.bookBorrowVo?.name ?? "-"}</TableCell>
        <TableCell>{record.userBorrowVo.username}</TableCell>
        <TableCell>{formatDateTime(record.borrowTime)}</TableCell>
        <TableCell>{record.returnTime ? formatDateTime(record.returnTime) : "-"}</TableCell>
        <TableCell>{statusBadge}</TableCell>
        <TableCell>{returnButton}</TableCell>
      </TableRow>
    )
  }

  return (
    <>
      <div className="flex items-center justify-between">
        <span className="text-xs text-muted-foreground">#{record.id}</span>
        {statusBadge}
      </div>
      <div className="font-medium" {...sel}>{record.bookBorrowVo?.name ?? "-"}</div>
      <div className="text-sm text-muted-foreground">借阅人：{record.userBorrowVo.username}</div>
      <div className="text-sm text-muted-foreground">
        借阅：{formatDateTime(record.borrowTime)}
        {record.returnTime && ` | 归还：${formatDateTime(record.returnTime)}`}
      </div>
      {returnButton && <div className="pt-1">{returnButton}</div>}
    </>
  )
}

function AdminBorrowsSkeleton({ isMobile }: { isMobile: boolean }) {
  if (isMobile) {
    return (
      <div className="space-y-3">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i}>
            <CardContent className="space-y-2 p-4">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-5 w-36" />
              <Skeleton className="h-4 w-28" />
              <Skeleton className="h-4 w-40" />
            </CardContent>
          </Card>
        ))}
      </div>
    )
  }
  return (
    <div className="space-y-2">
      {Array.from({ length: 5 }).map((_, i) => (
        <Skeleton key={i} className="h-10 w-full" />
      ))}
    </div>
  )
}
