import React from "react";
import { StandardizedPieChart } from '@/components/ui/StandardizedPieChart';
import { ConsolidatedData } from "@/hooks/useConsolidatedHoldingsReport";
import { formatNumberWithCommas } from "@/lib/consolidated-holdings-utils";

interface PieChartSectionProps {
  data: ConsolidatedData;
  pieData: Array<{
    name: string;
    value: number;
    percentage: number;
    color: string;
  }>;
  hiddenPieItems: Set<string>;
  onTogglePieItem: (name: string) => void;
}

export const PieChartSection: React.FC<PieChartSectionProps> = ({
  data,
  pieData,
  hiddenPieItems,
  onTogglePieItem,
}) => {
  const filteredPieData = pieData.filter((item) => !hiddenPieItems.has(item.name));

  return (
    <div className="flex flex-col max-h-[550px] text-slate-900">
      <div className="flex-shrink-0 overflow-x-auto">
        <StandardizedPieChart
          data={filteredPieData.map((entry) => ({
            name: entry.name,
            value: entry.value,
            color: entry.color,
            percentage: entry.percentage,
          }))}
          height={400}
          innerRadius={80}
          outerRadius={140}
          showLegend={false}
          showLabels={true}
          labelThreshold={2}
          minAngle={2}
          tooltipFormatter={(value: any) => `${data?.currency_code} ${formatNumberWithCommas(value)}`}
          legendFormatter={(value: string, entry: any) => {
            const payload = entry.payload;
            const amount = formatNumberWithCommas(payload.value);
            return (
              <span className="text-sm">
                <span className="font-medium">{value}</span>: {payload.percentage.toFixed(2)}% ({data?.currency_code} {amount})
              </span>
            );
          }}
        />
      </div>
      {/* Custom Clickable Legend */}
      {pieData && pieData.length > 0 && (
        <div className="mt-4 max-h-[120px] overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-slate-300 scrollbar-track-slate-100 rounded-lg bg-slate-50/50 p-2">
          <div className="flex flex-wrap items-start justify-center gap-x-3 gap-y-2 px-2">
            {pieData.map((item) => {
              const isHidden = hiddenPieItems.has(item.name);
              const amount = formatNumberWithCommas(item.value);
              return (
                <button
                  key={item.name}
                  type="button"
                  className={`inline-flex items-center gap-1.5 cursor-pointer transition-all active:scale-95 ${
                    isHidden ? 'opacity-50' : 'hover:opacity-80'
                  }`}
                  onClick={() => onTogglePieItem(item.name)}
                  title={isHidden ? 'Click to show' : 'Click to hide'}
                  style={{ fontSize: '11px' }}
                >
                  <span
                    className="inline-block rounded-full flex-shrink-0"
                    style={{
                      width: '10px',
                      height: '10px',
                      backgroundColor: item.color
                    }}
                  />
                  <span className={`${isHidden ? 'line-through' : ''} whitespace-nowrap text-sm`}>
                    <span className="font-medium">{item.name}</span>: {item.percentage.toFixed(2)}% ({data?.currency_code} {amount})
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};