// Pantalla: Archivos — enlace a Nextcloud

const Archivos = ({user}) => {
  const [config, setConfig] = useState(null);

  useEffect(()=>{
    window.API.config.get().then(c=>setConfig(c)).catch(()=>{});
  }, []);

  const url = config?.nextcloud_url?.valor || "http://localhost:8080";

  return (
    <div className="content">
      <div className="page-title-row">
        <div>
          <div className="page-title">Archivos</div>
          <div className="page-sub">Documentos, planos y fotos por proyecto · Nextcloud</div>
        </div>
        <div className="page-actions">
          <a href={url} target="_blank" rel="noreferrer" className="btn-primary" style={{display:"inline-flex",alignItems:"center",gap:8,padding:"10px 16px",textDecoration:"none",fontSize:13,fontWeight:600}}>
            <Icon name="folder" size={14}/> Abrir Nextcloud
          </a>
        </div>
      </div>

      <div className="card">
        <div className="card-body" style={{display:"flex",flexDirection:"column",alignItems:"center",padding:"60px 20px",gap:20}}>
          <div style={{width:64,height:64,borderRadius:14,background:"linear-gradient(135deg,var(--blue),#2563eb)",display:"flex",alignItems:"center",justifyContent:"center"}}>
            <Icon name="folder" size={28}/>
          </div>
          <div style={{textAlign:"center"}}>
            <div style={{fontWeight:700,fontSize:16,marginBottom:8}}>Almacenamiento de archivos</div>
            <div style={{fontSize:13,color:"var(--text-3)",maxWidth:440,lineHeight:1.6}}>
              Los archivos del sistema se gestionan a través de <strong style={{color:"var(--text)"}}>Nextcloud</strong>.
              Planos, fotos de avance, contratos y documentos de cada proyecto están organizados por carpetas.
            </div>
          </div>
          <div style={{display:"flex",gap:12,flexWrap:"wrap",justifyContent:"center",marginTop:10}}>
            {[{l:"Planos y diseños",i:"file"},{l:"Fotos de avance",i:"calendar"},{l:"Contratos",i:"pencil"},{l:"Facturas",i:"expense"}].map((t,i)=>(
              <div key={i} style={{padding:"10px 18px",background:"var(--bg-3)",border:"1px solid var(--border)",borderRadius:8,display:"flex",alignItems:"center",gap:8,fontSize:13}}>
                <Icon name={t.i} size={14} style={{color:"var(--text-3)"}}/> {t.l}
              </div>
            ))}
          </div>
          <a href={url} target="_blank" rel="noreferrer" style={{marginTop:10,padding:"12px 24px",background:"var(--blue)",color:"white",border:"none",borderRadius:8,fontWeight:600,fontSize:13,cursor:"pointer",display:"inline-flex",alignItems:"center",gap:8,textDecoration:"none"}}>
            <Icon name="arrowright" size={14}/> Ir a Nextcloud → {url}
          </a>
        </div>
      </div>
    </div>
  );
};

window.Archivos = Archivos;


// ─── Pantalla: Reportes — Metabase + reportes internos ────────────────────────

