// FilhosModal — gerenciar filhos da conta (adicionar, editar, foto, remover)
const { useState: useStateFL, useRef: useRefFL } = React;

function FilhosModal({ filhos, onClose, onMudou, setErro }) {
  // Form de novo/edição
  const [editandoId, setEditandoId] = useStateFL(null);
  const [nome, setNome] = useStateFL('');
  const [nascimento, setNascimento] = useStateFL(''); // YYYY-MM-DD
  const [salvando, setSalvando] = useStateFL(false);
  const fileRef = useRefFL(null);
  const [uploadAlvo, setUploadAlvo] = useStateFL(null);

  const limparForm = () => { setEditandoId(null); setNome(''); setNascimento(''); };

  const comecarEdicao = (f) => {
    setEditandoId(f.id);
    setNome(f.nome || '');
    setNascimento(f.nascimento || '');
  };

  const salvar = async () => {
    const n = nome.trim();
    if (!n) { setErro(window.t('fl.deNome')); return; }
    setSalvando(true);
    try {
      await window.SoluApi.salvarFilho({
        id: editandoId || undefined,
        nome: n,
        nascimento: nascimento || ''
      });
      limparForm();
      onMudou();
    } catch (e) {
      setErro(window.t('erro.salvar'));
    } finally {
      setSalvando(false);
    }
  };

  const remover = async (f) => {
    if (!confirm(window.t('fl.removerConfirm', { nome: f.nome }))) return;
    try {
      await window.SoluApi.apagarFilho(f.id);
      if (editandoId === f.id) limparForm();
      onMudou();
    } catch (e) {
      setErro(window.t('fl.removerErro'));
    }
  };

  const escolherFoto = (filhoId) => {
    setUploadAlvo(filhoId);
    if (fileRef.current) { fileRef.current.value = ''; fileRef.current.click(); }
  };

  const onArquivo = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file || !uploadAlvo) return;
    if (!file.type.startsWith('image/')) { setErro(window.t('fl.escolhaImagem')); return; }
    try {
      const envio = await comprimirArquivo(file, 600, 0.85);
      await window.SoluApi.uploadFotoFilho(uploadAlvo, envio);
      setUploadAlvo(null);
      onMudou();
    } catch (err) {
      setErro(window.t('fl.fotoEnvioErro'));
    }
  };

  // Idade calculada na hora a partir do nascimento; fallback pro campo legado 'idade'
  const idadeDoFilho = (f) => {
    if (f.nascimento) {
      const i = window.SoluIdade && window.SoluIdade.calcularIdade(f.nascimento);
      if (i) return i.texto;
    }
    return f.idade || '';
  };

  // Data máxima permitida: hoje (não dá pra cadastrar nascimento futuro)
  const hojeISO = new Date().toISOString().slice(0, 10);

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal filhos-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2 className="filhos-titulo">👨‍👩‍👧‍👦 {window.t('fl.titulo')}</h2>
          <button className="modal-close" onClick={onClose} aria-label={window.t('dia.fechar')}>×</button>
        </div>

        <div className="filhos-lista">
          {filhos.length === 0 && (
            <p className="filhos-vazio">{window.t('fl.vazio')}</p>
          )}
          {filhos.map(f => {
            const idadeTxt = idadeDoFilho(f);
            const aniv = f.nascimento && window.SoluIdade
              ? window.SoluIdade.statusAniversario(f.nascimento, f.nome)
              : null;
            return (
              <div className="filho-item" key={f.id}>
                <button className="filho-foto-btn" onClick={() => escolherFoto(f.id)} title={window.t('fl.trocarFoto')}>
                  {f.fotoSrc
                    ? <img className="filha-avatar" src={f.fotoSrc} alt={f.nome} />
                    : <div className="filha-avatar filha-avatar-vazio">{(f.nome || '?').charAt(0).toUpperCase()}</div>}
                  <span className="filho-foto-edit">📷</span>
                </button>
                <div className="filho-item-info">
                  <span className="filha-pill-nome">{f.nome}</span>
                  {idadeTxt ? <span className="filha-pill-idade">{idadeTxt}</span> : null}
                  {aniv && (aniv.tipo === 'hoje' || aniv.tipo === 'semana') && (
                    <span className="filho-aniv-mini">{aniv.mensagem}</span>
                  )}
                </div>
                <div className="filho-item-acoes">
                  <button className="btn-mini" onClick={() => comecarEdicao(f)}>✏️</button>
                  <button className="btn-mini" onClick={() => remover(f)}>🗑️</button>
                </div>
              </div>
            );
          })}
        </div>

        <div className="filho-form">
          <div className="filho-form-titulo">{editandoId ? window.t('dia.editar') : window.t('fl.adicionarFilho')}</div>
          <div className="filho-form-campos">
            <input
              className="filho-input"
              placeholder={window.t('fl.nomePh')}
              value={nome}
              onChange={(e) => setNome(e.target.value)}
            />
            <input
              className="filho-input filho-input-data"
              type="date"
              max={hojeISO}
              value={nascimento}
              onChange={(e) => setNascimento(e.target.value)}
              aria-label={window.t('fl.nascimento')}
            />
          </div>
          {nascimento && window.SoluIdade && window.SoluIdade.calcularIdade(nascimento) && (
            <div className="filho-form-preview">
              {window.SoluIdade.calcularIdade(nascimento).texto}
            </div>
          )}
          <div className="filho-form-botoes">
            <button className="btn-concluir" onClick={salvar} disabled={salvando}>
              {salvando ? window.t('fl.salvando') : (editandoId ? window.t('fl.salvar') : window.t('fl.adicionar'))}
            </button>
            {editandoId && (
              <button className="btn-secundario" onClick={limparForm}>{window.t('dia.cancelar')}</button>
            )}
          </div>
          {!editandoId && (
            <p className="filho-dica">{window.t('fl.dica')}</p>
          )}
        </div>

        <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={onArquivo} />
      </div>
    </div>
  );
}

// Comprime um File de imagem (quadrado pra avatar) e devolve um Blob JPEG.
function comprimirArquivo(file, maxLado = 600, quality = 0.85) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const img = new Image();
      img.onload = () => {
        // recorte quadrado central
        const lado = Math.min(img.width, img.height);
        const sx = (img.width - lado) / 2;
        const sy = (img.height - lado) / 2;
        const out = Math.min(lado, maxLado);
        const canvas = document.createElement('canvas');
        canvas.width = out; canvas.height = out;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, sx, sy, lado, lado, 0, 0, out, out);
        canvas.toBlob(
          (blob) => blob ? resolve(new File([blob], (file.name || 'foto') + '.jpg', { type: 'image/jpeg' })) : reject(new Error('toBlob falhou')),
          'image/jpeg', quality
        );
      };
      img.onerror = reject;
      img.src = reader.result;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

window.FilhosModal = FilhosModal;