"use client"

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

import { PageHeader } from "@/components/page-header"
import { SuperDataTable } from "@/components/super-data-table"
import { StatusBadge } from "@/components/ui/status-badge"
import { Button } from "@/components/ui/button"
import { planConfigurations, type PlanConfigurationRecord } from "@/lib/plan-configurations"

function formatAmount(value: number) {
  return `$${value.toFixed(2)}`
}

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

  const columns = useMemo<ColumnDef<PlanConfigurationRecord>[]>(
    () => [
      {
        accessorKey: "code",
        header: t("columns.code"),
        cell: ({ row }) => <div className="font-medium">{row.original.code}</div>,
      },
      {
        accessorKey: "name",
        header: t("columns.name"),
      },
      {
        accessorKey: "monthlyAmount",
        header: t("columns.monthlyAmount"),
        cell: ({ row }) => formatAmount(row.original.monthlyAmount),
      },
      {
        accessorKey: "yearlyAmount",
        header: t("columns.yearlyAmount"),
        cell: ({ row }) => formatAmount(row.original.yearlyAmount),
      },
      {
        id: "status",
        header: t("columns.status"),
        cell: ({ row }) => (
          <StatusBadge
            status={row.original.status}
            label={t(`status.${row.original.status}`)}
          />
        ),
      },
      {
        id: "edit",
        header: tc("actions.edit"),
        cell: ({ row }) => (
          <Button variant="ghost" size="icon" className="size-8" asChild>
            <Link
              href={`/plans/${row.original.id}/edit`}
              aria-label={`${tc("actions.edit")} ${row.original.name}`}
            >
              <PencilIcon className="size-4" />
            </Link>
          </Button>
        ),
      },
      {
        id: "delete",
        header: tc("actions.delete"),
        cell: ({ row }) => (
          <Button
            variant="ghost"
            size="icon"
            className="size-8 text-destructive hover:text-destructive"
            aria-label={`${tc("actions.delete")} ${row.original.name}`}
            onClick={() => {
              if (!window.confirm(tc("confirm.deleteNamed", { name: row.original.name })))
                return
            }}
          >
            <Trash2Icon className="size-4" />
          </Button>
        ),
      },
    ],
    [t, tc]
  )

  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="/plans/create">{t("actions.addPlan")}</Link>
          </Button>
        }
      />
      <SuperDataTable
        data={planConfigurations}
        columns={columns}
        searchKey="code"
        searchPlaceholder={t("placeholders.searchPlans")}
      />
    </div>
  )
}