import { ColumnDef } from "@tanstack/react-table";
import { formatNumber } from "@/lib/common";

export interface BankData {
  bank_id: string;
  bank_name: string;
  color: string;
  usd_value: number;
  percent_of_bank: number;
  percent_overall: number | string;
}

export interface AssetAllocationRow {
  asset_class: string;
  [key: string]: any;
}

export function createAssetAllocationColumns(
  banksData: BankData[]
): ColumnDef<AssetAllocationRow>[] {
  const columns: ColumnDef<AssetAllocationRow>[] = [
    {
      accessorKey: "asset_class",
      header: "Asset Class",
      cell: ({ getValue }) => {
        const value = getValue() as string;
        return (
          <div className="font-semibold text-slate-900">
            {value}
          </div>
        );
      },
    },
  ];

  // Add columns for each bank
  banksData.forEach((bank) => {
    columns.push({
      id: `${bank.bank_id}_group`,
      header: () => (
        <div className="text-center">
          <div className="font-semibold text-slate-900">{bank.bank_name}</div>
          <div className="text-xs text-slate-500">Allocation</div>
        </div>
      ),
      columns: [
        {
          accessorKey: `${bank.bank_id}_usd_value`,
          header: "USD Value",
          cell: ({ getValue }) => {
            const value = getValue() as number;
            return (
              <div className="text-right font-medium text-slate-700">
                {formatNumber(value)}
              </div>
            );
          },
        },
        {
          accessorKey: `${bank.bank_id}_percent_of_bank`,
          header: "% of Bank",
          cell: ({ getValue }) => {
            const value = getValue() as number;
            return (
              <div className="text-right font-medium text-slate-700">
                {formatNumber(value)}%
              </div>
            );
          },
        },
        {
          accessorKey: `${bank.bank_id}_percent_overall`,
          header: "% Overall",
          cell: ({ getValue }) => {
            const value = getValue() as number;
            return (
              <div className="text-right font-medium text-slate-700">
                {formatNumber(value)}%
              </div>
            );
          },
        },
      ],
    });
  });

  // Add Pie Chart column at the end
  columns.push({
    id: "pie_chart",
    header: "Visual",
    cell: ({ row }) => {
      const rowData = row.original;
      const assetClass = rowData.asset_class;

      // Skip pie chart for Total row
      if (assetClass === "Total") {
        return null;
      }

      // Create pie slices from bank data
      const pieSlices = banksData.map((bank) => {
        const value = rowData[`${bank.bank_id}_usd_value`] || 0;
        return {
          name: bank.bank_name,
          value: value,
          color: bank.color,
          percentage: formatNumber(rowData[`${bank.bank_id}_percent_overall`] || 0),
          amount: formatNumber(value),
        };
      }).filter(slice => slice.value > 0);

      if (pieSlices.length === 0) {
        return <div className="text-xs text-slate-400">No data</div>;
      }

      return (
        <div className="flex justify-center">

        </div>
      );
    },
  });

  return columns;
}