import { useState } from 'react';
import { useT } from '../i18n/LanguageContext';
import { shouldSuggestWalletBrowser, buildWalletDeepLinks } from '../utils/walletBrowser';
import { usePolymarketAuth } from '../hooks/usePolymarketAuth';

const DISMISS_KEY = 'wallet_browser_banner_dismissed';

// Prompts mobile users (without an injected wallet) to reopen the dApp inside
// their wallet's in-app browser, where signing works natively and never loses
// the WalletConnect signature response.
export default function WalletBrowserBanner() {
  const { t } = useT();
  const { isAuthenticated } = usePolymarketAuth();
  const [dismissed, setDismissed] = useState(
    () => sessionStorage.getItem(DISMISS_KEY) === '1',
  );

  // Already signed → the reliable path worked, no need to nag.
  if (isAuthenticated || dismissed || !shouldSuggestWalletBrowser()) return null;

  const links = buildWalletDeepLinks();

  const dismiss = () => {
    sessionStorage.setItem(DISMISS_KEY, '1');
    setDismissed(true);
  };

  return (
    <div className="wb-banner">
      <button className="wb-banner-close" onClick={dismiss} aria-label={t('wbb.close')}>×</button>
      <p className="wb-banner-title">{t('wbb.title')}</p>
      <p className="wb-banner-text">
        {t('wbb.body')}
      </p>
      <div className="wb-banner-actions">
        {links.map(l => (
          <a key={l.name} className="wb-banner-btn" href={l.url} rel="noopener noreferrer">
            {l.name}
          </a>
        ))}
      </div>
    </div>
  );
}