"use client";

import * as React from "react";
import type { ColumnDef } from "@tanstack/react-table";
import {
  Banknote,
  CreditCard,
  Landmark,
  ReceiptText,
  Smartphone,
  Wallet,
  type LucideIcon,
} 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 { OrderStatusBadge } from "./status-badge";
import type { OrderRow, TransactionType } from "./schema";

const transactionIcons: Record<TransactionType, LucideIcon> = {
  card: CreditCard,
  "bank-transfer": Landmark,
  wallet: Wallet,
  cash: Banknote,
  cheque: ReceiptText,
  other: Smartphone,
};

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

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

  return (
    <DashboardMasterRowActions
      viewHref={`${base}?action=view`}
      viewAriaLabel="View order"
      editHref={base}
      editAriaLabel="Update order"
      deleteUrl={FRONTEND_ROUTES.plansOrders.orders.deleteSubmit}
      entityId={row.id}
      entityName={row.uid}
      entityLabel="order"
      fallbackError="Order could not be deleted."
      defaultSuccessMessage="Order deleted."
      onDeleted={onDeleted}
    />
  );
}

export function createOrderColumns({ onDeleted }: OrderColumnsOptions = {}): ColumnDef<OrderRow>[] {
  return [
    {
      accessorKey: "uid",
      header: "Order",
      cell: ({ row }) => (
        <div className="space-y-1">
          <Link
            href={`/dashboard/plans-orders/orders/${row.original.id}?action=view`}
            className="font-mono font-medium text-primary text-xs hover:underline"
          >
            {row.original.uid}
          </Link>
          <p className="text-muted-foreground text-xs">{row.original.planName}</p>
        </div>
      ),
    },
    {
      accessorKey: "customer",
      header: "Customer",
      cell: ({ row }) => (
        <div className="space-y-0.5">
          <Link
            href={`/dashboard/customers/${row.original.customerId}?action=view`}
            className="font-medium text-primary text-sm hover:underline"
          >
            {row.original.customerName}
          </Link>
          <a
            href={`mailto:${row.original.customerEmail}`}
            className="block truncate text-muted-foreground text-xs hover:underline"
          >
            {row.original.customerEmail}
          </a>
        </div>
      ),
    },
    {
      accessorKey: "total",
      header: () => <span className="block text-right">Total</span>,
      cell: ({ row }) => (
        <div className="space-y-0.5 text-right">
          <div className="font-semibold tabular-nums text-sm">{row.original.totalFormatted}</div>
          {row.original.discount > 0 ? (
            <div className="text-emerald-700 text-[11px]">
              −${row.original.discount.toFixed(2)} discount
            </div>
          ) : null}
        </div>
      ),
    },
    {
      accessorKey: "transactionType",
      header: "Type",
      cell: ({ row }) => {
        const Icon = transactionIcons[row.original.transactionType];
        return (
          <span className="inline-flex items-center gap-1.5 rounded-md border bg-muted/30 px-2 py-0.5 font-medium text-xs">
            <Icon className="size-3.5 text-muted-foreground" />
            {row.original.transactionTypeLabel}
          </span>
        );
      },
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => (
        <OrderStatusBadge status={row.original.status} label={row.original.statusLabel} />
      ),
    },
    {
      accessorKey: "dateAdded",
      header: "Date",
      cell: ({ row }) => (
        <span className={cn("text-muted-foreground text-sm tabular-nums")}>{row.original.dateAdded}</span>
      ),
    },
    {
      id: "options",
      header: () => <span className="block w-full text-right">Options</span>,
      cell: ({ row }) => <OrderActions row={row.original} onDeleted={onDeleted} />,
      enableSorting: false,
    },
  ];
}