"use client";

import * as React from "react";
import type { ColumnDef } from "@tanstack/react-table";
import { Sparkles, Users } from "lucide-react";
import Link from "next/link";

import { DashboardMasterRowActions } from "@/app/dashboard/_components/dashboard-master-row-actions";
import { FRONTEND_ROUTES } from "@/config/frontend-routes";
import { cn } from "@/lib/utils";

import { PlanStatusBadge } from "./status-badge";
import type { PlanRow } from "./schema";

type PlanColumnsOptions = {
  onDeleted?: () => void;
};

function PlanActions({
  row,
  onDeleted,
}: {
  row: PlanRow;
  onDeleted?: () => void;
}) {
  const base = `/dashboard/plans-orders/membership-plans/${row.id}`;

  return (
    <DashboardMasterRowActions
      editHref={base}
      editAriaLabel="Update plan"
      deleteUrl={FRONTEND_ROUTES.plansOrders.membershipPlans.deleteSubmit}
      entityId={row.id}
      entityName={row.name}
      entityLabel="membership plan"
      fallbackError="Membership plan could not be deleted."
      defaultSuccessMessage="Membership plan deleted."
      onDeleted={onDeleted}
    />
  );
}

const planTypeAccent: Record<string, string> = {
  general: "bg-emerald-100 text-emerald-800",
  custom: "bg-fuchsia-100 text-fuchsia-800",
};

export function createPlanColumns({ onDeleted }: PlanColumnsOptions = {}): ColumnDef<PlanRow>[] {
  return [
    {
      accessorKey: "name",
      header: "Name",
      cell: ({ row }) => (
        <div className="space-y-1">
          <div className="flex items-center gap-1.5">
            <Link
              href={`/dashboard/plans-orders/membership-plans/${row.original.id}`}
              className="font-medium text-primary hover:underline"
            >
              {row.original.name}
            </Link>
            {row.original.isFeatured ? (
              <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-800">
                <Sparkles className="size-2.5" />
                Featured
              </span>
            ) : null}
          </div>
          {row.original.description ? (
            <p className="line-clamp-2 max-w-[360px] text-muted-foreground text-xs">
              {row.original.description}
            </p>
          ) : null}
        </div>
      ),
    },
    {
      accessorKey: "planType",
      header: "Plan Type",
      cell: ({ row }) => (
        <span
          className={cn(
            "inline-flex rounded-full px-2 py-0.5 font-medium text-[11px] uppercase tracking-wide",
            planTypeAccent[row.original.planType] ?? "bg-muted text-muted-foreground",
          )}
        >
          {row.original.planTypeLabel}
        </span>
      ),
    },
    {
      accessorKey: "price",
      header: "Price",
      cell: ({ row }) => (
        <div className="space-y-0.5">
          <div className="font-semibold tabular-nums text-sm">{row.original.priceFormatted}</div>
          <div className="text-muted-foreground text-xs">{row.original.billingCycleLabel}</div>
        </div>
      ),
    },
    {
      accessorKey: "subscribers",
      header: "Sub Users",
      cell: ({ row }) => (
        <span className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2 py-0.5 font-medium text-xs tabular-nums">
          <Users className="size-3" />
          {row.original.subscribers}
        </span>
      ),
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => (
        <PlanStatusBadge status={row.original.status} label={row.original.statusLabel} />
      ),
    },
    {
      accessorKey: "dateAdded",
      header: "Date Added",
      cell: ({ row }) => (
        <span className="text-muted-foreground text-sm">{row.original.dateAdded}</span>
      ),
    },
    {
      id: "options",
      header: () => <span className="block w-full text-right">Options</span>,
      cell: ({ row }) => <PlanActions row={row.original} onDeleted={onDeleted} />,
      enableSorting: false,
    },
  ];
}