import React from "react";
import { StandardizedPieChart } from '@/components/ui/StandardizedPieChart';
import { formatNumber } from "@/lib/report-utils";
import { ALT_BG, SUBHEADER_H, PIE_H, ROW_H, COLOR_PALETTE } from "@/lib/common";
import { CustomTooltip } from "./CustomTooltip";
import { AssetAllocationData } from "@/hooks/useAssetAllocationReport";

interface ViewProps {
  data: AssetAllocationData | null;
  bankOrder: string[];
  assetClasses: string[];
  valueFor: (bankId: string, rowLabel: string) => number;
  pctOverallForAsset: (rowLabel: string) => number;
  overallPieData: any[];
  getBankPieData: (bankId: string) => any[];
}

export const ByAssetView: React.FC<ViewProps> = ({
  data, bankOrder, assetClasses, valueFor, pctOverallForAsset, overallPieData, getBankPieData
}) => {
  if (!data) return null;

  // Filter out asset classes with all zero values
  const nonZeroAssetClasses = assetClasses.filter((assetClass) => {
    const total = bankOrder.reduce((sum, bankId) => sum + valueFor(bankId, assetClass), 0);
    return total !== 0;
  });

  return (
    <div className="rounded-lg border border-slate-200 bg-white shadow-sm overflow-x-auto text-slate-900">
      <div className="min-w-max">
        <div className="flex">
          {/* Fixed left column for Asset Class names */}
          <div className="w-56 min-w-[14rem] sticky left-0 z-20 bg-white border-r border-slate-200">
            <div className="p-3 border-b border-slate-200">
              <div className="text-sm font-semibold">Asset Class</div>
            </div>
            <div className={`grid grid-cols-3 text-xs text-center border-b border-slate-200 ${SUBHEADER_H}`}>
              <div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div>
            </div>
            <div className={`flex items-center justify-center border-b border-slate-200 ${PIE_H}`}></div>
            <div>
              {nonZeroAssetClasses.map((label) => (
                <div key={label} className={`${ROW_H} text-sm px-3 py-3 border-t border-slate-50 flex items-center`}>
                  {label}
                </div>
              ))}
            </div>
          </div>

          {/* Bank Columns */}
          <div className="flex">
            {bankOrder.map((bankId, idx) => {
              const bankName = data.banks[bankId] || "Unknown";
              const chartData = getBankPieData(bankId);
              const altBg = ALT_BG[idx % ALT_BG.length];

              return (
                <div key={bankId} className={`min-w-[320px] w-[320px] border-l border-slate-100 ${altBg}`}>
                  <div className="p-3 border-b border-slate-200">
                    <div className="text-sm font-semibold text-slate-800">{bankName}</div>
                  </div>
                  <div className={`grid grid-cols-3 text-xs text-center border-b border-slate-200 ${SUBHEADER_H}`}>
                    <div className="py-2 font-semibold">USD Value</div>
                    <div className="py-2 font-semibold">% of Bank</div>
                    <div className="py-2 font-semibold">% Overall</div>
                  </div>
                  <div className={`flex items-center justify-center border-b border-slate-200 ${PIE_H}`}>
                    <div className="w-full" style={{ height: '240px' }}>
                      {chartData.length > 0 ? (
                        <StandardizedPieChart data={chartData} height={240} innerRadius={40} outerRadius={70} customTooltip={CustomTooltip} />
                      ) : (
                        <div className="flex h-full items-center justify-center text-xs text-slate-400">No data</div>
                      )}
                    </div>
                  </div>
                  <div>
                    {nonZeroAssetClasses.map((rowLabel) => {
                      const usdVal = valueFor(bankId, rowLabel);
                      const pctBank = data.bank_total[bankId] ? (usdVal / data.bank_total[bankId]) * 100 : 0;
                      const pctOverall = data.grand_total ? (usdVal / data.grand_total) * 100 : 0;
                      
                      if (usdVal === 0) {
                        return (
                          <div key={`${bankId}-${rowLabel}`} className={`${ROW_H} grid grid-cols-3 text-sm border-t border-slate-50`}>
                            <div className="px-3 py-3 text-right text-slate-300">-</div>
                            <div className="px-3 py-3 text-right text-slate-300">-</div>
                            <div className="px-3 py-3 text-right text-slate-300">-</div>
                          </div>
                        );
                      }
                      
                      return (
                        <div key={`${bankId}-${rowLabel}`} className={`${ROW_H} grid grid-cols-3 text-sm border-t border-slate-50`}>
                          <div className="px-3 py-3 text-right">{formatNumber(usdVal)}</div>
                          <div className="px-3 py-3 text-right">{formatNumber(pctBank)}%</div>
                          <div className="px-3 py-3 text-right">{formatNumber(pctOverall)}%</div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}

            {/* Overall Column */}
            <div className="min-w-[320px] w-[320px] border-l border-slate-100 bg-amber-50">
              <div className="p-3 border-b border-slate-200">
                <div className="text-sm font-bold text-amber-900">Overall Allocation</div>
              </div>
              <div className={`grid grid-cols-2 text-xs text-center border-b border-slate-200 ${SUBHEADER_H}`}>
                <div className="py-2 font-semibold">USD Value</div>
                <div className="py-2 font-semibold">% of Total</div>
              </div>
              <div className={`flex items-center justify-center border-b border-slate-200 ${PIE_H}`}>
                <div className="w-full" style={{ height: '240px' }}>
                  {overallPieData.length > 0 ? (
                    <StandardizedPieChart data={overallPieData} height={240} innerRadius={40} outerRadius={70} customTooltip={CustomTooltip} />
                  ) : (
                    <div className="flex h-full items-center justify-center text-xs text-slate-400">No data</div>
                  )}
                </div>
              </div>
              <div>
                {nonZeroAssetClasses.map((rowLabel) => {
                  const totalForAsset = bankOrder.reduce((sum, b) => sum + valueFor(b, rowLabel), 0);
                  const pctOverall = pctOverallForAsset(rowLabel);
                  return (
                    <div key={`overall-${rowLabel}`} className={`${ROW_H} grid grid-cols-2 text-sm border-t border-slate-50`}>
                      <div className="px-3 py-3 text-right font-medium">{formatNumber(totalForAsset)}</div>
                      <div className="px-3 py-3 text-right">{formatNumber(pctOverall)}%</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {/* Totals Row */}
        <div className="flex border-t border-slate-200">
          <div className="w-56 min-w-[14rem] sticky left-0 z-20 bg-white border-r border-slate-200">
            <div className="p-3 font-semibold">Total</div>
          </div>
          <div className="flex">
            {bankOrder.map((bankId) => (
              <div key={`total-${bankId}`} className="min-w-[320px] w-[320px] border-l border-slate-100 bg-white p-3">
                <div className="grid grid-cols-3 text-sm text-center">
                  <div className="font-semibold">{formatNumber(data.bank_total[bankId])}</div>
                  <div className="font-semibold">100%</div>
                  <div className="font-semibold">
                    {data.grand_total ? formatNumber(((data.bank_total[bankId] || 0) / data.grand_total) * 100) : "0"}%
                  </div>
                </div>
              </div>
            ))}
            {/* Overall Total in Totals Row */}
            <div className="min-w-[320px] w-[320px] border-l border-slate-100 bg-amber-100 p-3">
              <div className="grid grid-cols-2 text-sm text-center">
                <div className="font-bold text-amber-900">{formatNumber(data.grand_total)}</div>
                <div className="font-bold">100%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};