// Ejecutora — Dashboard Screen (La Rutina que Vende™ — Vista General)
const DashboardScreen = () => {
  const [data, setData] = React.useState(null);
  const [kpis, setKpis] = React.useState(null);
  const [campanas, setCampanas] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const load = () => {
    const mes = window.mesActual();
    Promise.all([
      API.get('/dashboard'),
      API.get(`/kpis?mes=${mes}`),
      API.get(`/campanas?mes=${mes}`)
    ]).then(([d, k, c]) => {
      if (d) setData(d);
      if (k) setKpis(k);
      if (c) setCampanas(c);
      setLoading(false);
    });
  };

  React.useEffect(() => { load(); }, []);

  if (loading || !data || !kpis) return (
    <div style={{ padding: 40, textAlign: 'center', color: EJ.muted }}>
      <div style={{ fontSize: 32, marginBottom: 12 }}>✦</div>
      <p style={{ fontFamily: 'Nunito, sans-serif', fontWeight: 700, color: EJ.navy }}>Cargando dashboard estratégico...</p>
    </div>
  );

  const today = new Date();
  const days = ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'];
  const months = ['enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre'];
  const dateStr = `${days[today.getDay()]}, ${today.getDate()} de ${months[today.getMonth()]} · ${today.getHours() < 12 ? 'Buenos días' : today.getHours() < 19 ? 'Buenas tardes' : 'Buenas noches'} ✦`;

  const metaPct = data.meta_facturacion > 0 ? Math.min(100, Math.round(data.facturacion / data.meta_facturacion * 100)) : 0;
  const isMobile = window.__isMobile;
  const campanaActiva = campanas[0];

  return (
    <div style={{ padding: isMobile ? '16px' : '28px 32px', background: EJ.bgApp, minHeight: '100%' }}>

      {/* Welcome */}
      <div style={{ marginBottom: 28, display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end', gap: 16 }}>
        <div>
          <div style={{ fontSize: 13, color: EJ.muted, fontFamily: 'Nunito Sans, sans-serif', marginBottom: 4 }}>{dateStr}</div>
          <h2 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: isMobile ? 22 : 28, color: EJ.navy }}>
            ¡Hola, {(data.user_name || 'Wuilldelys').split(' ')[0]}! ✦
          </h2>
          <div style={{ fontSize: 14, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', marginTop: 4 }}>
            Foco de hoy: <span style={{ color: EJ.violet, fontWeight: 700 }}>Ventas & Seguimiento</span> · 
            <span style={{ color: EJ.cyan, fontWeight: 700, marginLeft: 6 }}>{data.ventas_count} ventas</span> en {window.mesNombre(data.mes)}
          </div>
        </div>
        {/* Meta progress */}
        <div style={{ textAlign: 'center', background:'#fff', padding:'12px 20px', borderRadius:20, border:`1px solid ${EJ.border}`, minWidth:160 }}>
          <div style={{ fontSize: 10, color: EJ.muted, textTransform: 'uppercase', letterSpacing: '.05em', marginBottom: 4 }}>Meta del mes</div>
          <div style={{ fontSize: 28, fontWeight: 700, color: EJ.cyan, fontFamily: 'JetBrains Mono, monospace' }}>{metaPct}%</div>
          <ProgressBar value={metaPct} color={metaPct >= 80 ? EJ.green : EJ.cyan} />
          <div style={{ fontSize: 11, color: EJ.muted, marginTop: 4 }}>{window.fmtMoney(data.facturacion)} / {window.fmtMoney(data.meta_facturacion)}</div>
        </div>
      </div>

      {/* Sugerencia de Elia */}
      <div style={{ background: EJ.navy, borderRadius: 24, padding: '20px 24px', marginBottom: 32, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: '#fff', boxShadow: '0 12px 40px rgba(26,31,110,0.2)', flexWrap: 'wrap', gap: 16, position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', right:-20, top:-20, fontSize:100, opacity:0.1 }}>✦</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, position:'relative', zIndex:1 }}>
          <img src="/icono-elia.png" width="48" height="48" style={{ borderRadius: '50%', objectFit: 'cover', border:'2px solid rgba(255,255,255,0.2)' }} alt="Elia" />
          <div>
            <div style={{ fontSize: 15, fontWeight: 800, fontFamily: 'Nunito, sans-serif', marginBottom:2 }}>Sugerencia Estratégica de Elia</div>
            <div style={{ fontSize: 13, opacity: 0.9 }}>Este mes te toca una campaña de <strong>{data.nextCampaignType || 'Adquisición'}</strong>. ¿Ya tienes listo el producto estrella?</div>
          </div>
        </div>
        <Btn variant="primary" size="sm" onClick={() => window.__setScreen?.('campanas')} style={{ position:'relative', zIndex:1 }}>Crear campaña</Btn>
      </div>

      {/* Indicadores Clave (Pilar 1) */}
      <div style={{ marginBottom: 32 }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr) 1.5fr', gap: 16 }}>
          {/* Main Card */}
          <Card style={{ gridColumn: isMobile ? '1/-1' : 'span 1', background: 'linear-gradient(135deg, #1A1F6E, #503BC4)', color: '#fff', padding:24 }}>
             <div style={{ fontSize: 11, opacity: 0.7, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Facturación Real</div>
             <div style={{ fontSize: 32, fontWeight: 700, color: '#fff', fontFamily: 'JetBrains Mono, monospace', marginBottom: 4 }}>{window.fmtMoney(data.facturacion)}</div>
             <div style={{ fontSize: 12, color: EJ.cyan, fontWeight: 700 }}>Meta: {window.fmtMoney(data.meta_facturacion)}</div>
          </Card>
          
          <div style={{ gridColumn: isMobile ? '1/-1' : 'span 3', display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(5, 1fr)', gap: 14 }}>
            {[
              { label: 'Conversión', value: (kpis.conversion || 0)+'%', icon: '🎯', color: EJ.green, sub: 'Meta: 30%' },
              { label: 'Leads Mes', value: data.clientes_nuevas, icon: '👥', color: EJ.violet, sub: '↑ 8 esta sem.' },
              { label: 'Ticket Prom.', value: window.fmtMoney(data.ticket_promedio), icon: '📊', color: EJ.cyan, sub: 'por venta' },
              { label: 'Reactivación', value: data.clientes_reactivadas, icon: '🔁', color: EJ.pink, sub: 'este mes' },
              { label: 'Canal Top', value: kpis.canal_top || 'WApp', icon: '📱', color: EJ.navy, sub: 'mayor cierre' },
            ].map((k, i) => (
              <Card key={i} style={{ padding: '16px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                   <div style={{ fontSize: 10, color: EJ.muted, fontWeight: 700, textTransform: 'uppercase' }}>{k.label}</div>
                   <span style={{ fontSize: 14 }}>{k.icon}</span>
                </div>
                <div style={{ fontSize: 20, fontWeight: 700, color: k.color, fontFamily: 'JetBrains Mono, monospace' }}>{k.value}</div>
                <div style={{ fontSize: 10, color: EJ.secondary, marginTop: 4, fontWeight: 600 }}>{k.sub}</div>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Los 3 Pilares RQV */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 20, marginBottom: 32 }}>
        {[
          { num: 1, name: 'Planificación', freq: '1 vez al mes · Último viernes', color: EJ.cyan, icon: '📋', sc: 'planificacion' },
          { num: 2, name: 'Campañas', freq: 'Cada lunes · 60-90 min', color: EJ.violet, icon: '📣', sc: 'campanas' },
          { num: 3, name: 'Rutina', freq: '60-75 min al día · 3 bloques', color: EJ.pink, icon: '⏰', sc: 'rutina' },
        ].map(p => (
          <Card key={p.num} style={{ cursor: 'pointer', borderTop: `4px solid ${p.color}`, transition:'transform 0.2s' }} onClick={() => window.__setScreen?.(p.sc)} className="hover-scale">
            <div style={{ fontSize: 11, color: EJ.muted, textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 8 }}>Pilar {p.num}</div>
            <div style={{ fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 18, color: EJ.navy, marginBottom: 4 }}>{p.icon} {p.name}</div>
            <div style={{ fontSize: 13, color: EJ.secondary }}>{p.freq}</div>
          </Card>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr', gap: 20 }}>
        {/* Campaña activa */}
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <h4 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 17, color: EJ.navy }}>📣 Campaña activa</h4>
            <Btn variant="ghost" size="xs" onClick={() => window.__setScreen('campanas')}>Ver todas →</Btn>
          </div>
          {campanaActiva ? (
            <div style={{ background: EJ.bgApp, borderRadius: 20, padding: '20px', border:`1px solid ${EJ.border}` }}>
              <Badge variant="cyan" style={{ marginBottom: 12 }}>{campanaActiva.tipo?.toUpperCase()}</Badge>
              <div style={{ fontSize: 18, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 6 }}>{campanaActiva.producto || '—'}</div>
              <div style={{ fontSize: 13, color: EJ.secondary, marginBottom: 16 }}>{campanaActiva.fecha_inicio} → {campanaActiva.fecha_cierre}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: EJ.navy }}>Progreso de ventas</span>
                <span style={{ fontSize: 12, fontWeight: 700, color: EJ.cyan }}>Meta: {campanaActiva.meta_ventas}</span>
              </div>
              <ProgressBar value={40} color={EJ.cyan} />
            </div>
          ) : (
            <div style={{ textAlign: 'center', padding: '32px 20px', color: EJ.muted }}>
              <div style={{ fontSize: 32, marginBottom: 12 }}>📣</div>
              <p style={{ fontSize: 14, marginBottom: 20 }}>Sin campaña activa. Pilar 2 sin ejecutar.</p>
              <Btn variant="primary" size="sm" onClick={() => window.__setScreen?.('campanas')}>Definir campaña</Btn>
            </div>
          )}
        </Card>

        {/* Acciones Rápidas */}
        <Card>
          <h4 style={{ margin: '0 0 20px', fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 17, color: EJ.navy }}>⚡ Acciones rápidas</h4>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { label: '💰 Registrar una venta', sc: 'ventas', color: EJ.green },
              { label: '👤 Nueva clienta en CRM', sc: 'crm', color: EJ.violet },
              { label: '⏰ Ejecutar Rutina', sc: 'rutina', color: EJ.pink },
              { label: '📋 Planificar mes', sc: 'planificacion', color: EJ.cyan },
            ].map((a, i) => (
              <button key={i} onClick={() => window.__setScreen?.(a.sc)}
                style={{ width: '100%', padding: '14px 18px', borderRadius: 16, border: `1.5px solid ${EJ.border}`, background: 'transparent', color: EJ.navy, cursor: 'pointer', fontSize: 14, fontWeight: 700, textAlign: 'left', display:'flex', alignItems:'center', justifyContent:'space-between', transition:'all 0.2s' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = a.color; e.currentTarget.style.background = a.color+'08'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = EJ.border; e.currentTarget.style.background = 'transparent'; }}>
                {a.label}
                <span style={{ fontSize:12, opacity:0.5 }}>→</span>
              </button>
            ))}
          </div>
        </Card>
      </div>

      {/* Árbol de diagnóstico mini */}
      <div style={{ marginTop: 32 }}>
        <Card style={{ background: EJ.bgApp, border:'none' }}>
           <h4 style={{ margin: '0 0 16px', fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 15, color: EJ.navy }}>Diagnóstico Rápido</h4>
           <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 14 }}>
              {[
                { s: 'Publico pero no vendo', d: 'Falta CTA claro o seguimiento.', p: 'Bloque 2' },
                { s: 'No sé qué vender hoy', d: 'Define campaña en Pilar 2.', p: 'Pilar 2' },
                { s: 'Mucho trabajo, poco ingreso', d: 'Revisa tu meta en Pilar 1.', p: 'Pilar 1' },
              ].map((x, i) => (
                <div key={i} style={{ background:'#fff', padding:14, borderRadius:16, border:`1px solid ${EJ.border}` }}>
                  <div style={{ fontSize:10, fontWeight:700, color:EJ.muted, textTransform:'uppercase', marginBottom:4 }}>{x.p}</div>
                  <div style={{ fontSize:13, fontWeight:700, color:EJ.navy, marginBottom:4 }}>"{x.s}"</div>
                  <div style={{ fontSize:12, color:EJ.secondary }}>→ {x.d}</div>
                </div>
              ))}
           </div>
        </Card>
      </div>
    </div>
  );
};

Object.assign(window, { DashboardScreen });