// Ventas, Planificación y Revisión — con backend real

// ── VENTAS ─────────────────────────────────────────────────────
const VentasScreen = () => {
  const mes=mesActual();
  const[ventas,setVentas]=React.useState([]);
  const[kpis,setKpis]=React.useState({});
  const[modal,setModal]=React.useState(false);
  const[form,setForm]=React.useState({fecha:new Date().toISOString().slice(0,10),monto:'',producto:'',clienta:'',canal:'',tipo_clienta:'nueva',tipo_campana:'',notas:''});
  const load=()=>Promise.all([API.get(`/ventas?mes=${mes}`).then(r=>r&&setVentas(r)),API.get(`/kpis?mes=${mes}`).then(r=>r&&setKpis(r))]);
  React.useEffect(()=>{load();},[]);
  const save=async()=>{if(!form.fecha||!form.monto){showToast('Fecha y monto requeridos','error');return;}await API.post('/ventas',form);setModal(false);showToast('Venta registrada ✓');load();setForm({fecha:new Date().toISOString().slice(0,10),monto:'',producto:'',clienta:'',canal:'',tipo_clienta:'nueva',tipo_campana:'',notas:''});};
  const del=async id=>{if(!confirm('¿Eliminar esta venta?'))return;await API.del(`/ventas/${id}`);showToast('Eliminada');load();};
  const si=c=>({verde:'🟢',amarillo:'🟡',rojo:'🔴'}[c]||'🟡');
  const sv=(v,m)=>!m?'amarillo':v/m>=.9?'verde':v/m>=.6?'amarillo':'rojo';
  return (
    <div style={{padding:'28px 32px',background:EJ.bgApp,minHeight:'100%'}}>
      <SectionHeader title="Ventas & KPIs" subtitle={`${mesNombre(mes)}`} action={<Btn variant="primary" size="sm" onClick={()=>setModal(true)}>+ Nueva venta</Btn>}/>
      <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:14,marginBottom:24}}>
        {[
          {label:'Facturación',value:fmtMoney(kpis.total||0),sem:sv(kpis.total,kpis.meta)},
          {label:'Ventas cerradas',value:kpis.count||0,sem:(kpis.count||0)>5?'verde':'amarillo'},
          {label:'Ticket promedio',value:fmtMoney(kpis.ticket||0),sem:'amarillo'},
          {label:'Nuevas',value:kpis.nuevas||0,sem:(kpis.nuevas||0)>0?'verde':'rojo'},
          {label:'Recurrentes',value:kpis.recurrentes||0,sem:(kpis.recurrentes||0)>0?'verde':'amarillo'},
          {label:'Canal top',value:kpis.canal_top||'—',sem:'cyan'},
        ].map((k,i)=><Card key={i} style={{padding:16}}>
          <div style={{fontSize:10,color:EJ.muted,textTransform:'uppercase',letterSpacing:'.05em',marginBottom:6}}>{k.label}</div>
          <div style={{fontSize:20,fontWeight:500,color:EJ.navy,fontFamily:'JetBrains Mono, monospace',marginBottom:4}}>{k.value}</div>
          <span>{si(k.sem)}</span>
        </Card>)}
      </div>
      <Card>
        <div style={{fontFamily:'Nunito, sans-serif',fontWeight:800,fontSize:15,color:EJ.navy,marginBottom:16}}>📝 Registro de ventas</div>
        {ventas.length===0?<div style={{textAlign:'center',padding:40,color:EJ.muted}}><div style={{fontSize:32,marginBottom:12}}>💰</div><p>Sin ventas este mes. ¡Registra la primera!</p></div>:(
          <div style={{overflowX:'auto'}}>
            <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
              <thead><tr style={{background:EJ.bgApp}}>{['Fecha','Producto','Clienta','Canal','Monto','Tipo','Campaña',''].map(h=><th key={h} style={{padding:'8px 12px',textAlign:'left',fontSize:11,fontWeight:600,color:EJ.muted,textTransform:'uppercase',borderBottom:`1.5px solid ${EJ.border}`}}>{h}</th>)}</tr></thead>
              <tbody>{ventas.map(v=><tr key={v.id} style={{borderBottom:`1px solid ${EJ.border}`}}>
                <td style={{padding:'10px 12px'}}>{v.fecha}</td>
                <td style={{padding:'10px 12px'}}>{v.producto||'—'}</td>
                <td style={{padding:'10px 12px'}}>{v.clienta||'—'}</td>
                <td style={{padding:'10px 12px'}}>{v.canal||'—'}</td>
                <td style={{padding:'10px 12px',fontWeight:700,color:EJ.navy,fontFamily:'JetBrains Mono, monospace'}}>{fmtMoney(v.monto)}</td>
                <td style={{padding:'10px 12px'}}><Badge variant={v.tipo_clienta==='nueva'?'cyan':'soft'}>{v.tipo_clienta||'—'}</Badge></td>
                <td style={{padding:'10px 12px',color:EJ.muted}}>{v.tipo_campana||'—'}</td>
                <td style={{padding:'10px 12px'}}><button onClick={()=>del(v.id)} style={{background:'none',border:'none',cursor:'pointer',color:EJ.pink,fontSize:16}}>✕</button></td>
              </tr>)}</tbody>
            </table>
            <div style={{marginTop:16,paddingTop:16,borderTop:`1px solid ${EJ.border}`,display:'flex',justifyContent:'space-between',fontWeight:700}}>
              <span style={{color:EJ.navy}}>Total del mes</span>
              <span style={{fontFamily:'JetBrains Mono, monospace',fontSize:18,color:EJ.cyan}}>{fmtMoney(kpis.total||0)}</span>
            </div>
          </div>
        )}
      </Card>
      <Modal open={modal} onClose={()=>setModal(false)} title="💰 Registrar venta" width={480}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <Input label="Fecha" type="date" value={form.fecha} onChange={e=>setForm(f=>({...f,fecha:e.target.value}))}/>
          <Input label="Monto ($)" type="number" placeholder="0.00" value={form.monto} onChange={e=>setForm(f=>({...f,monto:e.target.value}))}/>
          <Input label="Producto" value={form.producto} onChange={e=>setForm(f=>({...f,producto:e.target.value}))}/>
          <Input label="Clienta" value={form.clienta} onChange={e=>setForm(f=>({...f,clienta:e.target.value}))}/>
          <Select label="Canal" value={form.canal} onChange={e=>setForm(f=>({...f,canal:e.target.value}))} options={['','WhatsApp','Instagram','Facebook','Referido','Email','TikTok','Presencial'].map(v=>({value:v,label:v||'— Canal —'}))}/>
          <Select label="Tipo clienta" value={form.tipo_clienta} onChange={e=>setForm(f=>({...f,tipo_clienta:e.target.value}))} options={['nueva','recurrente','reactivada'].map(v=>({value:v,label:v}))}/>
          <Select label="Tipo campaña" value={form.tipo_campana} onChange={e=>setForm(f=>({...f,tipo_campana:e.target.value}))} options={['','Adquisición','Monetización','Activación'].map(v=>({value:v,label:v||'— Sin campaña —'}))}/>
          <Input label="Notas" value={form.notas} onChange={e=>setForm(f=>({...f,notas:e.target.value}))}/>
        </div>
        <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:20}}><Btn variant="ghost" size="sm" onClick={()=>setModal(false)}>Cancelar</Btn><Btn variant="primary" size="sm" onClick={save}>Guardar</Btn></div>
      </Modal>
    </div>
  );
};

