// mnm-boveda.jsx — Bóveda (5 categorías) + Team section
const { useState } = React;

/* ─── HELPERS ────────────────────────────────────────────────────────────── */
function GCard2({ children, style, pad }) {
  return (
    <div style={Object.assign({
      background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',
      WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',
      boxShadow:'var(--glass-shadow)',borderRadius:'var(--radius-card)',
      padding:pad!==undefined?pad:'16px 18px',marginBottom:'12px',
    },style)}>{children}</div>
  );
}

/* ─── BÓVEDA SECTION ─────────────────────────────────────────────────────── */
const BOVEDA_CATS = [
  {id:'financiero', label:'Estados financieros', icon:'📊'},
  {id:'bancario',   label:'Cuentas bancarias',   icon:'🏦'},
  {id:'facturas',   label:'Facturas y contratos', icon:'📄'},
  {id:'reglas',     label:'Reglas de negocio',    icon:'📋'},
  {id:'contexto',   label:'Contexto IA',           icon:'✦'},
];

const SAMPLE_FILES = [
  {name:'estados-resultados-q1-2026.pdf', cat:'financiero', date:'12 may 2026', status:'Procesado'},
  {name:'extracto-bancario-mayo.pdf',     cat:'bancario',   date:'22 may 2026', status:'Procesado'},
  {name:'contrato-proveedor-insumos.pdf', cat:'facturas',   date:'03 abr 2026', status:'Pendiente'},
  {name:'plan-negocio-2026.md',           cat:'contexto',   date:'01 ene 2026', status:'Procesado'},
];

const SAMPLE_REGLAS = [
  {id:1, texto:'El margen bruto mínimo aceptable es 40%',                active:true,  applies:'Hallazgos, Resumen'},
  {id:2, texto:'El canal delivery no debe superar 30% de los ingresos',  active:true,  applies:'Hallazgos'},
  {id:3, texto:'Gastos de marketing fijos a $500/mes',                   active:true,  applies:'Financiero, Hallazgos'},
  {id:4, texto:'No considerar ingresos de delivery en el margen bruto',   active:false, applies:'Desactivada'},
];

const CONTEXTO_BLOQUES = [
  {id:'desc',     label:'Descripción del negocio',        content:'Restaurante de comida peruana en Bogotá, enfocado en almuerzo ejecutivo. 3 años en operación.'},
  {id:'modelo',   label:'Modelo de ingresos',             content:'Venta directa en local (70%) y delivery vía apps (30%). Ticket promedio $18 USD.'},
  {id:'retos',    label:'Retos actuales',                 content:'Reducir desperdicio de insumos. Mejorar margen en delivery que actualmente cubre solo costos.'},
  {id:'estrategia',label:'Notas estratégicas',            content:'Evaluar canal propio de pedidos por WhatsApp para reducir comisiones de delivery.'},
];

