"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { X } from "lucide-react"

export function InstallPrompt() {
  const [show, setShow] = useState(false)
  const [isIOS, setIsIOS] = useState(false)
  const [isStandalone, setIsStandalone] = useState(false)

  useEffect(() => {
    // Prüfe ob bereits als PWA installiert
    const standalone = window.matchMedia('(display-mode: standalone)').matches ||
                      (window.navigator as any).standalone ||
                      document.referrer.includes('android-app://')
    setIsStandalone(standalone)

    // Prüfe iOS
    const isIOSDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
    setIsIOS(isIOSDevice)

    // Zeige Prompt nur wenn nicht bereits installiert und nicht bereits geschlossen
    const dismissed = localStorage.getItem('install-prompt-dismissed')
    if (!standalone && !dismissed) {
      // Verzögert anzeigen
      setTimeout(() => setShow(true), 3000)
    }
  }, [])

  const handleDismiss = () => {
    setShow(false)
    localStorage.setItem('install-prompt-dismissed', 'true')
  }

  if (!show || isStandalone) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-card border-t shadow-lg safe-area-bottom">
      <div className="flex items-center justify-between max-w-lg mx-auto">
        <div className="flex-1">
          <p className="text-sm font-medium">
            WrestleDesk als App installieren
          </p>
          {isIOS ? (
            <p className="text-xs text-muted-foreground mt-0.5">
              Tippe auf Teilen → "Zum Home Screen hinzufügen"
            </p>
          ) : (
            <p className="text-xs text-muted-foreground mt-0.5">
              Installieren für schnellen Zugriff
            </p>
          )}
        </div>
        <div className="flex items-center gap-2">
          <Button size="sm" variant="ghost" onClick={handleDismiss}>
            <X className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}