// js/components/widgets/EstoqueSaudeCard.jsx
// [Wave 12B v223.35 20260520] Extraído de DashboardV2.jsx L418-442 (3 botões) + L596-660 (modal 3 modos)
// Card "📦 Estoque saúde geral" — 3 botões clicáveis + modal com tabela contextual
//
// Props:
//   noStock (array), acabando (array), projecaoZerar (array)
// Deps runtime: window.fmt, window.Modal
(function(){
  'use strict';
  const {useState} = React;

  function EstoqueSaudeCard(props){
    const { noStock=[], acabando=[], projecaoZerar=[] } = props;
    const fmt = typeof window.fmt === 'function' ? window.fmt : (v)=>String(v);
    const Modal = window.Modal;
    const [showStockModal, setShowStockModal] = useState(null); // null|'zerados'|'acabando'|'projecao'

    return (
      <>
        <div className="card" style={{padding:14}}>
          <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1.2,marginBottom:8}}>
            📦 Estoque — saúde geral
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:6}}>
            <button onClick={()=>setShowStockModal('zerados')} style={{padding:'10px 6px',background:noStock.length>0?'#FEE2E2':'#F0FDF4',border:'1px solid '+(noStock.length>0?'#DC262644':'#16A34A33'),borderRadius:6,cursor:'pointer',textAlign:'center'}}>
              <div style={{fontSize:22,fontWeight:800,color:noStock.length>0?'#DC2626':'#16A34A'}}>{noStock.length}</div>
              <div style={{fontSize:10,color:'#6B7280',fontWeight:600}}>ZERADOS</div>
            </button>
            <button onClick={()=>setShowStockModal('acabando')} style={{padding:'10px 6px',background:acabando.length>0?'#FEF3C7':'#F0FDF4',border:'1px solid '+(acabando.length>0?'#EAB30844':'#16A34A33'),borderRadius:6,cursor:'pointer',textAlign:'center'}}>
              <div style={{fontSize:22,fontWeight:800,color:acabando.length>0?'#92400E':'#16A34A'}}>{acabando.length}</div>
              <div style={{fontSize:10,color:'#6B7280',fontWeight:600}}>ACABANDO</div>
            </button>
            <button onClick={()=>setShowStockModal('projecao')} style={{padding:'10px 6px',background:projecaoZerar.length>0?'#FFEDD5':'#F0FDF4',border:'1px solid '+(projecaoZerar.length>0?'#EA580C44':'#16A34A33'),borderRadius:6,cursor:'pointer',textAlign:'center'}}>
              <div style={{fontSize:22,fontWeight:800,color:projecaoZerar.length>0?'#C2410C':'#16A34A'}}>{projecaoZerar.length}</div>
              <div style={{fontSize:10,color:'#6B7280',fontWeight:600}}>VÃO ZERAR 7d</div>
            </button>
          </div>
          {projecaoZerar.length>0 && (
            <div style={{marginTop:8,padding:'6px 10px',background:'#FFEDD5',borderRadius:5,fontSize:11,color:'#9A3412'}}>
              ⚠️ Top: <strong>{projecaoZerar[0].name}</strong> zera em {projecaoZerar[0].diasRestantes}d
            </div>
          )}
        </div>

        {/* MODAL ESTOQUE 3 modos */}
        {showStockModal && Modal && (
          <Modal title={
            showStockModal==='zerados' ? `📦 Produtos zerados (${noStock.length})`
            : showStockModal==='acabando' ? `📦 Produtos acabando (${acabando.length})`
            : `📦 Vão zerar em 7 dias (${projecaoZerar.length})`
          } onClose={()=>setShowStockModal(null)}>
            <div style={{maxHeight:'60vh',overflowY:'auto'}}>
              {showStockModal==='zerados' && (
                noStock.length===0 ? <div style={{padding:20,textAlign:'center',color:'#16A34A'}}>✅ Nenhum produto zerado</div> :
                <table style={{width:'100%',fontSize:12,borderCollapse:'collapse'}}>
                  <thead style={{background:'#F9FAFB',position:'sticky',top:0}}>
                    <tr><th style={{textAlign:'left',padding:8}}>Produto</th><th style={{textAlign:'left',padding:8}}>Marca</th><th style={{textAlign:'right',padding:8}}>Preço</th><th style={{textAlign:'center',padding:8}}>Min.</th></tr>
                  </thead>
                  <tbody>
                    {noStock.map(p=>(
                      <tr key={p.id} style={{borderBottom:'1px solid #F3F4F6'}}>
                        <td style={{padding:8,color:'#1B2A4A',fontWeight:500}}>{p.name}</td>
                        <td style={{padding:8,color:'#6B7280'}}>{p.brand||'—'}</td>
                        <td style={{padding:8,textAlign:'right',color:'#374151'}}>{fmt(p.salePrice||p.sale_price||p.price||0)}</td>
                        <td style={{padding:8,textAlign:'center',color:'#9CA3AF'}}>{p.estoqueMin||p.estoque_min||20}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
              {showStockModal==='acabando' && (
                acabando.length===0 ? <div style={{padding:20,textAlign:'center',color:'#16A34A'}}>✅ Nenhum produto acabando</div> :
                <table style={{width:'100%',fontSize:12,borderCollapse:'collapse'}}>
                  <thead style={{background:'#F9FAFB',position:'sticky',top:0}}>
                    <tr><th style={{textAlign:'left',padding:8}}>Produto</th><th style={{textAlign:'left',padding:8}}>Marca</th><th style={{textAlign:'center',padding:8}}>Stock</th><th style={{textAlign:'center',padding:8}}>Min.</th></tr>
                  </thead>
                  <tbody>
                    {acabando.sort((a,b)=>a.stock-b.stock).map(p=>(
                      <tr key={p.id} style={{borderBottom:'1px solid #F3F4F6'}}>
                        <td style={{padding:8,color:'#1B2A4A',fontWeight:500}}>{p.name}</td>
                        <td style={{padding:8,color:'#6B7280'}}>{p.brand||'—'}</td>
                        <td style={{padding:8,textAlign:'center',color:p.stock<=5?'#DC2626':'#EA580C',fontWeight:700}}>{p.stock}</td>
                        <td style={{padding:8,textAlign:'center',color:'#9CA3AF'}}>{p.estoqueMin||p.estoque_min||20}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
              {showStockModal==='projecao' && (
                projecaoZerar.length===0 ? <div style={{padding:20,textAlign:'center',color:'#16A34A'}}>✅ Nenhum produto projetado pra zerar nos próximos 7 dias</div> :
                <table style={{width:'100%',fontSize:12,borderCollapse:'collapse'}}>
                  <thead style={{background:'#F9FAFB',position:'sticky',top:0}}>
                    <tr><th style={{textAlign:'left',padding:8}}>Produto</th><th style={{textAlign:'center',padding:8}}>Stock</th><th style={{textAlign:'center',padding:8}}>Vende/dia</th><th style={{textAlign:'center',padding:8}}>Zera em</th></tr>
                  </thead>
                  <tbody>
                    {projecaoZerar.map(p=>(
                      <tr key={p.id} style={{borderBottom:'1px solid #F3F4F6'}}>
                        <td style={{padding:8,color:'#1B2A4A',fontWeight:500}}>{p.name}</td>
                        <td style={{padding:8,textAlign:'center',color:'#374151'}}>{p.stock}</td>
                        <td style={{padding:8,textAlign:'center',color:'#6B7280'}}>{p.dailyAvg.toFixed(1)}</td>
                        <td style={{padding:8,textAlign:'center',color:p.diasRestantes<=3?'#DC2626':'#EA580C',fontWeight:700}}>{p.diasRestantes}d</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          </Modal>
        )}
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.EstoqueSaudeCard = EstoqueSaudeCard;
  window.EstoqueSaudeCard = EstoqueSaudeCard;
})();