"use client"
import { format } from "date-fns"
import { Suspense, useState } from "react"
import { toast } from "sonner"
import {
  deleteProductDiscount,
  getPageProductDiscount,
} from "@/actions/product_discount"
import { DataTable, useDataTable } from "@/components/data-table"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import type { ProductDiscount } from "@/models/product_discount"
import { CreateDiscount } from "./create"
import { UpdateDiscount } from "./update"

export default function DiscountPage() {
  const table = useDataTable((page, size) =>
    getPageProductDiscount({ page, size }),
  )

  return (
    <div className="flex flex-col gap-3">
      {/* 操作栏 */}
      <div className="flex justify-between items-stretch">
        <div className="flex gap-3">
          <CreateDiscount onSuccess={table.refresh} />
        </div>
      </div>

      {/* 数据表 */}
      <Suspense>
        <DataTable<ProductDiscount>
          {...table}
          columns={[
            { header: "名称", accessorKey: "name" },
            { header: "折扣", accessorKey: "discount" },
            {
              header: "创建时间",
              accessorKey: "created_at",
              cell: ({ row }) =>
                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
            },
            {
              header: "更新时间",
              accessorKey: "updated_at",
              cell: ({ row }) =>
                format(new Date(row.original.updated_at), "yyyy-MM-dd HH:mm"),
            },
            {
              id: "action",
              meta: { pin: "right" },
              header: "操作",
              cell: ({ row }) => (
                <div className="flex gap-2">
                  <UpdateDiscount
                    discount={row.original}
                    onSuccess={table.refresh}
                  />
                  <DeleteButton
                    discount={row.original}
                    onSuccess={table.refresh}
                  />
                </div>
              ),
            },
          ]}
        />
      </Suspense>
    </div>
  )
}

function DeleteButton({
  discount,
  onSuccess,
}: {
  discount: ProductDiscount
  onSuccess?: () => void
}) {
  const [loading, setLoading] = useState(false)

  const handleConfirm = async () => {
    setLoading(true)
    try {
      const resp = await deleteProductDiscount(discount.id)
      if (resp.success) {
        toast.success("删除成功")
        onSuccess?.()
      } else {
        toast.error(resp.message ?? "删除失败")
      }
    } catch (error) {
      const message = error instanceof Error ? error.message : error
      toast.error(`接口请求错误: ${message}`)
    } finally {
      setLoading(false)
    }
  }

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button size="sm" variant="destructive" disabled={loading}>
          删除
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogTitle>确认删除</AlertDialogTitle>
          <AlertDialogDescription>
            确定要删除折扣「{discount.name}」吗？此操作不可撤销。
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>取消</AlertDialogCancel>
          <AlertDialogAction variant="destructive" onClick={handleConfirm}>
            删除
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}