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 ByBankView: React.FC<ViewProps> = ({
  data, bankOrder, assetClasses, valueFor, overallPieData
}) => {
  if (!data) return null;

  const getAssetClassPieData = (assetClass: string) => {
    return bankOrder
      .map((bankId, index) => {
        const value = valueFor(bankId, assetClass);
        if (value === 0) return null;
        const bankName = data.banks[bankId] || "Unknown";
        const percentage = data.bank_total[bankId] ? (value / data.bank_total[bankId]) * 100 : 0;
        return {
          name: bankName,
          value: Math.abs(value),
          label: bankName,
          percentage: percentage.toFixed(2),
          formattedAmount: formatNumber(value),
          color: COLOR_PALETTE[index % COLOR_PALETTE.length],
        };
      })
      .filter(Boolean) as any[];
  };

  // 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 Bank 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">Bank</div>
            </div>
            <div className={`text-xs text-center border-b border-slate-200 ${SUBHEADER_H}`}>
              <div>&nbsp;</div>
            </div>
            <div className={`flex items-center justify-center border-b border-slate-200 ${PIE_H}`}></div>
            <div>
              {bankOrder.map((bankId) => {
                const bankName = data.banks[bankId] || "Unknown";
                return (
                  <div key={bankId} className={`${ROW_H} text-sm px-3 py-3 border-t border-slate-50 flex items-center`}>
                    {bankName}
                  </div>
                );
              })}
            </div>
          </div>

          {/* Asset Class Columns */}
          <div className="flex">
            {nonZeroAssetClasses.map((assetClass, idx) => {
              const assetPieData = getAssetClassPieData(assetClass);
              const altBg = ALT_BG[idx % ALT_BG.length];

              return (
                <div key={assetClass} className={`min-w-[200px] w-[200px] border-l border-slate-100 ${altBg}`}>
                  {/* Asset Class Header */}
                  <div className="p-3 border-b border-slate-200">
                    <div className="text-sm font-semibold text-slate-800">{assetClass}</div>
                  </div>
                  
                  {/* Column Header */}
                  <div className={`text-xs text-center border-b border-slate-200 ${SUBHEADER_H}`}>
                    <div className="py-2 font-semibold">USD Value</div>
                  </div>
                  
                  {/* Pie Chart */}
                  <div className={`flex items-center justify-center border-b border-slate-200 ${PIE_H}`}>
                    <div className="w-full" style={{ height: '240px' }}>
                      {assetPieData.length > 0 ? (
                        <StandardizedPieChart 
                          data={assetPieData} 
                          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>
                  
                  {/* Data Rows */}
                  <div>
                    {bankOrder.map((bankId) => {
                      const usdVal = valueFor(bankId, assetClass);
                      
                      return (
                        <div key={`${bankId}-${assetClass}`} className={`${ROW_H} text-sm border-t border-slate-50`}>
                          <div className="px-3 py-3 text-right">
                            {usdVal === 0 ? <span className="text-slate-300">-</span> : formatNumber(usdVal)}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}

            {/* Overall Column */}
            <div className="min-w-[200px] w-[200px] 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</div>
              </div>
              
              <div className={`text-xs text-center border-b border-slate-200 ${SUBHEADER_H}`}>
                <div className="py-2 font-semibold">USD Value</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>
                {bankOrder.map((bankId) => {
                  const bankTotal = data.bank_total[bankId] || 0;
                  
                  return (
                    <div key={`overall-bank-${bankId}`} className={`${ROW_H} text-sm border-t border-slate-50`}>
                      <div className="px-3 py-3 text-right font-medium">{formatNumber(bankTotal)}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {/* Totals Row */}
        <div className="flex border-t-2 border-slate-300 bg-slate-50">
          <div className="w-56 min-w-[14rem] sticky left-0 z-20 bg-slate-50 border-r border-slate-200">
            <div className="p-3 font-bold text-slate-900">Total</div>
          </div>
          
          <div className="flex">
            {nonZeroAssetClasses.map((assetClass) => {
              const assetTotal = bankOrder.reduce((sum, b) => sum + valueFor(b, assetClass), 0);
              
              return (
                <div key={`total-${assetClass}`} className="min-w-[200px] w-[200px] border-l border-slate-100 bg-slate-50 p-3">
                  <div className="text-sm text-center font-semibold">{formatNumber(assetTotal)}</div>
                </div>
              );
            })}
            
            {/* Overall Total */}
            <div className="min-w-[200px] w-[200px] border-l border-slate-100 bg-amber-100 p-3">
              <div className="text-sm text-center font-bold text-amber-900">{formatNumber(data.grand_total)}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};