// ⚽ Quiniela IA — App completa para Cloudflare Pages
// El setup.sh reemplaza automáticamente WORKER_URL con la URL real

const WORKER_URL = "https://quiniela-agent.plain-shape-ec61.workers.dev";
const FOOTBALL_KEY = "691b4cb4b66a4b0cab36f03afbe491c9";

const { useState, useCallback, useEffect, useRef } = React;

const ACCENT = "#F97316";
const ACCENT2 = "#EA6D0E";
const BG = "#0f1117";
const CARD = "rgba(255,255,255,0.04)";
const BORDER = "rgba(255,255,255,0.09)";
const TABS = ["⚽ Jornada", "📊 Resultados", "🏆 Historial"];

const JUGADORES_DEFAULT = [
  { id: "marcos", nombre: "Marcos", emoji: "👨", activo: true,  esIA: false },
  { id: "lorena", nombre: "Lorena", emoji: "👩", activo: true,  esIA: false },
  { id: "lea",    nombre: "Lea",    emoji: "👧", activo: false, esIA: false },
  { id: "ia",     nombre: "IA",     emoji: "🤖", activo: true,  esIA: true  },
];

// ─── PROMPTS ──────────────────────────────────────────────────────
const SYSTEM_ANALISIS = `Eres un experto analista de fútbol especializado en la quiniela española (SELAE).
Para CADA partido usa web search: clasificación actual, forma últimos 5 partidos, lesionados/sancionados, historial enfrentamientos, noticias últimas 72h.
Responde SOLO con JSON válido, sin markdown ni texto extra:
{
  "jornada": "Jornada X - LaLiga 2024/25",
  "partidos": [
    {
      "id": 1,
      "local": "equipo local",
      "visitante": "equipo visitante",
      "prediccion": "1",
      "doble": "1X",
      "confianza": 8,
      "razonamiento": "2-3 frases con datos concretos",
      "factores_clave": ["factor1","factor2"],
      "lesiones": "info o Sin novedades",
      "forma_local": "VVVDV",
      "forma_visitante": "DXVDX",
      "resultado_real": null
    }
  ],
  "resumen_jornada": "análisis general en 2-3 frases",
  "advertencias": []
}`;

const SYSTEM_RESULTADOS = `Busca los resultados ACTUALES de los partidos. Devuelve SOLO JSON sin markdown:
{"partidos":[{"id":1,"resultado":"2-1","estado":"FT"}],"hora":"18:32"}
estados: FT=terminado, LIVE=en juego, NS=no empezado. Si no empezó: resultado=null.`;

// ─── HELPERS ──────────────────────────────────────────────────────
const signoReal = (res) => {
  if (!res) return null;
  const [g1, g2] = res.split("-").map(Number);
  if (isNaN(g1) || isNaN(g2)) return null;
  return g1 > g2 ? "1" : g1 === g2 ? "X" : "2";
};

const esAcierto = (ap, real) => {
  if (!ap || !real) return null;
  if (ap === real) return true;
  if (ap === "1X" && (real === "1" || real === "X")) return true;
  if (ap === "X2" && (real === "X" || real === "2")) return true;
  return false;
};

const contarAciertos = (apuestas, partidos) => {
  let ok = 0, total = 0;
  partidos.forEach((p, i) => {
    const real = signoReal(p.resultado_real);
    if (!real) return;
    total++;
    if (esAcierto(apuestas?.[i], real)) ok++;
  });
  return { ok, total };
};

const sColor = (s) => ({ "1": "#22c55e", X: "#f59e0b", "2": "#ef4444" }[s] || "#6b7280");
const sBg    = (s) => ({ "1": "rgba(34,197,94,0.14)", X: "rgba(245,158,11,0.14)", "2": "rgba(239,68,68,0.14)" }[s] || "transparent");
const cColor = (c) => c >= 8 ? "#4ade80" : c >= 6 ? "#facc15" : "#f87171";

async function callClaude(system, userMsg) {
  const res = await fetch(WORKER_URL + "/api/claude", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      system,
      tools: [{ type: "web_search_20250305", name: "web_search" }],
      messages: [{ role: "user", content: userMsg }],
    }),
  });
  const data = await res.json();
  if (data.error) throw new Error(data.error.message || JSON.stringify(data.error));
  const text = (data.content || []).filter(b => b.type === "text").map(b => b.text).join("");
  const m = text.match(/\{[\s\S]*\}/);
  if (!m) throw new Error("La IA no devolvió JSON válido. Inténtalo de nuevo.");
  return JSON.parse(m[0]);
}

// ─── COMPONENTES ──────────────────────────────────────────────────
const FormaChip = ({ l }) => {
  const map = { V:["#4ade80","V"], D:["#f87171","D"], X:["#facc15","E"], P:["#facc15","E"] };
  const [c, label] = map[l?.toUpperCase()] || ["#6b7280","?"];
  return React.createElement("div", { style:{width:14,height:14,borderRadius:3,background:c+"22",border:`1px solid ${c}`,color:c,fontSize:8,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0} }, label);
};

