"use client";

import { useEffect, useState } from "react";
import Script from "next/script";

interface AnalyticsTrackerProps {
  settings?: {
    gtmId?: string;
    ga4MeasurementId?: string;
    googleAdsId?: string;
    metaPixelId?: string;
    consentModeV2Enabled?: boolean;
  } | null;
}

export function AnalyticsTracker({ settings }: AnalyticsTrackerProps) {
  const [showConsent, setShowConsent] = useState(false);
  const [consentGranted, setConsentGranted] = useState(false);

  useEffect(() => {
    // Check local storage for consent
    const stored = localStorage.getItem("petmarket_consent");
    if (!stored && settings?.consentModeV2Enabled) {
      setShowConsent(true);
    } else if (stored === "granted") {
      setConsentGranted(true);
    }

    // Capture marketing attribution parameters from URL
    if (typeof window !== "undefined") {
      const params = new URLSearchParams(window.location.search);
      const utmSource = params.get("utm_source");
      const utmMedium = params.get("utm_medium");
      const utmCampaign = params.get("utm_campaign");
      const gclid = params.get("gclid");
      const fbclid = params.get("fbclid");

      if (utmSource || gclid || fbclid) {
        const attribution = {
          utmSource,
          utmMedium,
          utmCampaign,
          gclid,
          fbclid,
          referrer: document.referrer || null,
          capturedAt: new Date().toISOString(),
        };
        sessionStorage.setItem("petmarket_attribution", JSON.stringify(attribution));
      }
    }
  }, [settings?.consentModeV2Enabled]);

  const handleAcceptAll = () => {
    localStorage.setItem("petmarket_consent", "granted");
    setShowConsent(false);
    setConsentGranted(true);

    if (typeof window !== "undefined" && (window as any).gtag) {
      (window as any).gtag("consent", "update", {
        ad_storage: "granted",
        analytics_storage: "granted",
        ad_user_data: "granted",
        ad_personalization: "granted",
      });
    }
  };

  const handleReject = () => {
    localStorage.setItem("petmarket_consent", "denied");
    setShowConsent(false);
  };

  if (!settings) return null;

  return (
    <>
      {/* Google Consent Mode V2 Defaults */}
      <Script
        id="google-consent-mode-init"
        strategy="beforeInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('consent', 'default', {
              'ad_storage': '${consentGranted ? "granted" : "denied"}',
              'analytics_storage': '${consentGranted ? "granted" : "denied"}',
              'ad_user_data': '${consentGranted ? "granted" : "denied"}',
              'ad_personalization': '${consentGranted ? "granted" : "denied"}'
            });
          `,
        }}
      />

      {/* Google Tag Manager */}
      {settings.gtmId && (
        <Script
          id="google-tag-manager"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
              })(window,document,'script','dataLayer','${settings.gtmId}');
            `,
          }}
        />
      )}

      {/* Google Analytics 4 */}
      {settings.ga4MeasurementId && !settings.gtmId && (
        <>
          <Script
            src={`https://www.googletagmanager.com/gtag/js?id=${settings.ga4MeasurementId}`}
            strategy="afterInteractive"
          />
          <Script
            id="google-analytics-init"
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
              __html: `
                gtag('js', new Date());
                gtag('config', '${settings.ga4MeasurementId}');
                ${settings.googleAdsId ? `gtag('config', '${settings.googleAdsId}');` : ""}
              `,
            }}
          />
        </>
      )}

      {/* Meta Pixel */}
      {settings.metaPixelId && (
        <Script
          id="meta-pixel-init"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
              n.queue=[];t=b.createElement(e);t.async=!0;
              t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '${settings.metaPixelId}');
              fbq('track', 'PageView');
            `,
          }}
        />
      )}

      {/* KVKK / Çerez ve Consent Banner */}
      {showConsent && (
        <div
          data-pet5-id="site.consent-banner"
          className="fixed bottom-4 left-4 right-4 z-50 mx-auto max-w-4xl rounded-2xl border border-amber-200 bg-white/95 p-4 shadow-2xl backdrop-blur md:p-6"
        >
          <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
            <div className="text-sm text-ink-light">
              <span className="font-bold text-ink">🐾 Çerez Tercihleriniz: </span>
              Size daha iyi bir alışveriş deneyimi ve kişiselleştirilmiş teklifler sunabilmek için yasal mevzuata uygun
              olarak çerezler ve analitik araçlar kullanıyoruz.
            </div>
            <div className="flex shrink-0 items-center gap-2">
              <button
                type="button"
                onClick={handleReject}
                className="rounded-xl border border-line px-4 py-2 text-xs font-semibold text-ink-muted hover:bg-cream"
              >
                Yalnızca Zorunlu
              </button>
              <button
                type="button"
                onClick={handleAcceptAll}
                className="rounded-xl bg-brand-500 px-5 py-2 text-xs font-bold text-white shadow-md hover:bg-brand-600"
              >
                Tümünü Kabul Et
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}