import { ChevronDown, ChevronRight } from "lucide-react";
import { DataTable } from "@/components/datatable/data-table";
import { ColumnDef } from "@tanstack/react-table";
import { TableRow, TabType } from "@/types/asset-settings";
import { GroupingApiResponse } from "@/types/asset-settings";
import { formatCurrency, extractAssetClassParts } from "@/utils/asset-settings-utils";
import { AssetItem } from "@/components/datatable/listassets/columns";

interface AssetTableViewProps {
  groupedAssets: Record<string, TableRow[]>;
  expandedClasses: Set<string>;
  onToggleClass: (className: string) => void;
  onExpandAll: () => void;
  onCollapseAll: () => void;
  filteredColumns: ColumnDef<any>[];
  classTotals: Record<
    string,
    { purchase: number; market: number; gainLoss: number }
  >;
  activeTab: TabType;
}

export function AssetTableView({
  groupedAssets,
  expandedClasses,
  onToggleClass,
  onExpandAll,
  onCollapseAll,
  filteredColumns,
  classTotals,
  activeTab,
}: AssetTableViewProps) {
  return (
    <div className="space-y-4">
      <div className="flex gap-2 mb-4">
        <button
          onClick={onExpandAll}
          className="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 transition-colors"
        >
          Expand All
        </button>
        <button
          onClick={onCollapseAll}
          className="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 transition-colors"
        >
          Collapse All
        </button>
      </div>

      {Object.entries(groupedAssets).map(([className, assets]) => {
        const isExpanded = expandedClasses.has(className);
        const totals = classTotals[className] || {
          purchase: 0,
          market: 0,
          gainLoss: 0,
        };

        return (
          <div
            key={className}
            className="rounded-lg border border-slate-200 bg-white shadow-sm overflow-hidden"
          >
            <div
              className="flex items-center justify-between px-6 py-4 bg-slate-50 hover:bg-slate-100 cursor-pointer transition-colors border-b border-slate-200"
              onClick={() => onToggleClass(className)}
            >
              <div className="flex items-center gap-3">
                {isExpanded ? (
                  <ChevronDown className="h-5 w-5 text-[#428B4D]" />
                ) : (
                  <ChevronRight className="h-5 w-5 text-[#428B4D]" />
                )}
                <h3 className="text-lg font-semibold text-slate-900">
                  {className}
                </h3>
                <span className="text-sm text-slate-500">
                  ({assets.length} assets)
                </span>
              </div>
            </div>

            {isExpanded && (
              <div className="p-4">
                <DataTable columns={filteredColumns} data={assets as any} />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}