import React, { useState, useEffect } from 'react';
import * as Icons from 'lucide-react';
import { Box, Eye, EyeOff } from 'lucide-react';
import { ReportWidgetProps, ChartDataEntry } from '../platform/types/index';
import { formatMetricValue } from '../platform/core/utils/formatting';

/**
 * MetricWidget - Report-First Dashboard Component
 * 
 * Displays a single metric value. Data sources (in priority order):
 * 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 MetricWidget: React.FC<ReportWidgetProps> = ({
    title,
    config,
    data: initialData,
    loading: initialLoading,
    isEditing,
    isVisible,
    onToggle,
}) => {
    // Dynamic Icon Loading
    const IconComponent = config.icon ? (Icons as unknown as Record<string, React.ComponentType<{ size: number; className?: string }>>)[config.icon] : Box;
    const color = config.color || 'blue';
    const colorClass = `text-${color}-600`;
    const bgClass = `bg-${color}-100`;

    const [data, setData] = useState<ChartDataEntry[]>([]);
    const [loading, setLoading] = useState(initialLoading);

    useEffect(() => {
        setLoading(true);

        // Use initialData from Dashboard refresh
        if (initialData !== undefined && initialData !== null) {
            // Handle various input formats
            if (typeof initialData === 'number') {
                setData([{ name: 'value', value: initialData }]);
            } else if (Array.isArray(initialData)) {
                setData(initialData as ChartDataEntry[]);
            } else {
                // Fallback
                setData([{ name: 'value', value: Number(initialData) || 0 }]);
            }
            setLoading(false);
            return;
        }

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

    // Calculate display value
    const metricValue = data.length > 0 ? data[0].value : 0;

    return (
        <div
            className={`relative bg-white p-6 rounded-lg border shadow-sm h-full flex flex-col justify-between 
            transform transition-all duration-200 ease-out z-0 hover:z-10 
            ${isEditing ? 'border-dashed border-2 border-slate-300 cursor-move' : 'border-slate-200 hover:shadow-xl hover:scale-105 hover:-translate-y-1 group'} 
            ${!isVisible ? 'opacity-40' : ''}`}
        >
            {isEditing && (
                <button onClick={(e) => { e.stopPropagation(); onToggle?.(); }} className={`absolute top-2 right-2 p-1.5 rounded-full z-10 ${isVisible ? 'bg-blue-100 text-blue-600' : 'bg-slate-200 text-slate-500'}`}>
                    {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}
                </button>
            )}
            <div className="flex items-center justify-between mb-4">
                <p className="text-sm font-medium text-slate-500 uppercase tracking-wide group-hover:text-blue-600 transition-colors">{title}</p>
                <div className={`p-2 rounded-lg ${bgClass}`}>
                    <IconComponent size={20} className={colorClass} />
                </div>
            </div>
            <div>
                {loading ? (
                    <div className="h-8 w-16 bg-slate-100 animate-pulse rounded"></div>
                ) : (
                    <h3 className="text-3xl font-bold text-slate-900 group-hover:text-blue-700 transition-colors">
                        {formatMetricValue(metricValue, {
                            format: (config.config as { format?: string } | undefined)?.format || 'number',
                            hintFromTitle: title
                        })}
                    </h3>
                )}
            </div>
        </div>
    );
};