"use client"

import { Link } from "@/i18n/navigation"
import type { ColumnDef } from "@tanstack/react-table"
import {useMemo} from "react"
import {useTranslations} from "next-intl"

import { PageHeader } from "@/components/page-header"
import { SuperDataTable } from "@/components/super-data-table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

type LocaleRow = {
  id: string
  code: string
  name: string
  direction: "ltr" | "rtl"
}

const data: LocaleRow[] = [
  { id: "en", code: "en", name: "English", direction: "ltr" },
  { id: "ar", code: "ar", name: "Arabic", direction: "rtl" },
]

export default function Page() {
  const t = useTranslations("Locales")
  const tc = useTranslations("Common")

  const columns = useMemo<ColumnDef<LocaleRow>[]>(
    () => [
      { accessorKey: "code", header: t("columns.code") },
      { accessorKey: "name", header: t("columns.name") },
      {
        accessorKey: "direction",
        header: t("columns.direction"),
        cell: ({ row }) => <Badge variant="secondary">{row.original.direction}</Badge>,
      },
    ],
    [t]
  )

  return (
    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
      <PageHeader
        title={t("title")}
        actions={
          <Button asChild>
            <Link href="/locales/create">{t("actions.addLocale")}</Link>
          </Button>
        }
      />
      <SuperDataTable
        data={data}
        columns={columns}
        searchKey="name"
        searchPlaceholder={t("placeholders.searchLocales")}
        actionsForRow={(row) => [
          { type: "link", label: tc("actions.edit"), href: () => `/locales/${row.id}/edit` },
          { type: "separator" },
          {
            type: "action",
            label: tc("actions.delete"),
            destructive: true,
            onClick: () => {
              if (!window.confirm(tc("confirm.deleteNamed", { name: row.name }))) return
            },
          },
        ]}
      />
    </div>
  )
}