import { ColumnDef } from "@tanstack/react-table";
import { ArrowUpDown } from "lucide-react";
import { parseNumber } from "@/lib/common";

export type DepositReport = {
  uid: string;
  t_date: string;
  bank_name: string;
  bank_id: string;
  amount: string;
  i_rate: string;
  i_rateTitle1: string;
  duration: string;
  DurationTitile2: string;
  f_type: string;
  status: string;
  p_currency: string;
  currencyCode: string;
  offset_diff: string;
  maturity_date: string | null;
  maturity_value: string;
};

export const columns: ColumnDef<DepositReport>[] = [
  {
    accessorKey: "bank_name",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Bank
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    enableSorting: true,
    enableColumnFilter: false,
  },
  {
    accessorKey: "amount",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        FD Amount
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    cell: ({ row }) => {
      const amount = row.getValue("amount") as string;
      const currencyCode = row.original.currencyCode;
      const numValue = parseNumber(amount || "0");
      const formattedAmount = numValue.toLocaleString("en-US", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
      return currencyCode ? `${currencyCode} ${formattedAmount}` : formattedAmount;
    },
    sortingFn: (rowA, rowB) => {
      const a = parseNumber(rowA.original.amount || "0");
      const b = parseNumber(rowB.original.amount || "0");
      return a - b;
    },
    enableSorting: true,
    enableColumnFilter: false,
  },
  {
    accessorKey: "t_date",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Inv Date
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    enableSorting: true,
    enableColumnFilter: false,
  },
  {
    accessorKey: "DurationTitile2",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Period
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    enableSorting: true,
    enableColumnFilter: false,
  },
  {
    accessorKey: "i_rateTitle1",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Int. Rate
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    sortingFn: (rowA, rowB) => {
      const a = parseNumber(rowA.original.i_rate || "0");
      const b = parseNumber(rowB.original.i_rate || "0");
      return a - b;
    },
    enableSorting: true,
    enableColumnFilter: false,
  },
  {
    accessorKey: "offset_diff",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Day For Call
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    enableSorting: true,
    enableColumnFilter: false,
  },
  {
    accessorKey: "maturity_date",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Maturity Date
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    cell: ({ row }) => {
      const date = row.getValue("maturity_date") as string | null;
      return date || "-";
    },
    enableSorting: true,
    enableColumnFilter: false,
  },
  {
    accessorKey: "maturity_value",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Maturity Value
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    cell: ({ row }) => {
      const value = row.getValue("maturity_value") as string;
      const currencyCode = row.original.currencyCode;
      const numValue = parseNumber(value || "0");
      const formattedValue = numValue.toLocaleString("en-US", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
      return currencyCode ? `${currencyCode} ${formattedValue}` : formattedValue;
    },
    sortingFn: (rowA, rowB) => {
      const a = parseNumber(rowA.original.maturity_value || "0");
      const b = parseNumber(rowB.original.maturity_value || "0");
      return a - b;
    },
    enableSorting: true,
    enableColumnFilter: false,
  },
  {
    accessorKey: "status",
    header: ({ column }) => (
      <button
        className="flex items-center gap-1 font-semibold"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Status
        <ArrowUpDown className="h-3 w-3" />
      </button>
    ),
    cell: ({ row }) => {
      const status = row.getValue("status") as string;
      return (
        <span
          className={`px-2 py-1 rounded-lg text-xs font-medium ${
            status === "A" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
          }`}
        >
          {status === "A" ? "Active" : status}
        </span>
      );
    },
    enableSorting: true,
    enableColumnFilter: false,
  },
];