// Pantalla: Dashboard ejecutivo — conectado a API real

const Dashboard = ({user, setRoute}) => {
  const [data, setData]   = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]  = useState("");

  const verTransfer = ["admin","gerencia","finanzas"].includes(user.rol);
  const verPlanilla = ["admin","gerencia","rrhh"].includes(user.rol);

  const load = async () => {
    setLoading(true); setError("");
    try {
      const d = await window.API.dashboard();
      setData(d);
    } catch (e) { setError(e.message); }
    finally { setLoading(false); }
  };

  useEffect(() => { load(); }, []);

  if (loading) return (
    <div className="content" style={{display:"flex",alignItems:"center",justifyContent:"center",minHeight:300}}>
      <div style={{display:"flex",flexDirection:"column",alignItems:"center",gap:14}}>
        <Spinner size={28}/>
        <div style={{fontSize:13,color:"var(--text-3)"}}>Cargando dashboard…</div>
      </div>
    </div>
  );

  if (error) return (
    <div className="content">
      <ErrorBanner msg={error} onRetry={load}/>
    </div>
  );

  const kpis = data?.kpis || {};
  const proyectos = data?.proyectos || [];
  const gatosCat = data?.gastos_por_categoria || [];
  const activos = proyectos.filter(p => !['finalizado'].includes(p.estado));
  const totalEjecutado = proyectos.reduce((a,p)=>a+parseFloat(p.ejecutado||0), 0);
  const totalPresupuesto = proyectos.reduce((a,p)=>a+parseFloat(p.presupuesto||0), 0);
  const pctEjecutado = totalPresupuesto > 0 ? Math.round(totalEjecutado/totalPresupuesto*100) : 0;

  const catColors = {
    materiales:"var(--yellow)", mano_obra:"var(--blue)", equipos:"var(--green)",
    subcontratos:"var(--purple)", transporte:"var(--orange)", otros:"var(--text-3)"
  };
  const catLabels = {
    materiales:"Materiales", mano_obra:"Mano de obra", equipos:"Equipos",
    subcontratos:"Subcontratos", transporte:"Transporte", otros:"Otros"
  };

  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">Resumen ejecutivo</div>
          <div className="page-sub">Bienvenido, <strong style={{color:"var(--text)"}}>{user.nombre.split(" ")[0]}</strong> · {new Date().toLocaleDateString("es-SV",{weekday:"long",day:"numeric",month:"long",year:"numeric"})}</div>
        </div>
        <div className="page-actions">
          <button className="btn-secondary" onClick={load}><Icon name="refresh" size={14}/> Actualizar</button>
          <button className="btn-primary" style={{width:"auto",padding:"10px 14px"}} onClick={()=>setRoute("gastos")}>
            <Icon name="plus" size={14}/> Registrar gasto
          </button>
        </div>
      </div>

      {/* KPIs */}
      <div className="kpi-grid">
        <KpiCard
          label="Total ejecutado"
          value={fmtShort(totalEjecutado)}
          delta={`${pctEjecutado}% del presupuesto`}
          deltaDir="neutral"
          icon="expense"
          featured
          meta={`${proyectos.length} proyectos`}
        />
        <KpiCard
          label="Gastos pendientes"
          value={kpis.gastos_pendientes?.count || 0}
          delta={fmt(kpis.gastos_pendientes?.monto || 0)}
          deltaDir="neutral"
          icon="clock"
          meta="requieren aprobación"
        />
        {verPlanilla && (
          <KpiCard
            label="Costo planilla"
            value={fmtShort(kpis.planilla?.costo_real || 0)}
            delta={`${kpis.planilla?.empleados || 0} empleados`}
            deltaDir="neutral"
            icon="users"
            meta="carga patronal 16.25%"
          />
        )}
        <KpiCard
          label="Proyectos activos"
          value={activos.length}
          delta={proyectos.filter(p=>p.estado==="ejecucion").length + " en ejecución"}
          deltaDir="neutral"
          icon="building"
          meta={proyectos.filter(p=>p.estado==="finalizado").length + " finalizados"}
        />
      </div>

      <div className="two-col" style={{marginBottom:18}}>
        {/* Gastos por categoría */}
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Gastos por categoría</div>
              <div className="card-sub">Distribución del mes actual</div>
            </div>
          </div>
          <div className="card-body">
            {gatosCat.length === 0 ? (
              <EmptyState icon="expense" title="Sin gastos este mes" sub="Registra el primer gasto para ver la distribución"/>
            ) : (
              <div style={{display:"flex",gap:24,alignItems:"center"}}>
                <Donut
                  segments={gatosCat.map(c=>({value:parseFloat(c.total), color:catColors[c.categoria]||"var(--text-3)"}))}
                  size={130} stroke={16}
                />
                <div style={{flex:1,display:"flex",flexDirection:"column",gap:10}}>
                  {gatosCat.map((c,i)=>(
                    <div key={i} style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
                      <div style={{display:"flex",alignItems:"center",gap:8}}>
                        <div style={{width:8,height:8,borderRadius:"50%",background:catColors[c.categoria]||"var(--text-3)"}}/>
                        <span style={{fontSize:12.5}}>{catLabels[c.categoria]||c.categoria}</span>
                      </div>
                      <span className="mono" style={{fontSize:12,color:"var(--text-2)"}}>{fmt(c.total)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Proyectos resumen */}
        <div className="card">
          <div className="card-head">
            <div className="card-title">Proyectos</div>
            <button className="btn-ghost" style={{fontSize:12}} onClick={()=>setRoute("proyectos")}>Ver todos <Icon name="arrowright" size={12}/></button>
          </div>
          <div className="card-body" style={{padding:0}}>
            {proyectos.length === 0 ? (
              <EmptyState icon="building" title="Sin proyectos" sub="Crea el primer proyecto para comenzar"/>
            ) : (
              proyectos.slice(0,5).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 (
                  <div key={p.id} style={{padding:"14px 20px",borderBottom:"1px solid var(--border)",display:"flex",alignItems:"center",gap:14}}>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{fontWeight:600,fontSize:13,marginBottom:3,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{p.nombre}</div>
                      <div style={{height:4,background:"var(--bg-3)",borderRadius:2,overflow:"hidden"}}>
                        <div style={{height:"100%",width:`${pct}%`,background:ec.color,borderRadius:2,transition:"width 0.5s"}}/>
                      </div>
                    </div>
                    <div style={{textAlign:"right",flexShrink:0}}>
                      <div className="mono" style={{fontSize:12,fontWeight:600}}>{pct}%</div>
                      <div style={{fontSize:11,color:"var(--text-3)"}}>{fmtShort(p.ejecutado||0)}</div>
                    </div>
                    <span style={{fontSize:11,padding:"2px 8px",borderRadius:20,background:ec.color+"20",color:ec.color,whiteSpace:"nowrap"}}>{ec.label}</span>
                  </div>
                );
              })
            )}
          </div>
        </div>
      </div>

      {/* Transferencias resumen */}
      {verTransfer && kpis.transferencias && (
        <div className="card">
          <div className="card-head">
            <div className="card-title">Transferencias bancarias</div>
            <button className="btn-ghost" style={{fontSize:12}} onClick={()=>setRoute("transferencias")}>Ver todas <Icon name="arrowright" size={12}/></button>
          </div>
          <div className="card-body" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",padding:0}}>
            {[
              {l:"Enviadas",  v:fmt(kpis.transferencias.enviada?.suma||0),   c:"var(--green)",  sub:`${kpis.transferencias.enviada?.cnt||0} transacciones`},
              {l:"Recibidas", v:fmt(kpis.transferencias.recibida?.suma||0),  c:"var(--blue)",   sub:`${kpis.transferencias.recibida?.cnt||0} transacciones`},
              {l:"Pendientes",v:kpis.transferencias.pendiente?.cnt||0,        c:"var(--yellow)", sub:"por procesar"},
              {l:"Denegadas", v:kpis.transferencias.denegada?.cnt||0,         c:"var(--red)",    sub:"requieren reintento"},
            ].map((k,i)=>(
              <div key={i} style={{padding:"18px 22px",borderRight:i<3?"1px solid var(--border)":"none"}}>
                <div className="kpi-label" style={{marginBottom:8}}>{k.l}</div>
                <div className="mono" style={{fontSize:18,fontWeight:700,color:k.c}}>{k.v}</div>
                <div className="kpi-meta">{k.sub}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

window.Dashboard = Dashboard;