/**
 * PWA Install Banner Component
 * Shows a banner prompting users to install the app
 */

import { Download, Smartphone } from 'lucide-react';
import { Button } from '@veza/design-system';
import { usePWAInstallBanner } from '@/hooks/usePWA';
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';

export function PWAInstallBanner() {
  const { showBanner, isInstalling, handleInstall, handleDismiss } =
    usePWAInstallBanner();
  const { t } = useTranslation();

  if (!showBanner) {
    return null;
  }

  return (
    <div
      className={cn(
        'fixed bottom-8 right-8 z-50 w-80 glass-hud rounded-2xl border-white/10 p-6 shadow-2xl animate-slideInRight hud-corner group overflow-hidden',
        'before:absolute before:inset-0 before:bg-gradient-to-br before:from-kodo-cyan/5 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity',
      )}
    >
      <div className="flex flex-col gap-4 relative z-10">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-kodo-steel/10 flex items-center justify-center border border-kodo-steel/30 animate-pulse-glow">
              <Smartphone className="h-4 w-4 text-kodo-steel" />
            </div>
            <div>
              <div className="text-hud">System.Uplink</div>
              <h3 className="font-display font-black text-xs text-white uppercase tracking-wider">
                {t('pwa.install.title', 'Native_Access')}
              </h3>
            </div>
          </div>
          <button
            onClick={handleDismiss}
            className="p-1 px-2 rounded-md bg-white/5 text-kodo-secondary hover:text-white transition-all text-[10px] font-mono border border-transparent hover:border-white/10"
          >
            DISMISS
          </button>
        </div>

        <p className="text-[11px] font-mono text-white/50 leading-relaxed uppercase tracking-tighter">
          {t(
            'pwa.install.description',
            'ESTABLISH_LOCAL_UPLINK_FOR_LOW_LATENCY_OPERATIONS',
          )}
        </p>

        <div className="flex gap-2">
          <Button
            variant="gaming"
            className="flex-1 h-9 text-[10px] font-black font-mono tracking-widest bg-kodo-cyan group hover:shadow-neon-cyan/40 transition-shadow"
            onClick={handleInstall}
            disabled={isInstalling}
          >
            <Download className="h-3.5 w-3.5 mr-2 group-hover:translate-y-0.5 transition-transform" />
            {isInstalling ? 'RUNNING...' : 'INITIATE_INSTALL'}
          </Button>
        </div>

        <div className="absolute -bottom-8 -right-8 w-16 h-16 bg-kodo-steel/10 blur-2xl rounded-full" />
      </div>
    </div>
  );
}

/**
 * PWA Update Banner Component
 * Shows a banner when app update is available
 */
export function PWAUpdateBanner() {
  // This would need to be implemented with the PWA hook
  // For now, returning null as it requires more complex state management

  return null;
}

/**
 * Offline Banner Component
 * Shows when the app is offline
 */
export function OfflineBanner() {
  // This would integrate with the offline detection hook
  // For now, returning null as it requires more complex state management

  return null;
}