"use client"

import Link from "next/link"
import { useRouter } from "next/navigation"
import { Suspense, useCallback } from "react"
import { toast } from "sonner"
import { getArticlePage, removeArticle } from "@/actions/article"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import type { Article } from "@/models/article"
import { formatDate } from "@/models/formatDate"

export default function ArticleListPage() {
  const router = useRouter()
  const fetchFn = useCallback(
    (page: number, size: number) => getArticlePage({ page, size }),
    [],
  )

  const table = useDataTable(fetchFn)
  console.log(table, "tabletabletable")

  const handleDelete = useCallback(
    async (id: number, title: string) => {
      if (!confirm(`确定要删除文章《${title}》吗？此操作不可恢复！`)) return

      try {
        const resp = await removeArticle(id)
        console.log(resp, "resprespresp")

        if (resp.success) {
          toast.success("文章已删除")
          table.refresh()
          router.refresh()
        } else {
          toast.error(resp.message || "删除失败")
        }
      } catch (error) {
        toast.error("删除失败")
        console.error(error)
      }
    },
    [table, router],
  )

  return (
    <Page>
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">文章管理</h1>
        <Link href="/articles/new">
          <Button>新建文章</Button>
        </Link>
      </div>

      <Suspense>
        <DataTable<Article>
          {...table}
          columns={[
            { header: "标题", accessorKey: "title" },
            {
              header: "状态",
              accessorKey: "status",
              cell: ({ row }) => (
                <Badge
                  variant={row.original.status === 1 ? "default" : "secondary"}
                >
                  {row.original.status === 1 ? "已发布" : "草稿"}
                </Badge>
              ),
            },
            {
              header: "更新时间",
              accessorKey: "updated_at",
              cell: ({ row }) => formatDate(row.original.updated_at),
            },
            {
              header: "操作",
              id: "actions",
              cell: ({ row }) => (
                <div className="flex gap-2">
                  <Link
                    href={`/articles/${row.original.id}`}
                    className="text-primary hover:underline"
                  >
                    编辑
                  </Link>
                  <button
                    onClick={() =>
                      handleDelete(row.original.id, row.original.title)
                    }
                    className="text-destructive hover:underline"
                  >
                    删除
                  </button>
                </div>
              ),
            },
          ]}
        />
      </Suspense>
    </Page>
  )
}