import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { RefreshCw, X } from 'lucide-react';
import { useVersionCheck } from '../hooks/useVersionCheck';

/**
 * Zeigt ein dezentes Banner, sobald nach einem Deploy eine neue Frontend-
 * Version verfügbar ist (siehe useVersionCheck). "Jetzt neu laden" lädt die
 * Seite neu und holt damit den frischen Code; "später" blendet für die
 * laufende Session aus.
 *
 * Das Banner klebt (`sticky top-0`) an der Viewport-Oberkante, bleibt beim
 * Scrollen also stehen. Damit die seitenspezifischen Sticky-Header
 * (ContractDetail/ContractForm mit `top-[var(--app-banner-h)]`) nicht darunter
 * verschwinden, meldet das Banner seine gemessene Höhe als CSS-Variable
 * `--app-banner-h` am <html>-Element; ohne Banner ist sie 0px.
 */
export default function UpdateBanner() {
  const updateAvailable = useVersionCheck();
  const [dismissed, setDismissed] = useState(false);
  const barRef = useRef<HTMLDivElement>(null);

  const visible = updateAvailable && !dismissed;

  useLayoutEffect(() => {
    const root = document.documentElement;
    if (!visible) {
      root.style.setProperty('--app-banner-h', '0px');
      return;
    }
    const el = barRef.current;
    if (!el) return;
    const apply = () => root.style.setProperty('--app-banner-h', `${el.offsetHeight}px`);
    apply();
    const ro = new ResizeObserver(apply);
    ro.observe(el);
    return () => {
      ro.disconnect();
      root.style.setProperty('--app-banner-h', '0px');
    };
  }, [visible]);

  // Sicherstellen, dass die Variable auch beim Unmount zurückgesetzt wird.
  useEffect(() => () => {
    document.documentElement.style.setProperty('--app-banner-h', '0px');
  }, []);

  if (!visible) return null;

  return (
    <div ref={barRef} className="sticky top-0 z-40 bg-blue-600 text-white px-6 py-2.5">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-2 text-sm">
          <RefreshCw className="w-4 h-4 flex-shrink-0" />
          <span>Eine neue Version ist verfügbar. Bitte neu laden, um sie zu nutzen.</span>
        </div>
        <div className="flex items-center gap-2 flex-shrink-0">
          <button
            onClick={() => window.location.reload()}
            className="px-3 py-1 text-sm font-medium bg-white text-blue-700 rounded hover:bg-blue-50 transition-colors"
          >
            Jetzt neu laden
          </button>
          <button
            onClick={() => setDismissed(true)}
            className="p-1 text-white/80 hover:text-white rounded"
            title="Später"
            aria-label="Hinweis ausblenden"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}
