import React, { useState, useEffect } from "react";
import { StandardizedPieChart } from "@/components/ui/StandardizedPieChart";
import { GraphResponse } from "@/hooks/useStructuredProductsReport";
import { processChartData, COLORS } from "@/lib/structured-products-utils";
import { CustomPieTooltip } from "./CustomPieTooltip";
import { ChartLegend } from "./ChartLegend";

interface GraphViewProps {
  graphData: GraphResponse;
}

export const GraphView: React.FC<GraphViewProps> = ({ graphData }) => {
  const [hiddenIndustryItems, setHiddenIndustryItems] = useState<Set<string>>(new Set());
  const [hiddenSectorItems, setHiddenSectorItems] = useState<Set<string>>(new Set());

  useEffect(() => {
    if (graphData) {
      setHiddenIndustryItems(new Set());
      setHiddenSectorItems(new Set());
    }
  }, [graphData]);

  const industryChartData = processChartData(graphData.data?.industry_data);
  const sectorChartData = processChartData(graphData.data?.sector_data);

  const toggleIndustryItem = (name: string) => {
    setHiddenIndustryItems(prev => {
      const newSet = new Set(prev);
      if (newSet.has(name)) {
        newSet.delete(name);
      } else {
        newSet.add(name);
      }
      return newSet;
    });
  };

  const toggleSectorItem = (name: string) => {
    setHiddenSectorItems(prev => {
      const newSet = new Set(prev);
      if (newSet.has(name)) {
        newSet.delete(name);
      } else {
        newSet.add(name);
      }
      return newSet;
    });
  };

  const filteredIndustryData = industryChartData.filter(item => !hiddenIndustryItems.has(item.name));
  const filteredSectorData = sectorChartData.filter(item => !hiddenSectorItems.has(item.name));

  return (
    <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* Industry Chart */}
      <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
        <h3 className="text-center text-lg font-semibold text-slate-900 mb-4">
          {graphData.data?.chart_config?.industry_title || "By Industry"}
        </h3>
        <StandardizedPieChart
          data={filteredIndustryData.map((entry, index) => ({
            name: entry.name,
            value: entry.y,
            color: COLORS[industryChartData.findIndex(item => item.name === entry.name) % COLORS.length],
            percentage: entry.percentage ? (typeof entry.percentage === 'string' ? parseFloat(entry.percentage) : entry.percentage) : undefined,
          }))}
          height={400}
          innerRadius={80}
          outerRadius={140}
          dataKey="value"
          customTooltip={CustomPieTooltip}
        />
        <ChartLegend
          data={industryChartData}
          hiddenItems={hiddenIndustryItems}
          onToggleItem={toggleIndustryItem}
        />
      </div>

      {/* Sector Chart */}
      <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
        <h3 className="text-center text-lg font-semibold text-slate-900 mb-4">
          {graphData.data?.chart_config?.sector_title || "By Sector"}
        </h3>
        <StandardizedPieChart
          data={filteredSectorData.map((entry, index) => ({
            name: entry.name,
            value: entry.y,
            color: COLORS[sectorChartData.findIndex(item => item.name === entry.name) % COLORS.length],
            percentage: entry.percentage ? (typeof entry.percentage === 'string' ? parseFloat(entry.percentage) : entry.percentage) : undefined,
          }))}
          height={400}
          innerRadius={80}
          outerRadius={140}
          dataKey="value"
          customTooltip={CustomPieTooltip}
        />
        <ChartLegend
          data={sectorChartData}
          hiddenItems={hiddenSectorItems}
          onToggleItem={toggleSectorItem}
        />
      </div>
    </div>
  );
};