"use client"

import { cn } from "@/lib/utils"
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
import type {
  InboxSortMode,
  MailBackgroundId,
  MailDensity,
  MailThemeMode,
  ReadingPaneMode,
} from "@/lib/mail-settings/types"
import {
  QuickSettingsCheckbox,
  QuickSettingsOption,
} from "@/components/gmail/quick-settings/quick-settings-option"
import {
  DensityCompactIcon,
  DensityDefaultIcon,
  DensityNormalIcon,
  InboxDefaultIcon,
  InboxImportantIcon,
  InboxStarredIcon,
  InboxUnreadIcon,
  ReadingPaneBelowIcon,
  ReadingPaneNoneIcon,
  ReadingPaneRightIcon,
  ThemeModePreview,
} from "@/components/gmail/quick-settings/settings-preview-icons"
import {
  MAIL_BACKGROUND_PRESETS,
  normalizeMailBackgroundId,
} from "@/lib/mail-settings/constants"

const DENSITY_OPTIONS: {
  id: MailDensity
  label: string
  icon: React.ReactNode
}[] = [
  { id: "default", label: "Par défaut", icon: <DensityDefaultIcon /> },
  { id: "normal", label: "Normal", icon: <DensityNormalIcon /> },
  { id: "compact", label: "Compact", icon: <DensityCompactIcon /> },
]

const INBOX_OPTIONS: {
  id: InboxSortMode
  label: string
  icon: React.ReactNode
}[] = [
  { id: "default", label: "Par défaut", icon: <InboxDefaultIcon /> },
  {
    id: "important",
    label: "Importants d'abord",
    icon: <InboxImportantIcon />,
  },
  { id: "unread", label: "Non lus d'abord", icon: <InboxUnreadIcon /> },
  { id: "starred", label: "Suivis d'abord", icon: <InboxStarredIcon /> },
]

const READING_PANE_OPTIONS: {
  id: ReadingPaneMode
  label: string
  icon: React.ReactNode
  disabled?: boolean
}[] = [
  {
    id: "none",
    label: "Aucune séparation",
    icon: <ReadingPaneNoneIcon />,
  },
  {
    id: "right",
    label: "À droite de la boîte de réception",
    icon: <ReadingPaneRightIcon />,
  },
  {
    id: "below",
    label: "Sous la boîte de réception",
    icon: <ReadingPaneBelowIcon />,
    disabled: true,
  },
]

const THEME_OPTIONS: {
  id: MailThemeMode
  label: string
}[] = [
  { id: "light", label: "Clair" },
  { id: "dark", label: "Sombre" },
  { id: "system", label: "Système" },
]

function ThemeModePicker({
  themeMode,
  onSelect,
  compact = false,
}: {
  themeMode: MailThemeMode
  onSelect: (mode: MailThemeMode) => void
  compact?: boolean
}) {
  return (
    <div className={cn("grid grid-cols-3 gap-2", !compact && "mb-4 sm:max-w-md")}>
      {THEME_OPTIONS.map((opt) => (
        <button
          key={opt.id}
          type="button"
          onClick={() => onSelect(opt.id)}
          className={cn(
            "rounded-lg border-2 p-2 text-left transition-colors",
            compact ? "p-1.5" : "p-2.5",
            themeMode === opt.id
              ? "border-primary bg-accent/60"
              : "border-border hover:border-muted-foreground/50 hover:bg-accent/40"
          )}
        >
          <ThemeModePreview
            mode={opt.id}
            className={compact ? "h-10" : "h-14"}
          />
          <span
            className={cn(
              "mt-1.5 block text-foreground",
              compact ? "text-center text-xs" : "text-sm"
            )}
          >
            {opt.label}
          </span>
        </button>
      ))}
    </div>
  )
}

function SettingsSection({
  title,
  action,
  children,
  className,
}: {
  title: string
  action?: React.ReactNode
  children: React.ReactNode
  className?: string
}) {
  return (
    <section className={cn("border-b border-border px-4 py-4", className)}>
      <SectionHeader title={title} action={action} />
      {children}
    </section>
  )
}

