import React, { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { Home, LayoutDashboard, Package, ShoppingBag, Megaphone, DollarSign, Link2, FileText, HelpCircle, Menu, TrendingUp, RefreshCw, Search, Filter, Download } from 'lucide-react';

export default function EcomfactoryDashboard() {
  const [activeView, setActiveView] = useState('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [importedData, setImportedData] = useState(null);
  const [fileName, setFileName] = useState('');

  const [calcData, setCalcData] = useState({
    precioProveedor: 250,
    fleteBase: 200,
    devolucion: 30,
    costosAdmin: 10,
    fulfillment: 0,
    cpaAdsManager: 91,
    cancelacion: 10,
    utilidadPorcentaje: 20
  });

  const kpiData = importedData ? {
    pedidosShopify: importedData.length,
    pedidosDropi: importedData.length,
    ingresos: importedData.reduce((sum, item) => sum + (item['VALOR DE COMPRA EN PRODUCTOS'] || 0), 0),
    costos: importedData.reduce((sum, item) => sum + (item['TOTAL EN PRECIOS DE PROVEEDOR'] || 0), 0),
    marketing: importedData.reduce((sum, item) => sum + (item['PRECIO FLETE'] || 0), 0),
    beneficioNeto: importedData.reduce((sum, item) => sum + (item['GANANCIA'] || 0), 0),
    beneficioProyecto: importedData.reduce((sum, item) => sum + (item['GANANCIA'] || 0), 0) * 1.6,
    margenBeneficio: 94,
    roi: 275.15,
    prevROI: 442.04,
    ingresosBrutos: importedData.reduce((sum, item) => sum + (item['VALOR DE COMPRA EN PRODUCTOS'] || 0), 0),
    prevIngresos: 505654.45,
    cpa: 83.32,
    ticketPromedio: importedData.length > 0 ? importedData.reduce((sum, item) => sum + (item['VALOR DE COMPRA EN PRODUCTOS'] || 0), 0) / importedData.length : 0,
    ticketDevolucion: 10407.84,
    devoluciones: importedData.filter(item => item['ESTATUS'] === 'DEVOLUCION').reduce((sum, item) => sum + (item['VALOR DE COMPRA EN PRODUCTOS'] || 0), 0),
    devolucionesCount: importedData.filter(item => item['ESTATUS'] === 'DEVOLUCION').length,
    efectividad: importedData.length > 0 ? (importedData.filter(item => item['ESTATUS'] === 'ENTREGADO').length / importedData.length * 100).toFixed(2) : 0,
    pendientes: importedData.length > 0 ? (importedData.filter(item => !['ENTREGADO', 'DEVOLUCION', 'CANCELADO'].includes(item['ESTATUS'])).length / importedData.length * 100).toFixed(2) : 0,
    devueltos: importedData.length > 0 ? (importedData.filter(item => item['ESTATUS'] === 'DEVOLUCION').length / importedData.length * 100).toFixed(2) : 0,
    entregados: importedData.length > 0 ? (importedData.filter(item => item['ESTATUS'] === 'ENTREGADO').length / importedData.length * 100).toFixed(2) : 0,
    confirmacion: importedData.filter(item => item['ESTATUS'] === 'EN CONFIRMACION' || item['ESTATUS'] === 'CONFIRMADO').length,
    envio: importedData.filter(item => item['ESTATUS'] === 'EN ENVIO' || item['ESTATUS'] === 'EN TRANSITO').length,
    cancelados: importedData.filter(item => item['ESTATUS'] === 'CANCELADO').length,
    devolucionesFinal: importedData.filter(item => item['ESTATUS'] === 'DEVOLUCION').length
  } : {
    pedidosShopify: 8993,
    pedidosDropi: 9152,
    ingresos: 1235251750.00,
    costos: 171655772.30,
    marketing: 749330.00,
    beneficioNeto: 206177137.70,
    beneficioProyecto: 331236061.25,
    margenBeneficio: 94,
    roi: 275.15,
    prevROI: 442.04,
    ingresosBrutos: 219343018.70,
    prevIngresos: 505654.45,
    cpa: 83.32,
    ticketPromedio: 134870.69,
    ticketDevolucion: 10407.84,
    devoluciones: 12416551.00,
    devolucionesCount: 1193,
    efectividad: 91.89,
    pendientes: 26.06,
    devueltos: 13.04,
    entregados: 30.87,
    confirmacion: 1797,
    envio: 588,
    cancelados: 788,
    devolucionesFinal: 1193
  };

  const pedidosData = importedData ? importedData.slice(0, 10).map(item => ({
    id: `#${item['ID'] || 'N/A'}`,
    fecha: item['FECHA'] || 'N/A',
    cliente: item['NOMBRE CLIENTE'] || 'N/A',
    producto: item['CATEGORÍAS'] || 'N/A',
    estado: item['ESTATUS'] || 'N/A',
    total: item['VALOR DE COMPRA EN PRODUCTOS'] || 0
  })) : [
    { id: '#ORD-001', fecha: '2025-01-10', cliente: 'Juan Pérez', producto: 'Producto A', estado: 'ENTREGADO', total: 1250.00 },
    { id: '#ORD-002', fecha: '2025-01-10', cliente: 'María García', producto: 'Producto B', estado: 'PENDIENTE', total: 850.00 },
    { id: '#ORD-003', fecha: '2025-01-09', cliente: 'Carlos López', producto: 'Producto C', estado: 'CANCELADO', total: 1500.00 },
    { id: '#ORD-004', fecha: '2025-01-09', cliente: 'Ana Martínez', producto: 'Producto A', estado: 'DEVOLUCION', total: 1250.00 },
    { id: '#ORD-005', fecha: '2025-01-08', cliente: 'Luis Rodríguez', producto: 'Producto D', estado: 'ENTREGADO', total: 2100.00 },
  ];

  const productosData = [
    { nombre: 'Producto A', categoria: 'Electrónica', total: 450, entregados: 380, efectividad: 84.4, ingresos: 562500.00 },
    { nombre: 'Producto B', categoria: 'Hogar', total: 320, entregados: 290, efectividad: 90.6, ingresos: 246500.00 },
    { nombre: 'Producto C', categoria: 'Moda', total: 280, entregados: 210, efectividad: 75.0, ingresos: 420000.00 },
    { nombre: 'Producto D', categoria: 'Deportes', total: 180, entregados: 165, efectividad: 91.7, ingresos: 346500.00 },
  ];

  const temporalData = Array.from({ length: 30 }, (_, i) => ({
    fecha: `${18 + i}/05`,
    ingresos: Math.random() * 50000000 + 40000000,
    marketing: Math.random() * 1000000 + 500000,
    costos: Math.random() * 20000000 + 15000000,
    ganancia: Math.random() * 30000000 + 20000000
  }));

  const estadosData = importedData ? [
    { 
      name: 'Pendientes', 
      value: parseFloat(kpiData.pendientes), 
      color: '#FFA726', 
      count: importedData.filter(item => !['ENTREGADO', 'DEVOLUCION', 'CANCELADO'].includes(item['ESTATUS'])).length 
    },
    { 
      name: 'Devueltos', 
      value: parseFloat(kpiData.devueltos), 
      color: '#EF5350', 
      count: kpiData.devolucionesCount 
    },
    { 
      name: 'Entregados', 
      value: parseFloat(kpiData.entregados), 
      color: '#66BB6A', 
      count: importedData.filter(item => item['ESTATUS'] === 'ENTREGADO').length 
    }
  ] : [
    { name: 'Pendientes', value: kpiData.pendientes, color: '#FFA726', count: kpiData.confirmacion + kpiData.envio },
    { name: 'Devueltos', value: kpiData.devueltos, color: '#EF5350', count: kpiData.devolucionesCount },
    { name: 'Entregados', value: kpiData.entregados, color: '#66BB6A', count: Math.round(kpiData.pedidosDropi * 0.3087) }
  ];

  const formatCurrency = (value) => {
    return new Intl.NumberFormat('es-MX', {
      style: 'currency',
      currency: 'MXN',
      minimumFractionDigits: 2
    }).format(value);
  };

  const formatNumber = (value) => {
    return new Intl.NumberFormat('es-MX').format(value);
  };

  const calcularResultados = () => {
    const { precioProveedor, fleteBase, devolucion, costosAdmin, fulfillment, cpaAdsManager, cancelacion, utilidadPorcentaje } = calcData;
    
    const cancelacionDecimal = cancelacion / 100;
    const devolucionDecimal = devolucion / 100;
    const utilidadDecimal = utilidadPorcentaje / 100;

    const fleteAjustado = fleteBase / (1 - devolucionDecimal);
    const cpaBase = cpaAdsManager;
    const cpaAjustado = cpaBase / (1 - cancelacionDecimal - devolucionDecimal);
    const costosTotales = precioProveedor + fleteAjustado + costosAdmin + fulfillment + cpaAjustado;
    const precioVentaCalculado = costosTotales / (1 - utilidadDecimal);
    const utilidadMonto = precioVentaCalculado - costosTotales;
    const cpaObjetivoPorcentaje = precioVentaCalculado > 0 ? (cpaBase / precioVentaCalculado) * 100 : 0;
    const precioComparacion = precioVentaCalculado * 1.40;
    const roasObjetivo = cpaBase > 0 ? precioVentaCalculado / cpaBase : 0;
    
    const costosFixosSinCPA = precioProveedor + fleteAjustado + costosAdmin + fulfillment;
    const margenDisponibleParaCPA = precioVentaCalculado - costosFixosSinCPA;
    const cpaBreak = margenDisponibleParaCPA * (1 - cancelacionDecimal - devolucionDecimal);
    const roasBreak = cpaBreak > 0 ? precioVentaCalculado / cpaBreak : 0;
    
    const cpaMalo = cpaBase * 1.20;
    const cpaOptimoVal = cpaBase;
    const cpaBuenoVal = cpaBase * 0.80;
    const cpaExcelenteVal = cpaBase * 0.55;

    return {
      fleteAjustado,
      cpaAjustado,
      costosTotales,
      precioVentaCalculado,
      utilidadMonto,
      cpaObjetivoPorcentaje,
      precioComparacion,
      roasObjetivo,
      cpaBreak,
      roasBreak,
      cpaMalo,
      cpaOptimoVal,
      cpaBuenoVal,
      cpaExcelenteVal
    };
  };

  const MenuItem = ({ icon: Icon, label, view, active }) => (
    <button
      onClick={() => setActiveView(view)}
      className={`menu-item ${active ? 'active' : ''}`}
    >
      <Icon size={20} />
      {sidebarOpen && <span>{label}</span>}
    </button>
  );

  const MetricCard = ({ title, value, subtitle, bgColor, icon }) => (
    <div className="metric-card" style={{ background: bgColor }}>
      <div style={{ flex: 1 }}>
        <div className="metric-title">{icon} {title}</div>
        <div className="metric-value">{value}</div>
        {subtitle && <div className="metric-subtitle">{subtitle}</div>}
      </div>
      <button className="metric-button">Ver más</button>
    </div>
  );

  const InfoBox = ({ label, value, sublabel }) => (
    <div className="info-box">
      <div className="info-label">{label}</div>
      <div className="info-value">{value}</div>
      {sublabel && <div className="info-sublabel">{sublabel}</div>}
    </div>
  );

  const handleFileUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    setIsLoading(true);
    setFileName(file.name);

    try {
      const XLSX = await import('https://cdn.sheetjs.com/xlsx-0.20.1/package/xlsx.mjs');
      
      const arrayBuffer = await file.arrayBuffer();
      const workbook = XLSX.read(arrayBuffer, {
        cellStyles: true,
        cellDates: true,
        cellNF: true
      });

      const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
      const data = XLSX.utils.sheet_to_json(firstSheet);
      
      setImportedData(data);
      setActiveView('dashboard');
      
      setTimeout(() => setIsLoading(false), 1000);
    } catch (error) {
      console.error('Error al procesar el archivo:', error);
      alert('Error al procesar el archivo. Asegúrate de que sea un archivo Excel válido.');
      setIsLoading(false);
    }
  };

  const renderContent = () => {
    if (activeView === 'importar') {
      return (
        <div>
          <div className="card" style={{ maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
            <h3 className="card-title" style={{ justifyContent: 'center', fontSize: '24px' }}>
              📂 Importar Datos desde Excel
            </h3>
            <p style={{ color: '#aaa', fontSize: '16px', marginBottom: '30px' }}>
              Carga tu archivo de órdenes de DROPI en formato Excel (.xlsx) para analizar tus datos sin necesidad de conexión API
            </p>

            {!importedData ? (
              <div>
                <div style={{
                  border: '2px dashed rgba(238,39,55,0.5)',
                  borderRadius: '12px',
                  padding: '60px 40px',
                  marginBottom: '30px',
                  background: 'rgba(238,39,55,0.05)',
                  cursor: 'pointer',
                  transition: 'all 0.3s'
                }}
                onDragOver={(e) => {
                  e.preventDefault();
                  e.currentTarget.style.borderColor = '#ee2737';
                  e.currentTarget.style.background = 'rgba(238,39,55,0.1)';
                }}
                onDragLeave={(e) => {
                  e.currentTarget.style.borderColor = 'rgba(238,39,55,0.5)';
                  e.currentTarget.style.background = 'rgba(238,39,55,0.05)';
                }}
                onDrop={(e) => {
                  e.preventDefault();
                  e.currentTarget.style.borderColor = 'rgba(238,39,55,0.5)';
                  e.currentTarget.style.background = 'rgba(238,39,55,0.05)';
                  const file = e.dataTransfer.files[0];
                  if (file) {
                    const fakeEvent = { target: { files: [file] } };
                    handleFileUpload(fakeEvent);
                  }
                }}
                onClick={() => document.getElementById('fileInput').click()}>
                  <Download size={64} color="#ee2737" style={{ marginBottom: '20px' }} />
                  <h4 style={{ color: '#fff', fontSize: '20px', marginBottom: '10px' }}>
                    Arrastra tu archivo aquí
                  </h4>
                  <p style={{ color: '#aaa', fontSize: '14px', marginBottom: '20px' }}>
                    o haz clic para seleccionar
                  </p>
                  <input
                    id="fileInput"
                    type="file"
                    accept=".xlsx,.xls"
                    onChange={handleFileUpload}
                    style={{ display: 'none' }}
                  />
                  <button style={{
                    padding: '12px 30px',
                    background: 'linear-gradient(135deg, #ee2737 0%, #be1f2c 100%)',
                    border: 'none',
                    borderRadius: '8px',
                    color: 'white',
                    fontSize: '14px',
                    fontWeight: '600',
                    cursor: 'pointer'
                  }}>
                    Seleccionar Archivo
                  </button>
                </div>

                <div style={{ textAlign: 'left', background: '#1a1a1a', borderRadius: '8px', padding: '20px' }}>
                  <h4 style={{ color: '#ff6b7a', fontSize: '14px', marginBottom: '15px', fontWeight: '600' }}>
                    📋 Formato esperado del archivo:
                  </h4>
                  <ul style={{ color: '#aaa', fontSize: '13px', lineHeight: '1.8', paddingLeft: '20px' }}>
                    <li>Archivo Excel (.xlsx o .xls)</li>
                    <li>Debe contener las columnas: ID, FECHA, NOMBRE CLIENTE, ESTATUS, VALOR DE COMPRA EN PRODUCTOS, etc.</li>
                    <li>El sistema reconocerá automáticamente las columnas estándar de DROPI</li>
                    <li>Se procesarán todos los registros y se calcularán los KPIs automáticamente</li>
                  </ul>
                </div>
              </div>
            ) : (
              <div>
                <div style={{
                  background: 'linear-gradient(135deg, #2ed573 0%, #26d071 100%)',
                  borderRadius: '12px',
                  padding: '30px',
                  marginBottom: '30px',
                  boxShadow: '0 4px 20px rgba(46,213,115,0.3)'
                }}>
                  <div style={{ fontSize: '48px', marginBottom: '15px' }}>✅</div>
                  <h3 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '10px' }}>
                    ¡Archivo Cargado Exitosamente!
                  </h3>
                  <p style={{ fontSize: '14px', opacity: 0.9 }}>
                    {fileName}
                  </p>
                  <p style={{ fontSize: '16px', fontWeight: '600', marginTop: '15px' }}>
                    {importedData.length} órdenes procesadas
                  </p>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '20px', marginBottom: '30px' }}>
                  <div className="info-box">
                    <div className="info-label">ENTREGADOS</div>
                    <div className="info-value" style={{ color: '#2ed573' }}>
                      {importedData.filter(item => item['ESTATUS'] === 'ENTREGADO').length}
                    </div>
                    <div className="info-sublabel">
                      {((importedData.filter(item => item['ESTATUS'] === 'ENTREGADO').length / importedData.length) * 100).toFixed(1)}%
                    </div>
                  </div>
                  
                  <div className="info-box">
                    <div className="info-label">DEVUELTOS</div>
                    <div className="info-value" style={{ color: '#EF5350' }}>
                      {importedData.filter(item => item['ESTATUS'] === 'DEVOLUCION').length}
                    </div>
                    <div className="info-sublabel">
                      {((importedData.filter(item => item['ESTATUS'] === 'DEVOLUCION').length / importedData.length) * 100).toFixed(1)}%
                    </div>
                  </div>
                  
                  <div className="info-box">
                    <div className="info-label">INGRESOS TOTALES</div>
                    <div className="info-value">
                      {formatCurrency(importedData.reduce((sum, item) => sum + (item['VALOR DE COMPRA EN PRODUCTOS'] || 0), 0))}
                    </div>
                  </div>
                </div>

                <div style={{ display: 'flex', gap: '15px', justifyContent: 'center' }}>
                  <button
                    onClick={() => setActiveView('dashboard')}
                    style={{
                      padding: '12px 30px',
                      background: 'linear-gradient(135deg, #ee2737 0%, #be1f2c 100%)',
                      border: 'none',
                      borderRadius: '8px',
                      color: 'white',
                      fontSize: '14px',
                      fontWeight: '600',
                      cursor: 'pointer'
                    }}>
                    📊 Ver Dashboard
                  </button>
                  
                  <button
                    onClick={() => {
                      setImportedData(null);
                      setFileName('');
                    }}
                    style={{
                      padding: '12px 30px',
                      background: '#2a2a2a',
                      border: '1px solid rgba(238,39,55,0.3)',
                      borderRadius: '8px',
                      color: '#fff',
                      fontSize: '14px',
                      fontWeight: '600',
                      cursor: 'pointer'
                    }}>
                    🔄 Cargar Otro Archivo
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      );
    }

    if (activeView === 'home') {
      return (
        <div>
          <div className="welcome-banner">
            <h1 style={{ fontSize: '48px', marginBottom: '20px' }}>🚀</h1>
            <h2 style={{ fontSize: '32px', fontWeight: 'bold', color: '#fff', marginBottom: '15px' }}>
              Bienvenido a ECOMFACTORY
            </h2>
            <p style={{ fontSize: '16px', color: '#aaa', maxWidth: '600px', margin: '0 auto' }}>
              Sistema automatizado para gestión de operaciones COD. Conecta DROPI y visualiza tu rentabilidad en tiempo real.
            </p>
          </div>

          <div className="features-grid">
            <div className="feature-card" style={{ borderLeft: '4px solid #2ed573' }}>
              <h3 style={{ color: '#2ed573', fontSize: '20px', marginBottom: '10px' }}>1️⃣ Conecta</h3>
              <p>Ingresa tus credenciales de DROPI y Shopify una sola vez</p>
            </div>
            <div className="feature-card" style={{ borderLeft: '4px solid #ee2737' }}>
              <h3 style={{ color: '#ee2737', fontSize: '20px', marginBottom: '10px' }}>2️⃣ Sincroniza</h3>
              <p>El sistema obtiene automáticamente todos tus pedidos</p>
            </div>
            <div className="feature-card" style={{ borderLeft: '4px solid #ffb800' }}>
              <h3 style={{ color: '#ffb800', fontSize: '20px', marginBottom: '10px' }}>3️⃣ Analiza</h3>
              <p>Dashboard, alertas y reportes actualizados en tiempo real</p>
            </div>
            <div className="feature-card" style={{ borderLeft: '4px solid #ee2737' }}>
              <h3 style={{ color: '#ee2737', fontSize: '20px', marginBottom: '10px' }}>4️⃣ Optimiza</h3>
              <p>Toma decisiones basadas en datos reales</p>
            </div>
          </div>
        </div>
      );
    }

    if (activeView === 'calculadora') {
      const resultados = calcularResultados();
      
      return (
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '20px', marginBottom: '20px' }}>
            <div className="card">
              <h3 className="card-title">🧮 Calculadora de Precio COD</h3>
              
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '25px' }}>
                {[
                  { label: 'Precio Proveedor', key: 'precioProveedor' },
                  { label: 'Flete Base', key: 'fleteBase' },
                  { label: '% Devolución', key: 'devolucion' },
                  { label: 'Costos Admin', key: 'costosAdmin' },
                  { label: 'Fulfillment', key: 'fulfillment' },
                  { label: 'CPA Ads Manager', key: 'cpaAdsManager' },
                  { label: '% Cancelación', key: 'cancelacion' },
                  { label: '% Utilidad Objetivo', key: 'utilidadPorcentaje' }
                ].map(field => (
                  <div key={field.key}>
                    <label className="input-label">{field.label}</label>
                    <input
                      type="number"
                      className="input-field"
                      value={calcData[field.key]}
                      onChange={(e) => setCalcData({...calcData, [field.key]: parseFloat(e.target.value) || 0})}
                    />
                  </div>
                ))}
              </div>
              
              <div className="result-box">
                <div style={{ fontSize: '13px', fontWeight: '600', marginBottom: '10px', opacity: 0.9 }}>
                  PRECIO DE VENTA CALCULADO
                </div>
                <div style={{ fontSize: '42px', fontWeight: 'bold' }}>
                  {formatCurrency(resultados.precioVentaCalculado)}
                </div>
                <div style={{ fontSize: '13px', marginTop: '8px', opacity: 0.9 }}>
                  Utilidad: {formatCurrency(resultados.utilidadMonto)} ({calcData.utilidadPorcentaje}%)
                </div>
              </div>
            </div>

            <div className="card">
              <h3 className="card-title">📊 KPIs Rentables</h3>
              
              <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
                <div className="kpi-box">
                  <div className="kpi-label">CPA OBJETIVO</div>
                  <div className="kpi-value">{formatCurrency(calcData.cpaAdsManager)}</div>
                  <div className="kpi-sub">{resultados.cpaObjetivoPorcentaje.toFixed(1)}% del precio de venta</div>
                </div>
                
                <div className="kpi-box">
                  <div className="kpi-label">ROAS OBJETIVO</div>
                  <div className="kpi-value">{resultados.roasObjetivo.toFixed(2)}x</div>
                  <div className="kpi-sub">Return on Ad Spend</div>
                </div>
                
                <div className="kpi-box">
                  <div className="kpi-label">CPA BREAK-EVEN</div>
                  <div className="kpi-value">{formatCurrency(resultados.cpaBreak)}</div>
                  <div className="kpi-sub">ROAS: {resultados.roasBreak.toFixed(2)}x</div>
                </div>
                
                <div className="kpi-box">
                  <div className="kpi-label">PRECIO COMPARACIÓN</div>
                  <div className="kpi-value">{formatCurrency(resultados.precioComparacion)}</div>
                  <div className="kpi-sub">+40% para descuentos</div>
                </div>
              </div>
            </div>

            <div className="card">
              <h3 className="card-title">🎯 Escenarios de CPA</h3>
              
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                {[
                  { label: 'MALO', cpa: resultados.cpaMalo, color: '#EF5350' },
                  { label: 'ÓPTIMO', cpa: resultados.cpaOptimoVal, color: '#FFA726' },
                  { label: 'BUENO', cpa: resultados.cpaBuenoVal, color: '#66BB6A' },
                  { label: 'EXCELENTE', cpa: resultados.cpaExcelenteVal, color: '#2ed573' }
                ].map((escenario, idx) => (
                  <div key={idx} className="scenario-box" style={{ borderColor: escenario.color }}>
                    <div>
                      <div style={{ color: escenario.color, fontSize: '12px', fontWeight: 'bold', marginBottom: '5px' }}>
                        {escenario.label}
                      </div>
                      <div style={{ color: '#fff', fontSize: '20px', fontWeight: 'bold' }}>
                        {formatCurrency(escenario.cpa)}
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ color: '#aaa', fontSize: '11px', marginBottom: '5px' }}>ROAS</div>
                      <div style={{ color: escenario.color, fontSize: '18px', fontWeight: 'bold' }}>
                        {(resultados.precioVentaCalculado / escenario.cpa).toFixed(2)}x
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="card">
            <h3 className="card-title">📈 Rangos de KPIs Recomendados</h3>
            
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '20px' }}>
              {[
                {
                  title: 'EFECTIVIDAD',
                  ranges: [
                    { label: '🔴 Malo', value: '< 50%' },
                    { label: '🟡 Regular', value: '50% - 70%' },
                    { label: '🟢 Bueno', value: '70% - 85%' },
                    { label: '✅ Excelente', value: '> 85%' }
                  ]
                },
                {
                  title: 'MARGEN DE UTILIDAD',
                  ranges: [
                    { label: '🔴 Bajo', value: '< 15%' },
                    { label: '🟡 Aceptable', value: '15% - 25%' },
                    { label: '🟢 Bueno', value: '25% - 35%' },
                    { label: '✅ Excelente', value: '> 35%' }
                  ]
                },
                {
                  title: 'ROAS',
                  ranges: [
                    { label: '🔴 Pérdida', value: '< 1.5x' },
                    { label: '🟡 Break-even', value: '1.5x - 2.5x' },
                    { label: '🟢 Rentable', value: '2.5x - 4x' },
                    { label: '✅ Óptimo', value: '> 4x' }
                  ]
                },
                {
                  title: '% DEVOLUCIONES',
                  ranges: [
                    { label: '✅ Excelente', value: '< 5%' },
                    { label: '🟢 Bueno', value: '5% - 15%' },
                    { label: '🟡 Atención', value: '15% - 25%' },
                    { label: '🔴 Crítico', value: '> 25%' }
                  ]
                }
              ].map((section, idx) => (
                <div key={idx} className="range-box">
                  <div className="range-title">{section.title}</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                    {section.ranges.map((range, i) => (
                      <div key={i} className="range-item">
                        <span style={{ fontSize: '14px' }}>{range.label}</span>
                        <span style={{ fontWeight: '600' }}>{range.value}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    }

    if (activeView === 'pedidos') {
      return (
        <div>
          <div style={{ display: 'flex', gap: '15px', marginBottom: '25px', flexWrap: 'wrap' }}>
            <div style={{ position: 'relative', flex: 1, minWidth: '200px' }}>
              <Search size={18} style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: '#aaa' }} />
              <input
                type="text"
                placeholder="Buscar pedidos..."
                style={{
                  width: '100%',
                  padding: '12px 12px 12px 45px',
                  background: '#2a2a2a',
                  border: '1px solid rgba(238,39,55,0.3)',
                  borderRadius: '8px',
                  color: '#fff',
                  fontSize: '14px'
                }}
              />
            </div>
            <button style={{
              padding: '12px 24px',
              background: '#ee2737',
              border: 'none',
              borderRadius: '8px',
              color: 'white',
              fontSize: '14px',
              fontWeight: '600',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '8px'
            }}>
              <Filter size={18} /> Filtrar
            </button>
            <button style={{
              padding: '12px 24px',
              background: '#2ed573',
              border: 'none',
              borderRadius: '8px',
              color: 'white',
              fontSize: '14px',
              fontWeight: '600',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '8px'
            }}>
              <Download size={18} /> Exportar
            </button>
          </div>

          {importedData && (
            <div style={{
              background: 'linear-gradient(135deg, #2ed573 0%, #26d071 100%)',
              borderRadius: '8px',
              padding: '12px 20px',
              marginBottom: '20px',
              display: 'flex',
              alignItems: 'center',
              gap: '10px',
              color: 'white',
              fontSize: '14px',
              fontWeight: '500'
            }}>
              ✅ Mostrando datos importados: {fileName} ({importedData.length} órdenes)
            </div>
          )}

          <div className="card">
            <h3 className="card-title">📦 Pedidos Recientes</h3>
            <div style={{ overflowX: 'auto' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: '#1a1a1a', borderBottom: '2px solid #ee2737' }}>
                    <th style={{ padding: '15px', textAlign: 'left', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>ID</th>
                    <th style={{ padding: '15px', textAlign: 'left', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Fecha</th>
                    <th style={{ padding: '15px', textAlign: 'left', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Cliente</th>
                    <th style={{ padding: '15px', textAlign: 'left', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Producto</th>
                    <th style={{ padding: '15px', textAlign: 'left', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Estado</th>
                    <th style={{ padding: '15px', textAlign: 'right', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Total</th>
                  </tr>
                </thead>
                <tbody>
                  {pedidosData.map((pedido, idx) => (
                    <tr key={idx} style={{ borderBottom: '1px solid rgba(238,39,55,0.1)' }}>
                      <td style={{ padding: '15px', color: '#fff', fontWeight: '600' }}>{pedido.id}</td>
                      <td style={{ padding: '15px', color: '#aaa' }}>{pedido.fecha}</td>
                      <td style={{ padding: '15px', color: '#fff' }}>{pedido.cliente}</td>
                      <td style={{ padding: '15px', color: '#aaa' }}>{pedido.producto}</td>
                      <td style={{ padding: '15px' }}>
                        <span style={{
                          padding: '5px 12px',
                          borderRadius: '20px',
                          fontSize: '11px',
                          fontWeight: 'bold',
                          background: pedido.estado === 'ENTREGADO' ? 'rgba(46,213,115,0.2)' : 
                                     pedido.estado === 'PENDIENTE' || pedido.estado === 'EN TRANSITO' || pedido.estado === 'EN ENVIO' ? 'rgba(255,184,0,0.2)' :
                                     pedido.estado === 'CANCELADO' ? 'rgba(238,39,55,0.2)' : 'rgba(239,83,80,0.2)',
                          color: pedido.estado === 'ENTREGADO' ? '#2ed573' : 
                                 pedido.estado === 'PENDIENTE' || pedido.estado === 'EN TRANSITO' || pedido.estado === 'EN ENVIO' ? '#ffb800' :
                                 pedido.estado === 'CANCELADO' ? '#ee2737' : '#EF5350',
                          border: `1px solid ${pedido.estado === 'ENTREGADO' ? '#2ed573' : 
                                               pedido.estado === 'PENDIENTE' || pedido.estado === 'EN TRANSITO' || pedido.estado === 'EN ENVIO' ? '#ffb800' :
                                               pedido.estado === 'CANCELADO' ? '#ee2737' : '#EF5350'}`
                        }}>
                          {pedido.estado}
                        </span>
                      </td>
                      <td style={{ padding: '15px', color: '#fff', textAlign: 'right', fontWeight: '600' }}>
                        {formatCurrency(pedido.total)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            
            {importedData && importedData.length > 10 && (
              <div style={{ 
                marginTop: '20px', 
                textAlign: 'center',
                padding: '15px',
                background: '#1a1a1a',
                borderRadius: '8px'
              }}>
                <p style={{ color: '#aaa', fontSize: '14px', margin: 0 }}>
                  Mostrando 10 de {importedData.length} órdenes
                </p>
                <button style={{
                  marginTop: '10px',
                  padding: '8px 20px',
                  background: '#ee2737',
                  border: 'none',
                  borderRadius: '8px',
                  color: 'white',
                  fontSize: '13px',
                  fontWeight: '600',
                  cursor: 'pointer'
                }}>
                  Ver Todas
                </button>
              </div>
            )}
          </div>
        </div>
      );
    }

    if (activeView === 'productos') {
      // Agrupar productos por categoría si hay datos importados
      const productosProcesados = importedData ? (() => {
        const grouped = {};
        importedData.forEach(item => {
          const categorias = item['CATEGORÍAS'] || 'Sin categoría';
          const cats = categorias.split(',').map(c => c.trim());
          cats.forEach(cat => {
            if (!grouped[cat]) {
              grouped[cat] = {
                nombre: cat,
                total: 0,
                entregados: 0,
                ingresos: 0
              };
            }
            grouped[cat].total += 1;
            if (item['ESTATUS'] === 'ENTREGADO') {
              grouped[cat].entregados += 1;
              grouped[cat].ingresos += item['VALOR DE COMPRA EN PRODUCTOS'] || 0;
            }
          });
        });
        
        return Object.values(grouped).map(prod => ({
          ...prod,
          efectividad: prod.total > 0 ? (prod.entregados / prod.total * 100).toFixed(1) : 0
        })).sort((a, b) => b.ingresos - a.ingresos);
      })() : productosData;

      return (
        <div>
          {importedData && (
            <div style={{
              background: 'linear-gradient(135deg, #2ed573 0%, #26d071 100%)',
              borderRadius: '8px',
              padding: '12px 20px',
              marginBottom: '20px',
              display: 'flex',
              alignItems: 'center',
              gap: '10px',
              color: 'white',
              fontSize: '14px',
              fontWeight: '500'
            }}>
              ✅ Mostrando análisis de: {fileName}
            </div>
          )}

          <div className="card">
            <h3 className="card-title">🛍️ Análisis por Producto</h3>
            <div style={{ overflowX: 'auto' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: '#1a1a1a', borderBottom: '2px solid #ee2737' }}>
                    <th style={{ padding: '15px', textAlign: 'left', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Producto/Categoría</th>
                    <th style={{ padding: '15px', textAlign: 'center', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Total</th>
                    <th style={{ padding: '15px', textAlign: 'center', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Entregados</th>
                    <th style={{ padding: '15px', textAlign: 'center', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Efectividad</th>
                    <th style={{ padding: '15px', textAlign: 'right', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Ingresos</th>
                    <th style={{ padding: '15px', textAlign: 'center', color: '#ff6b7a', fontSize: '12px', textTransform: 'uppercase' }}>Estado</th>
                  </tr>
                </thead>
                <tbody>
                  {productosProcesados.map((producto, idx) => (
                    <tr key={idx} style={{ borderBottom: '1px solid rgba(238,39,55,0.1)' }}>
                      <td style={{ padding: '15px', color: '#fff', fontWeight: '600' }}>{producto.nombre}</td>
                      <td style={{ padding: '15px', color: '#fff', textAlign: 'center' }}>{producto.total}</td>
                      <td style={{ padding: '15px', color: '#fff', textAlign: 'center' }}>{producto.entregados}</td>
                      <td style={{ padding: '15px', textAlign: 'center' }}>
                        <span style={{ color: producto.efectividad >= 80 ? '#2ed573' : producto.efectividad >= 60 ? '#ffb800' : '#ee2737', fontWeight: 'bold' }}>
                          {producto.efectividad}%
                        </span>
                      </td>
                      <td style={{ padding: '15px', color: '#fff', textAlign: 'right', fontWeight: '600' }}>
                        {formatCurrency(producto.ingresos)}
                      </td>
                      <td style={{ padding: '15px', textAlign: 'center' }}>
                        <span style={{
                          padding: '5px 12px',
                          borderRadius: '20px',
                          fontSize: '11px',
                          fontWeight: 'bold',
                          background: producto.efectividad >= 80 ? 'rgba(46,213,115,0.2)' : producto.efectividad >= 60 ? 'rgba(255,184,0,0.2)' : 'rgba(238,39,55,0.2)',
                          color: producto.efectividad >= 80 ? '#2ed573' : producto.efectividad >= 60 ? '#ffb800' : '#ee2737',
                          border: `1px solid ${producto.efectividad >= 80 ? '#2ed573' : producto.efectividad >= 60 ? '#ffb800' : '#ee2737'}`
                        }}>
                          {producto.efectividad >= 80 ? 'EXCELENTE' : producto.efectividad >= 60 ? 'BUENO' : 'CRÍTICO'}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      );
    }

    if (activeView === 'dashboard') {
      return (
        <div>
          {!importedData && (
            <div style={{
              background: 'linear-gradient(135deg, #ffb800 0%, #e6a600 100%)',
              borderRadius: '12px',
              padding: '20px',
              marginBottom: '30px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              color: 'white',
              boxShadow: '0 4px 20px rgba(255,184,0,0.3)'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
                <div style={{ fontSize: '40px' }}>💡</div>
                <div>
                  <div style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '5px' }}>
                    Mostrando Datos de Ejemplo
                  </div>
                  <div style={{ fontSize: '14px', opacity: 0.9 }}>
                    Importa tu archivo de DROPI para ver tus datos reales
                  </div>
                </div>
              </div>
              <button
                onClick={() => setActiveView('importar')}
                style={{
                  padding: '10px 20px',
                  background: 'rgba(255,255,255,0.95)',
                  border: 'none',
                  borderRadius: '8px',
                  color: '#ffb800',
                  fontSize: '13px',
                  fontWeight: '600',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px'
                }}>
                <Download size={16} />
                Importar Datos
              </button>
            </div>
          )}

          {importedData && (
            <div style={{
              background: 'linear-gradient(135deg, #2ed573 0%, #26d071 100%)',
              borderRadius: '12px',
              padding: '20px',
              marginBottom: '30px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              color: 'white',
              boxShadow: '0 4px 20px rgba(46,213,115,0.3)'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
                <div style={{ fontSize: '40px' }}>✅</div>
                <div>
                  <div style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '5px' }}>
                    Datos Importados Activos
                  </div>
                  <div style={{ fontSize: '14px', opacity: 0.9 }}>
                    {fileName} • {importedData.length} órdenes • Última actualización: {new Date().toLocaleDateString('es-MX')}
                  </div>
                </div>
              </div>
              <button
                onClick={() => {
                  if (confirm('¿Deseas limpiar los datos importados y volver a los datos de ejemplo?')) {
                    setImportedData(null);
                    setFileName('');
                  }
                }}
                style={{
                  padding: '10px 20px',
                  background: 'rgba(255,255,255,0.2)',
                  border: '1px solid rgba(255,255,255,0.3)',
                  borderRadius: '8px',
                  color: 'white',
                  fontSize: '13px',
                  fontWeight: '600',
                  cursor: 'pointer'
                }}>
                🗑️ Limpiar Datos
              </button>
            </div>
          )}

          <div className="metrics-grid">
            <MetricCard title="Total de Pedidos Shopify" value={formatNumber(kpiData.pedidosShopify)} subtitle="8% ↑" bgColor="linear-gradient(135deg, #ee2737 0%, #be1f2c 100%)" icon="📦" />
            <MetricCard title="Total de Pedidos Dropi" value={formatNumber(kpiData.pedidosDropi)} subtitle="6% ↑" bgColor="linear-gradient(135deg, #ff6b7a 0%, #ee2737 100%)" icon="🚚" />
            <MetricCard title="Ingresos" value={formatCurrency(kpiData.ingresos)} bgColor="linear-gradient(135deg, #2ed573 0%, #26d071 100%)" icon="💰" />
            <MetricCard title="Costos" value={formatCurrency(kpiData.costos)} subtitle="-12% ↓" bgColor="linear-gradient(135deg, #be1f2c 0%, #8e1721 100%)" icon="💸" />
            <MetricCard title="Marketing" value={formatCurrency(kpiData.marketing)} bgColor="linear-gradient(135deg, #ffb800 0%, #e6a600 100%)" icon="📢" />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '30px' }}>
            <div className="benefit-card" style={{ borderColor: '#2ed573' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '15px' }}>
                <div className="benefit-icon" style={{ background: 'linear-gradient(135deg, #2ed573 0%, #26d071 100%)' }}>
                  <TrendingUp size={26} color="white" />
                </div>
                <span className="benefit-label" style={{ color: '#2ed573' }}>Beneficio Neto</span>
              </div>
              <div className="benefit-value">{formatCurrency(kpiData.beneficioNeto)}</div>
              <div className="benefit-sub">Previsto: {formatCurrency(kpiData.ingresosBrutos - kpiData.costos - kpiData.marketing)}</div>
            </div>

            <div className="benefit-card" style={{ borderColor: '#ee2737' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '15px' }}>
                <div className="benefit-icon" style={{ background: 'linear-gradient(135deg, #ee2737 0%, #be1f2c 100%)' }}>
                  <DollarSign size={26} color="white" />
                </div>
                <span className="benefit-label" style={{ color: '#ee2737' }}>Beneficio Proyecto</span>
              </div>
              <div className="benefit-value">{formatCurrency(kpiData.beneficioProyecto)}</div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '15px', marginBottom: '30px' }}>
            <InfoBox label="Margen de Beneficio" value={`${kpiData.margenBeneficio}%`} sublabel={`ROI ${kpiData.roi.toFixed(2)}x`} />
            <InfoBox label="Beneficio / Pedido" value={formatCurrency(72983.06)} sublabel={`Previsto: ${formatCurrency(kpiData.prevROI)}`} />
            <InfoBox label="Ingresos Brutos" value={formatCurrency(kpiData.ingresosBrutos)} sublabel={`Previsto: ${formatCurrency(kpiData.prevIngresos)}`} />
            <InfoBox label="Costo por Adquisición" value={formatCurrency(kpiData.cpa)} />
          </div>

          <div className="card" style={{ marginBottom: '30px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
              <h2 className="card-title">📊 Resumen Financiero</h2>
              <select className="select-dropdown">
                <option>Financiero</option>
                <option>Marketing</option>
                <option>Costos</option>
              </select>
            </div>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={temporalData.slice(0, 15)}>
                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
                <XAxis dataKey="fecha" stroke="#aaa" style={{ fontSize: '11px' }} />
                <YAxis stroke="#aaa" style={{ fontSize: '11px' }} />
                <Tooltip contentStyle={{ background: '#2a2a2a', border: '1px solid #ee2737', borderRadius: '8px' }} formatter={(value) => formatCurrency(value)} />
                <Legend />
                <Bar dataKey="ingresos" fill="#2ed573" name="Ingresos" radius={[8, 8, 0, 0]} />
                <Bar dataKey="marketing" fill="#ffb800" name="Marketing" radius={[8, 8, 0, 0]} />
                <Bar dataKey="costos" fill="#ee2737" name="Costos" radius={[8, 8, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '20px' }}>
            {estadosData.map((estado, idx) => (
              <div key={idx} className="card">
                <h3 style={{ fontSize: '16px', fontWeight: 'bold', color: '#fff', marginBottom: '20px' }}>{estado.name}</h3>
                <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px', position: 'relative' }}>
                  <svg width="180" height="180" viewBox="0 0 180 180">
                    <circle cx="90" cy="90" r="70" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="12" />
                    <circle cx="90" cy="90" r="70" fill="none" stroke={estado.color} strokeWidth="12" strokeDasharray={`${estado.value * 4.4} 440`} strokeLinecap="round" transform="rotate(-90 90 90)" />
                  </svg>
                  <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center' }}>
                    <div style={{ fontSize: '32px', fontWeight: 'bold', color: '#fff' }}>{estado.value.toFixed(2)}%</div>
                    <div style={{ fontSize: '12px', color: '#aaa', marginTop: '4px' }}>{estado.name}</div>
                    <div style={{ fontSize: '14px', fontWeight: '600', color: '#fff', marginTop: '4px' }}>{formatNumber(estado.count)} unidades</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      );
    }

    return <div style={{ color: '#fff', fontSize: '24px' }}>Vista en desarrollo...</div>;
  };

  return (
    <div className="dashboard-container">
      <style>{`
        .dashboard-container { display: flex; height: 100vh; background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
        .sidebar { width: ${sidebarOpen ? '240px' : '70px'}; background: #1a1a1a; transition: width 0.3s; display: flex; flex-direction: column; border-right: 1px solid rgba(238,39,55,0.2); }
        .sidebar-header { padding: 20px; display: flex; align-items: center; justify-content: ${sidebarOpen ? 'space-between' : 'center'}; border-bottom: 1px solid rgba(238,39,55,0.2); }
        .logo { display: flex; align-items: center; gap: 10px; }
        .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #ee2737 0%, #be1f2c 100%); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .logo-text { color: white; font-weight: bold; font-size: 16px; }
        .menu-button { background: transparent; border: none; color: #ee2737; cursor: pointer; padding: 5px; }
        .menu-container { padding: 20px 0; flex: 1; overflow-y: auto; }
        .menu-section { padding: 0 20px; font-size: 11px; color: #666; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
        .menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; width: 100%; border: none; background: transparent; color: #aaa; cursor: pointer; font-size: 14px; font-weight: 400; transition: all 0.3s; border-left: 3px solid transparent; }
        .menu-item:hover { background: rgba(238,39,55,0.05); color: #ee2737; }
        .menu-item.active { background: rgba(238,39,55,0.15); color: #ee2737; font-weight: 600; border-left: 3px solid #ee2737; }
        .user-profile { padding: 20px; border-top: 1px solid rgba(238,39,55,0.2); display: flex; align-items: center; gap: 10px; }
        .user-avatar { width: 32px; height: 32px; background: #FFA726; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; }
        .user-name { color: white; font-size: 14px; font-weight: 500; }
        .main-content { flex: 1; overflow: auto; }
        .header { background: linear-gradient(135deg, #ee2737 0%, #be1f2c 100%); padding: 20px 30px; box-shadow: 0 4px 20px rgba(238, 39, 55, 0.3); display: flex; justify-content: space-between; align-items: center; }
        .header-title { font-size: 24px; font-weight: bold; color: #fff; margin: 0; }
        .header-subtitle { font-size: 13px; color: rgba(255,255,255,0.8); margin: 4px 0 0 0; }
        .header-actions { display: flex; align-items: center; gap: 15px; }
        .sync-button { background: rgba(255,255,255,0.2); border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; font-size: 13px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 8px; }
        .content-area { padding: 30px; }
        .welcome-banner { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border-radius: 12px; padding: 40px; margin-bottom: 30px; border: 2px solid #ee2737; text-align: center; }
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .feature-card { background: rgba(46,213,115,0.1); padding: 25px; border-radius: 12px; }
        .feature-card:nth-child(2) { background: rgba(238,39,55,0.1); }
        .feature-card:nth-child(3) { background: rgba(255,184,0,0.1); }
        .feature-card:nth-child(4) { background: rgba(238,39,55,0.1); }
        .feature-card p { color: #aaa; font-size: 14px; margin: 0; }
        .card { background: linear-gradient(135deg, #2a2a2a 0%, #333 100%); border-radius: 12px; padding: 25px; border: 1px solid rgba(238,39,55,0.2); }
        .card-title { color: #fff; font-size: 18px; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; margin-top: 0; }
        .input-label { color: #ff6b7a; font-size: 12px; margin-bottom: 8px; display: block; font-weight: 600; }
        .input-field { width: 100%; padding: 12px; background: #1a1a1a; border: 1px solid rgba(238,39,55,0.3); border-radius: 8px; color: #fff; font-size: 14px; }
        .result-box { background: linear-gradient(135deg, #2ed573 0%, #26d071 100%); border-radius: 10px; padding: 20px; text-align: center; border: 2px solid #2ed573; box-shadow: 0 4px 20px rgba(46,213,115,0.3); color: white; }
        .kpi-box { background: #1a1a1a; border-radius: 8px; padding: 15px; border: 1px solid rgba(238,39,55,0.2); }
        .kpi-label { color: #ff6b7a; font-size: 11px; font-weight: 600; margin-bottom: 8px; }
        .kpi-value { color: #fff; font-size: 24px; font-weight: bold; }
        .kpi-sub { color: #aaa; font-size: 11px; margin-top: 5px; }
        .scenario-box { background: #1a1a1a; border-radius: 8px; padding: 15px; border: 2px solid; display: flex; justify-content: space-between; align-items: center; }
        .range-box { background: #1a1a1a; border-radius: 8px; padding: 20px; border: 1px solid rgba(238,39,55,0.2); }
        .range-title { color: #ff6b7a; font-size: 12px; font-weight: 600; margin-bottom: 15px; }
        .range-item { display: flex; justify-content: space-between; align-items: center; color: #fff; }
        .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .metric-card { border-radius: 12px; padding: 20px; color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border: 1px solid rgba(238,39,55,0.2); display: flex; justify-content: space-between; align-items: flex-start; }
        .metric-title { font-size: 11px; text-transform: uppercase; opacity: 0.9; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px; }
        .metric-value { font-size: 28px; font-weight: bold; margin-bottom: 4px; }
        .metric-subtitle { font-size: 11px; opacity: 0.8; }
        .metric-button { background: rgba(255,255,255,0.2); border: none; color: white; font-size: 11px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 500; }
        .benefit-card { background: #2a2a2a; border-radius: 12px; padding: 25px; border: 2px solid; box-shadow: 0 4px 15px rgba(46,213,115,0.2); }
        .benefit-icon { width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(46,213,115,0.3); }
        .benefit-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
        .benefit-value { font-size: 36px; font-weight: bold; color: #fff; margin-bottom: 10px; }
        .benefit-sub { font-size: 13px; color: #2ed573; font-weight: 500; }
        .info-box { background: #2a2a2a; border-radius: 8px; padding: 15px; border: 1px solid rgba(238,39,55,0.2); color: #fff; }
        .info-label { font-size: 11px; color: #ff6b7a; margin-bottom: 8px; font-weight: 600; text-transform: uppercase; }
        .info-value { font-size: 20px; font-weight: bold; }
        .info-sublabel { font-size: 11px; color: #ee2737; margin-top: 4px; font-weight: 500; }
        .select-dropdown { padding: 8px 16px; border: 1px solid rgba(238,39,55,0.3); border-radius: 8px; font-size: 13px; background: #1a1a1a; color: #fff; cursor: pointer; }
      `}</style>

      <div className="sidebar">
        <div className="sidebar-header">
          {sidebarOpen && (
            <div className="logo">
              <div className="logo-icon">🚀</div>
              <span className="logo-text">ECOMFACTORY</span>
            </div>
          )}
          <button className="menu-button" onClick={() => setSidebarOpen(!sidebarOpen)}>
            <Menu size={20} />
          </button>
        </div>

        <div className="menu-container">
          {sidebarOpen && <div className="menu-section">MAIN</div>}
          <MenuItem icon={Home} label="Home" view="home" active={activeView === 'home'} />
          <MenuItem icon={LayoutDashboard} label="Dashboard" view="dashboard" active={activeView === 'dashboard'} />
          <MenuItem icon={Download} label="Importar Datos" view="importar" active={activeView === 'importar'} />
          <MenuItem icon={Package} label="Pedidos" view="pedidos" active={activeView === 'pedidos'} />
          <MenuItem icon={ShoppingBag} label="Productos" view="productos" active={activeView === 'productos'} />
          <MenuItem icon={Megaphone} label="Anuncios" view="anuncios" active={activeView === 'anuncios'} />
          <MenuItem icon={DollarSign} label="Valores Adicionales" view="valores" active={activeView === 'valores'} />
          <MenuItem icon={Link2} label="Integraciones" view="integraciones" active={activeView === 'integraciones'} />
          <MenuItem icon={FileText} label="Calculadora COD" view="calculadora" active={activeView === 'calculadora'} />
          <MenuItem icon={HelpCircle} label="Apoyo" view="apoyo" active={activeView === 'apoyo'} />
        </div>

        {sidebarOpen && (
          <div className="user-profile">
            <div className="user-avatar">L</div>
            <span className="user-name">Loja</span>
          </div>
        )}
      </div>

      <div className="main-content">
        <div className="header">
          <div>
            <h1 className="header-title">
              {activeView === 'home' ? '🏠 Home' : 
               activeView === 'dashboard' ? '📊 Dashboard' :
               activeView === 'importar' ? '📂 Importar Datos' :
               activeView === 'pedidos' ? '📦 Pedidos' :
               activeView === 'productos' ? '🛍️ Productos' :
               activeView === 'anuncios' ? '📢 Anuncios' :
               activeView === 'valores' ? '💵 Valores Adicionales' :
               activeView === 'integraciones' ? '🔗 Integraciones' :
               activeView === 'calculadora' ? '🧮 Calculadora COD' :
               activeView === 'apoyo' ? '❓ Apoyo' :
               activeView.charAt(0).toUpperCase() + activeView.slice(1)}
            </h1>
            <p className="header-subtitle">
              {activeView === 'dashboard' ? (importedData ? `Mostrando datos de: ${fileName}` : 'Panel de control principal') :
               activeView === 'importar' ? 'Carga tus archivos Excel de DROPI' :
               activeView === 'pedidos' ? 'Gestión de pedidos y órdenes' :
               activeView === 'productos' ? 'Análisis de productos' :
               activeView === 'integraciones' ? 'Conecta tus plataformas' :
               activeView === 'calculadora' ? 'Calcula tu precio ideal y KPIs' :
               'Gestiona tu negocio'}
            </p>
          </div>
          <div className="header-actions">
            <button className="sync-button" onClick={() => { setIsLoading(true); setTimeout(() => setIsLoading(false), 2000); }}>
              <RefreshCw size={16} style={{ animation: isLoading ? 'spin 1s linear infinite' : 'none' }} />
              Sincronizar
            </button>
            <div className="user-avatar">L</div>
          </div>
        </div>

        <div className="content-area">
          {renderContent()}
        </div>
      </div>
    </div>
  );
}