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

export type DepositReport = {
  uid: string;
  t_date: string;
  bank_name: string;
  bank_id: string;
  finalAmountCode: string;
  amount: string;
  i_rate: string;
  i_rateTitle1: string;
  duration: string;
  DurationTitile2: string;
  f_type: string;
  status: string;
  p_currency: string;
  dayforcall: string;
  maturity_date: string;
  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: "finalAmountCode",
    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 html = row.getValue("finalAmountCode") as string;
      if (!html) return <div />;
      const textContent = stripHtmlTags(html);
      return <div>{textContent}</div>;
    },
    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")}
      >
        Duration
        <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")}
      >
        Interest 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>
    ),
    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>
    ),
    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,
  },
];