// MateriaisMes — agrega todos os materiais anotados nos dias do mês
const { useState: useStateMM } = React;

function MateriaisMes({ anotacoes, matCheck, nomeMes, onToggleMat, onIrParaDia }) {
  const [soFaltantes, setSoFaltantes] = useStateMM(false);
  // Parse: cada string de materiais pode ter quebras de linha OU vírgulas OU bullets.
  const splitMateriais = (s) => {
    if (!s) return [];
    return s
      .split(/[\n,;•·]+/)
      .map(x => x.replace(/^[\s\-–—·•*\d\.\)]+/, '').trim())
      .filter(x => x.length > 0);
  };

  // Chave normalizada para deduplicar (lowercase, sem acentos, sem emoji leading)
  const normalizar = (s) => {
    return s
      .toLowerCase()
      .normalize('NFD')
      .replace(/[\u0300-\u036f]/g, '')
      .replace(/[^\w\s]/g, ' ')
      .replace(/\s+/g, ' ')
      .trim();
  };

  // Construir mapa: chave -> { label, dias: [{dia, assunto}] }
  const mapa = {};
  Object.entries(anotacoes).forEach(([dia, dados]) => {
    const itens = splitMateriais(dados.materiais);
    itens.forEach(item => {
      const k = normalizar(item);
      if (!k) return;
      if (!mapa[k]) mapa[k] = { label: item, dias: [] };
      mapa[k].dias.push({ dia: Number(dia), assunto: dados.assunto || '' });
    });
  });

  const lista = Object.entries(mapa)
    .map(([k, v]) => ({ key: k, ...v }))
    .sort((a, b) => b.dias.length - a.dias.length || a.label.localeCompare(b.label));

  const totalItens = lista.length;
  const totalChecked = lista.filter(l => matCheck[l.key]).length;
  const faltam = totalItens - totalChecked;
  const listaVisivel = (soFaltantes && faltam > 0) ? lista.filter(l => !matCheck[l.key]) : lista;

  const copiar = async () => {
    // Respeita o filtro: com "só faltantes" ativo, copia apenas o que falta
    const txt = listaVisivel.map(l =>
      `${matCheck[l.key] ? '[x]' : '[ ]'} ${l.label}${l.dias.length > 1 ? ` (${l.dias.length}x)` : ''}`
    ).join('\n');

    let ok = false;
    // 1) Tenta a API moderna
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(txt);
        ok = true;
      }
    } catch (_) { ok = false; }

    // 2) Fallback: textarea fora-de-tela + execCommand
    if (!ok) {
      try {
        const ta = document.createElement('textarea');
        ta.value = txt;
        ta.setAttribute('readonly', '');
        ta.style.position = 'fixed';
        ta.style.top = '0';
        ta.style.left = '0';
        ta.style.opacity = '0';
        ta.style.pointerEvents = 'none';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        ta.setSelectionRange(0, txt.length);
        ok = document.execCommand('copy');
        document.body.removeChild(ta);
      } catch (_) { ok = false; }
    }

    if (ok) {
      alert(window.t('mat.copiada'));
    } else {
      // 3) Último recurso — abre um prompt com o texto pré-selecionado pra usuária copiar à mão
      window.prompt(window.t('mat.copiarManual'), txt);
    }
  };

  const imprimir = () => window.print();

  if (lista.length === 0) {
    return (
      <div className="materiais-wrap">
        <div className="materiais-vazio">
          <div style={{ fontSize: 64, marginBottom: 12 }}>🧺</div>
          <h3 style={{ fontSize: 26, marginBottom: 8 }}>{window.t('mat.vazioTitulo')}</h3>
          <p style={{ color: 'var(--ink-soft)', fontFamily: 'var(--display)', fontSize: 16, lineHeight: 1.4 }}>
            {window.t('mat.vazioTexto1')}<br/>
            {window.t('mat.vazioTexto2')}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="materiais-wrap">
      <div className="materiais-head">
        <div>
          <h2 className="materiais-titulo">🧺 {window.t('mat.titulo', { mes: nomeMes })}</h2>
          <p style={{ color: 'var(--ink-soft)', fontFamily: 'var(--display)', fontSize: 15, fontStyle: 'italic' }}>
            {window.t('mat.sub')}
          </p>
        </div>
      </div>

      <div className="materiais-acoes">
        <button className="btn-pequeno" onClick={copiar}>📋 {window.t('mat.copiar')}</button>
        <button className="btn-pequeno" onClick={imprimir}>🖨️ {window.t('mat.imprimir')}</button>
      </div>

      {/* Barra de progresso — toque filtra só os faltantes */}
      <div
        className={`progresso-bar-wrap ${soFaltantes && faltam > 0 ? 'filtro-ativo' : ''}`}
        role="button"
        aria-pressed={soFaltantes}
        onClick={() => setSoFaltantes(faltam > 0 ? !soFaltantes : false)}
      >
        <div className="progresso-bar">
          <div className="progresso-fill" style={{ width: `${totalItens > 0 ? (totalChecked / totalItens) * 100 : 0}%` }}></div>
        </div>
        <div className="progresso-label">
          {faltam === 0
            ? window.t('mat.tudoPronto')
            : soFaltantes
              ? window.t('mat.soFalta')
              : totalChecked === 0
                ? window.t('mat.listaCompras', { n: totalItens })
                : window.t('mat.progresso', { checked: totalChecked, total: totalItens, faltam })}
        </div>
      </div>

      <div className="materiais-lista">
        {listaVisivel.map(item => {
          const checked = !!matCheck[item.key];
          return (
            <div
              key={item.key}
              className={`material-card ${checked ? 'checked' : ''}`}
            >
              <div
                className="material-check"
                onClick={() => onToggleMat(item.key)}
                role="button"
                aria-label={checked ? window.t('mat.desmarcar') : window.t('mat.marcar')}
              >
                <div className="checkbox">{checked ? '✓' : ''}</div>
                <div className="material-label">
                  <span className="material-nome">{item.label}</span>
                  {item.dias.length > 1 && (
                    <span className="material-uso">{window.t('mat.usadoEm', { n: item.dias.length })}</span>
                  )}
                </div>
              </div>
              <div className="material-dias">
                {item.dias.map((d, i) => (
                  <button
                    key={i}
                    className="dia-chip"
                    onClick={() => onIrParaDia(d.dia)}
                    title={window.t('mat.diaChip', { dia: d.dia, assunto: d.assunto || window.t('mem.aulaDoDia') })}
                  >
                    {d.dia}
                  </button>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.MateriaisMes = MateriaisMes;