"use client"

import { useEffect } from "react"
import { usePathname } from "next/navigation"
import { useTheme } from "next-themes"
import { applyMailBackgroundDom } from "@/lib/mail-settings/mail-background-dom"
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
import { isDriveAppPath } from "@/lib/suite/drive-route"

/** Applique thème clair/sombre/système et fond décoratif sur le document. */
export function MailThemeApplier() {
  const pathname = usePathname()
  const themeMode = useMailSettingsStore((s) => s.themeMode)
  const backgroundId = useMailSettingsStore((s) => s.backgroundId)
  const { setTheme } = useTheme()

  useEffect(() => {
    setTheme(themeMode)
  }, [themeMode, setTheme])

  useEffect(() => {
    if (isDriveAppPath(pathname)) return
    applyMailBackgroundDom(backgroundId)
  }, [backgroundId, pathname])

  return null
}