"use client";

import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { useTranslation } from '@/lib/i18n/context';

const DISMISS_KEY = 'yumder_pwa_banner_dismissed_at';
// "Nach ein paar Tagen wieder einblenden" - 3 Tage als Startwert, bei Bedarf
// anpassbar. Reine Zeitspanne, kein echtes "schon installiert?"-Tracking -
// das PLATZHALTER-Verhalten des Laden-Buttons unten ist bewusst vorlaeufig.
const REOFFER_AFTER_MS = 3 * 24 * 60 * 60 * 1000;

function shouldShowBanner(): boolean {
  if (typeof window === 'undefined') return false;
  const raw = localStorage.getItem(DISMISS_KEY);
  if (!raw) return true;
  const dismissedAt = Number(raw);
  if (!Number.isFinite(dismissedAt)) return true;
  return Date.now() - dismissedAt > REOFFER_AFTER_MS;
}

/**
 * Dezenter Sticky-Banner unten am Start-Screen, der zur PWA-Installation
 * einlaedt. Persistiert den letzten "Schliessen"-Zeitpunkt im LocalStorage
 * und blendet sich nach REOFFER_AFTER_MS automatisch wieder ein, statt
 * dauerhaft verschwunden zu bleiben.
 *
 * PLATZHALTER: Der "Laden"-Button loest aktuell noch KEINE echte
 * Installation aus (kein beforeinstallprompt-Handling/.prompt()-Aufruf) -
 * das liefern wir bewusst als naechsten Schritt nach. Fuer jetzt schliesst
 * er das Banner identisch zum X, damit er kein komplett totes UI-Element
 * ist, ohne eine Funktion zu versprechen, die er noch nicht einloesen kann.
 *
 * TEMPORAER DEAKTIVIERT (13.08.): Banner zeigte sich auf Android
 * unschliessbar an und ueberlappte mit Chromes eigenem Install-Prompt.
 * Re-aktivieren erst nach Platform-Detection (Android ausblenden, iOS
 * mittig statt am unteren Rand zeigen). Bis dahin frueher Return, Rest
 * der Komponente bleibt als Vorlage fuer die naechste Iteration erhalten.
 */
export function PwaInstallBanner() {
  return null;

  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setVisible(shouldShowBanner());
    setMounted(true);
  }, []);

  function dismiss() {
    localStorage.setItem(DISMISS_KEY, String(Date.now()));
    setVisible(false);
  }

  if (!mounted) return null;

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 20 }}
          transition={{ duration: 0.3 }}
          className="fixed bottom-[calc(1.5rem+var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))] left-1/2 -translate-x-1/2 w-[calc(100%-3rem)] max-w-md bg-neutral-900 border border-white/10 shadow-2xl rounded-2xl p-4 flex items-center justify-between z-50"
        >
          <div className="flex items-center gap-3 min-w-0">
            <div className="w-10 h-10 bg-gradient-to-tr from-yumder-pink to-yumder-teal rounded-xl flex items-center justify-center shrink-0">
              <svg viewBox="0 0 24 24" className="w-5 h-5 text-white" fill="currentColor" aria-hidden="true">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
              </svg>
            </div>
            <div className="flex flex-col min-w-0">
              <span className="text-sm font-bold text-neutral-100 truncate">{t.pwaBanner.title}</span>
              <span className="text-[10px] text-neutral-400 truncate">{t.pwaBanner.subtitle}</span>
            </div>
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <button
              type="button"
              onClick={dismiss}
              aria-label={t.pwaBanner.dismissAriaLabel}
              className="p-2 text-neutral-500 hover:text-neutral-300 transition-colors"
            >
              <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
            <button
              type="button"
              onClick={dismiss}
              className="bg-white hover:bg-neutral-200 text-neutral-900 text-xs font-bold px-3 py-1.5 rounded-lg shadow-sm transition-colors"
            >
              {t.pwaBanner.installButton}
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}