import { defineRouteConfig } from "@medusajs/admin-sdk"
import { Container, Heading, Button } from "@medusajs/ui"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useNavigate } from "react-router-dom"
import { DocumentTextSolid } from "@medusajs/icons"
import { sdk } from "../../lib/sdk"
import { showConfirm } from "../../lib/confirm"
import { isDevOnlyFeaturesEnabled } from "../../lib/feature-flags"
import { useTranslation } from "react-i18next"

export const config = defineRouteConfig({
  label: "adminRoutes.cms.pageBuilder",
  translationNs: "translation",
  icon: DocumentTextSolid,
  rank: 50,
})

export default function PageBuilderList() {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const qc = useQueryClient()
  const { data, isLoading } = useQuery({
    queryKey: ["pages"],
    queryFn: async () => {
      const r = await sdk.fetch("/admin/pages")
      if (!r.ok) throw new Error(t("adminRoutes.pageBuilder.loadError"))
      return r.json() as Promise<{ pages: { id: string; slug: string; title: string; status: string; updated_at?: string }[] }>
    },
  })
  const pages = data?.pages ?? []

  const del = useMutation({
    mutationFn: async (pageId: string) => {
      const r = await sdk.fetch(`/admin/pages/${pageId}`, { method: "DELETE" })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ["pages"] }),
  })

  return (
    <Container className="px-3 sm:px-4">
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center py-4 sm:py-6 gap-4">
        <Heading level="h1" className="text-xl sm:text-2xl truncate min-w-0">{t("adminRoutes.pageBuilder.pagesTitle")}</Heading>
        {isDevOnlyFeaturesEnabled && <Button onClick={() => navigate("/page-builder/pages/new")} className="w-full sm:w-auto">{t("adminRoutes.pageBuilder.newPage")}</Button>}
      </div>
      {isLoading && <p className="text-ui-fg-subtle">{t("adminRoutes.common.loading")}</p>}
      {!isLoading && pages.length === 0 && (
        <p className="text-ui-fg-subtle py-8">{t("adminRoutes.pageBuilder.empty")}</p>
      )}
      {!isLoading && pages.length > 0 && (
        <ul className="divide-y min-w-0">
          {pages.map((p) => (
            <li key={p.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 py-3 min-w-0">
              <div className="min-w-0">
                <span className="font-medium block sm:inline">{p.title}</span>
                <span className="text-ui-fg-subtle text-sm block sm:inline sm:ml-2">/{p.slug}</span>
                <span className="text-xs block sm:inline sm:ml-2">{p.status}</span>
              </div>
              <div className="flex gap-2 flex-wrap">
                <Button size="small" variant="secondary" onClick={() => navigate(`/page-builder/pages/edit?id=${encodeURIComponent(p.id)}`)}>{t("adminRoutes.common.edit")}</Button>
                {isDevOnlyFeaturesEnabled && <Button size="small" variant="secondary" onClick={() => showConfirm({ title: t("adminRoutes.pageBuilder.deletePageTitle"), text: t("adminRoutes.pageBuilder.deletePageText") }).then((r) => r.isConfirmed && del.mutate(p.id))}>{t("adminRoutes.common.delete")}</Button>}
              </div>
            </li>
          ))}
        </ul>
      )}
    </Container>
  )
}