// mnm-contexto.jsx — Contexto del Negocio
const { useState, useRef } = React;

const INITIAL_BLOCKS = [
  {id:'descripcion', label:'Descripción del negocio', content:'Restaurante de comida peruana en Bogotá, enfocado en almuerzo ejecutivo. 3 años en operación. Capacidad para 45 comensales, equipo de 8 personas.'},
  {id:'ingresos',    label:'Modelo de ingresos',      content:'Venta directa en local (70%) y delivery vía apps (30%). Ticket promedio $18 USD. Abierto L–V, servicio de almuerzo y cena.'},
  {id:'clientes',    label:'Clientes objetivo',       content:'Profesionales de 28–50 años en zona empresarial de Chapinero. Valoran rapidez, calidad y precio accesible. Clientes corporativos con cuenta mensual representan 20% del revenue.'},
  {id:'retos',       label:'Retos actuales',          content:'Reducir desperdicio de insumos. Mejorar margen en delivery que actualmente cubre solo costos. Reducir dependencia de plataformas de delivery.'},
  {id:'estrategia',  label:'Notas estratégicas e insights de sesiones', content:''},
];

const INIT_FILES = [
  {id:1, name:'plan-negocio-2026.md', date:'12 may 2026', size:'18 KB'},
  {id:2, name:'estrategia-q2.pdf',    date:'03 abr 2026', size:'42 KB'},
];

const INIT_PROPOSALS = [
  {id:1, text:'Los ingresos de delivery cayeron 18% en abril mientras los de local subieron 8%. Sugiere dependencia decreciente de apps de terceros.', target:'retos', targetLabel:'Retos actuales', origin:'Patrón detectado en datos financieros'},
  {id:2, text:'Ticket promedio en delivery ($14) es 22% menor al ticket en local ($18), posiblemente por promociones en plataformas.', target:'estrategia', targetLabel:'Notas estratégicas', origin:'Análisis comparativo de canales'},
];

const IcDoc = ()=><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="1" width="10" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.3"/><path d="M4 5h6M4 7.5h6M4 10h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>;
const IcUpload2 = ()=><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v7M4.5 4.5L7 2l2.5 2.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/><path d="M2 10v1.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>;

