/* LIA · Vistas — datos reales de Supabase */

function ViewInicio({onOpen,onNav,onUpload,userName,credits,userId}) {
  const [lics,setLics]     = React.useState([]);
  const [actividad,setAct] = React.useState([]);
  const [loading,setLoad]  = React.useState(true);

  React.useEffect(()=>{ cargarDatos(); },[userId]);

  async function cargarDatos() {
    setLoad(true);
    if (!window._sb||!userId){setLoad(false);return;}
    const uid=userId;
    const {data:ld}=await window._sb.from('licitaciones').select('*').eq('user_id',uid).order('created_at',{ascending:false}).limit(6);
    if(ld) setLics(ld);
    const {data:ad}=await window._sb.from('analyses').select('analysis_type,prompt_used,created_at').eq('user_id',uid).order('created_at',{ascending:false}).limit(5);
    if(ad) setAct(ad);
    setLoad(false);
  }

  return (
    <div className="fade-up">
      <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:20,marginBottom:22,flexWrap:'wrap'}}>
        <div>
          <div style={{fontSize:12.5,color:'var(--accent-2)',fontWeight:600}}>
            {new Date().toLocaleDateString('es-CR',{weekday:'long',day:'numeric',month:'long'})} · Bienvenido
          </div>
          <h1 className="font-display" style={{fontSize:27,fontWeight:800,letterSpacing:'-0.02em',marginTop:4}}>{userName||'Mi Empresa'}</h1>
          <p className="muted" style={{fontSize:13.5,marginTop:4}}>
            {lics.length>0
              ?<>Tenés <b style={{color:'var(--text)'}}>{lics.length} licitaciones</b> guardadas en LIA.</>
              :<>Subí tu primer cartel para comenzar el análisis con IA.</>}
          </p>
        </div>
        <button className="btn btn-primary" onClick={onUpload}><Icon name="upload" size={15}/>Analizar nuevo cartel</button>
      </div>

      {loading?(
        <div style={{textAlign:'center',padding:40}}>
          <div className="lia-spin" style={{width:32,height:32,margin:'0 auto 12px',border:'2.5px solid rgba(96,165,250,0.18)',borderTopColor:'var(--accent-2)',borderRadius:'99px'}}/>
          <div className="muted">Cargando…</div>
        </div>
      ):lics.length===0?(
        <div className="card" style={{textAlign:'center',padding:'60px 40px',borderStyle:'dashed',borderColor:'var(--border-2)'}}>
          <div style={{width:64,height:64,borderRadius:18,margin:'0 auto 20px',display:'grid',placeItems:'center',background:'rgba(37,99,235,0.1)',border:'1px solid var(--border-2)'}}>
            <Icon name="upload" size={28} style={{color:'var(--accent-2)'}}/>
          </div>
          <div className="font-display" style={{fontSize:20,fontWeight:800,marginBottom:10}}>Empezá tu primer análisis</div>
          <p className="muted" style={{fontSize:14,maxWidth:440,margin:'0 auto 24px',lineHeight:1.7}}>
            Subí el PDF de cualquier cartel de licitación de SICOP y LIA lo analiza al instante.
          </p>
          <button className="btn btn-primary" onClick={onUpload}><Icon name="upload" size={15}/>Subir primer cartel</button>
        </div>
      ):(
        <div className="row" style={{alignItems:'flex-start'}}>
          <div style={{flex:'1.6',minWidth:0,display:'flex',flexDirection:'column',gap:'var(--gap-grid)'}}>
            <div>
              <div className="section-head">
                <Icon name="spark" size={17} style={{color:'var(--accent-2)'}}/>
                <div><div className="section-title">Tus licitaciones</div><div className="section-sub">Carteles que has subido a LIA</div></div>
                <div className="spacer"></div>
                <button className="btn btn-ghost btn-sm" onClick={()=>onNav('licitaciones')}>Ver todas<Icon name="arrow" size={13}/></button>
              </div>
              <div className="grid" style={{gridTemplateColumns:'1fr 1fr'}}>
                {lics.slice(0,4).map(l=>{
                  const fl=formatLic(l);
                  return <LicCard key={l.id} lic={fl} onOpen={()=>onOpen(fl)} variant="completa"/>;
                })}
              </div>
            </div>
          </div>
          <div style={{flex:'1',minWidth:0}}>
            <div className="card">
              <div className="section-head" style={{marginBottom:14}}>
                <Icon name="bell" size={16} style={{color:'var(--accent-2)'}}/>
                <div className="section-title">Actividad reciente</div>
              </div>
              {actividad.length===0
                ?<p className="muted" style={{fontSize:12.5}}>Sin actividad aún.</p>
                :<div style={{display:'flex',flexDirection:'column',gap:12}}>
                  {actividad.map((a,k)=>(
                    <div key={k} style={{display:'flex',gap:10,alignItems:'flex-start'}}>
                      <div style={{width:8,height:8,borderRadius:99,background:'var(--accent-2)',marginTop:5,flex:'none'}}/>
                      <div>
                        <div style={{fontSize:12.5,color:'var(--silver-2)'}}>
                          <b>{(a.analysis_type||'').toUpperCase()}</b> · {(a.prompt_used||'').substring(0,30)}
                        </div>
                        <div style={{fontSize:10.5,color:'var(--muted)',marginTop:2}}>
                          {new Date(a.created_at).toLocaleDateString('es-CR',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'})}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              }
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function ViewLicitaciones({onOpen,cardVariant,searchQ,userId}) {
  const [lics,setLics]   = React.useState([]);
  const [loading,setLoad]=React.useState(true);
  const [q,setQ]         = React.useState(searchQ||'');

  React.useEffect(()=>{ setQ(searchQ||''); },[searchQ]);
  React.useEffect(()=>{ cargar(); },[userId]);

  async function cargar() {
    setLoad(true);
    if(!window._sb||!userId){setLoad(false);return;}
    const {data}=await window._sb.from('licitaciones').select('*').eq('user_id',userId).order('created_at',{ascending:false});
    if(data) setLics(data);
    setLoad(false);
  }

  async function eliminar(id,e) {
    e.stopPropagation();
    if(!confirm('¿Eliminar esta licitación y sus análisis?')) return;
    await window._sb.from('analyses').delete().eq('licitacion_id',id);
    await window._sb.from('licitaciones').delete().eq('id',id);
    setLics(prev=>prev.filter(l=>l.id!==id));
  }

  let lista=lics;
  if(q) lista=lista.filter(l=>(l.titulo||l.nombre_pdf||'').toLowerCase().includes(q.toLowerCase()));

  if(loading) return <div style={{textAlign:'center',padding:40,color:'var(--muted)'}}>Cargando licitaciones…</div>;

  return (
    <div className="fade-up">
      <div style={{display:'flex',gap:14,marginBottom:18,alignItems:'center'}}>
        <div className="search" style={{width:280,marginLeft:0}}>
          <Icon name="search" size={15}/>
          <input placeholder="Buscar por nombre de cartel…" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
        <div className="spacer"/>
        <span className="muted" style={{fontSize:12}}>{lista.length} licitaciones</span>
      </div>
      {lista.length===0?(
        <div className="card" style={{textAlign:'center',padding:40,color:'var(--muted)'}}>
          {q?'Sin resultados.':'Aún no tenés licitaciones. Subí un PDF para comenzar.'}
        </div>
      ):(
        <div className="grid" style={{gridTemplateColumns:cardVariant==='minima'?'1fr':'repeat(auto-fill,minmax(340px,1fr))'}}>
          {lista.map(l=>{
            const fl=formatLic(l);
            return (
              <div key={l.id} style={{position:'relative'}}>
                <LicCard lic={fl} onOpen={()=>onOpen(fl)} variant={cardVariant}/>
                <button onClick={e=>eliminar(l.id,e)} title="Eliminar"
                  style={{position:'absolute',top:10,right:10,background:'rgba(248,113,113,0.1)',border:'1px solid rgba(248,113,113,0.25)',borderRadius:7,color:'#f87171',cursor:'pointer',padding:'4px 8px',fontSize:11,zIndex:10}}>
                  ✕
                </button>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function formatLic(l) {
  const D=window.LIA_DATA;
  const inst=Object.keys(D.instituciones).find(k=>(l.titulo||l.nombre_pdf||'').toUpperCase().includes(D.instituciones[k].sigla))||'otro';
  return {
    id:l.id, _dbId:l.id,
    sicop:l.numero_sicop||'Sin número SICOP',
    titulo:l.titulo||l.nombre_pdf||'Licitación sin título',
    inst, modalidad:l.modalidad||'Licitación',
    objeto:l.objeto||'',
    monto:l.monto_estimado||0,
    estado:l.estado||'nueva',
    match:l.match_score||80,
    limite:l.fecha_cierre||new Date(Date.now()+30*86400000).toISOString().split('T')[0],
    diasRestantes:l.fecha_cierre?Math.ceil((new Date(l.fecha_cierre)-new Date())/86400000):30,
    paginas:l.paginas||'?', garantia:l.garantia||'Ver cartel',
    analizado:l.analizado||false, resumen:null, tags:[],
    pdfBase64:null, pdfName:l.nombre_pdf||null,
  };
}

function shortCRC(n){if(!n)return '₡0';if(n>=1e9)return '₡'+(n/1e9).toFixed(2)+'B';if(n>=1e6)return '₡'+(n/1e6).toFixed(0)+'M';return '₡'+n.toLocaleString('es-CR');}
function fmtFecha(iso){if(!iso)return '—';const[y,m,d]=iso.split('-');const ms=['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];return `${parseInt(d)} ${ms[parseInt(m)-1]}`;}
function pipeColor(e){return{nueva:'#60a5fa',analisis:'#c084fc',preparando:'#f59e0b',presentada:'#38bdf8',adjudicada:'#22c55e'}[e]||'#6b84b0';}
function actColor(t){return{checklist:'#60a5fa',match:'#22c55e',alerta:'#f59e0b',oferta:'#c084fc',adjudicada:'#22c55e'}[t]||'#6b84b0';}
window.fmtFecha=fmtFecha;
Object.assign(window,{ViewInicio,ViewLicitaciones,shortCRC,fmtFecha,pipeColor,actColor,formatLic});