const Reportes = ({user, setRoute}) => {
  const [config, setConfig] = useState(null);
  const [dataProyectos, setDataProyectos] = useState([]);

  useEffect(()=>{
    window.API.config.get().then(c=>setConfig(c)).catch(()=>{});
    window.API.proyectos.list().then(setDataProyectos).catch(()=>{});
  }, []);

  const metabaseUrl = config?.metabase_url?.valor || "http://localhost:3000";

  const estadoConfig = {
    licitacion:{color:"var(--purple)",label:"Licitación"},
    ejecucion: {color:"var(--yellow)",label:"Ejecución"},
    atraso:    {color:"var(--red)",   label:"Atraso"},
    prorroga:  {color:"var(--orange)",label:"Prórroga"},
    finalizado:{color:"var(--green)", label:"Finalizado"},
  };

  return (
    <div className="content">
      <div className="page-title-row">
        <div>
          <div className="page-title">Reportes</div>
          <div className="page-sub">Dashboards ejecutivos · Metabase + reportes internos</div>
        </div>
        <div className="page-actions">
          <a href={metabaseUrl} target="_blank" rel="noreferrer" className="btn-primary" style={{display:"inline-flex",alignItems:"center",gap:8,padding:"10px 16px",textDecoration:"none",fontSize:13,fontWeight:600}}>
            <Icon name="chart" size={14}/> Abrir Metabase
          </a>
        </div>
      </div>

      {/* Metabase */}
      <div className="card" style={{marginBottom:18}}>
        <div className="card-head">
          <div>
            <div className="card-title">Metabase — Dashboards interactivos</div>
            <div className="card-sub">Reportes en tiempo real conectados a PostgreSQL</div>
          </div>
          <Pill color="green" dot>En línea</Pill>
        </div>
        <div className="card-body">
          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:12}}>
            {[
              {n:"Gasto total por proyecto", t:"Barra horizontal",  c:"var(--yellow)"},
              {n:"Transferencias por estado",t:"Donut",             c:"var(--blue)"},
              {n:"Carga patronal acumulada", t:"Línea",             c:"var(--purple)"},
              {n:"Top 10 proveedores",       t:"Tabla",             c:"var(--green)"},
              {n:"Asistencia personal obra", t:"Heatmap",           c:"var(--orange)"},
              {n:"Declaración ISSS/AFP",     t:"Exportable",        c:"var(--red)"},
            ].map((r,i)=>(
              <a key={i} href={metabaseUrl} target="_blank" rel="noreferrer"
                style={{padding:"16px",background:"var(--bg-3)",border:"1px solid var(--border)",borderRadius:10,display:"flex",flexDirection:"column",gap:8,textDecoration:"none",transition:"border-color 0.2s"}}
                onMouseEnter={e=>e.currentTarget.style.borderColor=r.c}
                onMouseLeave={e=>e.currentTarget.style.borderColor="var(--border)"}>
                <div style={{width:34,height:34,borderRadius:8,background:r.c+"20",display:"flex",alignItems:"center",justifyContent:"center",color:r.c}}>
                  <Icon name="chart" size={16}/>
                </div>
                <div style={{fontWeight:600,fontSize:13}}>{r.n}</div>
                <div style={{fontSize:11,color:"var(--text-3)"}}>{r.t}</div>
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* Resumen proyectos */}
      {dataProyectos.length > 0 && (
        <div className="card">
          <div className="card-head">
            <div className="card-title">Resumen de proyectos — datos en tiempo real</div>
            <button className="btn-ghost" style={{fontSize:12}} onClick={()=>setRoute("proyectos")}>Ver proyectos <Icon name="arrowright" size={12}/></button>
          </div>
          <div style={{overflowX:"auto"}}>
            <table className="table">
              <thead>
                <tr>
                  <th>Proyecto</th><th style={{textAlign:"center"}}>Estado</th>
                  <th style={{textAlign:"right"}}>Presupuesto</th>
                  <th style={{textAlign:"right"}}>Ejecutado</th>
                  <th style={{textAlign:"right"}}>% Avance</th>
                </tr>
              </thead>
              <tbody>
                {dataProyectos.map(p=>{
                  const ec = estadoConfig[p.estado]||{color:"var(--text-3)",label:p.estado};
                  const pct = parseFloat(p.presupuesto)>0 ? Math.min(100,Math.round(parseFloat(p.ejecutado||0)/parseFloat(p.presupuesto)*100)) : 0;
                  return (
                    <tr key={p.id}>
                      <td style={{fontWeight:600}}>{p.nombre}</td>
                      <td style={{textAlign:"center"}}>
                        <span style={{fontSize:11,padding:"2px 8px",borderRadius:20,background:ec.color+"20",color:ec.color}}>{ec.label}</span>
                      </td>
                      <td className="num">{fmt(p.presupuesto)}</td>
                      <td className="num">{fmt(p.ejecutado||0)}</td>
                      <td style={{textAlign:"right"}}>
                        <div style={{display:"flex",alignItems:"center",gap:8,justifyContent:"flex-end"}}>
                          <div style={{width:60,height:5,background:"var(--bg-3)",borderRadius:3,overflow:"hidden"}}>
                            <div style={{height:"100%",width:`${pct}%`,background:pct>90?"var(--red)":pct>70?"var(--orange)":ec.color,borderRadius:3}}/>
                          </div>
                          <span className="mono" style={{fontSize:12,fontWeight:600}}>{pct}%</span>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
};

window.Reportes = Reportes;