/* ─── CONTEXT BLOCK ──────────────────────────────────────────────────────────── */
function CtxBlock({ block, onSave }) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft]     = useState(block.content);
  const save   = () => { onSave(block.id, draft); setEditing(false); };
  const cancel = () => { setDraft(block.content); setEditing(false); };
  return (
    <div style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',overflow:'hidden',marginBottom:'10px',transition:'border-color 0.15s'}}>
      <div style={{padding:'11px 16px',borderBottom:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <span style={{fontSize:'11.5px',fontWeight:700,color:'var(--t3)',letterSpacing:'0.06em',textTransform:'uppercase'}}>{block.label}</span>
        {!editing&&<button onClick={()=>setEditing(true)} style={{fontSize:'12px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontWeight:600,fontFamily:'var(--font)'}}>Editar</button>}
      </div>
      <div style={{padding:'14px 16px'}}>
        {editing ? (
          <>
            <textarea value={draft} onChange={e=>setDraft(e.target.value)}
              style={{width:'100%',minHeight:'72px',padding:'10px 12px',borderRadius:'var(--radius-sm)',fontSize:'13px',lineHeight:1.65,resize:'vertical',border:'1px solid var(--accent-border)',background:'var(--surf-2)'}}
              autoFocus/>
            <div style={{display:'flex',gap:'8px',marginTop:'8px',justifyContent:'flex-end'}}>
              <button onClick={cancel} style={{padding:'6px 14px',borderRadius:'100px',background:'none',border:'1px solid var(--border-2)',color:'var(--t2)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)'}}>Cancelar</button>
              <button onClick={save} style={{padding:'6px 16px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Guardar</button>
            </div>
          </>
        ) : block.content ? (
          <p style={{fontSize:'13.5px',color:'var(--t1)',lineHeight:1.7,margin:0}}>{block.content}</p>
        ) : (
          <button onClick={()=>setEditing(true)} style={{fontSize:'13px',color:'var(--t3)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',padding:0}}>+ Agregar...</button>
        )}
      </div>
    </div>
  );
}

/* ─── PROPOSAL CARD ──────────────────────────────────────────────────────────── */
function ProposalCard({ p, onAccept, onDismiss }) {
  const [editing, setEditing] = useState(false);
  const [txt, setTxt]         = useState(p.text);
  return (
    <div style={{background:'var(--s-yellow-bg)',border:'1px solid rgba(240,192,64,0.18)',borderLeft:'3px solid var(--s-yellow)',borderRadius:'var(--radius)',padding:'14px 16px',marginBottom:'8px',animation:'fadeInUp 0.25s ease'}}>
      <p style={{fontSize:'11px',color:'var(--s-yellow)',fontWeight:600,margin:'0 0 7px',letterSpacing:'0.04em'}}>{p.origin} → «{p.targetLabel}»</p>
      {editing ? (
        <textarea value={txt} onChange={e=>setTxt(e.target.value)} style={{width:'100%',padding:'8px 10px',borderRadius:'var(--radius-sm)',fontSize:'13px',lineHeight:1.55,minHeight:'56px',resize:'none',border:'1px solid var(--accent-border)',background:'var(--surf-2)',marginBottom:'8px'}}/>
      ) : (
        <p style={{fontSize:'13px',color:'var(--t1)',lineHeight:1.65,margin:'0 0 10px'}}>"{p.text}"</p>
      )}
      <div style={{display:'flex',gap:'8px'}}>
        {editing ? (
          <>
            <button onClick={()=>onAccept({...p,text:txt})} style={{padding:'5px 14px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Aceptar editado</button>
            <button onClick={()=>setEditing(false)} style={{padding:'5px 12px',borderRadius:'100px',background:'none',border:'1px solid var(--border-2)',color:'var(--t2)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)'}}>Cancelar</button>
          </>
        ) : (
          <>
            <button onClick={()=>onAccept(p)} style={{padding:'5px 14px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Aceptar</button>
            <button onClick={()=>setEditing(true)} style={{padding:'5px 12px',borderRadius:'100px',background:'none',border:'1px solid rgba(240,192,64,0.4)',color:'var(--s-yellow)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)',fontWeight:600}}>Editar</button>
            <button onClick={()=>onDismiss(p.id)} style={{padding:'5px 12px',borderRadius:'100px',background:'none',border:'none',color:'var(--t3)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)'}}>Descartar ×</button>
          </>
        )}
      </div>
    </div>
  );
}

/* ─── CONTEXTO VIEW ──────────────────────────────────────────────────────────── */
function ContextoView() {
  const [blocks, setBlocks]         = useState(INITIAL_BLOCKS);
  const [files, setFiles]           = useState(INIT_FILES);
  const [proposals, setProposals]   = useState(INIT_PROPOSALS);
  const [uploading, setUploading]   = useState(false);
  const [sessionInsight, setSessionInsight] = useState(true);

  const saveBlock = (id, content) => setBlocks(bs => bs.map(b => b.id===id ? {...b,content} : b));
  const removeFile = id => setFiles(fs => fs.filter(f => f.id!==id));

  const acceptProposal = p => {
    setBlocks(bs => bs.map(b => {
      if(b.id !== p.target) return b;
      const sep = b.content ? '\n— ' : '';
      return {...b, content: b.content + sep + p.text};
    }));
    setProposals(ps => ps.filter(x => x.id !== p.id));
  };
  const dismissProposal = id => setProposals(ps => ps.filter(p => p.id !== id));

  const simulateUpload = () => {
    setUploading(true);
    setTimeout(() => {
      setFiles(fs=>[...fs,{id:Date.now(),name:'notas-equipo-q3.md',date:'22 may 2026',size:'8 KB'}]);
      setProposals(ps=>[...ps,{id:Date.now(),text:'El equipo de ventas necesita capacitación en técnicas de cierre para el canal delivery.',target:'estrategia',targetLabel:'Notas estratégicas',origin:'Extraído de notas-equipo-q3.md'}]);
      setUploading(false);
    },1800);
  };

  const charCount = blocks.reduce((a,b)=>a+b.content.length,0);
  const usedPct   = Math.min(100, Math.round((charCount / 25000)*100));

  const header = (
    <div style={{padding:'16px 24px',borderBottom:'1px solid var(--border)',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',gap:'12px'}}>
      <div>
        <h1 style={{fontSize:'16px',fontWeight:700,color:'var(--t1)',margin:0}}>Contexto del Negocio</h1>
        <p style={{fontSize:'12px',color:'var(--t3)',margin:'2px 0 0'}}>La IA usa este contexto para personalizar hallazgos · Cafetería El Roble</p>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
        <div style={{width:'80px',height:'4px',background:'var(--surf-3)',borderRadius:'2px',overflow:'hidden'}}>
          <div style={{width:`${usedPct}%`,height:'100%',background:'var(--accent)',borderRadius:'2px'}}/>
        </div>
        <span style={{fontSize:'11.5px',color:'var(--t3)',whiteSpace:'nowrap'}}>{usedPct}% de ~50 págs.</span>
      </div>
    </div>
  );

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      {header}
      <div style={{flex:1,overflowY:'auto',padding:'24px'}} className="main-scroll">
        <div style={{maxWidth:'720px'}}>

          {/* AI proposals */}
          {proposals.length > 0 && (
            <div style={{marginBottom:'20px'}}>
              <p style={{fontSize:'11.5px',fontWeight:700,color:'var(--s-yellow)',letterSpacing:'0.07em',textTransform:'uppercase',marginBottom:'10px'}}>
                {proposals.length} propuesta{proposals.length>1?'s':''} de la IA — pendiente{proposals.length>1?'s':''} de revisión
              </p>
              {proposals.map(p=><ProposalCard key={p.id} p={p} onAccept={acceptProposal} onDismiss={dismissProposal}/>)}
            </div>
          )}

          {/* Session insight */}
          {sessionInsight && (
            <div style={{background:'var(--accent-bg)',border:'1px solid var(--accent-border)',borderLeft:'3px solid var(--accent)',borderRadius:'var(--radius)',padding:'14px 16px',marginBottom:'20px',animation:'fadeInUp 0.25s ease'}}>
              <p style={{fontSize:'11px',color:'var(--accent)',fontWeight:600,margin:'0 0 6px',letterSpacing:'0.04em'}}>Sesión con Ana Gómez · 15 may 2026 → agregar a «Notas estratégicas»</p>
              <p style={{fontSize:'13px',color:'var(--t1)',lineHeight:1.65,margin:'0 0 10px'}}>"Margen en delivery es negativo; prioridad revisar precios o desarrollar canal propio."</p>
              <div style={{display:'flex',gap:'8px'}}>
                <button onClick={()=>{saveBlock('estrategia','[Sesión · Ana Gómez · 15 may 2026] Margen en delivery es negativo; prioridad revisar precios o desarrollar canal propio.');setSessionInsight(false);}} style={{padding:'5px 14px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Aceptar y guardar</button>
                <button onClick={()=>setSessionInsight(false)} style={{padding:'5px 12px',borderRadius:'100px',background:'none',border:'none',color:'var(--t3)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)'}}>Descartar ×</button>
              </div>
            </div>
          )}

          {/* Blocks */}
          {blocks.map(b=><CtxBlock key={b.id} block={b} onSave={saveBlock}/>)}

          {/* Files */}
          <div style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'18px 20px',marginTop:'6px'}}>
            <p style={{fontSize:'11.5px',fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',color:'var(--t3)',marginBottom:'12px'}}>Archivos subidos</p>
            {files.length > 0 && (
              <div style={{display:'flex',flexDirection:'column',gap:'7px',marginBottom:'12px'}}>
                {files.map(f=>(
                  <div key={f.id} style={{display:'flex',alignItems:'center',gap:'10px',padding:'9px 12px',background:'var(--surf-2)',borderRadius:'var(--radius-sm)'}}>
                    <span style={{color:'var(--t3)',lineHeight:0,flexShrink:0}}><IcDoc/></span>
                    <span style={{fontSize:'13px',color:'var(--t1)',flex:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{f.name}</span>
                    <span style={{fontSize:'11px',color:'var(--t3)',flexShrink:0}}>{f.date} · {f.size}</span>
                    <button onClick={()=>removeFile(f.id)} style={{fontSize:'11.5px',color:'var(--s-red)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',flexShrink:0,padding:0}}>Eliminar</button>
                  </div>
                ))}
              </div>
            )}
            <button onClick={simulateUpload} disabled={uploading} style={{display:'flex',alignItems:'center',gap:'8px',padding:'10px 16px',borderRadius:'var(--radius-sm)',background:'var(--surf-2)',border:'1px solid var(--border)',color:'var(--t2)',fontSize:'13px',fontWeight:500,cursor:uploading?'default':'pointer',fontFamily:'var(--font)',width:'100%',justifyContent:'center',transition:'border-color 0.15s'}}
              onMouseEnter={e=>{if(!uploading)e.currentTarget.style.borderColor='var(--accent-border)';}}
              onMouseLeave={e=>e.currentTarget.style.borderColor='var(--border)'}>
              {uploading ? (
                <><div style={{width:'13px',height:'13px',borderRadius:'50%',border:'2px solid var(--accent)',borderTopColor:'transparent',animation:'spin 0.9s linear infinite'}}/> Procesando archivo...</>
              ) : (
                <><IcUpload2/> Subir archivo (.md, PDF, .txt)</>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ContextoView });