'use client'

import { Button } from '@/components/ui/button'
import { cn } from '@/utilities/cn'
import { Cookie, SlidersHorizontal, X } from 'lucide-react'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'

const STORAGE_KEY = 'bmj_cookie_consent_v1'
const CONSENT_VERSION = 1

type ConsentPreferences = {
  necessary: true
  analytics: boolean
  marketing: boolean
  version: typeof CONSENT_VERSION
  updatedAt: string
}

declare global {
  interface Window {
    dataLayer?: unknown[]
    gtag?: (...args: unknown[]) => void
  }
}

const createPreferences = (
  preferences: Pick<ConsentPreferences, 'analytics' | 'marketing'>,
): ConsentPreferences => ({
  necessary: true,
  analytics: preferences.analytics,
  marketing: preferences.marketing,
  version: CONSENT_VERSION,
  updatedAt: new Date().toISOString(),
})

const readStoredPreferences = (): ConsentPreferences | null => {
  try {
    const stored = window.localStorage.getItem(STORAGE_KEY)

    if (!stored) {
      return null
    }

    const parsed = JSON.parse(stored) as Partial<ConsentPreferences>

    if (parsed.version !== CONSENT_VERSION) {
      return null
    }

    return {
      necessary: true,
      analytics: Boolean(parsed.analytics),
      marketing: Boolean(parsed.marketing),
      version: CONSENT_VERSION,
      updatedAt: typeof parsed.updatedAt === 'string' ? parsed.updatedAt : new Date().toISOString(),
    }
  } catch {
    return null
  }
}

const applyConsentPreferences = (preferences: ConsentPreferences) => {
  document.documentElement.dataset.cookieConsent =
    preferences.analytics || preferences.marketing ? 'custom' : 'essential'

  window.dispatchEvent(
    new CustomEvent('bmj:cookie-consent-change', {
      detail: preferences,
    }),
  )

  window.gtag?.('consent', 'update', {
    ad_personalization: preferences.marketing ? 'granted' : 'denied',
    ad_storage: preferences.marketing ? 'granted' : 'denied',
    ad_user_data: preferences.marketing ? 'granted' : 'denied',
    analytics_storage: preferences.analytics ? 'granted' : 'denied',
  })
}

