"use client"

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { cn } from "@/lib/utils"
import {
  MAIL_BACKGROUND_PRESETS,
  normalizeMailBackgroundId,
} from "@/lib/mail-settings/constants"
import type { MailBackgroundId, MailThemeMode } from "@/lib/mail-settings/types"
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"

const THEME_OPTIONS: { id: MailThemeMode; label: string; previewClass: string }[] =
  [
    { id: "light", label: "Clair", previewClass: "bg-white" },
    { id: "dark", label: "Sombre", previewClass: "bg-[#202124]" },
    {
      id: "system",
      label: "Système",
      previewClass:
        "bg-gradient-to-br from-white from-50% to-[#202124] to-50%",
    },
  ]

export function ThemeSettingsDialog() {
  const open = useMailSettingsStore((s) => s.themeDialogOpen)
  const setOpen = useMailSettingsStore((s) => s.setThemeDialogOpen)
  const themeMode = useMailSettingsStore((s) => s.themeMode)
  const backgroundId = useMailSettingsStore((s) => s.backgroundId)
  const setThemeMode = useMailSettingsStore((s) => s.setThemeMode)
  const setBackgroundId = useMailSettingsStore((s) => s.setBackgroundId)
  const activeBackgroundId = normalizeMailBackgroundId(backgroundId)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent
        overlayClassName="z-[70]"
        className="z-[70] max-w-md gap-5 border-border bg-background sm:max-w-lg"
      >
        <DialogHeader>
          <DialogTitle className="text-left text-base font-normal text-foreground">
            Thème
          </DialogTitle>
        </DialogHeader>

        <section>
          <h3 className="mb-3 text-sm font-medium text-foreground">Mode</h3>
          <div className="grid grid-cols-3 gap-2">
            {THEME_OPTIONS.map((opt) => (
              <button
                key={opt.id}
                type="button"
                onClick={() => setThemeMode(opt.id)}
                className={cn(
                  "rounded-lg border-2 p-2.5 text-left transition-colors",
                  themeMode === opt.id
                    ? "border-primary bg-accent/60"
                    : "border-border hover:border-muted-foreground/50 hover:bg-accent/40"
                )}
              >
                <div
                  className={cn(
                    "mb-2 h-14 rounded-md border border-border",
                    opt.previewClass
                  )}
                />
                <span className="text-sm text-foreground">{opt.label}</span>
              </button>
            ))}
          </div>
        </section>

        <section>
          <h3 className="mb-3 text-sm font-medium text-foreground">
            Arrière-plan
          </h3>
          <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
            {MAIL_BACKGROUND_PRESETS.map((preset) => (
              <button
                key={preset.id}
                type="button"
                onClick={() => setBackgroundId(preset.id as MailBackgroundId)}
                className={cn(
                  "flex flex-col items-center gap-1 rounded-lg p-1 transition-colors",
                  activeBackgroundId === preset.id &&
                    "ring-2 ring-[#1a73e8] ring-offset-1 ring-offset-background"
                )}
                title={preset.label}
              >
                <span
                  className="block h-14 w-full rounded-md border border-border bg-cover bg-center"
                  style={
                    preset.background === "none"
                      ? { backgroundColor: "var(--app-canvas)" }
                      : {
                          backgroundColor: preset.fallbackColor,
                          background: preset.background,
                        }
                  }
                />
                <span className="max-w-full truncate text-[10px] text-muted-foreground">
                  {preset.label}
                </span>
              </button>
            ))}
          </div>
        </section>
      </DialogContent>
    </Dialog>
  )
}