import React from "react";
import { ColumnDef } from "@tanstack/react-table";
import { TabType, TableRow } from "@/types/asset-settings";
import { GroupingApiResponse } from "@/types/asset-settings";
import { AssetItem } from "@/components/datatable/listassets/columns";
import { formatCurrency } from "@/utils/asset-settings-utils";
import { extractHtmlParts, isEmptyOrPlaceholder } from "@/lib/common";

/**
 * Build filtered columns for table view
 */
export function buildFilteredColumns(
  activeTab: TabType,
  groupingData: GroupingApiResponse | null
): ColumnDef<any>[] {
  const baseColumns: ColumnDef<any>[] = [
    {
      accessorKey: "macroClass",
      header: "Macro Class",
      cell: ({ row }) => {
        const item = row.original;
        if (activeTab === "grouping") {
          const macroClass = item.macroClass || "—";
          return <span className="text-slate-700">{macroClass}</span>;
        } else {
          if (groupingData?.data?.macross_array && item.f_type) {
            const macroClass = groupingData.data.macross_array[item.f_type] || "—";
            return <span className="text-slate-700">{macroClass}</span>;
          }
          return <span className="text-slate-500">—</span>;
        }
      },
    },
    {
      accessorKey: activeTab === "grouping" ? "assetClass" : "asetClass",
      header: "Asset Class",
      cell: ({ row }) => {
        const item = row.original;
        const value =
          activeTab === "grouping" ? item.assetClass : item.asetClass;
        if (!value) return "—";

        const { mainPart, smallPart } = extractHtmlParts(value);

        return (
          <div>
            <div className="font-medium">{mainPart}</div>
            {smallPart && (
              <div className="text-xs text-slate-500">{smallPart}</div>
            )}
          </div>
        );
      },
    },
    {
      accessorKey: activeTab === "grouping" ? "assetType" : "asset_type_title",
      header: "Asset Type",
      cell: ({ row }) => {
        const item = row.original;
        const value =
          activeTab === "grouping"
            ? item.assetType || ""
            : item.asset_type_title || "";
        if (isEmptyOrPlaceholder(value)) return "—";
        const trimmedValue = String(value).trim();
        return (
          <span
            className="block max-w-[180px] truncate text-slate-800"
            title={trimmedValue}
          >
            {trimmedValue}
          </span>
        );
      },
    },
  ];

  // Add Value column only for bridge tab
  if (activeTab === "bridge") {
    baseColumns.push({
      accessorKey: "value",
      header: "Value",
      cell: ({ getValue, row }) => {
        const value = getValue() as string | null;
        const currency = (row.original as AssetItem).reporting_currency || "";
        return (
          <span className="text-slate-700 font-medium">
            {formatCurrency(value, currency)}
          </span>
        );
      },
    });
  }

  return baseColumns;
}