"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import {
  BanknoteIcon,
  CreditCardIcon,
  LandmarkIcon,
  Layers2Icon,
  Loader2Icon,
  MoreHorizontalIcon,
  PowerIcon,
  PowerOffIcon,
  PencilIcon,
  PlusIcon,
  SearchIcon,
  Trash2Icon,
  WalletCardsIcon,
} from "lucide-react"
import {
  deleteAccountAction,
  toggleAccountActiveAction,
  type AccountWithChannels,
} from "@/lib/actions/account"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { AccountDialog } from "./account-dialog"

const typeLabels = {
  BANK: "银行账户",
  E_WALLET: "电子钱包",
  CASH: "现金",
} as const
const balanceLabels = {
  ASSET: "资产类",
  LIABILITY: "负债类",
  EQUITY: "权益类",
} as const
const typeIcon = (type: AccountWithChannels["accountType"]) =>
  type === "BANK" ? (
    <LandmarkIcon className="size-4" />
  ) : type === "E_WALLET" ? (
    <WalletCardsIcon className="size-4" />
  ) : (
    <BanknoteIcon className="size-4" />
  )

export function AccountsView({
  initialAccounts,
}: {
  initialAccounts: AccountWithChannels[]
}) {
  const router = useRouter()
  const [accountsList, setAccountsList] = React.useState(initialAccounts)
  const [searchQuery, setSearchQuery] = React.useState("")
  const [typeFilter, setTypeFilter] = React.useState("ALL")
  const [balanceFilter, setBalanceFilter] = React.useState("ALL")
  const [dialogOpen, setDialogOpen] = React.useState(false)
  const [editingAccount, setEditingAccount] =
    React.useState<AccountWithChannels | null>(null)
  const [deletingAccount, setDeletingAccount] =
    React.useState<AccountWithChannels | null>(null)
  const [isDeleting, setIsDeleting] = React.useState(false)
  const [togglingId, setTogglingId] = React.useState<string | null>(null)
  const filteredAccounts = React.useMemo(() => {
    const query = searchQuery.trim().toLowerCase()
    return accountsList.filter((account) => {
      const text = [
        account.name,
        account.issuerName,
        account.platform,
        account.accountNumber,
        account.accountId,
        account.primaryCurrency,
        account.remark,
      ]
        .filter(Boolean)
        .join(" ")
        .toLowerCase()
      return (
        (!query || text.includes(query)) &&
        (typeFilter === "ALL" || account.accountType === typeFilter) &&
        (balanceFilter === "ALL" || account.balanceType === balanceFilter)
      )
    })
  }, [accountsList, balanceFilter, searchQuery, typeFilter])
  const groups = (
    Object.keys(balanceLabels) as Array<keyof typeof balanceLabels>
  )
    .map((balanceType) => ({
      balanceType,
      accounts: filteredAccounts.filter(
        (account) => account.balanceType === balanceType
      ),
    }))
    .filter((group) => group.accounts.length)
  const clearFilters = () => {
    setSearchQuery("")
    setTypeFilter("ALL")
    setBalanceFilter("ALL")
  }
  const hasFilters =
    Boolean(searchQuery) || typeFilter !== "ALL" || balanceFilter !== "ALL"
  const openCreate = () => {
    setEditingAccount(null)
    setDialogOpen(true)
  }
  const toggleActive = async (
    account: AccountWithChannels,
    checked: boolean
  ) => {
    setTogglingId(account.id)
    setAccountsList((items) =>
      items.map((item) =>
        item.id === account.id ? { ...item, isActive: checked } : item
      )
    )
    try {
      const result = await toggleAccountActiveAction(account.id, checked)
      if (!result.success)
        setAccountsList((items) =>
          items.map((item) =>
            item.id === account.id ? { ...item, isActive: !checked } : item
          )
        )
      else router.refresh()
    } catch {
      setAccountsList((items) =>
        items.map((item) =>
          item.id === account.id ? { ...item, isActive: !checked } : item
        )
      )
    } finally {
      setTogglingId(null)
    }
  }
  const confirmDelete = async () => {
    if (!deletingAccount) return
    setIsDeleting(true)
    try {
      const result = await deleteAccountAction(deletingAccount.id)
      if (result.success) {
        setAccountsList((items) =>
          items.filter((item) => item.id !== deletingAccount.id)
        )
        setDeletingAccount(null)
        router.refresh()
      }
    } finally {
      setIsDeleting(false)
    }
  }

  return (
    <TooltipProvider>
      <main className="flex min-w-0 flex-1 flex-col gap-4 p-4 md:p-6 lg:p-8">
        <div className="flex flex-col gap-4 border-b border-border/70 pb-5 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="mb-1 text-xs font-medium text-muted-foreground">
              资金管理
            </p>
            <h1 className="font-heading text-2xl font-semibold tracking-tight">
              资金账户
            </h1>
            <p className="mt-1 text-sm text-muted-foreground">
              按资产归属管理账户主体与结算币种。
            </p>
          </div>
          <Button onClick={openCreate} className="w-full sm:w-auto">
            <PlusIcon data-icon="inline-start" />
            新建账户
          </Button>
        </div>
        <div className="flex flex-col gap-2 md:flex-row md:items-center">
          <div className="relative min-w-0 flex-1 md:max-w-md">
            <SearchIcon className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              value={searchQuery}
              onChange={(event) => setSearchQuery(event.target.value)}
              placeholder="搜索账户、机构、账号或币种"
              className="pl-8"
            />
          </div>
          <div className="grid grid-cols-2 gap-2 sm:flex">
            <Select
              value={typeFilter}
              onValueChange={(value) => setTypeFilter(value ?? "ALL")}
            >
              <SelectTrigger className="w-full sm:w-32">
                <SelectValue>
                  {typeFilter === "ALL"
                    ? "全部类型"
                    : typeLabels[typeFilter as keyof typeof typeLabels]}
                </SelectValue>
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="ALL">全部类型</SelectItem>
                  <SelectItem value="BANK">银行账户</SelectItem>
                  <SelectItem value="E_WALLET">电子钱包</SelectItem>
                  <SelectItem value="CASH">现金</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <Select
              value={balanceFilter}
              onValueChange={(value) => setBalanceFilter(value ?? "ALL")}
            >
              <SelectTrigger className="w-full sm:w-32">
                <SelectValue>
                  {balanceFilter === "ALL"
                    ? "全部分类"
                    : balanceLabels[
                        balanceFilter as keyof typeof balanceLabels
                      ]}
                </SelectValue>
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="ALL">全部分类</SelectItem>
                  <SelectItem value="ASSET">资产类</SelectItem>
                  <SelectItem value="LIABILITY">负债类</SelectItem>
                  <SelectItem value="EQUITY">权益类</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
          {hasFilters && (
            <Button variant="ghost" size="sm" onClick={clearFilters}>
              清除筛选
            </Button>
          )}
        </div>
        {groups.length ? (
          <div className="flex flex-col gap-6">
            {groups.map(({ balanceType, accounts }) => (
              <section
                key={balanceType}
                aria-labelledby={`account-group-${balanceType}`}
              >
                <div className="mb-2 flex items-center gap-2">
                  <h2
                    id={`account-group-${balanceType}`}
                    className="text-sm font-semibold"
                  >
                    {balanceLabels[balanceType]}
                  </h2>
                  <span className="text-xs text-muted-foreground">
                    {accounts.length} 个账户
                  </span>
                </div>
                <div className="overflow-hidden rounded-lg border border-border/70 bg-card">
                  <div className="hidden grid-cols-[minmax(220px,1.6fr)_110px_110px_64px] gap-3 border-b bg-muted/30 px-4 py-2.5 text-[11px] font-medium text-muted-foreground md:grid">
                    <span>账户名称</span>
                    <span>账户类型</span>
                    <span>关联渠道</span>
                    <span />
                  </div>
                  {accounts.map((account) => {
                    const actionMenu = (
                      <DropdownMenu>
                        <Tooltip>
                          <TooltipTrigger
                            render={
                              <DropdownMenuTrigger
                                render={
                                  <Button
                                    variant="ghost"
                                    size="icon-sm"
                                    aria-label="打开账户操作"
                                  />
                                }
                              />
                            }
                          >
                            <MoreHorizontalIcon />
                          </TooltipTrigger>
                          <TooltipContent>更多操作</TooltipContent>
                        </Tooltip>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem
                            disabled={togglingId === account.id}
                            onClick={() =>
                              toggleActive(account, !account.isActive)
                            }
                          >
                            {account.isActive ? (
                              <PowerOffIcon data-icon="inline-start" />
                            ) : (
                              <PowerIcon data-icon="inline-start" />
                            )}
                            {account.isActive ? "停用账户" : "启用账户"}
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={() => {
                              setEditingAccount(account)
                              setDialogOpen(true)
                            }}
                          >
                            <PencilIcon data-icon="inline-start" />
                            编辑账户
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem
                            variant="destructive"
                            onClick={() => setDeletingAccount(account)}
                          >
                            <Trash2Icon data-icon="inline-start" />
                            删除账户
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    )

                    return (
                      <div
                        key={account.id}
                        className={`grid gap-3 border-b border-border/60 px-4 py-3 last:border-b-0 md:grid-cols-[minmax(220px,1.6fr)_110px_110px_64px] md:items-center ${!account.isActive ? "opacity-60" : ""}`}
                      >
                        <div className="flex min-w-0 items-center justify-between gap-3">
                          <div className="flex min-w-0 items-center gap-3">
                            <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
                              {typeIcon(account.accountType)}
                            </span>
                            <div className="min-w-0">
                              <div className="flex min-w-0 items-center gap-2">
                                <p className="truncate text-sm font-medium">
                                  {account.name}
                                </p>
                                {!account.isActive && (
                                  <Badge variant="secondary">已停用</Badge>
                                )}
                              </div>
                              <p className="truncate text-xs text-muted-foreground">
                                {account.issuerName ||
                                  account.platform ||
                                  account.location ||
                                  account.remark ||
                                  ""}
                              </p>
                            </div>
                          </div>
                          <div className="shrink-0 md:hidden">{actionMenu}</div>
                        </div>
                        <div className="flex justify-between text-xs md:block">
                          <span className="text-muted-foreground md:hidden">
                            类型
                          </span>
                          {typeLabels[account.accountType]}
                        </div>
                        <div className="flex justify-between text-xs md:block">
                          <span className="text-muted-foreground md:hidden">
                            关联渠道
                          </span>
                          <span className="inline-flex items-center gap-1">
                            <CreditCardIcon className="size-3.5 text-muted-foreground" />
                            {account.channelCount} 个
                          </span>
                        </div>
                        <div className="hidden md:flex md:justify-end">
                          {actionMenu}
                        </div>
                      </div>
                    )
                  })}
                </div>
              </section>
            ))}
          </div>
        ) : (
          <div className="flex min-h-56 flex-col items-center justify-center rounded-lg border border-dashed border-border px-6 py-10 text-center">
            <Layers2Icon className="size-6 text-muted-foreground" />
            <h2 className="mt-3 text-sm font-semibold">
              {hasFilters ? "没有符合条件的账户" : "还没有资金账户"}
            </h2>
            <p className="mt-1 text-xs text-muted-foreground">
              {hasFilters
                ? "调整关键词或筛选条件后再试。"
                : "创建账户后即可关联支付渠道。"}
            </p>
            <div className="mt-4 flex gap-2">
              {hasFilters && (
                <Button variant="outline" size="sm" onClick={clearFilters}>
                  清除筛选
                </Button>
              )}
              <Button size="sm" onClick={openCreate}>
                <PlusIcon data-icon="inline-start" />
                新建账户
              </Button>
            </div>
          </div>
        )}
        <AccountDialog
          key={`${dialogOpen}-${editingAccount?.id ?? "new"}`}
          open={dialogOpen}
          onOpenChange={setDialogOpen}
          account={editingAccount}
          onSuccess={() => router.refresh()}
        />
        <Dialog
          open={Boolean(deletingAccount)}
          onOpenChange={(open) => !open && setDeletingAccount(null)}
        >
          <DialogContent className="sm:max-w-sm">
            <DialogHeader>
              <DialogTitle>确认删除账户</DialogTitle>
              <DialogDescription>
                将删除「{deletingAccount?.name}
                」。删除后不可恢复，历史关联记录会保留。
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button
                variant="outline"
                onClick={() => setDeletingAccount(null)}
                disabled={isDeleting}
              >
                取消
              </Button>
              <Button
                variant="destructive"
                onClick={confirmDelete}
                disabled={isDeleting}
              >
                {isDeleting && (
                  <Loader2Icon
                    data-icon="inline-start"
                    className="animate-spin"
                  />
                )}
                确认删除
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </main>
    </TooltipProvider>
  )
}