// ContaModal — perfil da mãe (foto), papel, convites (gerar/compartilhar) e sair.
const { useState: useStateCT, useEffect: useEffectCT, useRef: useRefCT } = React;

// Comprime e recorta quadrado (avatar) — mesmo padrão das fotos das filhas.
function comprimirPerfil(file, maxLado = 600, quality = 0.85) {
  return new Promise((resolve) => {
    const r = new FileReader();
    r.onload = () => {
      const img = new Image();
      img.onload = () => {
        const lado = Math.min(img.width, img.height);
        const sx = (img.width - lado) / 2, sy = (img.height - lado) / 2;
        const out = Math.min(maxLado, lado);
        const canvas = document.createElement('canvas');
        canvas.width = out; canvas.height = out;
        canvas.getContext('2d').drawImage(img, sx, sy, lado, lado, 0, 0, out, out);
        canvas.toBlob((blob) => resolve(blob || file), 'image/jpeg', quality);
      };
      img.onerror = () => resolve(file);
      img.src = r.result;
    };
    r.onerror = () => resolve(file);
    r.readAsDataURL(file);
  });
}

const PAPEIS_CT = {
  founder: { chave: 'conta.papelFounder', classe: 'papel-founder' },
  admin:   { chave: 'conta.papelAdmin', classe: 'papel-admin' },
  mae:     { chave: null, classe: '' },
};

