"use client"

import Link from "next/link"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { MailSettingsFields } from "@/components/gmail/mail-settings-fields"
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"

export function QuickSettingsPanel() {
  const open = useMailSettingsStore((s) => s.quickSettingsOpen)
  const themeDialogOpen = useMailSettingsStore((s) => s.themeDialogOpen)
  const setOpen = useMailSettingsStore((s) => s.setQuickSettingsOpen)
  const setThemeDialogOpen = useMailSettingsStore((s) => s.setThemeDialogOpen)

  if (!open) return null

  return (
    <>
      {!themeDialogOpen && (
        <button
          type="button"
          className="fixed inset-0 z-[60] bg-black/20"
          aria-label="Fermer la configuration rapide"
          onClick={() => setOpen(false)}
        />
      )}
      <aside
        role="dialog"
        aria-label="Configuration rapide"
        className="fixed right-0 top-0 z-[61] flex h-full w-full max-w-[360px] flex-col border-l border-border bg-mail-surface shadow-lg"
      >
        <header className="flex shrink-0 items-center justify-between gap-2 px-4 pt-5 pb-3">
          <h1 className="text-base font-normal text-foreground">
            Configuration rapide
          </h1>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="size-9 text-muted-foreground"
            aria-label="Fermer"
            onClick={() => setOpen(false)}
          >
            <X className="size-5" />
          </Button>
        </header>

        <div className="min-h-0 flex-1 overflow-y-auto">
          <div className="px-4 pb-4">
          <Button
            variant="outline"
            className="h-10 w-full rounded-full border-[#1a73e8] text-[#1a73e8] hover:bg-[#e8f0fe]/50"
            asChild
          >
            <Link href="/mail/settings" onClick={() => setOpen(false)}>
              Voir tous les paramètres
            </Link>
          </Button>
          </div>

          <MailSettingsFields
            variant="panel"
            onOpenThemeDialog={() => setThemeDialogOpen(true)}
          />
        </div>
      </aside>
    </>
  )
}