// FotoModal — modal de upload de fotos das atividades
const { useState: useStateFM, useRef: useRefFM } = React;

function FotoModal({ dia, nomeMes, dados, onAdicionar, onRemover, onEditarLegenda, onClose, onVoltarParaDia }) {
  const [legenda, setLegenda] = useStateFM('');
  const [pendentes, setPendentes] = useStateFM([]); // [{src, legenda}]
  const [fotoAberta, setFotoAberta] = useStateFM(null);
  const fileInputRef = useRefFM(null);

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

  const handleFiles = async (files) => {
    if (!files || files.length === 0) return;
    const novas = [];
    for (const file of files) {
      if (!file.type.startsWith('image/')) continue;
      try {
        const src = await fileToDataUrl(file);
        // Comprimir se for muito grande
        const comprimida = await comprimirImagem(src, 1200, 0.82);
        novas.push({ src: comprimida, legenda: '', nome: file.name, ts: Date.now() });
      } catch (e) {
        console.warn('Erro lendo foto', e);
      }
    }
    if (novas.length > 0) {
      setPendentes(prev => [...prev, ...novas]);
    }
  };

  const removerPendente = (i) => setPendentes(pendentes.filter((_, idx) => idx !== i));

  const setLegendaPendente = (i, txt) => {
    setPendentes(pendentes.map((p, idx) => idx === i ? { ...p, legenda: txt } : p));
  };

  const salvarTudo = () => {
    if (pendentes.length > 0) onAdicionar(pendentes);
    onClose();
  };

  const aplicarLegendaTudo = () => {
    if (!legenda.trim()) return;
    setPendentes(pendentes.map(p => ({ ...p, legenda: legenda.trim() })));
  };

  const onPaste = (e) => {
    const items = (e.clipboardData || {}).items || [];
    const files = [];
    for (const it of items) {
      if (it.kind === 'file') {
        const f = it.getAsFile();
        if (f) files.push(f);
      }
    }
    if (files.length > 0) {
      e.preventDefault();
      handleFiles(files);
    }
  };

  const onDrop = (e) => {
    e.preventDefault();
    e.currentTarget.classList.remove('drag-over');
    handleFiles(Array.from(e.dataTransfer.files || []));
  };

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

        <div className="modal-hero">
          <div className="emoji-circle" style={{ background: 'var(--mel-claro)', borderColor: 'var(--mel)', fontSize: 38 }}>
            📸
          </div>
          <div>
            <div className="subtipo">{window.t('dia.subtipo', { dia, nomeMes })}</div>
            <h2>{window.t('foto.titulo')}</h2>
            <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 4 }}>
              {window.t('foto.sub')}
            </div>
          </div>
        </div>

        {/* Dropzone */}
        <div
          className="dropzone"
          onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add('drag-over'); }}
          onDragLeave={(e) => e.currentTarget.classList.remove('drag-over')}
          onDrop={onDrop}
          onClick={() => fileInputRef.current?.click()}
        >
          <div className="dropzone-emoji">🖼️</div>
          <div className="dropzone-titulo">{window.t('foto.arraste')}</div>
          <div className="dropzone-sub">{window.t('foto.arrasteSub')}</div>
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            multiple
            style={{ display: 'none' }}
            onChange={(e) => handleFiles(Array.from(e.target.files || []))}
          />
        </div>

        {/* Pendentes (a serem salvas) */}
        {pendentes.length > 0 && (
          <>
            <h4 className="secao-titulo" style={{ marginTop: 22 }}>
              📂 {window.t('foto.novas', { n: pendentes.length })}
            </h4>

            <div className="campo" style={{ marginBottom: 10 }}>
              <div className="legenda-comum">
                <input
                  type="text"
                  placeholder={window.t('foto.legendaTodas')}
                  value={legenda}
                  onChange={(e) => setLegenda(e.target.value)}
                />
                <button className="btn-adicionar" onClick={aplicarLegendaTudo}>
                  {window.t('foto.aplicar')}
                </button>
              </div>
            </div>

            <div className="fotos-grid pendentes">
              {pendentes.map((p, i) => (
                <div key={i} className="foto-pendente">
                  <img src={p.src} alt={p.nome} />
                  <input
                    type="text"
                    className="foto-legenda-input"
                    placeholder={window.t('foto.legendaPh')}
                    value={p.legenda}
                    onChange={(e) => setLegendaPendente(i, e.target.value)}
                  />
                  <button className="foto-remover" onClick={() => removerPendente(i)}>✕</button>
                </div>
              ))}
            </div>
          </>
        )}

        {/* Fotos já salvas */}
        {fotosExistentes.length > 0 && (
          <>
            <h4 className="secao-titulo" style={{ marginTop: 22 }}>
              📚 {window.t('foto.jaSalvas', { n: fotosExistentes.length })}
            </h4>
            <div className="fotos-grid">
              {fotosExistentes.map((f, i) => (
                <div key={f.id || i} className="foto-pendente foto-salva">
                  <img src={f.src} alt={f.legenda || `Foto ${i + 1}`}
                       onClick={() => setFotoAberta(f)} />
                  <input
                    type="text"
                    className="foto-legenda-input"
                    placeholder={window.t('foto.legendaPh')}
                    defaultValue={f.legenda || ''}
                    onBlur={(e) => {
                      const v = e.target.value.trim();
                      if (v !== (f.legenda || '')) onEditarLegenda(i, v);
                    }}
                    onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
                  />
                  <button
                    className="foto-remover"
                    onClick={() => { if (confirm(window.t('dia.removerFoto'))) onRemover(i); }}
                  >✕</button>
                </div>
              ))}
            </div>
          </>
        )}

        <button
          className="btn-concluir"
          onClick={salvarTudo}
          style={{ marginTop: 24 }}
          disabled={pendentes.length === 0 && fotosExistentes.length === 0}
        >
          {pendentes.length > 0
            ? `💾 ${window.t('foto.salvar', { n: pendentes.length })}`
            : window.t('foto.pronto')}
        </button>

        <button className="btn-secundario btn-cancelar" onClick={onClose}>
          {window.t('foto.fechar')}
        </button>

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

function fileToDataUrl(file) {
  return new Promise((resolve, reject) => {
    const r = new FileReader();
    r.onload = () => resolve(r.result);
    r.onerror = reject;
    r.readAsDataURL(file);
  });
}

function comprimirImagem(dataUrl, maxLado = 1200, quality = 0.82) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      let { width, height } = img;
      const escala = Math.min(1, maxLado / Math.max(width, height));
      width  = Math.round(width * escala);
      height = Math.round(height * escala);
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      resolve(canvas.toDataURL('image/jpeg', quality));
    };
    img.onerror = () => resolve(dataUrl);
    img.src = dataUrl;
  });
}

window.FotoModal = FotoModal;