import React, { useState, useEffect } from 'react';
import { ReportWidgetProps } from '../platform/types/index';
import { ResponsiveContainer, Treemap, Tooltip } from 'recharts';
import { Eye, EyeOff } from 'lucide-react';

// Extend Treemap Node Type
interface TreemapNode {
    name: string;
    value: number;
    children?: TreemapNode[];
    [key: string]: unknown;
}

/**
 * IcicleWidget - Report-First Dashboard Component
 * 
 * Displays treemap/icicle visualization. Data sources:
 * 1. initialData from Dashboard refresh (pre-computed report data)
 * 2. Empty state if no data available
 * 
 * This widget does NOT support direct analytics queries - all dashboard
 * components are powered by Salesforce Reports per native architecture.
 */
export const IcicleWidget: React.FC<ReportWidgetProps> = ({
    title,
    data: initialData,
    loading: initialLoading,
    isEditing,
    isVisible,
    onToggle,
}) => {
    const [data, setData] = useState<TreemapNode[]>([]);
    const [loading, setLoading] = useState(initialLoading);

    useEffect(() => {
        // Use initialData from Dashboard refresh
        if (initialData && Array.isArray(initialData)) {
            setData(initialData as unknown as TreemapNode[]);
            setLoading(false);
            return;
        }

        // No data source - show empty state
        setData([]);
        setLoading(false);
    }, [initialData]);

    return (
        <div className={`bg-white rounded-lg border shadow-sm flex flex-col relative h-full min-h-[300px] overflow-hidden ${isEditing ? 'border-dashed border-2 border-slate-300' : 'border-slate-200'}`}>
            <div className="p-4 flex justify-between items-start">
                <h3 className="font-bold text-slate-700">{title}</h3>
                {isEditing && (
                    <button onClick={onToggle} className={`p-1 rounded-full ${isVisible ? 'bg-blue-100 text-blue-600' : 'bg-slate-200 text-slate-500'}`}>
                        {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}
                    </button>
                )}
            </div>

            <div className="flex-1 min-h-0 relative">
                {loading ? (
                    <div className="absolute inset-0 flex items-center justify-center text-slate-400">Loading...</div>
                ) : (
                    <ResponsiveContainer width="100%" height="100%">
                        <Treemap
                            data={data}
                            dataKey="value"
                            aspectRatio={4 / 3}
                            stroke="#fff"
                            fill="#8884d8"
                            content={<CustomContent />}
                        >
                            <Tooltip />
                        </Treemap>
                    </ResponsiveContainer>
                )}
            </div>
        </div>
    );
};

// Props from Recharts Treemap content callback
interface CustomContentProps {
    depth?: number;
    x?: number;
    y?: number;
    width?: number;
    height?: number;
    index?: number;
    name?: string;
}

// Simple Content Renderer for Treemap/Icicle
const CustomContent: React.FC<CustomContentProps> = (props) => {
    const { depth = 0, x = 0, y = 0, width = 0, height = 0, index = 0, name = '' } = props;
    return (
        <g>
            <rect
                x={x}
                y={y}
                width={width}
                height={height}
                style={{
                    fill: depth < 2 ? '#8884d8' : '#82ca9d',
                    stroke: '#fff',
                    strokeWidth: 2 / (depth + 1e-10),
                    strokeOpacity: 1 / (depth + 1e-10),
                }}
            />
            {
                depth === 1 ? (
                    <text
                        x={x + width / 2}
                        y={y + height / 2 + 7}
                        textAnchor="middle"
                        fill="#fff"
                        fontSize={14}
                    >
                        {name}
                    </text>
                ) : null
            }
            {
                depth === 1 ? (
                    <text
                        x={x + 4}
                        y={y + 18}
                        fill="#fff"
                        fontSize={16}
                        fillOpacity={0.9}
                    >
                        {index + 1}
                    </text>
                ) : null
            }
        </g>
    );
};