// Compatible con Babel standalone - NO usar imports
// React y Chart.js están disponibles globalmente

const ChartWidget = ({ type, data, options }) => {
  const canvasRef = React.useRef(null);
  const chartInstance = React.useRef(null);

  React.useEffect(() => {
    if (!window.Chart) return;

    if (canvasRef.current) {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
      
      try {
        chartInstance.current = new Chart(canvasRef.current, {
          type,
          data,
          options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: { duration: 750, easing: "easeOutQuart" },
            ...options
          }
        });
      } catch (e) {
        console.error("Error creating chart:", e);
      }
    }
    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
    };
  }, [type, data, options]);

  return (
    <div style={{ position: 'relative', height: '100%', width: '100%' }}>
      <canvas ref={canvasRef} />
    </div>
  );
};

// Skeleton Loader para las gráficas
const AnalyticsSkeleton = () => (
  <div className="w-full h-full flex flex-col gap-4 animate-pulse">
    <div className="h-6 w-1/3 bg-[#252628] rounded-md"></div>
    <div className="flex-1 bg-[#252628] rounded-xl flex items-end gap-2 p-4">
      {[40, 70, 45, 90, 65, 30].map((h, i) => (
        <div key={i} className="flex-1 bg-[#333538] rounded-t-sm" style={{ height: `${h}%` }}></div>
      ))}
    </div>
  </div>
);