function ContaModal({ auth, onClose, onLogout, onAtualizarPerfil, idioma, onTrocarIdioma }) {
  const Seletor = window.SeletorIdioma;
  const [perfil, setPerfil] = useStateCT(auth || null);
  const [convites, setConvites] = useStateCT([]);
  const [verPendentes, setVerPendentes] = useStateCT(false); // expandir lista de convites pendentes
  const [carregando, setCarregando] = useStateCT(true);
  const [gerando, setGerando] = useStateCT(false);
  const [copiado, setCopiado] = useStateCT(null);
  const [erro, setErro] = useStateCT(null);
  const [fotoLocal, setFotoLocal] = useStateCT(null); // override após upload/remover
  const [fotoOcupado, setFotoOcupado] = useStateCT(false);
  const fileRef = useRefCT(null);

  const fotoAtual = fotoLocal !== null ? fotoLocal : ((auth && auth.foto) || (perfil && perfil.foto) || null);

  const escolherFoto = () => { if (!fotoOcupado && fileRef.current) fileRef.current.click(); };
  const aoEscolherFoto = async (e) => {
    const file = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!file || !file.type.startsWith('image/')) return;
    setFotoOcupado(true); setErro(null);
    try {
      const blob = await comprimirPerfil(file);
      const arq = new File([blob], 'perfil.jpg', { type: 'image/jpeg' });
      const { fotoSrc } = await window.SoluApi.uploadFotoPerfil(arq);
      setFotoLocal(fotoSrc);
      if (onAtualizarPerfil) onAtualizarPerfil({ foto: fotoSrc });
    } catch (_) {
      setErro(window.t('fl.fotoEnvioErro'));
    } finally { setFotoOcupado(false); }
  };
  const removerFoto = async () => {
    if (fotoOcupado || !confirm(window.t('conta.removerFotoConfirm'))) return;
    setFotoOcupado(true); setErro(null);
    try {
      await window.SoluApi.removerFotoPerfil();
      setFotoLocal('');
      if (onAtualizarPerfil) onAtualizarPerfil({ foto: null });
    } catch (_) {
      setErro(window.t('erro.foto'));
    } finally { setFotoOcupado(false); }
  };

  const ilimitado = perfil && (perfil.role === 'founder' || perfil.role === 'admin');

  const recarregar = async () => {
    try {
      const [me, lista] = await Promise.all([
        window.SoluApi.me().catch(() => null),
        window.SoluApi.listarConvites().catch(() => ({ convites: [] })),
      ]);
      if (me) setPerfil(me);
      setConvites(lista.convites || []);
    } catch (_) { /* mantém o que tem */ }
    finally { setCarregando(false); }
  };

  useEffectCT(() => { recarregar(); }, []);

  const gerar = async () => {
    if (gerando) return;
    setGerando(true); setErro(null);
    try {
      await window.SoluApi.gerarConvite();
      await recarregar();
    } catch (e) {
      setErro(e.message || window.t('conta.gerarErro'));
    } finally { setGerando(false); }
  };

  const mensagemConvite = (token) => window.t('conta.mensagemConvite', { token });

  const compartilhar = async (token) => {
    const texto = mensagemConvite(token);
    if (navigator.share) {
      try { await navigator.share({ text: texto }); return; } catch (_) { /* cancelou ou falhou → tenta copiar */ }
    }
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(texto);
      } else {
        const ta = document.createElement('textarea');
        ta.value = texto; ta.style.position = 'fixed'; ta.style.opacity = '0';
        document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove();
      }
      setCopiado(token);
      setTimeout(() => setCopiado(c => (c === token ? null : c)), 2000);
    } catch (_) {
      window.prompt(window.t('conta.copieConvite'), texto);
    }
  };

  const papel = PAPEIS_CT[(perfil && perfil.role) || 'mae'] || PAPEIS_CT.mae;
  const inicial = ((perfil && perfil.nome) || '?').charAt(0).toUpperCase();
  const disponiveis = convites.filter(c => c.status === 'disponivel');
  const usados = convites.filter(c => c.status === 'usado');

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

        {Seletor && <Seletor idioma={idioma} onTrocar={onTrocarIdioma} className="seletor-conta" />}

        <div className="conta-cabecalho">
          <button type="button" className="conta-avatar conta-avatar-btn" onClick={escolherFoto}
                  disabled={fotoOcupado} title={window.t('fl.trocarFoto')} aria-label={window.t('conta.trocarFotoPerfil')}>
            {fotoAtual ? <img src={fotoAtual} alt="" /> : inicial}
            <span className="conta-avatar-cam">{fotoOcupado ? '…' : '📷'}</span>
          </button>
          <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={aoEscolherFoto} />
          <div>
            <h2 className="conta-nome">{(perfil && perfil.nome) || window.t('header.minhaConta')}</h2>
            <div className="conta-email">{(perfil && perfil.email) || ''}</div>
            {papel.chave && <span className={`conta-papel ${papel.classe}`}>{window.t(papel.chave)}</span>}
            {fotoAtual && (
              <button type="button" className="conta-remover-foto" onClick={removerFoto} disabled={fotoOcupado}>
                {window.t('conta.removerFoto')}
              </button>
            )}
          </div>
        </div>

        <div className="conta-secao">
          <h4 className="secao-titulo">🌱 {window.t('conta.convidar')}</h4>
          <p className="conta-sub">
            {ilimitado
              ? window.t('conta.convitesIlimitados')
              : window.t('conta.convitesRestantes', { n: perfil ? perfil.convites_restantes : '…' })}
          </p>

          <button className="btn-concluir conta-gerar" onClick={gerar}
                  disabled={gerando || (!ilimitado && perfil && perfil.convites_restantes <= 0)}>
            {gerando ? window.t('conta.gerando') : window.t('conta.gerarConvite')}
          </button>
          {erro && <div className="conta-erro">{erro}</div>}

          {carregando ? (
            <div className="conta-vazio">{window.t('conta.carregandoConvites')}</div>
          ) : (
            <>
              {disponiveis.length > 0 && (
                <div className="conta-lista">
                  {(verPendentes ? disponiveis : disponiveis.slice(0, 1)).map(c => (
                    <div key={c.token} className="convite-item">
                      <code className="convite-token">{c.token}</code>
                      <button className="convite-share" onClick={() => compartilhar(c.token)}>
                        {copiado === c.token ? window.t('conta.copiado') : `📤 ${window.t('conta.enviar')}`}
                      </button>
                    </div>
                  ))}
                  {disponiveis.length > 1 && (
                    <button className="conta-ver-mais" onClick={() => setVerPendentes(v => !v)}>
                      {verPendentes ? window.t('conta.verMenos') : window.t('conta.maisPendentes', { n: disponiveis.length - 1 })}
                    </button>
                  )}
                </div>
              )}
              {usados.length > 0 && (
                <div className="conta-entraram">
                  <span className="conta-entraram-titulo">🎉 {window.t('conta.entraram')}</span>
                  <div className="conta-entraram-nomes">
                    {usados.map(c => (
                      <span key={c.token} className="conta-entrou-chip">{c.usado_nome || window.t('conta.entrouSemNome')}</span>
                    ))}
                  </div>
                </div>
              )}
              {disponiveis.length === 0 && usados.length === 0 && (
                <div className="conta-vazio">{window.t('conta.nenhumConvite')}</div>
              )}
            </>
          )}
        </div>

        <button className="btn-secundario conta-sair" onClick={onLogout}>
          {window.t('conta.sair')}
        </button>
      </div>
    </div>
  );
}

window.ContaModal = ContaModal;