"use client"

import type { ReactNode } from "react"
import { Check } from "lucide-react"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetTitle,
} from "@/components/ui/sheet"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { NavColorDot } from "@/components/gmail/nav/nav-color-dot"
import { NavColorPicker } from "@/components/gmail/nav/nav-color-picker"

const sheetContentClass =
  "max-h-[min(85vh,560px)] gap-0 overflow-hidden rounded-t-2xl border-[#dadce0] px-0 pb-[max(1rem,env(safe-area-inset-bottom))] pt-0 select-none left-1/2 right-auto w-[calc(100%-2rem)] max-w-md -translate-x-1/2 sm:max-w-lg"

export function SidebarNavSheetAction({
  children,
  onClick,
  destructive,
}: {
  children: ReactNode
  onClick: () => void
  destructive?: boolean
}) {
  return (
    <button
      type="button"
      className={cn(
        "flex w-full items-center gap-3 px-4 py-3 text-left text-sm transition-colors active:bg-[#e8eaed]",
        destructive
          ? "text-red-600 hover:bg-red-50 active:bg-red-100"
          : "text-[#3c4043] hover:bg-[#f1f3f4]"
      )}
      onClick={onClick}
    >
      {children}
    </button>
  )
}

export function SidebarNavSheetSectionLabel({ children }: { children: ReactNode }) {
  return (
    <div className="px-4 py-1.5 text-[11px] font-medium uppercase tracking-wide text-[#5f6368]">
      {children}
    </div>
  )
}

export function SidebarNavSheetDivider() {
  return <div className="mx-4 border-b border-[#eceff1]" />
}

export function SidebarNavSheetCheckOption({
  checked,
  onPick,
  children,
}: {
  checked: boolean
  onPick: () => void
  children: ReactNode
}) {
  return (
    <button
      type="button"
      className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm text-[#3c4043] transition-colors hover:bg-[#f1f3f4] active:bg-[#e8eaed]"
      onClick={onPick}
    >
      <span className="min-w-0 flex-1">{children}</span>
      <span className="flex size-4 shrink-0 items-center justify-center" aria-hidden={!checked}>
        {checked ? <Check className="size-4 text-gray-900" strokeWidth={2} /> : null}
      </span>
    </button>
  )
}

export function SidebarNavSheetColorPicker({
  title,
  dotClass,
  swatches,
  onPick,
}: {
  title: string
  dotClass: string
  swatches: readonly string[]
  onPick: (swatch: string) => void
}) {
  return (
    <div className="px-4 py-2">
      <div className="mb-2 flex items-center gap-2 text-sm text-[#3c4043]">
        <span className="flex size-5 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white">
          <NavColorDot color={dotClass} />
        </span>
        {title}
      </div>
      <NavColorPicker
        variant="sheet"
        value={dotClass}
        swatches={swatches}
        onChange={onPick}
      />
    </div>
  )
}

export function SidebarNavOptionsSheet({
  open,
  onOpenChange,
  title,
  colorDotClass,
  children,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  colorDotClass?: string
  children: ReactNode
}) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="bottom" hideClose className={sheetContentClass}>
        <div className="relative flex items-center gap-3 border-b border-[#eceff1] px-4 py-3 pr-12">
          {colorDotClass ? (
            <span
              className="flex size-5 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white"
              aria-hidden
            >
              <NavColorDot color={colorDotClass} />
            </span>
          ) : null}
          <SheetTitle className="min-w-0 flex-1 truncate text-left text-base font-medium leading-5 text-[#3c4043]">
            {title}
          </SheetTitle>
          <SheetClose
            className="absolute right-4 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-xs text-[#5f6368] opacity-80 outline-none transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50"
            aria-label="Fermer"
          >
            <XIcon className="size-4" />
          </SheetClose>
        </div>
        <div className="flex flex-col overflow-y-auto py-1">{children}</div>
      </SheetContent>
    </Sheet>
  )
}