import { useState, useEffect } from 'react';
import { isElectron } from '../../platform/platform';
import { useT } from '../../i18n';

interface UpdateError {
  message: string;
  releaseUrl: string;
}

/**
 * Aviso de falha na atualização automática, com link para baixar à mão.
 *
 * O caso de sucesso ("já baixou, é só reiniciar") ficava aqui também, e
 * aparecia junto com o UpdateBanner — dois avisos da mesma coisa, um deles em
 * inglês. Esse pedaço saiu; sucesso agora é só do UpdateBanner.
 */
export function UpdateToast() {
  const t = useT();
  const [failedUpdate, setFailedUpdate] = useState<UpdateError | null>(null);

  useEffect(() => {
    if (!isElectron() || !window.backspace) return;
    window.backspace.onUpdateError((error) => setFailedUpdate(error));
    // Um download que dá certo apaga o erro anterior: o aviso de falha não pode
    // sobreviver a uma tentativa bem-sucedida.
    window.backspace.onUpdateDownloaded(() => setFailedUpdate(null));
  }, []);

  if (!failedUpdate) return null;

  return (
    <div className="fixed bottom-6 left-6 z-[300] animate-slide-up">
      <div className="glass-pill rounded-xl px-4 py-3 flex items-center gap-3 max-w-[380px]">
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-txt-primary">{t('update.failed')}</p>
          <p className="text-xs text-txt-secondary truncate">{t('update.failedBody')}</p>
        </div>
        <a
          href={failedUpdate.releaseUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="shrink-0 px-3 py-1.5 text-xs font-medium rounded-lg bg-accent-primary hover:bg-accent-primary/80 text-white transition-colors"
        >
          {t('update.download')}
        </a>
        <button
          onClick={() => setFailedUpdate(null)}
          className="shrink-0 p-1 text-txt-tertiary hover:text-txt-secondary transition-colors"
          aria-label={t('update.dismiss')}
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  );
}