// DiaModal — modal de visualização/edição de uma aula no calendário
const { useState: useStateDM, useRef: useRefDM } = React;

const EMOJIS_DIA_DM = ['🌿', '🌸', '🐢', '⭐', '🍃', '🌼', '🐝', '🍯', '🌳', '🌻'];
const EMOJIS_EXTRA = ['🐘', '🦅', '🐬', '🦉', '🐢', '🦁', '🐠', '🐳', '🌎', '🔤', '📚', '🎨', '🎵', '🧮', '🌈'];

function DiaModal({ dia, nomeMes, ano, mes, dados, criando, onMudarData, onSalvar, onApagar, onAbrirFotos, onRemoverFoto, onDuplicar, onClose }) {
  const existente = !!dados;
  // criando (FAB "+"): sempre abre em modo edição e com formulário VAZIO (aula nova), ignorando o dia atual
  const [modo, setModo] = useStateDM(criando ? 'editar' : (existente ? 'ver' : 'editar'));

  const [assunto, setAssunto] = useStateDM(criando ? '' : (dados?.assunto || ''));
  const [atividades, setAtividades] = useStateDM(
    (!criando && dados?.atividades && dados.atividades.length > 0)
      ? dados.atividades
      : [{ texto: '', feito: false }]
  );
  const [materiais, setMateriais] = useStateDM(criando ? '' : (dados?.materiais || ''));
  const [emoji, setEmoji] = useStateDM(criando ? EMOJIS_DIA_DM[(dia - 1) % EMOJIS_DIA_DM.length] : (dados?.emoji || EMOJIS_DIA_DM[(dia - 1) % EMOJIS_DIA_DM.length]));
  const [fotoAberta, setFotoAberta] = useStateDM(null);
  const [duplicando, setDuplicando] = useStateDM(false);
  const [dataDestino, setDataDestino] = useStateDM('');
  const [dupOcupado, setDupOcupado] = useStateDM(false);

  // Sugestão: mesmo dia da semana seguinte (clampado ao fim do range do app)
  const abrirDuplicar = () => {
    const alvo = new Date(ano, mes, dia + 7);
    const max = new Date(2030, 11, 31);
    const fim = alvo > max ? max : alvo;
    const iso = `${fim.getFullYear()}-${String(fim.getMonth() + 1).padStart(2, '0')}-${String(fim.getDate()).padStart(2, '0')}`;
    setDataDestino(iso);
    setDuplicando(true);
  };

  const confirmarDuplicar = async () => {
    if (!dataDestino || dupOcupado || !onDuplicar) return;
    setDupOcupado(true);
    let r = null;
    try { r = await onDuplicar(dataDestino); }
    catch (_) { r = { ok: false, msg: window.t('dia.duplicarErro') }; }
    setDupOcupado(false);
    if (r && r.ok) {
      setDuplicando(false);
      alert(r.msg);
    } else if (r && r.msg) {
      alert(r.msg);
    }
  };

  const adicionarAtividade = () => setAtividades([...atividades, { texto: '', feito: false }]);
  const removerAtividade = (i) => setAtividades(atividades.filter((_, idx) => idx !== i));
  const atualizarAtividade = (i, campo, valor) =>
    setAtividades(atividades.map((a, idx) => idx === i ? { ...a, [campo]: valor } : a));

  const toggleFeito = (i) => {
    const nova = atividades.map((a, idx) => idx === i ? { ...a, feito: !a.feito } : a);
    setAtividades(nova);
    if (modo === 'ver') {
      onSalvar({ assunto, atividades: nova, materiais, emoji }, { celebrar: false });
    }
  };

  const salvarSemCelebrar = () => {
    const ativsLimpas = atividades.filter(a => a.texto.trim().length > 0);
    if (!assunto.trim() && ativsLimpas.length === 0) {
      alert(window.t('dia.validacao'));
      return;
    }
    const novosDados = {
      assunto: assunto.trim(),
      atividades: ativsLimpas,
      materiais: materiais.trim(),
      emoji,
      fotos: dados?.fotos || [],
      concluida: dados?.concluida || false,
    };
    onSalvar(novosDados, { celebrar: false });
    if (existente || criando) setModo('ver');
  };

  const marcarConcluida = () => {
    // Salva qualquer edição pendente + marca como concluída + celebra + abre fotos
    const ativsLimpas = atividades.filter(a => a.texto.trim().length > 0);
    const novosDados = {
      assunto: assunto.trim() || (dados?.assunto || ''),
      atividades: ativsLimpas.length > 0 ? ativsLimpas : (dados?.atividades || []),
      materiais: materiais.trim() || (dados?.materiais || ''),
      emoji,
      fotos: dados?.fotos || [],
      concluida: true,
    };
    onSalvar(novosDados, { celebrar: true });
  };

  const desmarcarConcluida = () => {
    onSalvar({ ...dados, concluida: false }, { celebrar: false });
  };

  // --- Arrastar para reordenar atividades (modo ver) ---
  // Drag manual com pointer events: o nativo do HTML5 não funciona no Safari iOS.
  const listaRef = useRefDM(null);
  const dragRef = useRefDM(null);

  const reordenarAtividades = (de, para) => {
    const nova = [...(dados?.atividades || [])];
    if (de === para || de < 0 || para < 0 || de >= nova.length || para >= nova.length) return;
    const [movida] = nova.splice(de, 1);
    nova.splice(para, 0, movida);
    setAtividades(nova);
    onSalvar({ assunto, atividades: nova, materiais, emoji }, { celebrar: false });
  };

  const iniciarDrag = (e, indice) => {
    if (!listaRef.current) return;
    e.preventDefault();
    const itens = Array.from(listaRef.current.children);
    const rects = itens.map(el => el.getBoundingClientRect());
    const vao = rects.length > 1 ? rects[1].top - rects[0].bottom : 8;
    dragRef.current = { indice, alvo: indice, startY: e.clientY, itens, rects, vao };
    itens[indice].classList.add('arrastando');
    e.currentTarget.setPointerCapture(e.pointerId);
  };

  const moverDrag = (e) => {
    const d = dragRef.current;
    if (!d) return;
    const dy = e.clientY - d.startY;
    const meio = d.rects[d.indice].top + d.rects[d.indice].height / 2 + dy;
    let alvo = d.indice;
    for (let j = d.indice + 1; j < d.rects.length; j++) {
      if (meio > d.rects[j].top + d.rects[j].height / 2) alvo = j;
    }
    for (let j = d.indice - 1; j >= 0; j--) {
      if (meio < d.rects[j].top + d.rects[j].height / 2) alvo = j;
    }
    d.alvo = alvo;
    const passo = d.rects[d.indice].height + d.vao;
    d.itens.forEach((el, j) => {
      if (j === d.indice) { el.style.transform = `translateY(${dy}px) scale(1.02)`; return; }
      let t = 0;
      if (j > d.indice && j <= alvo) t = -passo;
      else if (j >= alvo && j < d.indice) t = passo;
      el.style.transform = t ? `translateY(${t}px)` : '';
    });
  };

  const finalizarDrag = (salvar) => {
    const d = dragRef.current;
    if (!d) return;
    dragRef.current = null;
    d.itens.forEach(el => {
      el.style.transition = 'none';
      el.style.transform = '';
      el.classList.remove('arrastando');
    });
    requestAnimationFrame(() => d.itens.forEach(el => { el.style.transition = ''; }));
    if (salvar && d.alvo !== d.indice) reordenarAtividades(d.indice, d.alvo);
  };

  const fotos = dados?.fotos || [];

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label={window.t('dia.fechar')}>✕</button>

        <div className="modal-hero">
          <div className="emoji-circle" style={{ background: 'var(--ceu-claro)', borderColor: 'var(--ceu)' }}>
            {emoji}
          </div>
          <div>
            <div className="subtipo">{window.t('dia.subtipo', { dia, nomeMes })}</div>
            <h2>{modo === 'ver' ? (dados.assunto || window.t('dia.semTitulo')) : ((existente && !criando) ? window.t('dia.editarAula') : window.t('dia.novaAula'))}</h2>
          </div>
        </div>

        {modo === 'ver' && (
          <>
            <div className="conceito">✨ {dados.assunto || window.t('dia.aulaDesseDia')}</div>

            {dados.atividades && dados.atividades.length > 0 && (
              <>
                <h4 className="secao-titulo">📋 {window.t('dia.atividades')}</h4>
                <div className="checklist" ref={listaRef}>
                  {dados.atividades.map((a, i) => (
                    <div key={i}
                         className={`check-item ${a.feito ? 'checked' : ''}`}
                         onClick={() => toggleFeito(i)}>
                      <div className="checkbox">{a.feito ? '✓' : ''}</div>
                      <div className="label">{a.texto}</div>
                      {dados.atividades.length > 1 && (
                        <div className="drag-alca"
                             aria-label={window.t('dia.arrastar')}
                             onClick={(e) => e.stopPropagation()}
                             onPointerDown={(e) => iniciarDrag(e, i)}
                             onPointerMove={moverDrag}
                             onPointerUp={() => finalizarDrag(true)}
                             onPointerCancel={() => finalizarDrag(false)}>⠿</div>
                      )}
                    </div>
                  ))}
                </div>
              </>
            )}

            {dados.materiais && (
              <div className="materiais">
                <h4>📦 {window.t('dia.materiais')}</h4>
                <p style={{ margin: 0, fontSize: 15, whiteSpace: 'pre-wrap' }}>{dados.materiais}</p>
              </div>
            )}

            {/* Fotos */}
            <h4 className="secao-titulo" style={{ marginTop: 20 }}>📸 {window.t('dia.fotosDoDia')}</h4>
            {fotos.length === 0 ? (
              <div className="fotos-vazio">
                {window.t('dia.semFotos')}
              </div>
            ) : (
              <div className="fotos-grid">
                {fotos.map((f, i) => (
                  <div key={i} className="foto-thumb">
                    <img {...window.blurImg()} src={f.src} alt={f.legenda || `Foto ${i + 1}`}
                         onClick={() => setFotoAberta(f)} />
                    {f.legenda && <span className="foto-legenda-mini">{f.legenda}</span>}
                    <button
                      className="foto-remover"
                      onClick={(e) => {
                        e.stopPropagation();
                        if (confirm(window.t('dia.removerFoto'))) onRemoverFoto(i);
                      }}
                    >✕</button>
                  </div>
                ))}
              </div>
            )}

            <button
              className="btn-foto"
              onClick={onAbrirFotos}
              style={{ marginBottom: 12 }}
            >
              📸 {fotos.length === 0 ? window.t('dia.adicionarFotos') : window.t('dia.adicionarMaisFotos')}
            </button>

            {/* Botão grande: marcar como concluída (ou desfazer) */}
            {!dados.concluida ? (
              <button
                className="btn-concluir"
                onClick={marcarConcluida}
                style={{ marginBottom: 10 }}
              >
                🎉 {window.t('dia.marcarConcluida')}
              </button>
            ) : (
              <div className="concluida-banner">
                <span style={{ fontSize: 22 }}>🎉</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--display)', fontSize: 17, fontWeight: 600, color: 'var(--ink)' }}>
                    {window.t('dia.concluidaTitulo')}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-soft)', fontStyle: 'italic' }}>
                    {window.t('dia.concluidaSub')}
                  </div>
                </div>
                <button
                  className="btn-pequeno"
                  onClick={desmarcarConcluida}
                  style={{ background: 'transparent' }}
                  title={window.t('dia.desmarcar')}
                >{window.t('dia.desfazer')}</button>
              </div>
            )}

            <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
              <button className="btn-concluir" style={{ flex: 1, background: 'var(--terra)', boxShadow: '0 4px 0 #9d5a44', fontSize: 17, padding: '12px 22px' }} onClick={() => setModo('editar')}>
                ✏️ {window.t('dia.editar')}
              </button>
              <button className="btn-secundario" onClick={() => { if (confirm(window.t('dia.apagarConfirm'))) onApagar(); }}>
                🗑️
              </button>
            </div>

            {/* Duplicar para outro dia (copia assunto/atividades/materiais; fotos e checks ficam) */}
            {!duplicando ? (
              <button className="btn-duplicar" onClick={abrirDuplicar}>
                📑 {window.t('dia.duplicar')}
              </button>
            ) : (
              <div className="duplicar-box">
                <label>{window.t('dia.duplicarPara')}</label>
                <div className="duplicar-row">
                  <input
                    type="date"
                    value={dataDestino}
                    min="2026-06-01"
                    max="2030-12-31"
                    onChange={(e) => setDataDestino(e.target.value)}
                  />
                  <button className="btn-pequeno duplicar-ok" disabled={dupOcupado || !dataDestino} onClick={confirmarDuplicar}>
                    {dupOcupado ? '…' : window.t('dia.duplicarBtn')}
                  </button>
                  <button className="btn-remover" onClick={() => setDuplicando(false)} aria-label={window.t('dia.cancelar')}>✕</button>
                </div>
              </div>
            )}
          </>
        )}

        {modo === 'editar' && (
          <>
            {criando && onMudarData && (
              <div className="campo">
                <label>📅 {window.t('dia.dataAula')}</label>
                <input
                  type="date"
                  value={`${ano}-${String(mes + 1).padStart(2, '0')}-${String(dia).padStart(2, '0')}`}
                  min="2026-06-01"
                  max="2030-12-31"
                  onChange={(e) => { if (e.target.value) onMudarData(e.target.value); }}
                />
                {dados && (
                  <div style={{ fontSize: 12.5, color: 'var(--terra)', fontStyle: 'italic', marginTop: 6 }}>
                    {window.t('dia.jaTemAula')}
                  </div>
                )}
              </div>
            )}

            <div className="campo">
              <label>📚 {window.t('dia.assunto')}</label>
              <input type="text" value={assunto} onChange={(e) => setAssunto(e.target.value)}
                     placeholder={window.t('dia.assuntoPh')} autoFocus />
            </div>

            <div className="campo">
              <label>📋 {window.t('dia.atividades')}</label>
              <div className="atividades-edit">
                {atividades.map((a, i) => (
                  <div key={i} className="atividade-row">
                    <span className="atividade-bullet">•</span>
                    <input type="text" value={a.texto}
                           onChange={(e) => atualizarAtividade(i, 'texto', e.target.value)}
                           placeholder={window.t('dia.atividadePh', { n: i + 1 })} />
                    <button className="btn-remover" onClick={() => removerAtividade(i)} aria-label={window.t('dia.remover')}>✕</button>
                  </div>
                ))}
                <button className="btn-adicionar" onClick={adicionarAtividade}>
                  {window.t('dia.adicionarAtividade')}
                </button>
              </div>
            </div>

            <div className="campo">
              <label>📦 {window.t('dia.materiais')} <span style={{ fontWeight: 400, textTransform: 'none', letterSpacing: 0, fontSize: 12, fontStyle: 'italic', color: 'var(--ink-soft)' }}>{window.t('dia.materiaisHint')}</span></label>
              <textarea value={materiais} onChange={(e) => setMateriais(e.target.value)}
                        placeholder={window.t('dia.materiaisPh')} />
            </div>

            <div className="campo">
              <label>🎨 {window.t('dia.emojiDia')}</label>
              <div className="emoji-picker">
                {[...EMOJIS_DIA_DM, ...EMOJIS_EXTRA].map((e, i) => (
                  <button key={i} type="button" className={`emoji-opt ${emoji === e ? 'sel' : ''}`}
                          onClick={() => setEmoji(e)}>{e}</button>
                ))}
              </div>
            </div>

            <button className="btn-concluir" onClick={salvarSemCelebrar}>
              💾 {existente ? window.t('dia.salvarAlteracoes') : window.t('dia.salvarAula')}
            </button>
            {existente && (
              <button className="btn-secundario btn-cancelar" onClick={() => setModo('ver')}>
                {window.t('dia.cancelarEdicao')}
              </button>
            )}
          </>
        )}

        {fotoAberta && <FotoViewer foto={fotoAberta} onClose={() => setFotoAberta(null)} />}
      </div>
    </div>
  );
}

window.DiaModal = DiaModal;