import React, { useState, useEffect, useMemo } from 'react';
import { Eye, EyeOff, Loader2, Maximize2 } from 'lucide-react';
import { ResponsiveContainer, FunnelChart, Funnel, Tooltip, Cell, LabelList } from 'recharts';
import { ReportWidgetProps, ChartDataEntry } from '../platform/types/index';
import { DraggableResizableModal } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { formatMetricValue, formatTooltipValue } from '../platform/core/utils/formatting';
import { ANALYTICS_CHART_COLORS } from '../platform/features/analytics/presentationDefaults';

interface NameValuePayload {
    payload: {
        name: string;
        value: number;
        fill: string;
    };
    fill: string;
}

interface FunnelTooltipProps {
    active?: boolean;
    payload?: NameValuePayload[];
    title: string;
    format?: string;
}

const FunnelTooltip: React.FC<FunnelTooltipProps> = ({ active, payload, title, format }) => {
    if (active && payload && payload.length) {
        const data = payload[0].payload;
        const [formattedValue] = formatTooltipValue(data.value, {
            format: format,
            hintFromTitle: title
        });

        return (
            <div className="bg-white/95 backdrop-blur-sm p-3 border border-slate-100 shadow-xl rounded-lg min-w-[150px]">
                <p className="font-semibold text-slate-800 mb-1">{data.name}</p>
                <div className="flex items-center gap-2 text-sm">
                    <div className="w-2 h-2 rounded-full" style={{ backgroundColor: payload[0].fill }}></div>
                    <span className="text-slate-600 font-medium">
                        {formattedValue}
                    </span>
                </div>
            </div>
        );
    }
    return null;
};

/**
 * FunnelWidget - Report-First Dashboard Component
 * 
 * Displays funnel/pipeline 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 FunnelWidget: React.FC<ReportWidgetProps> = ({
    title,
    config,
    data: initialData,
    loading: initialLoading,
    isEditing,
    isVisible,
    onToggle,
}) => {
    const [data, setData] = useState<ChartDataEntry[]>(
        Array.isArray(initialData) ? initialData as ChartDataEntry[] : []
    );
    const [loading, setLoading] = useState(initialLoading);
    const [isExpanded, setIsExpanded] = useState(false);

    useEffect(() => {
        // Use initialData from Dashboard refresh
        if (Array.isArray(initialData)) {
            const filtered = (initialData as ChartDataEntry[])
                .filter(e => e.name != null && String(e.name).trim() !== '');
            setData(filtered);
        } else {
            setData([]);
        }
        setLoading(false);
    }, [initialData]);

    // Metrics Data
    const metricsData = useMemo(() => {
        return Array.isArray(data)
            ? [...data]
                .map(d => ({ ...d, value: Number(d.value) || 0 }))
                .filter(d => d.value >= 0)
            : [];
    }, [data]);

    // Chart Data
    const chartData = useMemo(() => {
        return metricsData
            .filter(d => d.value > 0)
            .sort((a, b) => b.value - a.value);
    }, [metricsData]);

    const totalValue = useMemo(() => {
        return metricsData.reduce((sum, d) => sum + d.value, 0);
    }, [metricsData]);

    const formatConfig = config.config?.format as string;
    const formattedTotal = formatMetricValue(totalValue, {
        format: formatConfig,
        hintFromTitle: title
    });

    // Reusable funnel chart renderer
    const renderFunnelChart = (height: number = 250) => (
        <ResponsiveContainer width="100%" height={height}>
            <FunnelChart>
                <Tooltip
                    content={<FunnelTooltip title={title} format={formatConfig} />}
                    cursor={{ fill: 'transparent' }}
                />
                <Funnel
                    dataKey="value"
                    data={chartData}
                    isAnimationActive
                    lastShapeType="rectangle"
                >
                    <LabelList
                        position="right"
                        fill="#475569"
                        stroke="none"
                        dataKey="name"
                        style={{ fontSize: '12px', fontWeight: 500 }}
                        formatter={(name: string) => {
                            const dataEntry = chartData.find(d => d.name === name);
                            if (dataEntry) {
                                const formattedVal = formatMetricValue(dataEntry.value, {
                                    format: formatConfig,
                                    hintFromTitle: title
                                });
                                return `${name} (${formattedVal})`;
                            }
                            return name;
                        }}
                    />
                    {chartData.map((entry, index) => (
                        <Cell
                            key={`cell-${index}`}
                            fill={ANALYTICS_CHART_COLORS[index % ANALYTICS_CHART_COLORS.length]}
                            stroke="#fff"
                            strokeWidth={2}
                            className="hover:opacity-80 transition-opacity"
                        />
                    ))}
                </Funnel>
            </FunnelChart>
        </ResponsiveContainer>
    );

    return (
        <>
            <div className={`bg-white p-6 rounded-xl border shadow-sm flex flex-col relative transition-all duration-200 hover:shadow-md ${isEditing ? 'border-dashed border-2 border-slate-300' : 'border-slate-200'} h-full`}>
                {/* Header with controls */}
                <div className="flex justify-between items-center mb-6">
                    <h3 className="text-lg font-bold text-slate-800 tracking-tight">{title}</h3>
                    <div className="flex items-center gap-2">
                        {/* Expand button */}
                        {!isEditing && (
                            <button
                                onClick={() => setIsExpanded(true)}
                                className="p-2 rounded-full hover:bg-slate-100 text-slate-400 hover:text-blue-600 transition-colors"
                                title="Expand to Full View"
                            >
                                <Maximize2 size={16} />
                            </button>
                        )}
                        {/* Visibility toggle - only in edit mode */}
                        {isEditing && (
                            <button onClick={onToggle} className={`p-1.5 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>

                {/* Funnel content */}
                <div className="flex-1 w-full relative min-h-[250px]">
                    {loading ? (
                        <div className="w-full h-full flex items-center justify-center text-slate-400"><Loader2 className="animate-spin mr-2" /> Loading...</div>
                    ) : (
                        renderFunnelChart(250)
                    )}
                </div>
            </div>

            {/* Expanded Modal View */}
            <DraggableResizableModal
                isOpen={isExpanded}
                onClose={() => setIsExpanded(false)}
                title={title || 'Pipeline Funnel'}
                initialWidth={900}
                initialHeight={600}
            >
                <div className="p-6 h-full overflow-hidden flex flex-col bg-slate-50/50">
                    {/* Summary stats */}
                    {metricsData.length > 0 && (
                        <div className="mb-6 flex gap-4 text-sm">
                            <div className="bg-white border border-slate-200 px-4 py-3 rounded-xl shadow-sm">
                                <span className="text-slate-500 text-xs uppercase tracking-wider font-semibold">Stages</span>
                                <div className="text-xl font-bold text-slate-800 mt-1">{metricsData.length}</div>
                            </div>
                            <div className="bg-white border border-slate-200 px-4 py-3 rounded-xl shadow-sm">
                                <span className="text-slate-500 text-xs uppercase tracking-wider font-semibold">Total Value</span>
                                <div className="text-xl font-bold text-slate-800 mt-1">
                                    {formattedTotal}
                                </div>
                            </div>
                        </div>
                    )}
                    {/* Larger chart in modal */}
                    <div className="flex-1 min-h-0 bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
                        {loading ? (
                            <div className="w-full h-full flex items-center justify-center text-slate-400">
                                <Loader2 className="animate-spin mr-2" /> Loading...
                            </div>
                        ) : (
                            renderFunnelChart(450)
                        )}
                    </div>
                </div>
            </DraggableResizableModal>
        </>
    );
};