export function CookieConsent() {
  const [hasMounted, setHasMounted] = useState(false)
  const [preferences, setPreferences] = useState<ConsentPreferences | null>(null)
  const [showSettings, setShowSettings] = useState(false)
  const [draft, setDraft] = useState({ analytics: false, marketing: false })

  useEffect(() => {
    const storedPreferences = readStoredPreferences()

    if (storedPreferences) {
      setPreferences(storedPreferences)
      setDraft({
        analytics: storedPreferences.analytics,
        marketing: storedPreferences.marketing,
      })
      applyConsentPreferences(storedPreferences)
    }

    setHasMounted(true)
  }, [])

  const savePreferences = (nextPreferences: ConsentPreferences) => {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(nextPreferences))
    setPreferences(nextPreferences)
    setDraft({
      analytics: nextPreferences.analytics,
      marketing: nextPreferences.marketing,
    })
    setShowSettings(false)
    applyConsentPreferences(nextPreferences)
  }

  const rejectOptional = () =>
    savePreferences(createPreferences({ analytics: false, marketing: false }))
  const acceptAll = () => savePreferences(createPreferences({ analytics: true, marketing: true }))
  const saveDraft = () => savePreferences(createPreferences(draft))

  if (!hasMounted) {
    return null
  }

  const isInitialBannerVisible = !preferences
  const isPanelVisible = isInitialBannerVisible || showSettings

  return (
    <>
      {isPanelVisible && (
        <section
          aria-label="Preferensi privasi dan cookie"
          className="fixed inset-x-0 bottom-0 z-50 border-t border-border bg-background/98 shadow-[0_-20px_60px_rgba(20,66,45,0.18)] backdrop-blur-md"
          data-cookie-consent
        >
          <div className="container py-4 md:py-5">
            <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
              <div className="max-w-3xl">
                <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-foreground">
                  <Cookie aria-hidden="true" className="h-4 w-4 text-[#14422d]" />
                  <span>Preferensi cookie dan privasi</span>
                </div>
                <p className="text-sm leading-6 text-muted-foreground">
                  Kami memakai cookie esensial untuk keamanan, login, keranjang, dan preferensi
                  tampilan. Cookie analitik atau pemasaran hanya digunakan setelah Anda memberi
                  izin. Anda dapat membaca ringkasan kebijakan di{' '}
                  <Link
                    className="font-medium text-foreground underline-offset-4 hover:underline"
                    href="/legal"
                  >
                    halaman Legal
                  </Link>
                  .
                </p>
              </div>

              {showSettings && preferences && (
                <Button
                  aria-label="Tutup preferensi privasi"
                  className="absolute right-4 top-4"
                  onClick={() => {
                    setDraft({
                      analytics: preferences.analytics,
                      marketing: preferences.marketing,
                    })
                    setShowSettings(false)
                  }}
                  size="icon"
                  type="button"
                  variant="ghost"
                >
                  <X className="h-4 w-4" />
                </Button>
              )}

              <div
                className={cn('flex flex-col gap-3 sm:flex-row lg:min-w-[31rem] lg:justify-end', {
                  'lg:flex-col': showSettings,
                })}
              >
                {showSettings ? (
                  <div className="rounded-md border border-border bg-card p-4">
                    <div className="space-y-4">
                      <ConsentToggle
                        checked
                        description="Diperlukan untuk keamanan, autentikasi, keranjang, dan fungsi inti website."
                        disabled
                        label="Esensial"
                      />
                      <ConsentToggle
                        checked={draft.analytics}
                        description="Membantu memahami performa halaman dan perilaku kunjungan secara agregat."
                        label="Analitik"
                        onChange={(checked) =>
                          setDraft((current) => ({ ...current, analytics: checked }))
                        }
                      />
                      <ConsentToggle
                        checked={draft.marketing}
                        description="Dipakai untuk pengukuran kampanye atau personalisasi pemasaran jika fitur ini aktif."
                        label="Pemasaran"
                        onChange={(checked) =>
                          setDraft((current) => ({ ...current, marketing: checked }))
                        }
                      />
                    </div>

                    <div className="mt-5 flex flex-col gap-2 sm:flex-row sm:justify-end">
                      <Button onClick={rejectOptional} type="button" variant="outline">
                        Tolak non-esensial
                      </Button>
                      <Button onClick={saveDraft} type="button">
                        Simpan pilihan
                      </Button>
                      <Button onClick={acceptAll} type="button" variant="outline">
                        Terima semua
                      </Button>
                    </div>
                  </div>
                ) : (
                  <>
                    <Button
                      className="border-[#14422d] bg-[#14422d] text-white hover:bg-[#0f3323]"
                      onClick={rejectOptional}
                      type="button"
                    >
                      Tolak non-esensial
                    </Button>
                    <Button
                      onClick={() => {
                        setDraft({
                          analytics: preferences?.analytics ?? false,
                          marketing: preferences?.marketing ?? false,
                        })
                        setShowSettings(true)
                      }}
                      type="button"
                      variant="outline"
                    >
                      <SlidersHorizontal className="h-4 w-4" />
                      Kelola
                    </Button>
                    <Button
                      className="border-[#14422d] bg-[#14422d] text-white hover:bg-[#0f3323]"
                      onClick={acceptAll}
                      type="button"
                    >
                      Terima semua
                    </Button>
                  </>
                )}
              </div>
            </div>
          </div>
        </section>
      )}

      {preferences && !showSettings && (
        <Button
          aria-label="Buka preferensi privasi"
          className="fixed bottom-[calc(var(--bmj-mobile-nav-offset,0px)+1rem)] left-4 z-40 border-border bg-background/95 shadow-lg backdrop-blur md:bottom-4"
          onClick={() => setShowSettings(true)}
          size="sm"
          type="button"
          variant="outline"
        >
          <SlidersHorizontal className="h-4 w-4" />
          Privasi
        </Button>
      )}
    </>
  )
}

function ConsentToggle({
  checked,
  description,
  disabled,
  label,
  onChange,
}: {
  checked: boolean
  description: string
  disabled?: boolean
  label: string
  onChange?: (checked: boolean) => void
}) {
  const inputId = `cookie-consent-${label.toLowerCase().replace(/\s+/g, '-')}`

  return (
    <label className="flex items-start gap-3" htmlFor={inputId}>
      <input
        checked={checked}
        className="mt-1 h-4 w-4 accent-[#14422d]"
        disabled={disabled}
        id={inputId}
        onChange={(event) => onChange?.(event.target.checked)}
        type="checkbox"
      />
      <span>
        <span className="block text-sm font-medium text-foreground">{label}</span>
        <span className="block text-sm leading-5 text-muted-foreground">{description}</span>
      </span>
    </label>
  )
}