function SectionHeader({
  title,
  action,
}: {
  title: string
  action?: React.ReactNode
}) {
  return (
    <div className="mb-2 flex items-center justify-between gap-2">
      <h2 className="text-sm font-medium text-foreground">{title}</h2>
      {action}
    </div>
  )
}

export function MailSettingsFields({
  variant = "panel",
  onOpenThemeDialog,
}: {
  variant?: "panel" | "page"
  onOpenThemeDialog?: () => void
}) {
  const density = useMailSettingsStore((s) => s.density)
  const setDensity = useMailSettingsStore((s) => s.setDensity)
  const themeMode = useMailSettingsStore((s) => s.themeMode)
  const setThemeMode = useMailSettingsStore((s) => s.setThemeMode)
  const backgroundId = useMailSettingsStore((s) => s.backgroundId)
  const setBackgroundId = useMailSettingsStore((s) => s.setBackgroundId)
  const inboxSort = useMailSettingsStore((s) => s.inboxSort)
  const setInboxSort = useMailSettingsStore((s) => s.setInboxSort)
  const readingPane = useMailSettingsStore((s) => s.readingPane)
  const setReadingPane = useMailSettingsStore((s) => s.setReadingPane)
  const conversationMode = useMailSettingsStore((s) => s.conversationMode)
  const setConversationMode = useMailSettingsStore((s) => s.setConversationMode)
  const activeBackgroundId = normalizeMailBackgroundId(backgroundId)

  const sectionClassName = variant === "page" ? "px-0 py-5" : undefined

  return (
    <>
      <SettingsSection title="Densité" className={sectionClassName}>
        {DENSITY_OPTIONS.map((opt) => (
          <QuickSettingsOption
            key={opt.id}
            name="density"
            label={opt.label}
            checked={density === opt.id}
            onSelect={() => setDensity(opt.id)}
            icon={opt.icon}
          />
        ))}
      </SettingsSection>

      <SettingsSection
        title="Thème"
        className={sectionClassName}
        action={
          variant === "panel" && onOpenThemeDialog ? (
            <button
              type="button"
              className="text-sm text-[#1a73e8] hover:underline"
              onClick={onOpenThemeDialog}
            >
              Arrière-plan
            </button>
          ) : null
        }
      >
        {variant === "panel" && onOpenThemeDialog ? (
          <ThemeModePicker
            themeMode={themeMode}
            onSelect={setThemeMode}
            compact
          />
        ) : (
          <>
            <ThemeModePicker themeMode={themeMode} onSelect={setThemeMode} />
            <h3 className="mb-3 text-sm font-medium text-foreground">
              Arrière-plan
            </h3>
            <div className="grid grid-cols-3 gap-2 sm:max-w-lg 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>
          </>
        )}
      </SettingsSection>

      <SettingsSection
        title="Type de boîte de réception"
        className={sectionClassName}
      >
        {INBOX_OPTIONS.map((opt) => (
          <QuickSettingsOption
            key={opt.id}
            name="inbox-sort"
            label={opt.label}
            checked={inboxSort === opt.id}
            onSelect={() => setInboxSort(opt.id)}
            icon={opt.icon}
          />
        ))}
      </SettingsSection>

      <SettingsSection title="Volet de lecture" className={sectionClassName}>
        {READING_PANE_OPTIONS.map((opt) => (
          <QuickSettingsOption
            key={opt.id}
            name="reading-pane"
            label={opt.label}
            checked={readingPane === opt.id}
            disabled={opt.disabled}
            onSelect={() => {
              if (!opt.disabled) setReadingPane(opt.id)
            }}
            icon={opt.icon}
          />
        ))}
      </SettingsSection>

      <section className={cn("px-4 py-4", variant === "page" && "px-0 py-5")}>
        <SectionHeader title="Fils de discussion" />
        <QuickSettingsCheckbox
          label="Mode Conversation"
          checked={conversationMode}
          onChange={setConversationMode}
          helpLabel="Regrouper les messages d'une même conversation"
        />
      </section>
    </>
  )
}