const Btn = ({ onClick, disabled, children, ghost, full, small, style: sx = {} }) =>
  React.createElement("button", {
    onClick, disabled,
    style: {
      padding: small ? "6px 12px" : "10px 18px",
      borderRadius: 10, border: ghost ? `1px solid ${BORDER}` : "none",
      cursor: disabled ? "not-allowed" : "pointer",
      fontWeight: 700, fontSize: small ? 11 : 13,
      background: disabled ? "rgba(255,255,255,0.05)" : ghost ? "transparent" : `linear-gradient(135deg,${ACCENT},${ACCENT2})`,
      color: disabled ? "#444" : ghost ? "#94a3b8" : "white",
      boxShadow: (!disabled && !ghost) ? `0 2px 16px ${ACCENT}44` : "none",
      width: full ? "100%" : "auto", transition: "all 0.15s", ...sx,
    }
  }, children);

// ─── MODAL JUGADORES ──────────────────────────────────────────────
function ModalJugadores({ jugadores, onClose, onSave }) {
  const [lista, setLista] = useState(jugadores.map(j => ({ ...j })));
  const [nuevo, setNuevo] = useState("");

  const toggle = (id) => setLista(p => p.map(j => j.id === id ? { ...j, activo: !j.activo } : j));
  const añadir = () => {
    const n = nuevo.trim();
    if (!n || lista.some(j => j.nombre.toLowerCase() === n.toLowerCase())) return;
    setLista(p => [...p, { id: `u_${Date.now()}`, nombre: n, emoji: "🎯", activo: true, esIA: false }]);
    setNuevo("");
  };
  const eliminar = (id) => {
    if (JUGADORES_DEFAULT.some(d => d.id === id)) return; // no borrar los default
    setLista(p => p.filter(j => j.id !== id));
  };

  return React.createElement("div", { style:{position:"fixed",inset:0,background:"rgba(0,0,0,0.85)",zIndex:100,display:"flex",alignItems:"flex-end"}, onClick: onClose },
    React.createElement("div", { onClick: e => e.stopPropagation(), style:{background:"#1a1f2e",borderRadius:"20px 20px 0 0",padding:"1.5rem",width:"100%",maxHeight:"80vh",overflowY:"auto"} },
      React.createElement("div", { style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"1.25rem"} },
        React.createElement("h2", { style:{margin:0,fontSize:"1rem",fontWeight:800} }, "👥 Jugadores"),
        React.createElement("button", { onClick: onClose, style:{background:"none",border:"none",color:"#64748b",fontSize:20,cursor:"pointer"} }, "✕")
      ),
      lista.map(j =>
        React.createElement("div", { key: j.id, style:{display:"flex",alignItems:"center",gap:"0.6rem",padding:"0.6rem 0",borderBottom:`1px solid ${BORDER}`} },
          React.createElement("span", { style:{fontSize:"1.2rem"} }, j.emoji),
          React.createElement("span", { style:{flex:1,fontWeight:600,fontSize:13} }, j.nombre),
          j.esIA && React.createElement("span", { style:{fontSize:10,color:ACCENT,background:ACCENT+"22",borderRadius:99,padding:"2px 7px"} }, "IA"),
          React.createElement("button", { onClick: () => toggle(j.id), style:{padding:"3px 10px",borderRadius:99,border:"none",cursor:"pointer",fontSize:10,fontWeight:700,background: j.activo?"#22c55e22":"rgba(255,255,255,0.06)",color: j.activo?"#22c55e":"#64748b"} }, j.activo ? "Activo" : "Oculto"),
          !JUGADORES_DEFAULT.some(d => d.id === j.id) && React.createElement("button", { onClick: () => eliminar(j.id), style:{background:"none",border:"none",color:"#475569",cursor:"pointer",fontSize:14} }, "✕")
        )
      ),
      React.createElement("div", { style:{display:"flex",gap:"0.5rem",marginTop:"1rem"} },
        React.createElement("input", { value: nuevo, onChange: e => setNuevo(e.target.value), onKeyDown: e => e.key==="Enter"&&añadir(), placeholder: "Añadir jugador...", style:{flex:1,background:"rgba(0,0,0,0.4)",border:`1px solid ${BORDER}`,borderRadius:9,color:"#e2e8f0",padding:"8px 12px",fontSize:13} }),
        React.createElement(Btn, { onClick: añadir, disabled: !nuevo.trim(), small: true }, "Añadir")
      ),
      React.createElement(Btn, { onClick: () => onSave(lista), full: true, style:{marginTop:"1rem"} }, "✓ Guardar")
    )
  );
}

