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

/**
 * Aviso de que uma atualização já baixou e só falta reiniciar.
 *
 * O processo principal já mostrava uma notificação do sistema, que some sozinha
 * e passa despercebida se a pessoa não estiver olhando. Este aviso fica na
 * janela até ser atendido ou dispensado.
 */
export function UpdateBanner() {
  const t = useT();
  const [version, setVersion] = useState<string | null>(null);
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    if (!isElectron() || !window.backspace?.onUpdateDownloaded) return;
    window.backspace.onUpdateDownloaded((info) => {
      setVersion(info.version);
      // Uma atualização nova reabre o aviso mesmo se a anterior foi dispensada:
      // dispensar significa "agora não", não "nunca mais".
      setDismissed(false);
    });
  }, []);

  if (!version || dismissed) return null;

  return (
    <div className="fixed bottom-4 right-4 z-[400] max-w-[320px] glass rounded-xl shadow-xl p-3.5 animate-slide-up">
      <div className="text-[13px] font-semibold text-txt-primary">{t('update.ready')}</div>
      <p className="text-[12px] text-txt-secondary mt-0.5">
        {t('update.readyVersion', { version })}
      </p>
      <div className="flex gap-2 mt-3">
        <button
          type="button"
          onClick={() => window.backspace?.installUpdate?.()}
          className="px-3 py-1.5 rounded-md text-[12px] font-medium bg-accent-primary text-white hover:brightness-110"
        >
          {t('update.restart')}
        </button>
        <button
          type="button"
          onClick={() => setDismissed(true)}
          className="px-3 py-1.5 rounded-md text-[12px] font-medium bg-interactive-muted text-txt-secondary hover:text-txt-primary"
        >
          {t('update.later')}
        </button>
      </div>
    </div>
  );
}