const { Button, Badge, Card, Eyebrow, SectionHeading, DataBar, DataTable, SourceNote, Callout, TopicChip, Input } = window.CensoNosaraDesignSystem_f123a0;

/* Explorador de las 151 fichas del censo, tres pisos por ficha.
 *
 * El problema: una misma cifra tiene que servirle a un vecino de Santa Marta
 * con sexto grado y conexión por teléfono, a una fundación de otro país con
 * noventa segundos, y a un modelo de lenguaje que indexa la página. La salida
 * fácil sería hacer tres versiones. La salida fácil segrega: decirle a alguien
 * «esta es su versión, la sencilla» es tratarlo de menos.
 *
 * La solución es una sola ficha por la que cada quien baja hasta donde
 * necesita. Trece están reescritas a mano para quien no lee informes; las
 * otras ciento treinta y ocho traen el texto que escribió el equipo del censo.
 */

const POR_TANDA = 24;

/* Une las fichas del informe con la capa de redacción de las destacadas. */
function fichasCompletas() {
  const dest = window.CN_FICHAS_DESTACADAS || {};
  return (window.CN_FICHAS_INFORME || []).map(f => {
    const d = dest[f.id];
    return d ? Object.assign({}, f, d, { destacada: true }) : f;
  });
}

/* Sin tildes y en minúscula, para que buscar «educacion» encuentre
   «educación». Quien escribe desde un teléfono rara vez pone tildes. */