// ─── APP PRINCIPAL ────────────────────────────────────────────────
function App() {
  const [tab, setTab]         = useState(0);
  const [analisis, setAnalisis] = useState(null);
  const [jugadores, setJugadores] = useState(() => {
    try { return JSON.parse(localStorage.getItem("q_jug") || "null") || JUGADORES_DEFAULT; } catch { return JUGADORES_DEFAULT; }
  });
  const [apuestas, setApuestas] = useState({});
  const [historial, setHistorial] = useState(() => {
    try { return JSON.parse(localStorage.getItem("q_hist") || "[]"); } catch { return []; }
  });
  const [loading, setLoading]   = useState(false);
  const [loadingMsg, setLoadingMsg] = useState("");
  const [error, setError]       = useState(null);
  const [showModal, setShowModal] = useState(false);
  const intervalRef = useRef(null);

  const jActivos = jugadores.filter(j => j.activo);
  const nP = analisis?.partidos?.length || 0;

  useEffect(() => { localStorage.setItem("q_jug",  JSON.stringify(jugadores)); }, [jugadores]);
  useEffect(() => { localStorage.setItem("q_hist", JSON.stringify(historial)); }, [historial]);

  const startLoading = (msgs) => {
    let i = 0;
    setLoadingMsg(msgs[0]);
    setLoading(true);
    if (intervalRef.current) clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      i = (i + 1) % msgs.length;
      setLoadingMsg(msgs[i]);
    }, 2500);
  };
  const stopLoading = () => {
    if (intervalRef.current) clearInterval(intervalRef.current);
    setLoading(false); setLoadingMsg("");
  };

  const initApuestas = (result, jgs) => {
    const init = {};
    jgs.filter(j => j.activo).forEach(j => {
      init[j.id] = j.esIA
        ? result.partidos.map(p => p.prediccion || null)
        : Array(result.partidos.length).fill(null);
    });
    return init;
  };

  // ── ANALIZAR ────────────────────────────────────────────────────

  const obtenerPartidos = async () => {
    try {
      const r = await fetch(
        "https://api.football-data.org/v4/competitions/PD/matches?status=SCHEDULED",
        { headers: { "X-Auth-Token": FOOTBALL_KEY } }
      );
      const data = await r.json();
      const porJ = {};
      (data.matches || []).forEach(m => {
        const j = m.matchday || 0;
        (porJ[j] = porJ[j] || []).push(m);
      });
      const keys = Object.keys(porJ).map(Number).filter(n => n > 0).sort((a,b) => a-b);
      if (!keys.length) throw new Error("Sin jornadas programadas");
      const jMin = keys[0];
      const partidos = (porJ[jMin] || []).slice(0, 15).map(m => ({
        local: m.homeTeam.shortName || m.homeTeam.name,
        visitante: m.awayTeam.shortName || m.awayTeam.name,
      }));
      return { ok: true, partidos, fuente: "football-data.org (Jornada " + jMin + ")", aviso: "Partidos de LaLiga" };
    } catch(e) {
      return { ok: false, error: "No se pudieron obtener los partidos: " + e.message };
    }
  };

  const handleAnalizar = useCallback(async () => {
    setError(null);
    startLoading([
      "📅 Obteniendo partidos de la jornada...",
      "🔍 Buscando datos de equipos...",
      "📊 Analizando clasificaciones...",
      "🏥 Revisando lesiones y sanciones...",
      "⚽ Calculando historial y forma...",
      "🧠 Generando predicciones con IA...",
    ]);
    try {
      const jData = await obtenerPartidos();
      if (!jData.ok || !jData.partidos?.length) throw new Error(jData.error || "No se obtuvieron partidos. Comprueba tu conexión a internet.");

      const lista = jData.partidos.map((p, i) => `${i+1}. ${p.local} vs ${p.visitante}`).join("\n");
      const result = await callClaude(
        SYSTEM_ANALISIS,
        `Analiza estos ${jData.partidos.length} partidos de la quiniela española. Fuente: ${jData.fuente}.\nUsa web search para datos actualizados de CADA partido:\n\n${lista}`
      );
      result.partidos = result.partidos.map((p, i) => ({ ...p, id: i+1, resultado_real: null }));
      if (jData.aviso) result.aviso = jData.aviso;
      setAnalisis(result);
      setApuestas(initApuestas(result, jugadores));
      setTab(0);
    } catch (e) {
      setError(e.message);
    } finally {
      stopLoading();
    }
  }, [jugadores]);

  // ── RESULTADOS ────────────────────────────────────────────────────
  const handleResultados = useCallback(async () => {
    if (!analisis) return;
    setError(null);
    startLoading(["📡 Buscando resultados en tiempo real...", "⏳ Consultando marcadores..."]);
    try {
      const lista = analisis.partidos.map(p => `${p.id}. ${p.local} vs ${p.visitante}`).join("\n");
      const res = await callClaude(SYSTEM_RESULTADOS, `Resultados actuales:\n${lista}`);
      setAnalisis(prev => {
        const partidos = [...prev.partidos];
        res.partidos?.forEach(rp => {
          const idx = partidos.findIndex(p => p.id === rp.id);
          if (idx !== -1 && rp.resultado) partidos[idx] = { ...partidos[idx], resultado_real: rp.resultado };
        });
        return { ...prev, partidos };
      });
    } catch(e) { setError(e.message); }
    finally { stopLoading(); }
  }, [analisis]);

  // ── APUESTAS ─────────────────────────────────────────────────────
  const setApuesta = (jId, pi, val) => {
    setApuestas(prev => {
      const arr = [...(prev[jId] || Array(nP).fill(null))];
      arr[pi] = arr[pi] === val ? null : val;
      return { ...prev, [jId]: arr };
    });
  };
  const setResultado = (pi, val) => {
    setAnalisis(prev => {
      const ps = [...prev.partidos];
      ps[pi] = { ...ps[pi], resultado_real: val || null };
      return { ...prev, partidos: ps };
    });
  };

  // ── EXPORTAR / IMPORTAR ───────────────────────────────────────────
  const exportarDatos = () => {
    const datos = {
      version: 1,
      exportado: new Date().toISOString(),
      historial,
      jugadores,
    };
    const json = JSON.stringify(datos, null, 2);
    const blob = new Blob([json], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `quiniela_backup_${new Date().toLocaleDateString("es-ES").replace(/\//g,"-")}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const importarDatos = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      try {
        const datos = JSON.parse(ev.target.result);
        if (!datos.version || !datos.historial) throw new Error("Formato inválido");
        if (window.confirm(`¿Importar ${datos.historial.length} jornadas y configuración de jugadores?\n(Se fusionará con tus datos actuales)`)) {
          // Fusionar historial sin duplicados
          setHistorial(prev => {
            const ids = new Set(prev.map(h => h.id));
            const nuevos = datos.historial.filter(h => !ids.has(h.id));
            return [...prev, ...nuevos].sort((a,b) => b.id - a.id);
          });
          if (datos.jugadores) setJugadores(datos.jugadores);
          alert(`✅ Importados ${datos.historial.length} jornadas correctamente`);
        }
      } catch (err) {
        alert("❌ Archivo inválido: " + err.message);
      }
    };
    reader.readAsText(file);
    e.target.value = "";
  };

  // ── GUARDAR ──────────────────────────────────────────────────────
  const guardar = () => {
    if (!analisis) return;
    const resumen = jActivos.map(j => {
      const { ok, total } = contarAciertos(apuestas[j.id], analisis.partidos);
      return { ...j, aciertos: ok, total };
    });
    setHistorial(h => [{
      id: Date.now(),
      fecha: new Date().toLocaleDateString("es-ES"),
      jornada: analisis.jornada || "Jornada",
      resumen,
      partidos: analisis.partidos.length,
    }, ...h]);
    alert("✅ Guardado en el historial");
  };

  // ── GUARDAR JUGADORES ─────────────────────────────────────────────
  const saveJugadores = (lista) => {
    setJugadores(lista);
    setShowModal(false);
    if (analisis) {
      setApuestas(prev => {
        const next = { ...prev };
        lista.filter(j => j.activo && !next[j.id]).forEach(j => {
          next[j.id] = j.esIA ? analisis.partidos.map(p => p.prediccion||null) : Array(analisis.partidos.length).fill(null);
        });
        return next;
      });
    }
  };

  // ── TABLA JORNADA ─────────────────────────────────────────────────
  const renderJornada = () => {
    if (!analisis) return React.createElement("div", { style:{textAlign:"center",padding:"3rem 1rem",color:"#475569"} },
      React.createElement("div", { style:{fontSize:"3rem",marginBottom:"0.75rem"} }, "⚽"),
      React.createElement("p", { style:{fontWeight:600,color:"#94a3b8",marginBottom:"0.5rem"} }, "Sin jornada activa"),
      React.createElement("p", { style:{fontSize:12,color:"#64748b",marginBottom:"1.5rem",lineHeight:1.6} }, "Pulsa el botón para obtener automáticamente los partidos de la jornada actual y analizarlos con IA"),
      React.createElement(Btn, { onClick: handleAnalizar, disabled: loading }, loading ? `⏳ ${loadingMsg}` : "⚡ Obtener jornada y analizar")
    );

    const conRes = analisis.partidos.some(p => p.resultado_real);

    return React.createElement("div", null,
      // Cabecera
      React.createElement("div", { style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"0.75rem",flexWrap:"wrap",gap:"0.5rem"} },
        React.createElement("div", null,
          React.createElement("div", { style:{fontWeight:700,fontSize:13} }, analisis.jornada),
          analisis.aviso && React.createElement("div", { style:{fontSize:10,color:"#fbbf24"} }, "⚠️ " + analisis.aviso)
        ),
        React.createElement("div", { style:{display:"flex",gap:"0.35rem",flexWrap:"wrap"} },
          React.createElement(Btn, { small:true, ghost:true, onClick: () => setShowModal(true) }, "👥"),
          React.createElement(Btn, { small:true, ghost:true, onClick: handleResultados, disabled: loading }, loading ? "⏳" : "📡 Resultados"),
          conRes && React.createElement(Btn, { small:true, onClick: guardar }, "💾")
        )
      ),

      // Resumen
      analisis.resumen_jornada && React.createElement("div", { style:{background:CARD,border:`1px solid ${BORDER}`,borderRadius:10,padding:"0.65rem 0.85rem",marginBottom:"0.75rem",fontSize:11,color:"#94a3b8",fontStyle:"italic",lineHeight:1.6} }, analisis.resumen_jornada),

      // TABLA con scroll horizontal
      React.createElement("div", { style:{overflowX:"auto",WebkitOverflowScrolling:"touch"} },
        React.createElement("table", { style:{width:"100%",borderCollapse:"separate",borderSpacing:"0 3px",minWidth: 200 + jActivos.length * 85} },
          // Cabecera
          React.createElement("thead", null,
            React.createElement("tr", null,
              React.createElement("th", { style:{textAlign:"left",padding:"0 0.5rem 0.5rem",fontSize:10,color:"#475569",width:160,position:"sticky",left:0,background:BG,zIndex:2} }, "Partido"),
              ...jActivos.map(j => React.createElement("th", { key:j.id, style:{textAlign:"center",padding:"0 2px 0.5rem",fontSize:10,color:j.esIA?ACCENT:"#94a3b8",fontWeight:700,minWidth:75} }, `${j.emoji} ${j.nombre}`)),
              React.createElement("th", { style:{textAlign:"center",padding:"0 2px 0.5rem",fontSize:10,color:"#475569",minWidth:58} }, "Real")
            )
          ),
          // Filas
          React.createElement("tbody", null,
            ...analisis.partidos.map((p, pi) => {
              const real = signoReal(p.resultado_real);
              return React.createElement("tr", { key:pi },
                // Celda partido
                React.createElement("td", { style:{padding:"2px 0.5rem 2px 0",position:"sticky",left:0,background:BG,zIndex:1,verticalAlign:"top"} },
                  React.createElement("div", { style:{background:CARD,border:`1px solid ${BORDER}`,borderLeft:`3px solid ${sColor(p.prediccion)}`,borderRadius:8,padding:"0.4rem 0.5rem"} },
                    React.createElement("div", { style:{fontSize:11,fontWeight:700,lineHeight:1.4,marginBottom:2} },
                      React.createElement("div", null, p.local),
                      React.createElement("div", { style:{color:"#334155",fontSize:9,fontWeight:400} }, "vs"),
                      React.createElement("div", null, p.visitante)
                    ),
                    // Forma
                    (p.forma_local || p.forma_visitante) && React.createElement("div", { style:{display:"flex",gap:3,marginBottom:2,flexWrap:"wrap"} },
                      React.createElement("div", { style:{display:"flex",gap:1} }, ...(p.forma_local||"").split("").map((l,i) => React.createElement(FormaChip, {key:i,l}))),
                      React.createElement("span", { style:{color:"#1e293b",fontSize:8} }, "|"),
                      React.createElement("div", { style:{display:"flex",gap:1} }, ...(p.forma_visitante||"").split("").map((l,i) => React.createElement(FormaChip, {key:i,l})))
                    ),
                    // Confianza
                    React.createElement("div", { style:{display:"flex",alignItems:"center",gap:3} },
                      ...[...Array(5)].map((_,ci) => React.createElement("div", {key:ci,style:{width:5,height:3,borderRadius:1,background: ci<Math.round(p.confianza/2)?cColor(p.confianza):"rgba(255,255,255,0.06)"}})),
                      React.createElement("span", { style:{fontSize:8,color:"#475569"} }, p.confianza+"/10")
                    ),
                    p.lesiones && p.lesiones !== "Sin novedades" && React.createElement("div", { style:{fontSize:8,color:"#fbbf24",marginTop:2} }, "🏥 " + p.lesiones.substring(0,35) + (p.lesiones.length>35?"…":""))
                  )
                ),
                // Columnas jugadores
                ...jActivos.map(j => {
                  const ap = (apuestas[j.id]||[])[pi];
                  const ac = real ? esAcierto(ap, real) : null;
                  return React.createElement("td", { key:j.id, style:{padding:"2px",verticalAlign:"top"} },
                    React.createElement("div", { style:{
                      background: ac===true?"rgba(34,197,94,0.08)":ac===false?"rgba(239,68,68,0.08)":CARD,
                      border:`1px solid ${ac===true?"#22c55e33":ac===false?"#ef444433":BORDER}`,
                      borderRadius:8, padding:"0.35rem 0.2rem",
                      display:"flex", flexDirection:"column", alignItems:"center", gap:2, minHeight:90
                    }},
                    !j.esIA && React.createElement("div", { style:{display:"flex",flexDirection:"column",gap:2,width:"100%"} },
                      ...["1","X","2"].map(s => React.createElement("button", {
                        key:s, onClick:()=>setApuesta(j.id,pi,s),
                        style:{width:"100%",padding:"3px 0",borderRadius:5,border:`1px solid ${ap===s?sColor(s):BORDER}`,background:ap===s?sBg(s):"transparent",color:ap===s?sColor(s):"#475569",fontSize:12,fontWeight:700,cursor:"pointer"}
                      }, s)),
                      React.createElement("div", { style:{display:"flex",gap:2,width:"100%"} },
                        ...["1X","X2"].map(s => React.createElement("button", {
                          key:s, onClick:()=>setApuesta(j.id,pi,s),
                          style:{flex:1,padding:"2px 0",borderRadius:4,border:`1px solid ${ap===s?"#fbbf24":BORDER}`,background:ap===s?"rgba(251,191,36,0.12)":"transparent",color:ap===s?"#fbbf24":"#475569",fontSize:8,fontWeight:700,cursor:"pointer"}
                        }, s))
                      )
                    ),
                    ap && React.createElement("div", { style:{background:j.esIA?ACCENT+"22":sBg(ap[0]),border:`1px solid ${j.esIA?ACCENT:sColor(ap[0])}`,borderRadius:5,padding:"3px 8px",fontWeight:800,fontSize:j.esIA?14:11,color:j.esIA?ACCENT:sColor(ap[0]),marginTop:j.esIA?8:2} }, ap),
                    ac===true  && React.createElement("span", { style:{fontSize:14} }, "✅"),
                    ac===false && React.createElement("span", { style:{fontSize:14} }, "❌"),
                    !ap && j.esIA && React.createElement("span", { style:{color:"#334155",fontSize:18,marginTop:8} }, "·")
                    )
                  );
                }),
                // Columna resultado real
                React.createElement("td", { style:{padding:"2px",verticalAlign:"top"} },
                  React.createElement("div", { style:{background:CARD,border:`1px solid ${BORDER}`,borderRadius:8,padding:"0.35rem 0.2rem",display:"flex",flexDirection:"column",alignItems:"center",gap:4,minHeight:90} },
                    React.createElement("input", { value:p.resultado_real||"", onChange:e=>setResultado(pi,e.target.value), placeholder:"0-0",
                      style:{width:"100%",background:"rgba(0,0,0,0.4)",border:`1px solid ${BORDER}`,borderRadius:6,color:"#e2e8f0",padding:"4px 3px",fontSize:11,fontFamily:"monospace",textAlign:"center",boxSizing:"border-box"} }),
                    real && React.createElement("div", { style:{background:sColor(real),color:"white",borderRadius:5,padding:"2px 8px",fontWeight:800,fontSize:12} }, real)
                  )
                )
              );
            })
          )
        )
      ),

      // Resumen aciertos
      conRes && React.createElement("div", { style:{marginTop:"0.75rem",background:CARD,border:`1px solid ${BORDER}`,borderRadius:12,padding:"1rem"} },
        React.createElement("div", { style:{fontSize:10,color:"#64748b",textTransform:"uppercase",letterSpacing:"0.1em",marginBottom:"0.6rem"} }, "Aciertos actuales"),
        React.createElement("div", { style:{display:"flex",gap:"0.5rem",flexWrap:"wrap"} },
          ...jActivos.map(j => {
            const {ok,total} = contarAciertos(apuestas[j.id], analisis.partidos);
            const pct = total>0?Math.round(ok/total*100):0;
            const col = pct>=70?"#4ade80":pct>=50?ACCENT:"#f87171";
            return React.createElement("div", { key:j.id, style:{background:"rgba(0,0,0,0.3)",borderRadius:10,padding:"0.5rem 0.75rem",textAlign:"center",minWidth:64} },
              React.createElement("div", { style:{fontSize:14,marginBottom:1} }, j.emoji),
              React.createElement("div", { style:{fontSize:9,color:"#64748b"} }, j.nombre),
              React.createElement("div", { style:{fontSize:20,fontWeight:800,color:col} }, ok),
              React.createElement("div", { style:{fontSize:9,color:"#475569"} }, `de ${total} · ${pct}%`)
            );
          })
        )
      )
    );
  };

  // ── RESULTADOS TAB ────────────────────────────────────────────────
  const renderResultados = () => !analisis
    ? React.createElement("div", { style:{textAlign:"center",padding:"3rem",color:"#475569"} },
        React.createElement("div", { style:{fontSize:"2rem",marginBottom:"0.5rem"} }, "📊"),
        React.createElement("p", null, "Primero analiza la jornada"),
        React.createElement(Btn, { ghost:true, onClick:()=>setTab(0), style:{marginTop:"0.5rem"} }, "Ir a Jornada →")
      )
    : React.createElement("div", null,
        React.createElement(Btn, { onClick: handleResultados, disabled: loading, full:true, style:{marginBottom:"0.75rem"} },
          loading ? `⏳ ${loadingMsg}` : "📡 Actualizar resultados automáticamente"
        ),
        React.createElement("p", { style:{fontSize:11,color:"#475569",textAlign:"center",marginBottom:"0.75rem"} }, "o introdúcelos manualmente en la columna Real de la pestaña Jornada"),
        ...analisis.partidos.map((p,pi) => {
          const real = signoReal(p.resultado_real);
          return React.createElement("div", { key:pi, style:{background:CARD,border:`1px solid ${BORDER}`,borderRadius:10,padding:"0.6rem 0.8rem",marginBottom:"0.35rem",display:"flex",alignItems:"center",gap:"0.5rem",flexWrap:"wrap"} },
            React.createElement("span", { style:{color:"#475569",fontSize:10,fontFamily:"monospace",minWidth:18} }, pi+1),
            React.createElement("div", { style:{flex:1,minWidth:120} },
              React.createElement("span", { style:{fontSize:12,fontWeight:600} }, p.local),
              React.createElement("span", { style:{color:"#475569",fontSize:10,margin:"0 3px"} }, "vs"),
              React.createElement("span", { style:{fontSize:12,fontWeight:600} }, p.visitante)
            ),
            React.createElement("input", { value:p.resultado_real||"", onChange:e=>setResultado(pi,e.target.value), placeholder:"0-0",
              style:{width:48,background:"rgba(0,0,0,0.4)",border:`1px solid ${BORDER}`,borderRadius:7,color:"#e2e8f0",padding:"4px 5px",fontSize:11,fontFamily:"monospace",textAlign:"center"} }),
            real && React.createElement("div", { style:{background:sColor(real),color:"white",borderRadius:6,padding:"3px 9px",fontWeight:800,fontSize:12} }, real),
            React.createElement("div", { style:{display:"flex",gap:3} },
              ...jActivos.map(j => {
                const ap = (apuestas[j.id]||[])[pi];
                if (!ap) return null;
                const ac = real ? esAcierto(ap, real) : null;
                return React.createElement("div", { key:j.id, title:`${j.nombre}: ${ap}`, style:{textAlign:"center",fontSize:10} },
                  React.createElement("div", null, j.emoji),
                  React.createElement("div", null, ac===true?"✅":ac===false?"❌":React.createElement("span",{style:{color:sColor(ap[0]),fontWeight:700}},ap))
                );
              })
            )
          );
        })
      );

  // ── HISTORIAL TAB ─────────────────────────────────────────────────
  const renderHistorial = () => {
    if (!historial.length) return React.createElement("div", { style:{textAlign:"center",padding:"3rem",color:"#475569"} },
      React.createElement("div", { style:{fontSize:"2rem",marginBottom:"0.5rem"} }, "🏆"),
      React.createElement("p", null, "Sin jornadas guardadas"),
      React.createElement("p", { style:{fontSize:12,marginTop:"0.25rem"} }, "Guarda jornadas desde la pestaña Jornada con el botón 💾"),
      React.createElement("div", { style:{marginTop:"1.5rem",display:"flex",gap:"0.5rem",justifyContent:"center",flexWrap:"wrap"} },
        React.createElement("label", { style:{padding:"8px 14px",borderRadius:10,border:`1px solid ${BORDER}`,color:"#94a3b8",fontSize:12,fontWeight:700,cursor:"pointer"} },
          "📥 Importar backup",
          React.createElement("input", { type:"file", accept:".json", onChange:importarDatos, style:{display:"none"} })
        )
      )
    );

    // Ranking global
    const ranking = {};
    historial.forEach(e => e.resumen?.forEach(r => {
      if (!ranking[r.id]) ranking[r.id] = { nombre:r.nombre, emoji:r.emoji, ok:0, total:0, j:0 };
      ranking[r.id].ok += r.aciertos||0;
      ranking[r.id].total += r.total||0;
      ranking[r.id].j++;
    }));
    const rankArr = Object.values(ranking).sort((a,b) => (b.ok/Math.max(b.total,1))-(a.ok/Math.max(a.total,1)));

    return React.createElement("div", null,
      // Botones backup
      React.createElement("div", { style:{display:"flex",gap:"0.5rem",marginBottom:"0.75rem"} },
        React.createElement("button", { onClick: exportarDatos, style:{flex:1,padding:"8px 10px",borderRadius:9,border:`1px solid ${BORDER}`,background:"transparent",color:"#94a3b8",fontSize:11,fontWeight:700,cursor:"pointer"} }, "📤 Exportar backup"),
        React.createElement("label", { style:{flex:1,padding:"8px 10px",borderRadius:9,border:`1px solid ${BORDER}`,color:"#94a3b8",fontSize:11,fontWeight:700,cursor:"pointer",textAlign:"center",display:"block"} },
          "📥 Importar backup",
          React.createElement("input", { type:"file", accept:".json", onChange:importarDatos, style:{display:"none"} })
        )
      ),
      // Ranking
      rankArr.length > 0 && React.createElement("div", { style:{background:CARD,border:`1px solid ${BORDER}`,borderRadius:12,padding:"1rem",marginBottom:"1rem"} },
        React.createElement("div", { style:{fontSize:10,color:"#64748b",textTransform:"uppercase",letterSpacing:"0.1em",marginBottom:"0.75rem"} }, "🏆 Ranking global"),
        ...rankArr.map((r,i) => {
          const pct = r.total>0?Math.round(r.ok/r.total*100):0;
          const medal = ["🥇","🥈","🥉"][i]||"·";
          const col = pct>=70?"#4ade80":pct>=50?ACCENT:"#f87171";
          return React.createElement("div", { key:r.nombre, style:{display:"flex",alignItems:"center",gap:"0.5rem",padding:"0.4rem 0",borderBottom:`1px solid ${BORDER}`} },
            React.createElement("span", { style:{fontSize:16,minWidth:22} }, medal),
            React.createElement("span", { style:{fontSize:15} }, r.emoji),
            React.createElement("span", { style:{flex:1,fontWeight:600,fontSize:13} }, r.nombre),
            React.createElement("span", { style:{fontSize:10,color:"#64748b"} }, r.j+"J"),
            React.createElement("span", { style:{fontWeight:800,fontSize:16,color:col,minWidth:38,textAlign:"right"} }, pct+"%"),
            React.createElement("span", { style:{fontSize:10,color:"#475569",minWidth:36,textAlign:"right"} }, `${r.ok}/${r.total}`)
          );
        })
      ),
      // Jornadas
      ...historial.map(e => React.createElement("div", { key:e.id, style:{background:CARD,border:`1px solid ${BORDER}`,borderRadius:12,padding:"0.85rem 1rem",marginBottom:"0.5rem"} },
        React.createElement("div", { style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"0.5rem"} },
          React.createElement("div", null,
            React.createElement("span", { style:{fontWeight:700,fontSize:13} }, e.jornada),
            React.createElement("span", { style:{fontSize:11,color:"#475569",marginLeft:8} }, e.fecha)
          ),
          React.createElement("button", { onClick:()=>setHistorial(h=>h.filter(x=>x.id!==e.id)), style:{background:"none",border:"none",color:"#475569",cursor:"pointer",fontSize:14} }, "✕")
        ),
        React.createElement("div", { style:{display:"flex",gap:"0.4rem",flexWrap:"wrap"} },
          ...(e.resumen||[]).map(r => {
            const pct = r.total>0?Math.round(r.aciertos/r.total*100):0;
            const col = pct>=70?"#4ade80":pct>=50?ACCENT:"#f87171";
            return React.createElement("div", { key:r.id, style:{background:"rgba(0,0,0,0.3)",borderRadius:9,padding:"0.4rem 0.65rem",textAlign:"center",minWidth:58} },
              React.createElement("div", { style:{fontSize:13} }, r.emoji),
              React.createElement("div", { style:{fontSize:9,color:"#64748b"} }, r.nombre),
              React.createElement("div", { style:{fontSize:17,fontWeight:800,color:col} }, r.aciertos, React.createElement("span",{style:{fontSize:9,color:"#475569"}},"/"+r.total))
            );
          })
        )
      ))
    );
  };

  // ── RENDER PRINCIPAL ──────────────────────────────────────────────
  return React.createElement("div", { style:{minHeight:"100vh",background:BG,color:"#e2e8f0",maxWidth:520,margin:"0 auto"} },

    // Header
    React.createElement("div", { style:{background:"#111827",borderBottom:`1px solid ${BORDER}`,padding:"0.85rem 1rem",position:"sticky",top:0,zIndex:10} },
      React.createElement("div", { style:{display:"flex",alignItems:"center",gap:"0.6rem"} },
        React.createElement("span", { style:{fontSize:"1.3rem"} }, "⚽"),
        React.createElement("div", { style:{flex:1} },
          React.createElement("h1", { style:{margin:0,fontSize:"0.95rem",fontWeight:800,color:"#f1f5f9"} }, "La Quiniela IA"),
          React.createElement("p", { style:{margin:0,fontSize:"0.58rem",color:"#475569",letterSpacing:"0.06em"} }, jActivos.map(j=>j.emoji+j.nombre).join(" · "))
        ),
        React.createElement(Btn, { onClick: handleAnalizar, disabled: loading, small: true },
          loading ? "⏳" : analisis ? "🔄 Nueva" : "⚡ Analizar"
        )
      ),
      loading && React.createElement("div", { style:{marginTop:"0.5rem"} },
        React.createElement("div", { style:{height:3,background:"rgba(0,0,0,0.3)",borderRadius:99,overflow:"hidden"} },
          React.createElement("div", { style:{height:"100%",width:"50%",background:`linear-gradient(90deg,${ACCENT},${ACCENT2})`,borderRadius:99,animation:"slide 1.8s ease-in-out infinite"} })
        ),
        React.createElement("p", { style:{margin:"0.3rem 0 0",fontSize:10,color:ACCENT,textAlign:"center"} }, loadingMsg)
      )
    ),

    // Tabs
    React.createElement("div", { style:{background:"#0d1018",borderBottom:`1px solid ${BORDER}`,display:"flex"} },
      ...TABS.map((t,i) => React.createElement("button", {
        key:i, onClick:()=>setTab(i),
        style:{flex:1,padding:"0.7rem 0.25rem",background:"transparent",border:"none",borderBottom:tab===i?`2px solid ${ACCENT}`:"2px solid transparent",color:tab===i?ACCENT:"#475569",fontSize:"0.68rem",fontWeight:tab===i?700:400,cursor:"pointer"}
      }, t))
    ),

    // Error
    error && React.createElement("div", { style:{margin:"0.65rem",background:"rgba(239,68,68,0.1)",border:"1px solid rgba(239,68,68,0.3)",borderRadius:10,padding:"0.6rem 0.85rem",color:"#fca5a5",fontSize:11,display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:"0.4rem"} },
      React.createElement("span", null, "❌ " + error),
      React.createElement("button", { onClick:()=>setError(null), style:{background:"none",border:"none",color:"#f87171",cursor:"pointer",flexShrink:0,fontSize:14} }, "✕")
    ),

    // Contenido
    React.createElement("div", { style:{padding:"0.85rem"} },
      tab===0 && renderJornada(),
      tab===1 && renderResultados(),
      tab===2 && renderHistorial()
    ),

    // Modal jugadores
    showModal && React.createElement(ModalJugadores, { jugadores, onClose:()=>setShowModal(false), onSave:saveJugadores })
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));