// ── PLANIFICACIÓN ──────────────────────────────────────────────
const PlanificacionScreen = () => {
  const mes=mesActual();
  const[config,setConfig]=React.useState({});
  const[productos,setProductos]=React.useState([]);
  const[modal,setModal]=React.useState(false);
  const[prod,setProd]=React.useState({nombre:'',tipo:'A - Lead',precio:'',canal:'',margen:''});
  const[saved,setSaved]=React.useState(false);
  React.useEffect(()=>{API.get(`/config?mes=${mes}`).then(r=>r&&setConfig(r));API.get('/productos').then(r=>r&&setProductos(r));},[]);
  const saveConf=async()=>{await API.post('/config',{mes,...config});setSaved(true);setTimeout(()=>setSaved(false),2000);showToast('Configuración guardada ✓');};
  const saveProd=async()=>{if(!prod.nombre){showToast('Nombre requerido','error');return;}await API.post('/productos',prod);setModal(false);setProd({nombre:'',tipo:'A - Lead',precio:'',canal:'',margen:''});API.get('/productos').then(r=>r&&setProductos(r));showToast('Producto agregado ✓');};
  const delProd=async id=>{if(!confirm('¿Eliminar?'))return;await API.del(`/productos/${id}`);API.get('/productos').then(r=>r&&setProductos(r));};
  return (
    <div style={{padding:'28px 32px',background:EJ.bgApp,minHeight:'100%'}}>
      <SectionHeader title="Planificación Inteligente" subtitle={`1 vez al mes · Último viernes · ${mesNombre(mes)}`}/>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,marginBottom:20}}>
        <Card>
          <div style={{fontFamily:'Nunito, sans-serif',fontWeight:800,fontSize:15,color:EJ.navy,marginBottom:16}}>⚙️ Configuración de {mesNombre(mes)}</div>
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            <Input label="Meta de facturación ($)" type="number" value={config.meta_facturacion||''} onChange={e=>setConfig(c=>({...c,meta_facturacion:e.target.value}))}/>
            <Input label="Meta de clientas nuevas" type="number" value={config.meta_clientes_nuevas||''} onChange={e=>setConfig(c=>({...c,meta_clientes_nuevas:e.target.value}))}/>
            <Input label="Sector / Tipo de negocio" value={config.sector||''} onChange={e=>setConfig(c=>({...c,sector:e.target.value}))}/>
            <Select label="Tipo de campaña del mes" value={config.tipo_campana||'Adquisición'} onChange={e=>setConfig(c=>({...c,tipo_campana:e.target.value}))} options={['Adquisición','Monetización','Activación'].map(v=>({value:v,label:v}))}/>
            <Input label="Producto protagonista" value={config.producto_protagonista||''} onChange={e=>setConfig(c=>({...c,producto_protagonista:e.target.value}))}/>
            <Btn variant="primary" size="sm" onClick={saveConf}>{saved?'✓ Guardado':'Guardar configuración'}</Btn>
          </div>
        </Card>
        <Card>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
            <div style={{fontFamily:'Nunito, sans-serif',fontWeight:800,fontSize:15,color:EJ.navy}}>📦 Inventario de productos</div>
            <Btn variant="primary" size="xs" onClick={()=>setModal(true)}>+ Agregar</Btn>
          </div>
          {productos.length===0?<div style={{textAlign:'center',padding:24,color:EJ.muted}}><div style={{fontSize:28,marginBottom:8}}>📦</div><p style={{fontSize:13}}>Sin productos. ¡Agrega tu catálogo!</p></div>:(
            <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
              <thead><tr style={{background:EJ.bgApp}}>{['Nombre','Tipo','Precio',''].map(h=><th key={h} style={{padding:'6px 10px',textAlign:'left',fontSize:11,color:EJ.muted,borderBottom:`1.5px solid ${EJ.border}`}}>{h}</th>)}</tr></thead>
              <tbody>{productos.map(p=><tr key={p.id} style={{borderBottom:`1px solid ${EJ.border}`}}>
                <td style={{padding:'8px 10px',fontWeight:600}}>{p.nombre}</td>
                <td style={{padding:'8px 10px'}}><Badge variant="soft">{p.tipo}</Badge></td>
                <td style={{padding:'8px 10px',fontFamily:'JetBrains Mono, monospace'}}>{fmtMoney(p.precio)}</td>
                <td><button onClick={()=>delProd(p.id)} style={{background:'none',border:'none',cursor:'pointer',color:EJ.pink}}>✕</button></td>
              </tr>)}</tbody>
            </table>
          )}
        </Card>
      </div>
      <Card>
        <div style={{fontFamily:'Nunito, sans-serif',fontWeight:800,fontSize:15,color:EJ.navy,marginBottom:16}}>📅 Los 3 tipos de campaña — ¿Cuál aplica este mes?</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}}>
          {[{t:'Adquisición',icon:'🎯',desc:'Atraer clientas nuevas.',c:EJ.cyan},{t:'Monetización',icon:'💰',desc:'Vender más a quien ya confía.',c:EJ.violet},{t:'Activación',icon:'🔄',desc:'Reactivar clientas inactivas.',c:EJ.pink}].map(x=><div key={x.t} style={{padding:16,background:EJ.bgApp,borderRadius:16,borderLeft:`3px solid ${x.c}`}}><div style={{fontSize:20,marginBottom:8}}>{x.icon}</div><div style={{fontFamily:'Nunito, sans-serif',fontWeight:800,color:EJ.navy,marginBottom:6}}>{x.t}</div><div style={{fontSize:12,color:EJ.secondary,lineHeight:1.5}}>{x.desc}</div></div>)}
        </div>
      </Card>
      <Modal open={modal} onClose={()=>setModal(false)} title="📦 Agregar producto">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <div style={{gridColumn:'1/-1'}}><Input label="Nombre *" value={prod.nombre} onChange={e=>setProd(p=>({...p,nombre:e.target.value}))}/></div>
          <Select label="Tipo" value={prod.tipo} onChange={e=>setProd(p=>({...p,tipo:e.target.value}))} options={['A - Lead','B - Cliente','C - Caja','D - Lucro','Maximizador'].map(v=>({value:v,label:v}))}/>
          <Input label="Precio ($)" type="number" value={prod.precio} onChange={e=>setProd(p=>({...p,precio:e.target.value}))}/>
          <Select label="Canal" value={prod.canal} onChange={e=>setProd(p=>({...p,canal:e.target.value}))} options={['','WhatsApp','Instagram','Facebook','Presencial','Online'].map(v=>({value:v,label:v||'—'}))}/>
          <Input label="Margen (%)" type="number" value={prod.margen} onChange={e=>setProd(p=>({...p,margen:e.target.value}))}/>
        </div>
        <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:20}}><Btn variant="ghost" size="sm" onClick={()=>setModal(false)}>Cancelar</Btn><Btn variant="primary" size="sm" onClick={saveProd}>Guardar</Btn></div>
      </Modal>
    </div>
  );
};

