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

import { X, Download, Smartphone } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { usePWAInstallBanner } from '@/hooks/usePWA';
import { useTranslation } from 'react-i18next';

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

  if (!showBanner) {
    return null;
  }

  return (
    <Card className="fixed bottom-4 left-4 right-4 z-50 border-primary/20 bg-background/95 backdrop-blur-sm md:left-auto md:right-4 md:w-96">
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <div className="flex-shrink-0">
            <Smartphone className="h-6 w-6 text-primary" />
          </div>

          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-sm mb-1">
              {t('pwa.install.title', 'Installer Veza')}
            </h3>
            <p className="text-xs text-muted-foreground mb-3">
              {t(
                'pwa.install.description',
                "Accédez rapidement à Veza depuis votre écran d'accueil",
              )}
            </p>

            <div className="flex gap-2">
              <Button
                size="sm"
                onClick={handleInstall}
                disabled={isInstalling}
                className="flex-1"
              >
                <Download className="h-4 w-4 mr-1" />
                {isInstalling
                  ? t('pwa.install.installing', 'Installation...')
                  : t('pwa.install.button', 'Installer')}
              </Button>

              <Button
                size="sm"
                variant="ghost"
                onClick={handleDismiss}
                disabled={isInstalling}
              >
                {t('pwa.install.later', 'Plus tard')}
              </Button>
            </div>
          </div>

          <Button
            size="sm"
            variant="ghost"
            onClick={handleDismiss}
            disabled={isInstalling}
            className="flex-shrink-0 p-1 h-auto"
          >
            <X className="h-4 w-4" />
            <span className="sr-only">{t('common.close', 'Fermer')}</span>
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

/**
 * 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;
}