function FileRow({ file }) {
  const statusColor = file.status==='Procesado' ? '#16A34A' : file.status==='Pendiente' ? '#D97706' : '#DC2626';
  return (
    <div style={{display:'flex',alignItems:'center',gap:'10px',padding:'10px 0',borderBottom:'0.5px solid var(--border)'}}>
      <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.2"/><path d="M4 5h6M4 7.5h6M4 10h3" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round"/></svg>
      <span style={{fontSize:'12.5px',color:'var(--t1)',flex:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{file.name}</span>
      <span style={{fontSize:'10px',padding:'1px 7px',borderRadius:'var(--radius-tag)',background:statusColor+'15',color:statusColor,flexShrink:0}} className="keep-nowrap">{file.status}</span>
      <span style={{fontSize:'11px',color:'var(--t3)',flexShrink:0}}>{file.date}</span>
      <div style={{display:'flex',gap:'6px',flexShrink:0}}>
        <button style={{background:'none',border:'none',cursor:'pointer',color:'var(--accent)',fontSize:'12px',padding:0}}>↓</button>
        <button style={{background:'none',border:'none',cursor:'pointer',color:'var(--s-red)',fontSize:'12px',padding:0}}>✕</button>
      </div>
    </div>
  );
}

function ReglaRow({ regla, onToggle }) {
  return (
    <div style={{display:'flex',alignItems:'flex-start',gap:'12px',padding:'12px 0',borderBottom:'0.5px solid var(--border)'}}>
      <div onClick={()=>onToggle(regla.id)} style={{width:'30px',height:'17px',borderRadius:'var(--radius-tag)',background:regla.active?'rgba(22,163,74,0.8)':'var(--surf-3)',cursor:'pointer',position:'relative',flexShrink:0,marginTop:'2px',transition:'background 0.2s'}}>
        <div style={{position:'absolute',top:'2px',left:regla.active?'15px':'2px',width:'13px',height:'13px',borderRadius:'50%',background:'white',transition:'left 0.2s',boxShadow:'0 1px 3px rgba(0,0,0,0.2)'}}/>
      </div>
      <div style={{flex:1}}>
        <p style={{fontSize:'13px',color:regla.active?'var(--t1)':'var(--t3)',margin:'0 0 3px',lineHeight:1.4,fontStyle:regla.active?'normal':'italic'}}>{regla.texto}</p>
        <p style={{fontSize:'11px',color:'var(--t3)',margin:0}}>{regla.applies}</p>
      </div>
      <button style={{background:'none',border:'none',cursor:'pointer',color:'var(--t3)',fontSize:'18px',lineHeight:1,padding:'2px'}}>⋯</button>
    </div>
  );
}

function ContextoBloque({ bloque }) {
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(bloque.content);
  return (
    <GCard2 style={{marginBottom:'10px'}}>
      <div style={{display:'flex',justifyContent:'space-between',marginBottom:'8px'}}>
        <span style={{fontSize:'10px',fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--t3)'}}>{bloque.label}</span>
        <button onClick={()=>setEditing(!editing)} style={{fontSize:'11.5px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:500}}>{editing?'Guardar':'Editar'}</button>
      </div>
      {editing
        ? <textarea value={value} onChange={e=>setValue(e.target.value)} style={{width:'100%',border:'0.5px solid var(--glass-border)',borderRadius:'var(--radius-sm)',padding:'8px 10px',fontSize:'13px',color:'var(--t1)',resize:'none',minHeight:'72px',fontFamily:'var(--font)',lineHeight:1.55}}/>
        : <p style={{fontSize:'13px',color:'var(--t2)',margin:0,lineHeight:1.6}}>{value}</p>
      }
    </GCard2>
  );
}

function BóvedaSection({ company }) {
  const [cat, setCat] = useState('financiero');
  const [reglas, setReglas] = useState(SAMPLE_REGLAS);
  const [newRegla, setNewRegla] = useState('');
  const [propuesta, setPropuesta] = useState(true);
  const files = SAMPLE_FILES.filter(f=>f.cat===cat);

  const toggleRegla = (id) => setReglas(rs=>rs.map(r=>r.id===id?{...r,active:!r.active}:r));

  return (
    <div style={{padding:'20px 24px',maxWidth:'820px'}}>
      <div style={{marginBottom:'16px'}}>
        <h2 style={{fontSize:'16px',fontWeight:600,color:'var(--t1)',margin:0}}>Bóveda</h2>
        <p style={{fontSize:'11.5px',color:'var(--t3)',margin:'3px 0 0'}}>Biblioteca centralizada de documentos, reglas y contexto de {company.nombre}</p>
      </div>

      {/* Buscador */}
      <div style={{display:'flex',alignItems:'center',gap:'8px',padding:'9px 14px',background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',borderRadius:'var(--radius-tag)',marginBottom:'16px'}}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.3"/><path d="M9.5 9.5L13 13" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
        <input placeholder="Buscar en la bóveda..." style={{flex:1,border:'none',background:'transparent',fontSize:'13px',color:'var(--t1)',padding:0}}/>
      </div>

      {/* Category tabs */}
      <div style={{display:'flex',gap:'6px',marginBottom:'16px',overflowX:'auto',paddingBottom:'4px'}}>
        {BOVEDA_CATS.map(c=>(
          <button key={c.id} onClick={()=>setCat(c.id)} style={{
            display:'flex',alignItems:'center',gap:'6px',
            padding:'8px 14px',borderRadius:'var(--radius-sm)',border:'0.5px solid '+(cat===c.id?'var(--accent-border)':'var(--glass-border)'),
            background:cat===c.id?'var(--glass-bg-atmo)':'var(--glass-bg)',backdropFilter:'var(--glass-blur)',
            color:cat===c.id?'var(--t1)':'var(--t3)',fontSize:'12.5px',fontWeight:cat===c.id?600:400,
            cursor:'pointer',fontFamily:'var(--font)',whiteSpace:'nowrap',transition:'all 0.12s',
          }}>
            {c.label}
          </button>
        ))}
      </div>

      {/* Category content */}
      {(cat==='financiero'||cat==='bancario'||cat==='facturas') && (
        <GCard2>
          <div style={{display:'flex',justifyContent:'space-between',marginBottom:'12px'}}>
            <span style={{fontSize:'12px',fontWeight:600,color:'var(--t2)'}}>{files.length} archivos</span>
            <button style={{fontSize:'12px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:500}}>+ Subir archivo</button>
          </div>
          {files.length===0
            ? <p style={{fontSize:'12.5px',color:'var(--t3)',textAlign:'center',padding:'24px 0'}}>Sin archivos en esta categoría.</p>
            : files.map(f=><FileRow key={f.name} file={f}/>)
          }
          <div style={{marginTop:'12px',padding:'12px',background:'var(--glass-bg-atmo)',borderRadius:'var(--radius-sm)',border:'0.5px dashed var(--border-2)',display:'flex',alignItems:'center',justifyContent:'center',gap:'8px',cursor:'pointer'}}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2.5L11 6H9V11H7V6H5L8 2.5Z" stroke="currentColor" strokeWidth="1.3"/><path d="M3 13h10" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
            <span style={{fontSize:'12px',color:'var(--t3)'}}>Arrastra archivos aquí o haz clic para subir</span>
          </div>
        </GCard2>
      )}

      {cat==='reglas' && (
        <GCard2>
          <div style={{display:'flex',justifyContent:'space-between',marginBottom:'12px'}}>
            <span style={{fontSize:'12px',fontWeight:600,color:'var(--t2)'}}>{reglas.filter(r=>r.active).length} reglas activas</span>
          </div>
          {reglas.map(r=><ReglaRow key={r.id} regla={r} onToggle={toggleRegla}/>)}
          <div style={{marginTop:'14px'}}>
            <p style={{fontSize:'11px',color:'var(--t3)',marginBottom:'7px'}}>Nueva regla en lenguaje natural:</p>
            <div style={{display:'flex',gap:'8px'}}>
              <input value={newRegla} onChange={e=>setNewRegla(e.target.value)} placeholder='Ej: "El gasto en nómina no debe superar 35% de los ingresos"' style={{flex:1,padding:'8px 12px',borderRadius:'var(--radius-sm)',fontSize:'12.5px'}}/>
              <button onClick={()=>{if(newRegla.trim()){setReglas(rs=>[...rs,{id:Date.now(),texto:newRegla.trim(),active:true,applies:'Hallazgos'}]);setNewRegla('');}}} style={{padding:'8px 14px',borderRadius:'var(--radius-tag)',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12px',fontWeight:500,cursor:'pointer',fontFamily:'var(--font)',whiteSpace:'nowrap'}}>+ Agregar</button>
            </div>
          </div>
        </GCard2>
      )}

      {cat==='contexto' && (
        <>
          {propuesta && (
            <div style={{background:'rgba(217,119,6,0.08)',border:'0.5px solid rgba(217,119,6,0.3)',borderRadius:'var(--radius-card)',padding:'14px 16px',marginBottom:'14px',display:'flex',gap:'10px',alignItems:'flex-start'}}>
              <span style={{fontSize:'18px',flexShrink:0}}>✦</span>
              <div style={{flex:1}}>
                <p style={{fontSize:'12px',fontWeight:600,color:'#D97706',marginBottom:'6px'}}>Propuesta de la IA (pendiente de revisión)</p>
                <p style={{fontSize:'12.5px',color:'var(--t2)',marginBottom:'10px',lineHeight:1.55}}>"Los ingresos de delivery cayeron 18% en abril mientras los de local subieron 8%. ¿Agregar a Retos actuales?"</p>
                <div style={{display:'flex',gap:'8px'}}>
                  <button onClick={()=>setPropuesta(false)} style={{padding:'5px 12px',borderRadius:'var(--radius-tag)',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)',fontWeight:500}}>Aceptar</button>
                  <button style={{padding:'5px 12px',borderRadius:'var(--radius-tag)',background:'var(--glass-bg)',border:'0.5px solid var(--glass-border)',color:'var(--t2)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)'}}>Editar</button>
                  <button onClick={()=>setPropuesta(false)} style={{padding:'5px 12px',borderRadius:'var(--radius-tag)',background:'none',border:'none',color:'var(--t3)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)'}}>Descartar ✕</button>
                </div>
              </div>
            </div>
          )}
          {CONTEXTO_BLOQUES.map(b=><ContextoBloque key={b.id} bloque={b}/>)}
          <div style={{marginTop:'8px'}}>
            <button style={{padding:'9px 16px',borderRadius:'var(--radius-tag)',background:'var(--glass-bg)',border:'0.5px dashed var(--border-2)',color:'var(--t3)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)',width:'100%'}}>+ Subir archivo (.md, PDF, .txt)</button>
          </div>
          <p style={{fontSize:'11px',color:'var(--t3)',marginTop:'10px',textAlign:'center'}}>Uso del contexto: ████████░░ 78% de capacidad (~50 páginas)</p>
        </>
      )}
    </div>
  );
}

/* ─── TEAM SECTION ───────────────────────────────────────────────────────── */
const TEAM_DATA = {
  A:[
    {id:1,nombre:'María González',rol:'Contadora',     email:'maria@contabilidad.com', acceso:'Solo lectura', estado:'activo',    desde:'10 ene 2026'},
    {id:2,nombre:'Pedro Ramírez', rol:'Administrador', email:'pedro@restaurante.com',  acceso:'Colaborador',  estado:'activo',    desde:'02 mar 2026'},
    {id:3,nombre:'Carlos Pérez',  rol:'Operaciones',   email:'carlos@email.com',       acceso:'Colaborador',  estado:'pendiente', desde:''},
  ],
  B:[{id:1,nombre:'Isai Campo',rol:'Fundador',email:'isai@logisaas.com',acceso:'Administrador',estado:'activo',desde:'01 ene 2023'}],
  C:[],
};
const ACCESO_CFG = {'Administrador':{c:'var(--accent)',bg:'var(--glass-bg-atmo)'},'Colaborador':{c:'var(--s-yellow)',bg:'var(--s-yellow-bg)'},'Solo lectura':{c:'var(--t3)',bg:'var(--glass-bg)'}};

function TeamSection({ company }) {
  const [members, setMembers] = useState(TEAM_DATA[company.id]||[]);
  const [showInvite, setShowInvite] = useState(false);
  const [inviteForm, setInviteForm] = useState({nombre:'',email:'',rol:'',acceso:'Solo lectura'});

  const sendInvite = ()=>{
    if(!inviteForm.email.trim()) return;
    setMembers(m=>[...m,{id:Date.now(),...inviteForm,estado:'pendiente',desde:''}]);
    setInviteForm({nombre:'',email:'',rol:'',acceso:'Solo lectura'});
    setShowInvite(false);
  };

  return (
    <div style={{padding:'20px 24px',maxWidth:'720px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:'16px'}}>
        <div>
          <h2 style={{fontSize:'16px',fontWeight:600,color:'var(--t1)',margin:0}}>Team</h2>
          <p style={{fontSize:'11.5px',color:'var(--t3)',margin:'3px 0 0'}}>Equipo operativo con acceso a la plataforma · distinto de los socios de Estructura</p>
        </div>
        <button onClick={()=>setShowInvite(!showInvite)} style={{padding:'8px 16px',borderRadius:'var(--radius-tag)',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12px',fontWeight:500,cursor:'pointer',fontFamily:'var(--font)'}}>+ Invitar</button>
      </div>

      {/* Invite form */}
      {showInvite && (
        <GCard2 style={{marginBottom:'14px',animation:'fadeInUp 0.2s ease'}}>
          <p style={{fontSize:'13px',fontWeight:600,color:'var(--t1)',margin:'0 0 12px'}}>Invitar miembro</p>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px',marginBottom:'10px'}}>
            {[['Nombre completo','nombre','Ej: María González'],['Email','email','correo@empresa.com'],['Rol descriptivo','rol','Ej: Contadora, Asistente'],].map(f=>(
              <div key={f[1]} style={{gridColumn:f[1]==='email'?'1/3':'auto'}}>
                <label style={{fontSize:'11px',fontWeight:600,color:'var(--t3)',display:'block',marginBottom:'4px'}}>{f[0]}</label>
                <input value={inviteForm[f[1]]} onChange={e=>setInviteForm(p=>({...p,[f[1]]:e.target.value}))} placeholder={f[2]} style={{width:'100%',padding:'8px 11px',borderRadius:'var(--radius-sm)',fontSize:'12.5px'}}/>
              </div>
            ))}
          </div>
          <div style={{marginBottom:'12px'}}>
            <label style={{fontSize:'11px',fontWeight:600,color:'var(--t3)',display:'block',marginBottom:'6px'}}>Nivel de acceso</label>
            <div style={{display:'flex',gap:'6px'}}>
              {['Solo lectura','Colaborador','Administrador'].map(a=>(
                <button key={a} onClick={()=>setInviteForm(p=>({...p,acceso:a}))} style={{padding:'6px 12px',borderRadius:'var(--radius-tag)',background:inviteForm.acceso===a?'var(--glass-bg-atmo)':'var(--glass-bg)',border:'0.5px solid '+(inviteForm.acceso===a?'var(--accent-border)':'var(--glass-border)'),color:inviteForm.acceso===a?'var(--t1)':'var(--t3)',fontSize:'12px',cursor:'pointer',fontFamily:'var(--font)',fontWeight:inviteForm.acceso===a?600:400}}>
                  {a}
                </button>
              ))}
            </div>
          </div>
          <div style={{fontSize:'11.5px',color:'var(--t3)',marginBottom:'12px',padding:'8px 10px',background:'var(--glass-bg-atmo)',borderRadius:'var(--radius-sm)'}}>
            <strong style={{color:'var(--t2)'}}>Solo lectura</strong> — ve todo, no modifica · <strong style={{color:'var(--t2)'}}>Colaborador</strong> — agrega datos y ve Hallazgos · <strong style={{color:'var(--t2)'}}>Administrador</strong> — todos los permisos
          </div>
          <div style={{display:'flex',gap:'8px'}}>
            <button onClick={()=>setShowInvite(false)} style={{flex:1,padding:'9px',borderRadius:'var(--radius-tag)',background:'none',border:'0.5px solid var(--glass-border)',color:'var(--t2)',fontSize:'12.5px',cursor:'pointer',fontFamily:'var(--font)'}}>Cancelar</button>
            <button onClick={sendInvite} style={{flex:2,padding:'9px',borderRadius:'var(--radius-tag)',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12.5px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'}}>Enviar invitación →</button>
          </div>
        </GCard2>
      )}

      {members.length===0 ? (
        <GCard2 style={{textAlign:'center',padding:'40px'}}>
          <p style={{fontSize:'13px',color:'var(--t3)',marginBottom:'10px'}}>Sin miembros del equipo todavía.</p>
          <button onClick={()=>setShowInvite(true)} style={{padding:'9px 20px',borderRadius:'var(--radius-tag)',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12.5px',fontWeight:500,cursor:'pointer',fontFamily:'var(--font)'}}>Invitar primer miembro</button>
        </GCard2>
      ) : (
        <div style={{display:'flex',flexDirection:'column',gap:'8px'}}>
          {members.map(m=>{
            var acfg = ACCESO_CFG[m.acceso]||ACCESO_CFG['Solo lectura'];
            return (
              <GCard2 key={m.id} pad="16px 18px" style={{marginBottom:0,display:'flex',alignItems:'center',gap:'12px'}}>
                <div style={{width:'38px',height:'38px',borderRadius:'50%',background:'var(--glass-bg-atmo)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'12px',fontWeight:700,color:'var(--t2)',flexShrink:0}}>
                  {m.nombre.split(' ').map(x=>x[0]).join('').slice(0,2)}
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:'flex',alignItems:'center',gap:'8px',marginBottom:'3px',flexWrap:'wrap'}}>
                    <p style={{fontSize:'13.5px',fontWeight:600,color:'var(--t1)',margin:0}}>{m.nombre}</p>
                    {m.estado==='pendiente'&&<span style={{fontSize:'10px',padding:'1px 7px',borderRadius:'var(--radius-tag)',background:'var(--s-yellow-bg)',color:'var(--s-yellow)'}}>Invitación pendiente</span>}
                  </div>
                  <p style={{fontSize:'12px',color:'var(--t3)',margin:0}}>{m.rol} · {m.email}{m.desde&&` · Activo desde ${m.desde}`}</p>
                </div>
                <select defaultValue={m.acceso} style={{padding:'5px 10px',borderRadius:'var(--radius-tag)',fontSize:'12px',background:acfg.bg,border:'0.5px solid var(--glass-border)',color:acfg.c,fontWeight:600,flexShrink:0}}>
                  <option>Solo lectura</option><option>Colaborador</option><option>Administrador</option>
                </select>
                <button style={{background:'none',border:'none',cursor:'pointer',color:'var(--s-red)',fontSize:'16px',flexShrink:0,padding:'2px 4px'}}>✕</button>
              </GCard2>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { BóvedaSection, TeamSection });