function AnalyticsDashboard() {
  const [data, setData] = React.useState({ apartments: [], tenants: [] });
  const [loading, setLoading] = React.useState(true);
  
  // Widget management
  const defaultWidgets = [
    { id: 'revenue', title: 'Flujo de Caja Estimado', size: 'large' },
    { id: 'occupancy', title: 'Tasa de Ocupación', size: 'small' },
    { id: 'tenantStatus', title: 'Estado de Inquilinos', size: 'small' },
    { id: 'priceDist', title: 'Distribución de Rentas', size: 'large' }
  ];

  const [widgets, setWidgets] = React.useState(() => {
    const saved = localStorage.getItem('esperiency_analytics_widgets');
    return saved ? JSON.parse(saved) : defaultWidgets;
  });

  const [draggedIdx, setDraggedIdx] = React.useState(null);

  React.useEffect(() => {
    localStorage.setItem('esperiency_analytics_widgets', JSON.stringify(widgets));
  }, [widgets]);

  React.useEffect(() => {
    // Register Chart.js elements if needed
    if (window.Chart) {
      try {
        Chart.register(
          Chart.CategoryScale, Chart.LinearScale, Chart.BarElement, 
          Chart.ArcElement, Chart.PointElement, Chart.LineElement, 
          Chart.Tooltip, Chart.Legend, Chart.Filler
        );
      } catch (e) {
        // already registered
      }
    }

    const fetchData = async () => {
      try {
        const [aptsRes, tenRes] = await Promise.all([
          fetch('/api/apartments').catch(() => ({ ok: false })),
          fetch('/api/tenants').catch(() => ({ ok: false }))
        ]);
        
        let apartments = [];
        let tenants = [];

        if (aptsRes.ok) apartments = await aptsRes.json();
        if (tenRes.ok) tenants = await tenRes.json();

        setData({ apartments: apartments || [], tenants: tenants || [] });
      } catch (error) {
        console.error("Error fetching analytics data:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  // Calculate Data for Charts
  const getOccupancyData = () => {
    const occupied = data.apartments.filter(a => a.status === 'occupied').length;
    const available = data.apartments.filter(a => a.status !== 'occupied').length;
    return {
      labels: ['Ocupado', 'Disponible'],
      datasets: [{
        data: [occupied, available],
        backgroundColor: ['#10b981', '#374151'],
        borderWidth: 0,
        hoverOffset: 4
      }]
    };
  };

  const getTenantStatusData = () => {
    const active = data.tenants.filter(t => t.status === 'active').length;
    const inactive = data.tenants.filter(t => t.status !== 'active').length;
    return {
      labels: ['Activos', 'Inactivos'],
      datasets: [{
        data: [active, inactive],
        backgroundColor: ['#3b82f6', '#4b5563'],
        borderWidth: 0,
        hoverOffset: 4
      }]
    };
  };

  const getPriceDistData = () => {
    const ranges = { '0-500': 0, '501-1000': 0, '1001-1500': 0, '1500+': 0 };
    data.apartments.forEach(apt => {
      const p = apt.rentAmount || 0;
      if (p <= 500) ranges['0-500']++;
      else if (p <= 1000) ranges['501-1000']++;
      else if (p <= 1500) ranges['1001-1500']++;
      else ranges['1500+']++;
    });

    return {
      labels: Object.keys(ranges),
      datasets: [{
        label: 'Departamentos por Rango de Precio',
        data: Object.values(ranges),
        backgroundColor: '#8b5cf6',
        borderRadius: 4
      }]
    };
  };

  const getRevenueData = () => {
    // Mock 6 months trend based on current total rent
    const totalRent = data.apartments
      .filter(a => a.status === 'occupied')
      .reduce((sum, a) => sum + (a.rentAmount || 0), 0);
    
    const months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'];
    // Generate slight variations
    const trend = months.map((_, i) => totalRent * (0.8 + (i * 0.05)));

    return {
      labels: months,
      datasets: [{
        label: 'Ingresos Mensuales ($)',
        data: trend,
        borderColor: '#f59e0b',
        backgroundColor: 'rgba(245, 158, 11, 0.1)',
        borderWidth: 3,
        tension: 0.4,
        fill: true
      }]
    };
  };

  const chartOptions = {
    plugins: {
      legend: { labels: { color: '#e5e7eb', font: { family: 'Inter' } } }
    },
    scales: {
      x: { ticks: { color: '#9ca3af' }, grid: { color: '#374151', drawBorder: false } },
      y: { ticks: { color: '#9ca3af' }, grid: { color: '#374151', drawBorder: false } }
    }
  };

  const pieOptions = {
    plugins: {
      legend: { position: 'bottom', labels: { color: '#e5e7eb', padding: 20, usePointStyle: true } }
    }
  };

  const removeWidget = (id) => {
    setWidgets(widgets.filter(w => w.id !== id));
  };

  const resetWidgets = () => {
    setWidgets(defaultWidgets);
  };

  const handleDragStart = (e, index) => {
    setDraggedIdx(index);
    e.dataTransfer.effectAllowed = 'move';
    // Transparent drag image
    const img = new Image();
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    e.dataTransfer.setDragImage(img, 0, 0);
  };

  const handleDragOver = (e, index) => {
    e.preventDefault();
    if (draggedIdx === null || draggedIdx === index) return;
    
    const newWidgets = [...widgets];
    const draggedItem = newWidgets[draggedIdx];
    newWidgets.splice(draggedIdx, 1);
    newWidgets.splice(index, 0, draggedItem);
    
    setDraggedIdx(index);
    setWidgets(newWidgets);
  };

  const handleDragEnd = () => {
    setDraggedIdx(null);
  };

  const renderWidgetContent = (id) => {
    if (loading) return <AnalyticsSkeleton />;

    switch (id) {
      case 'revenue':
        return <ChartWidget type="line" data={getRevenueData()} options={chartOptions} />;
      case 'occupancy':
        return <ChartWidget type="pie" data={getOccupancyData()} options={pieOptions} />;
      case 'tenantStatus':
        return <ChartWidget type="doughnut" data={getTenantStatusData()} options={pieOptions} />;
      case 'priceDist':
        return <ChartWidget type="bar" data={getPriceDistData()} options={chartOptions} />;
      default:
        return <div className="text-gray-500">Widget no encontrado</div>;
    }
  };

  return (
    <div className="w-full h-full p-4 md:p-8 animate-fadeIn">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
        <div>
          <h1 className="text-3xl font-bold text-white mb-2">Analítica y Reportes</h1>
          <p className="text-gray-400">Visualiza el rendimiento de tus propiedades con datos reales.</p>
        </div>
        <div className="flex gap-3">
          {widgets.length < defaultWidgets.length && (
            <button 
              onClick={resetWidgets}
              className="px-4 py-2 bg-[#252628] hover:bg-[#333538] text-white rounded-lg transition-colors text-sm font-medium border border-[#3c3c55]"
            >
              <i className="fas fa-undo mr-2"></i> Restaurar Widgets
            </button>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {widgets.map((widget, idx) => (
          <div 
            key={widget.id}
            draggable
            onDragStart={(e) => handleDragStart(e, idx)}
            onDragOver={(e) => handleDragOver(e, idx)}
            onDragEnd={handleDragEnd}
            className={\`
              relative bg-[#111215] border border-[#252628] rounded-2xl p-5
              transition-all duration-300 ease-in-out group cursor-move
              \${widget.size === 'large' ? 'md:col-span-2 lg:col-span-2' : 'col-span-1'}
              \${draggedIdx === idx ? 'opacity-40 scale-95 border-dashed border-[#4a4b50]' : 'hover:border-[#3c3c55] hover:shadow-lg'}
            \`}
          >
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-white font-semibold flex items-center gap-2">
                <i className="fas fa-grip-vertical text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity"></i>
                {widget.title}
              </h3>
              <button 
                onClick={() => removeWidget(widget.id)}
                className="text-gray-500 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100 p-1"
                title="Quitar widget"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            <div className="h-64 w-full">
              {renderWidgetContent(widget.id)}
            </div>
          </div>
        ))}

        {widgets.length === 0 && (
          <div className="col-span-full py-20 flex flex-col items-center justify-center border-2 border-dashed border-[#252628] rounded-2xl">
            <i className="fas fa-chart-pie text-4xl text-gray-600 mb-4"></i>
            <p className="text-gray-400 mb-4">No hay widgets activos en tu dashboard</p>
            <button 
              onClick={resetWidgets}
              className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
            >
              Restaurar vista por defecto
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// Hacer disponible globalmente para Babel
window.AnalyticsDashboard = AnalyticsDashboard;