// FLUX Copilot — IA assistant via window.claude.complete
function Copilot({open, onClose, onAction}){
  const I = window.Icons;
  const [msgs, setMsgs] = React.useState([
    { role:'ai', text:'¡Hola! Soy <b>FLUX Copilot</b>, tu asistente de inventario y analytics. Puedo analizar tus datos, sugerir transferencias, generar reportes o explicar tendencias. ¿En qué te ayudo?' }
  ]);
  const [input, setInput] = React.useState('');
  const [thinking, setThinking] = React.useState(false);
  const bodyRef = React.useRef(null);

  const quick = [
    '¿Qué SKUs tienen mayor riesgo hoy?',
    'Resume el desempeño del mes',
    '¿Qué tienda necesita más atención?',
    'Sugiere transferencias inter-tienda',
  ];

  const send = async (textOverride) => {
    const text = textOverride ?? input;
    if(!text.trim() || thinking) return;
    setMsgs(m=>[...m,{role:'user',text}]);
    setInput('');
    setThinking(true);

    const D = window.FLUXData;
    const ctx = `Eres FLUX Copilot, asistente de analytics e inventario para una cadena retail mexicana.
Datos actuales (mayo 2025):
- 8 tiendas, 6,842 SKUs, ventas mensuales $8.69M MXN, quiebres reducidos 78% YoY.
- Tiendas top: ${D.stores.slice(0,3).map(s=>`${s.name} ($${(s.sales/1000000).toFixed(1)}M)`).join(', ')}.
- SKUs en riesgo: ${D.skus.filter(s=>s.risk>0.6).map(s=>`${s.sku} (${s.name}, riesgo ${Math.round(s.risk*100)}%, stock ${s.stock})`).join('; ')}.
- Alertas críticas: ${D.alerts.filter(a=>a.level==='critical').length}.
- Modelo activo: Claude Forecast v2.4, MAPE 4.8%.
Responde en español, conciso (2-4 frases), con números específicos cuando corresponda. Si el usuario pide una acción concreta (transferencia, reporte, promoción), termina sugiriendo "Ejecutar [acción]".`;

    try{
      const res = await window.claude.complete({
        messages: [
          { role:'user', content: ctx + '\n\nPregunta: ' + text }
        ]
      });
      setMsgs(m=>[...m,{role:'ai',text:res}]);
    }catch(e){
      setMsgs(m=>[...m,{role:'ai',text:'Hubo un problema procesando tu pregunta. Intenta de nuevo.'}]);
    }finally{
      setThinking(false);
      setTimeout(()=>{ if(bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, 50);
    }
  };

  React.useEffect(()=>{
    if(bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  },[msgs.length]);

  if(!open) return null;
  return (
    <div className="copilot-panel">
      <div className="copilot-head">
        <div style={{width:32,height:32,borderRadius:8,background:'linear-gradient(135deg,#F5A524,#E8941A)',color:'#fff',display:'grid',placeItems:'center'}}><I.Sparkles size={16}/></div>
        <div style={{flex:1}}>
          <div style={{fontSize:14,fontWeight:700,color:'var(--ink)'}}>FLUX Copilot</div>
          <div style={{fontSize:11,color:'var(--ink-3)'}}>Powered by Claude · MAPE 4.8%</div>
        </div>
        <button className="icon-btn" onClick={onClose}><I.X size={14}/></button>
      </div>
      <div className="copilot-body" ref={bodyRef}>
        {msgs.map((m,i)=>(
          <div key={i} className={`msg ${m.role}`}>
            <div className="bubble" dangerouslySetInnerHTML={{__html: m.text.replace(/\*\*(.+?)\*\*/g,'<b>$1</b>')}}/>
          </div>
        ))}
        {thinking && (
          <div className="msg ai"><div className="bubble" style={{display:'flex',gap:4,alignItems:'center'}}>
            <span style={{display:'inline-block',width:6,height:6,borderRadius:99,background:'var(--ink-3)',animation:'blink 1.2s infinite'}}/>
            <span style={{display:'inline-block',width:6,height:6,borderRadius:99,background:'var(--ink-3)',animation:'blink 1.2s infinite .2s'}}/>
            <span style={{display:'inline-block',width:6,height:6,borderRadius:99,background:'var(--ink-3)',animation:'blink 1.2s infinite .4s'}}/>
          </div></div>
        )}
        {msgs.length<=1 && !thinking && (
          <div className="quick-q">
            {quick.map((q,i)=><div key={i} className="q" onClick={()=>send(q)}>{q}</div>)}
          </div>
        )}
      </div>
      <div className="copilot-input">
        <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&send()} placeholder="Pregunta lo que sea sobre tu inventario..."/>
        <button className="icon-btn" onClick={()=>send()} style={{background:'var(--amber)',borderColor:'var(--amber-2)',color:'#1A1614'}}><I.Send size={14}/></button>
      </div>
      <style>{`@keyframes blink{0%,80%,100%{opacity:0.3}40%{opacity:1}}`}</style>
    </div>
  );
}

function CopilotFab({onClick, hidden}){
  const I = window.Icons;
  if(hidden) return null;
  return (
    <button className="copilot-fab" onClick={onClick} title="FLUX Copilot">
      <I.Sparkles/>
      <span className="copilot-pulse"/>
    </button>
  );
}

window.Copilot = Copilot;
window.CopilotFab = CopilotFab;