// HomeScreen — aba "Início": painel acolhedor (vibe emocional/álbum) pós-login.
// 100% de dados já em memória (auth, filhos, anotacoes do mês). Sem backend.
function HomeScreen({ auth, filhos, anotacoes, ano, mes, nomeMes, onAbrirDia, onIrTela }) {
  const agora = new Date();
  const h = agora.getHours();
  const saud = h < 12 ? window.t('home.bomDia') : h < 18 ? window.t('home.boaTarde') : window.t('home.boaNoite');
  const nome = ((auth && auth.nome) || '').trim().split(/\s+/)[0] || '';

  const ehMesAtual = agora.getFullYear() === ano && agora.getMonth() === mes;
  const diaHoje = agora.getDate();
  const aulaHoje = ehMesAtual ? anotacoes[diaHoje] : null;

  // Memória em destaque: sorteia uma foto qualquer do mês (re-sorteia a cada vez que a Início abre).
  // A seed fica fixa durante a visita (não pisca a cada re-render); o índice = seed × total é
  // calculado no render, então funciona quando as fotos chegam (load assíncrono).
  const [seedMemoria] = React.useState(() => Math.random());
  const memorias = [];
  Object.keys(anotacoes).forEach(d => {
    const dados = anotacoes[d];
    (dados.fotos || []).forEach(foto => {
      memorias.push({ dia: +d, assunto: dados.assunto, emoji: dados.emoji, foto });
    });
  });
  const escolhida = memorias.length ? memorias[Math.floor(seedMemoria * memorias.length)] : null;
  const heroFoto = escolhida ? escolhida.foto : null;
  const ultimo = escolhida ? { dia: escolhida.dia, assunto: escolhida.assunto, emoji: escolhida.emoji } : null;

  const totalDias = Object.keys(anotacoes).length;
  const totalFotos = Object.values(anotacoes).reduce((a, d) => a + (d.fotos || []).length, 0);
  const vazio = totalDias === 0;

  // Aniversário mais próximo (hoje > semana > mês)
  let aniv = null;
  if (window.SoluIdade) {
    const ordem = { hoje: 0, semana: 1, mes: 2 };
    const cands = (filhos || [])
      .map(f => f.nascimento && window.SoluIdade.statusAniversario(f.nascimento, f.nome))
      .filter(s => s && ordem[s.tipo] !== undefined)
      .sort((a, b) => ordem[a.tipo] - ordem[b.tipo]);
    aniv = cands[0] || null;
  }

  return (
    <div className="home-wrap">
      <div className="home-saud">
        <h2>{saud}{nome ? `, ${nome}` : ''}!</h2>
        <p>{aulaHoje
          ? (aulaHoje.concluida ? window.t('home.subProdutivo') : window.t('home.subPronta'))
          : heroFoto ? window.t('home.subRelembrar')
          : window.t('home.subBemVinda')}</p>
      </div>

      {aniv && <div className={`home-aniv home-aniv-${aniv.tipo}`}>{aniv.mensagem}</div>}

      {/* Hoje — só quando há aula de verdade (sem card "nada marcado") */}
      {aulaHoje && (
        <button className="home-hoje" onClick={() => onAbrirDia(diaHoje)}>
          <span className="home-hoje-emoji">{aulaHoje.emoji || '🌿'}</span>
          <span className="home-hoje-txt"><small>{window.t('home.hoje')}</small><strong>{aulaHoje.assunto || window.t('home.aulaDeHoje')}</strong></span>
          <span className="home-seta">›</span>
        </button>
      )}

      {/* Hero: última memória (coração emocional da tela) */}
      {heroFoto ? (
        <button className="home-hero" onClick={() => onIrTela('memorias')}>
          <img {...window.blurImg()} src={heroFoto.src} alt={heroFoto.legenda || ultimo.assunto || 'memória'} loading="lazy" />
          <span className="home-hero-tag">{window.t('home.umaMemoria')}</span>
          <div className="home-hero-info">
            <span className="home-hero-titulo">{ultimo.emoji || '📸'} {ultimo.assunto || window.t('home.memoria')}</span>
            <span className="home-hero-sub">{window.SoluI18n ? window.SoluI18n.dataLonga(ano, mes, ultimo.dia) : `Dia ${ultimo.dia} de ${nomeMes}`}{heroFoto.legenda ? ` · “${heroFoto.legenda}”` : ''}</span>
          </div>
        </button>
      ) : (!vazio) ? (
        <button className="home-hero-vazio" onClick={() => onIrTela('calendario')}>
          <span style={{ fontSize: 38 }}>📸</span>
          <span>{window.t('home.heroVazio')}</span>
        </button>
      ) : null}

      {/* Conta nova */}
      {vazio && (
        <div className="home-vazio">
          <span style={{ fontSize: 46 }}>🌱</span>
          <strong>{window.t('home.bemVindaTitulo')}</strong>
          <p>{window.t('home.bemVindaTexto')}</p>
          <button className="btn-concluir" onClick={() => onIrTela('calendario')}>{window.t('home.anotarPrimeira')}</button>
        </div>
      )}

    </div>
  );
}

window.HomeScreen = HomeScreen;