// DrillWorld — global view: choropleth + continent cards + evolution

function DrillWorld({ hs, hsCodes, metric, years, drill, setDrill }) {
  const CF = window.CF;
  const EvolucionPanel = window.EvolucionPanel;
  const lo = Math.min(...years), hi = Math.max(...years);

  const apiData = window.useApi(
    `${window.API_BASE}/api/countries?${window.hsQ(hsCodes)}&from=${lo}&to=${hi}`,
    [hsCodes ? hsCodes.join(",") : hs, lo, hi]
  );

  const countries = React.useMemo(() => {
    if (!apiData.data) return [];
    const rows = apiData.data.rows
      .map(r => window.normalizeCountryRow(r, metric))
      .sort((a, b) => b.value - a.value);
    window.populateCountryCache(apiData.data.rows);
    return rows;
  }, [apiData.data, metric]);

  const conts   = React.useMemo(() => window.computeContinents(countries), [countries]);
  const total   = countries.reduce((a, r) => a + r.value, 0);

  function gotoCountry(iso) {
    const row = countries.find(c => c.iso === iso) || window.__countryByIso3[iso];
    setDrill({ level: "country", continent: row?.continent || null, country: iso });
  }
  function gotoContinent(cont) {
    setDrill({ level: "continent", continent: cont, country: null });
  }

  return (
    <div className="cf-fade-in">
      <WorldMapView
        hs={hs} hsCodes={hsCodes} metric={metric} years={years}
        rows={apiData.status === "ok" ? countries : null}
        selected={drill.country}
        setSelected={gotoCountry}
      />

      <div className="cf-grid-2" style={{marginTop:18}}>
        <div className="cf-panel">
          <div className="cf-panel-head">
            <div><h2>Continentes</h2><p>Pulsa una región para profundizar</p></div>
          </div>
          {apiData.status === "loading" && <div style={{padding:"20px 0", color:"var(--xn-fg-3)", fontSize:13}}>Cargando…</div>}
          {apiData.status === "ok" && (
            <div className="cf-cont-grid" style={{gridTemplateColumns:"repeat(2,1fr)"}}>
              {conts.map(c => (
                <div key={c.continent} className="cf-cont-card" onClick={() => gotoContinent(c.continent)}>
                  <div className="name">{c.continent}</div>
                  <div style={{display:"flex", alignItems:"baseline", gap:10}}>
                    <div className="val">{CF.fmtVal(c.value, metric)}</div>
                    <div className="pct">{CF.fmtPct(c.value / total)}</div>
                  </div>
                  <div className="barbg"><span style={{width:`${(c.value / conts[0].value) * 100}%`}} /></div>
                  <div className="meta">{c.countries.length} {c.countries.length === 1 ? "país" : "países"} · líder {c.countries[0].name}</div>
                </div>
              ))}
            </div>
          )}
        </div>

        <EvolucionPanel hs={hs} hsCodes={hsCodes} metric={metric} years={years} />
      </div>
    </div>
  );
}

window.DrillWorld = DrillWorld;