"use client"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  DRIVE_BTN_GHOST,
  DRIVE_BTN_PRIMARY,
  DRIVE_DIALOG_BODY,
  DRIVE_DIALOG_CONTENT,
  DRIVE_DIALOG_FOOTER,
  DRIVE_DIALOG_HEADER,
  DRIVE_DIALOG_OVERLAY,
  DRIVE_TEXT_SECONDARY,
  DRIVE_TEXT_TITLE,
} from "@/lib/drive/drive-dialog-styles"
import { PAGE_FORMATS, type PageFormatId } from "@/lib/drive/page-formats"
import { cn } from "@/lib/utils"

export function DocsPageSetupDialog({
  open,
  onOpenChange,
  pageFormatId,
  onPageFormatChange,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  pageFormatId: PageFormatId
  onPageFormatChange: (id: PageFormatId) => void
}) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        overlayClassName={DRIVE_DIALOG_OVERLAY}
        className={cn(DRIVE_DIALOG_CONTENT, "sm:max-w-[420px]")}
      >
        <DialogHeader className={DRIVE_DIALOG_HEADER}>
          <DialogTitle className={cn("text-base font-medium", DRIVE_TEXT_TITLE)}>
            Configuration de la page
          </DialogTitle>
          <DialogDescription className={cn("text-sm", DRIVE_TEXT_SECONDARY)}>
            Format de page utilisé pour l&apos;affichage et l&apos;impression.
          </DialogDescription>
        </DialogHeader>
        <div className={cn(DRIVE_DIALOG_BODY, "space-y-1")}>
          {PAGE_FORMATS.map((format) => (
            <button
              key={format.id}
              type="button"
              className={cn(
                "flex w-full items-center justify-between rounded-md px-3 py-2 text-sm hover:bg-accent",
                pageFormatId === format.id && "bg-accent"
              )}
              onClick={() => onPageFormatChange(format.id)}
            >
              <span>{format.label}</span>
              <span className="text-xs text-muted-foreground">
                {format.widthMm} × {format.heightMm} mm
              </span>
            </button>
          ))}
        </div>
        <DialogFooter className={DRIVE_DIALOG_FOOTER}>
          <Button
            type="button"
            className={DRIVE_BTN_PRIMARY}
            onClick={() => onOpenChange(false)}
          >
            OK
          </Button>
          <Button
            type="button"
            variant="ghost"
            className={DRIVE_BTN_GHOST}
            onClick={() => onOpenChange(false)}
          >
            Annuler
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}