// ── REVISIÓN MENSUAL ───────────────────────────────────────────
const RevisionScreen = () => {
  const mes=mesActual();
  const[rev,setRev]=React.useState({});
  const[kpis,setKpis]=React.useState({});
  React.useEffect(()=>{API.get(`/revision?mes=${mes}`).then(r=>r&&setRev(r));API.get(`/kpis?mes=${mes}`).then(r=>r&&setKpis(r));},[]);
  const save=async()=>{await API.post('/revision',{mes,...rev});showToast('Revisión guardada ✓');};
  const areas=['ventas','marketing','producto','operaciones'];
  const si=c=>({verde:'🟢',amarillo:'🟡',rojo:'🔴'}[c]||'🟡');
  return (
    <div style={{padding:'28px 32px',background:EJ.bgApp,minHeight:'100%'}}>
      <SectionHeader title="Revisión Mensual" subtitle={`Último viernes · ${mesNombre(mes)}`} action={<Btn variant="primary" size="sm" onClick={save}>Guardar revisión</Btn>}/>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:24}}>
        {areas.map(a=><Card key={a} style={{padding:16,textAlign:'center'}}>
          <div style={{fontSize:11,color:EJ.muted,textTransform:'uppercase',letterSpacing:'.06em',marginBottom:8}}>{a.charAt(0).toUpperCase()+a.slice(1)}</div>
          <div style={{fontSize:22,marginBottom:8}}>{si(rev[`semaforo_${a}`]||'amarillo')}</div>
          <select value={rev[`semaforo_${a}`]||'amarillo'} onChange={e=>setRev(r=>({...r,[`semaforo_${a}`]:e.target.value}))} style={{fontSize:12,border:`1px solid ${EJ.border}`,borderRadius:8,padding:'3px 8px',background:'#fff'}}>
            {['verde','amarillo','rojo'].map(s=><option key={s} value={s}>{s}</option>)}
          </select>
        </Card>)}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:20}}>
        <Card style={{padding:16}}><div style={{fontSize:11,color:EJ.muted,marginBottom:4}}>Facturación real del mes</div><div style={{fontSize:26,fontWeight:500,color:EJ.cyan,fontFamily:'JetBrains Mono, monospace'}}>{fmtMoney(kpis.total||0)}</div><div style={{fontSize:12,color:EJ.secondary,marginTop:4}}>{kpis.count||0} ventas · Ticket {fmtMoney(kpis.ticket||0)}</div></Card>
        <Card style={{padding:16}}><div style={{fontSize:11,color:EJ.muted,marginBottom:4}}>Facturación real (ajustable)</div><Input type="number" value={rev.facturacion_real||''} onChange={e=>setRev(r=>({...r,facturacion_real:e.target.value}))}/></Card>
      </div>
      <Card style={{marginBottom:20}}>
        <div style={{fontFamily:'Nunito, sans-serif',fontWeight:800,fontSize:15,color:EJ.navy,marginBottom:20}}>🔍 Las 6 preguntas del cierre mensual</div>
        {[{id:'p1',q:'P1 · ¿Cuánto gané de verdad — ganancia neta después de gastos?'},{id:'p2',q:'P2 · ¿Cuál área tuvo el semáforo más rojo? ¿Qué acción la mejoraría?'},{id:'p3',q:'P3 · ¿Qué funcionó especialmente bien? ¿Cómo lo repito?'},{id:'p4',q:'P4 · ¿Ejecuté la rutina más del 80% de los días?'},{id:'p5',q:'P5 · ¿Hay dinero que dejé sobre la mesa?'},{id:'p6',q:'P6 · Si mi negocio siguiera igual 6 meses más, ¿estaría satisfecha?'}].map(p=><div key={p.id} style={{marginBottom:18}}><div style={{fontSize:13,fontWeight:600,color:EJ.navy,marginBottom:8}}>{p.q}</div><Textarea rows={2} value={rev[p.id]||''} onChange={e=>setRev(r=>({...r,[p.id]:e.target.value}))} placeholder="Escribe tu respuesta..."/></div>)}
      </Card>
      <Card>
        <div style={{fontFamily:'Nunito, sans-serif',fontWeight:800,fontSize:15,color:EJ.navy,marginBottom:16}}>🎯 Decisiones para el mes que viene</div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <Input label="Meta de facturación ($)" type="number" value={rev.meta_siguiente||''} onChange={e=>setRev(r=>({...r,meta_siguiente:e.target.value}))}/>
          <Select label="Tipo de campaña" value={rev.tipo_campana_siguiente||'Adquisición'} onChange={e=>setRev(r=>({...r,tipo_campana_siguiente:e.target.value}))} options={['Adquisición','Monetización','Activación'].map(v=>({value:v,label:v}))}/>
        </div>
      </Card>
    </div>
  );
};

Object.assign(window, { VentasScreen, PlanificacionScreen, RevisionScreen });