const plegar = s => (s || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');

/* Cuadrícula de cien puntos. Se cuenta con el dedo: no hay que saber leer un
   eje ni interpretar el ángulo de un queso. Es además el vocabulario visual
   que la marca ya usa en sus piezas para redes sociales. */
function Cien({ parte, color, size = 130 }) {
  const cols = 10, r = size / 30, paso = size / cols;
  const puntos = [];
  for (let i = 0; i < 100; i++) {
    puntos.push(<circle key={i} cx={(i % cols) * paso + paso / 2} cy={Math.floor(i / cols) * paso + paso / 2}
      r={r} fill={i < parte ? color : 'var(--cn-ink-200)'} />);
  }
  return <svg viewBox={'0 0 ' + size + ' ' + size} width={size} height={size} aria-hidden="true"
    style={{ display: 'block', flex: 'none' }}>{puntos}</svg>;
}

/* Aplica la capa en inglés (window.CN_FICHAS_EN) sobre la ficha en español.
   Traduce también las categorías de la tabla y del desglose, y la categoría
   principal. Los números no se tocan: viven en la ficha base. */
function conIdioma(fSrc, lang) {
  if (lang !== 'en' || !window.CN_FICHAS_EN) return fSrc;
  const en = window.CN_FICHAS_EN[fSrc.id];
  if (!en) return fSrc;
  const m = Object.assign({}, fSrc, en);
  const cmap = en.cats || {};
  if (Array.isArray(fSrc.tabla)) {
    m.tabla = fSrc.tabla.map(r => cmap[r.cat] ? Object.assign({}, r, { cat: cmap[r.cat] }) : r);
  }
  if (fSrc.categoriaPrincipal && cmap[fSrc.categoriaPrincipal]) {
    m.categoriaPrincipal = cmap[fSrc.categoriaPrincipal];
  }
  return m;
}

function Ficha({ f: fSrc, abierta, onAbrir, lang, t }) {
  const f = conIdioma(fSrc, lang);
  const color = 'var(--topic-' + f.tema + ')';
  const [copiado, setCopiado] = React.useState(false);
  const cita = window.CN_CITA[lang] || window.CN_CITA.es;

  const porcentaje = f.pct || window.pct(f.pctNum, lang);
  const desglose = f.desglose || f.tabla.slice(0, 6).map(r => ({ label: r.cat, valor: r.p }));

  const citar = () => {
    navigator.clipboard && navigator.clipboard.writeText(
      f.titulo + ': ' + f.llano + ' (N = ' + window.num(f.n, lang) + '). ' + cita);
    setCopiado(true); setTimeout(() => setCopiado(false), 1800);
  };

  const compartirWA = () => {
    const texto = f.titulo + ': ' + f.llano + ' (N = ' + window.num(f.n, lang) + '). ' + cita + ' ' + window.CN_URL;
    window.open('https://wa.me/?text=' + encodeURIComponent(texto), '_blank', 'noopener');
  };

  return (
    <Card tone="surface" padding="0" id={f.id}
      style={{ overflow: 'hidden', gridColumn: abierta ? '1 / -1' : 'auto', scrollMarginTop: 90 }}>
      {/* ── PISO 1 · el titular ─────────────────────────────────────────── */}
      <div style={{ padding: 'var(--space-6)', display: 'flex', gap: 'var(--space-6)', alignItems: 'flex-start', flexWrap: 'wrap' }}>
        <Cien parte={f.parte} color={color} size={abierta ? 168 : 130} />
        <div style={{ flex: '1 1 240px', minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(2rem,4vw,2.8rem)', lineHeight: 1, letterSpacing: '-0.03em', color, fontVariantNumeric: 'tabular-nums' }}>
              {f.parte}
            </span>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-md)', color: 'var(--text-muted)' }}>
              {t.fichas.deCada100}
            </span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', color: 'var(--text-faint)', fontVariantNumeric: 'tabular-nums' }}>
              {porcentaje}
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', margin: '12px 0 8px', flexWrap: 'wrap' }}>
            <h3 style={{ fontSize: 'var(--fs-lg)', margin: 0, maxWidth: '26ch' }}>{f.titulo}</h3>
            <Badge tone="neutral" size="sm">{t.fichas.nivel[f.nivel] || f.nivel}</Badge>
          </div>
          {!f.destacada && f.categoriaPrincipal && (
            <p style={{ margin: '0 0 6px', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-md)', color: 'var(--cn-navy-700)' }}>
              {f.categoriaPrincipal}
            </p>
          )}
          <p style={{ margin: 0, fontSize: f.destacada ? 'var(--fs-md)' : 'var(--fs-sm)', color: f.destacada ? 'var(--text-body)' : 'var(--text-muted)', maxWidth: '52ch' }}>
            {f.llano}
          </p>
          {!abierta && (
            <button type="button" onClick={() => onAbrir(f.id)}
              style={{ marginTop: 'var(--space-4)', background: 'transparent', border: 0, padding: 0, cursor: 'pointer', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-sm)', color: 'var(--cn-red-600)' }}>
              {t.fichas.verDetalle} →
            </button>
          )}
        </div>
      </div>

      {abierta && (
        <div>
          {/* ── PISO 2 · el desglose ─────────────────────────────────────── */}
          <div style={{ padding: '0 var(--space-6) var(--space-6)', display: 'grid', gridTemplateColumns: 'minmax(0,1.15fr) minmax(0,1fr)', gap: 'var(--space-8)', alignItems: 'start' }} data-stack>
            <div>
              <Eyebrow>{f.desgloseTitulo || f.titulo}</Eyebrow>
              <div style={{ display: 'grid', gap: 'var(--space-3)', marginTop: 'var(--space-4)' }}>
                {desglose.map((d, i) => (
                  <DataBar key={d.label + i} label={d.label} value={d.valor} max={100}
                    display={window.pct(d.valor, lang)} color={color} />
                ))}
              </div>
            </div>
            {f.implicacion && (
              <div style={{ background: 'var(--surface-sunken)', borderRadius: 'var(--radius-md)', padding: 'var(--space-5)' }}>
                <Eyebrow>{t.fichas.queSignifica}</Eyebrow>
                <p style={{ margin: '8px 0 0', fontSize: 'var(--fs-md)', color: 'var(--text-body)' }}>{f.implicacion}</p>
              </div>
            )}
          </div>

          {/* ── PISO 3 · la procedencia ──────────────────────────────────
              Colapsado, pero presente en el documento: los buscadores y los
              modelos que indexan la página lo leen igual, y quien audita lo
              abre. Quien vino sólo por el dato nunca lo tiene que ver. */}
          <details style={{ borderTop: 'var(--border-width) solid var(--border-subtle)' }}>
            <summary style={{ cursor: 'pointer', padding: 'var(--space-4) var(--space-6)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-sm)', color: 'var(--cn-navy-700)' }}>
              {t.fichas.deDondeSale}
            </summary>
            <div style={{ padding: '0 var(--space-6) var(--space-6)', display: 'grid', gap: 'var(--space-5)' }}>
              {f.pregunta && (
                <div>
                  <Eyebrow>{t.fichas.pregunta}</Eyebrow>
                  <p style={{ margin: '6px 0 0', fontSize: 'var(--fs-md)', fontStyle: 'italic', color: 'var(--text-body)', maxWidth: '62ch' }}>«{f.pregunta}»</p>
                </div>
              )}
              <div style={{ display: 'flex', gap: 'var(--space-8)', flexWrap: 'wrap' }}>
                <div>
                  <Eyebrow>{t.fichas.universo}</Eyebrow>
                  <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-body)', marginTop: 4 }}>{f.universo}</div>
                </div>
                <div>
                  <Eyebrow>{t.fichas.respuestas}</Eyebrow>
                  <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-body)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>N = {window.num(f.n, lang)}</div>
                </div>
                {f.cobertura && (
                  <div>
                    <Eyebrow>{t.fichas.cobertura}</Eyebrow>
                    <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-body)', marginTop: 4 }}>{f.cobertura}</div>
                  </div>
                )}
                <div>
                  <Eyebrow>{t.fichas.temaInforme || 'Tema'}</Eyebrow>
                  <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-body)', marginTop: 4 }}>{f.temaInforme}</div>
                </div>
              </div>

              <DataTable
                caption={f.titulo + ', ' + t.fichas.distribucion + ' (N = ' + window.num(f.n, lang) + ')'}
                columns={[{ key: 'cat', label: t.fichas.categoria }, { key: 'f', label: t.fichas.frecuencia }, { key: 'p', label: t.fichas.porcentaje }]}
                rows={f.tabla.map(r => ({
                  cat: r.cat,
                  f: window.num(r.f, lang),
                  p: typeof r.p === 'number' ? window.pct(r.p, lang) : r.p
                }))} />

              {f.nota && <Callout tone="info" title={t.fichas.notaMetodologica}>{f.nota}</Callout>}
              <Callout tone="quiet" title={t.fichas.porQueCambiaN}>
                {(window.CN_UNIVERSO_NOTA[lang] || window.CN_UNIVERSO_NOTA.es)}
              </Callout>

              <div>
                <Eyebrow>{t.fichas.comoCitar}</Eyebrow>
                <p style={{ margin: '6px 0 var(--space-3)', fontSize: 'var(--fs-xs)', fontFamily: 'var(--font-mono)', lineHeight: 1.6, color: 'var(--text-muted)', maxWidth: '72ch' }}>
                  {f.titulo}: {f.llano} (N = {window.num(f.n, lang)}). {cita}
                </p>
                <div style={{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
                  <Button variant="outline" size="sm" onClick={citar}>
                    {copiado ? t.fichas.citaCopiada + ' ✓' : t.fichas.copiarCita}
                  </Button>
                  <Button variant="ghost" size="sm" onClick={compartirWA}>
                    {(t.fichas.compartirWA || 'Compartir por WhatsApp')} ↗
                  </Button>
                </div>
              </div>

              <SourceNote>{window.CN_PRIVACIDAD[lang] || window.CN_PRIVACIDAD.es}</SourceNote>
            </div>
          </details>

          <div style={{ padding: 'var(--space-4) var(--space-6)', borderTop: 'var(--border-width) solid var(--border-subtle)', background: 'var(--surface-muted)' }}>
            <button type="button" onClick={() => onAbrir(null)}
              style={{ background: 'transparent', border: 0, padding: 0, cursor: 'pointer', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>
              ← {t.fichas.cerrar}
            </button>
          </div>
        </div>
      )}
    </Card>
  );
}

window.Fichas = function Fichas({ lang }) {
  const t = window.T(lang);
  const todas = React.useMemo(fichasCompletas, []);

  const [busca, setBusca] = React.useState('');
  const [nivel, setNivel] = React.useState(null);
  const [tema, setTema] = React.useState(null);
  const [soloDestacadas, setSoloDestacadas] = React.useState(false);
  const [abierta, setAbierta] = React.useState(null);
  const [tanda, setTanda] = React.useState(POR_TANDA);

  const reiniciar = fn => (...a) => { fn(...a); setTanda(POR_TANDA); setAbierta(null); };

  const lista = React.useMemo(() => {
    const q = plegar(busca.trim());
    return todas.filter(f => {
      if (soloDestacadas && !f.destacada) return false;
      if (nivel && f.nivel !== nivel) return false;
      if (tema && f.tema !== tema) return false;
      if (!q) return true;
      return plegar(f.titulo).includes(q) || plegar(f.llano).includes(q) ||
        plegar(f.temaInforme).includes(q) || plegar(f.categoriaPrincipal).includes(q);
    }).sort((a, b) => (b.destacada ? 1 : 0) - (a.destacada ? 1 : 0));
  }, [todas, busca, nivel, tema, soloDestacadas]);

  const visibles = lista.slice(0, tanda);
  const NIVELES = ['Vivienda', 'Hogar', 'Población'];
  const EJES = ['salud', 'educacion', 'calles', 'vivienda', 'ambiente'];

  return (
    <main id="fichas">
      <section style={{ background: 'var(--cn-navy-700)', color: 'var(--cn-cream-300)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'clamp(40px,5vw,72px) var(--gutter)' }}>
          <Badge tone="solidAccent">{t.fichas.badge}</Badge>
          <h1 style={{ color: 'var(--cn-cream-300)', fontSize: 'clamp(2.2rem,4.4vw,3.6rem)', letterSpacing: 'var(--ls-hero)', lineHeight: 1.02, margin: '16px 0 14px', maxWidth: '18ch' }}>
            {t.fichas.title}
          </h1>
          <p style={{ color: 'var(--cn-navy-200)', fontSize: 'var(--fs-lg)', maxWidth: '60ch', margin: 0 }}>{t.fichas.lede}</p>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <div style={{ display: 'grid', gap: 'var(--space-4)', marginBottom: 'var(--space-6)' }}>
          <div style={{ maxWidth: 460 }}>
            <Input label={t.fichas.buscar} value={busca} type="search"
              placeholder={t.fichas.buscarEjemplo}
              onChange={reiniciar(e => setBusca(e.target.value))} />
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
            <TopicChip label={t.fichas.todas + ' (' + todas.length + ')'} selected={!nivel && !tema && !soloDestacadas}
              onClick={reiniciar(() => { setNivel(null); setTema(null); setSoloDestacadas(false); })} />
            <TopicChip label={t.fichas.destacadas} selected={soloDestacadas}
              onClick={reiniciar(() => setSoloDestacadas(s => !s))} />
            {NIVELES.map(n => (
              <TopicChip key={n} label={t.fichas.nivel[n] || n} selected={nivel === n}
                onClick={reiniciar(() => setNivel(nivel === n ? null : n))} />
            ))}
            {EJES.map(e => (
              <TopicChip key={e} topic={e} label={t.fichas.temas[e]} selected={tema === e}
                onClick={reiniciar(() => setTema(tema === e ? null : e))} />
            ))}
          </div>

          <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', fontVariantNumeric: 'tabular-nums' }}>
            {lista.length === todas.length
              ? t.fichas.mostrandoTodas.replace('{n}', todas.length)
              : t.fichas.mostrandoFiltradas.replace('{n}', lista.length).replace('{total}', todas.length)}
          </p>
        </div>

        {lista.length === 0 ? (
          <Callout tone="quiet" title={t.fichas.sinResultados}>{t.fichas.sinResultadosTexto}</Callout>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(340px,1fr))', gap: 'var(--space-5)', alignItems: 'start' }}>
            {visibles.map(f => (
              <Ficha key={f.id} f={f} abierta={abierta === f.id} onAbrir={setAbierta} lang={lang} t={t} />
            ))}
          </div>
        )}

        {tanda < lista.length && (
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'var(--space-8)' }}>
            <Button variant="outline" size="lg" onClick={() => setTanda(x => x + POR_TANDA)}>
              {t.fichas.verMas.replace('{n}', Math.min(POR_TANDA, lista.length - tanda))}
            </Button>
          </div>
        )}

        <Callout tone="info" title={t.fichas.faltaVariable} style={{ marginTop: 'var(--space-10)' }}>
          {t.fichas.faltaVariableTexto}{' '}
          <a href="mailto:adcdesarrollocomunitario@gmail.com">adcdesarrollocomunitario@gmail.com</a>
          <span style={{ display: 'block', marginTop: 8, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>
            {t.fichas.faltaVariableNota}
          </span>
        </Callout>

        <SourceNote>{window.CN_CITA[lang] || window.CN_CITA.es}</SourceNote>
      </section>
    </main>
  );
};