import { trpc } from "@/lib/trpc";
import { UNAUTHED_ERR_MSG } from '@shared/const';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink, TRPCClientError } from "@trpc/client";
import { createRoot } from "react-dom/client";
import superjson from "superjson";
import { HelmetProvider } from "react-helmet-async";
import App from "./App";
import { getLoginUrl } from "./const";
import "./index.css";

// Bildschutz: Rechtsklick + Drag-and-Drop + Tastenkürzel sperren (Super-Image-Skill Ebene 1)
if (typeof window !== 'undefined') {
  // Rechtsklick auf Bilder blockieren
  document.addEventListener('contextmenu', (e) => {
    if ((e.target as HTMLElement).tagName === 'IMG') {
      e.preventDefault();
    }
  });

  // Drag-and-Drop von Bildern blockieren
  document.addEventListener('dragstart', (e) => {
    if ((e.target as HTMLElement).tagName === 'IMG') {
      e.preventDefault();
    }
  });

  // Strg+S / Cmd+S (Seite speichern) blockieren
  document.addEventListener('keydown', (e) => {
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
      e.preventDefault();
    }
  });

  // VIDEO-SCHUTZ: Rechtsklick + Drag-and-Drop auf Videos blockieren (Super-Video-Skill Ebene 1)
  document.addEventListener('contextmenu', (e) => {
    if ((e.target as HTMLElement).tagName === 'VIDEO') {
      e.preventDefault();
    }
  });

  document.addEventListener('dragstart', (e) => {
    if ((e.target as HTMLElement).tagName === 'VIDEO') {
      e.preventDefault();
    }
  });
}

const queryClient = new QueryClient();

const redirectToLoginIfUnauthorized = (error: unknown) => {
  if (!(error instanceof TRPCClientError)) return;
  if (typeof window === "undefined") return;

  const isUnauthorized = error.message === UNAUTHED_ERR_MSG;

  if (!isUnauthorized) return;

  window.location.href = getLoginUrl();
};

queryClient.getQueryCache().subscribe(event => {
  if (event.type === "updated" && event.action.type === "error") {
    const error = event.query.state.error;
    redirectToLoginIfUnauthorized(error);
    console.error("[API Query Error]", error);
  }
});

queryClient.getMutationCache().subscribe(event => {
  if (event.type === "updated" && event.action.type === "error") {
    const error = event.mutation.state.error;
    redirectToLoginIfUnauthorized(error);
    console.error("[API Mutation Error]", error);
  }
});

const trpcClient = trpc.createClient({
  links: [
    httpBatchLink({
      url: "/api/trpc",
      transformer: superjson,
      fetch(input, init) {
        return globalThis.fetch(input, {
          ...(init ?? {}),
          credentials: "include",
        });
      },
    }),
  ],
});

// ─── Globales Bild-Fade-in + Lazy Loading ─────────────────────────────
if (typeof window !== 'undefined') {
  const initImageFade = () => {
    document.querySelectorAll<HTMLImageElement>('img:not([loading="eager"]):not([data-no-fade])').forEach(img => {
      // Bereits gecacht: sofort anzeigen
      if (img.complete && img.naturalWidth > 0) {
        img.classList.add('img-cached');
        return;
      }
      // Native Lazy Loading setzen (falls nicht bereits gesetzt)
      if (!img.loading) img.loading = 'lazy';
      // Fade-in nach dem Laden
      img.addEventListener('load', () => img.classList.add('img-loaded'), { once: true });
      img.addEventListener('error', () => img.classList.add('img-loaded'), { once: true }); // Fehler: trotzdem einblenden
    });
  };

  // Initial + nach SPA-Navigation
  document.addEventListener('DOMContentLoaded', initImageFade);
  const origPush = history.pushState.bind(history);
  history.pushState = (...args) => { origPush(...args); setTimeout(initImageFade, 200); };
  window.addEventListener('popstate', () => setTimeout(initImageFade, 200));
}

// ─── Manus Analytics (cookielos, DSGVO-konform) ─────────────────────────────
// Trackt alle Besucher ohne Cookies — kein Consent nötig
// Ergänzt GA4 als vollständige Besucherzahlen (auch für Ablehner)
if (typeof window !== 'undefined') {
  const analyticsEndpoint = import.meta.env.VITE_ANALYTICS_ENDPOINT;
  const websiteId = import.meta.env.VITE_ANALYTICS_WEBSITE_ID;

  if (analyticsEndpoint && websiteId) {
    // Pageview beim ersten Laden
    const trackPageview = () => {
      fetch(`${analyticsEndpoint}/api/send`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          payload: {
            website: websiteId,
            url: window.location.pathname + window.location.search,
            referrer: document.referrer,
            title: document.title,
            language: navigator.language,
            screen: `${window.screen.width}x${window.screen.height}`,
          },
          type: 'pageview',
        }),
      }).catch(() => {}); // Silent fail
    };

    // Initial pageview
    window.addEventListener('load', trackPageview);

    // SPA-Navigation tracken (History API)
    const originalPushState = history.pushState.bind(history);
    history.pushState = (...args) => {
      originalPushState(...args);
      setTimeout(trackPageview, 100);
    };
    window.addEventListener('popstate', () => setTimeout(trackPageview, 100));
  }
}

// Register Service Worker for PWA functionality
if ('serviceWorker' in navigator && import.meta.env.PROD) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/sw.js')
      .then((registration) => {
        console.log('[SW] Service Worker registered:', registration.scope);
      })
      .catch((error) => {
        console.error('[SW] Service Worker registration failed:', error);
      });
  });
}

createRoot(document.getElementById("root")!).render(
  <HelmetProvider>
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </trpc.Provider>
  </HelmetProvider>
);