"use client"

import type { ComponentType, ReactNode } from "react"
import { Check, Minus, Plus } from "lucide-react"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

export type CatalogLabelPresence = "none" | "some" | "all"

export type LabelPickerItemComponent = ComponentType<{
  children: ReactNode
  onSelect?: (event: Event) => void
  className?: string
}>

function LabelPickerCheckboxVisual({
  checked,
}: {
  checked: boolean | "indeterminate"
}) {
  return (
    <span
      aria-hidden
      className={cn(
        "pointer-events-none inline-flex size-4 shrink-0 items-center justify-center rounded-[2.5px] border-[1.5px] border-[#c2c2c2] bg-transparent",
        checked === true && "border-[#0b57d0] bg-[#0b57d0] text-white",
        checked === "indeterminate" && "border-[#0b57d0] bg-[#0b57d0] text-white"
      )}
    >
      {checked === true ? (
        <Check className="size-3 stroke-[2.5] text-white" />
      ) : checked === "indeterminate" ? (
        <Minus className="size-3 stroke-[2.5] text-white" />
      ) : null}
    </span>
  )
}

export function EmailLabelPickerBlock({
  query,
  onQueryChange,
  catalogLabels,
  Item,
  getLabelPresence,
  onToggleCatalogLabel,
  onCreateLabel,
  listClassName,
}: {
  query: string
  onQueryChange: (v: string) => void
  catalogLabels: string[]
  Item: LabelPickerItemComponent
  getLabelPresence: (label: string) => CatalogLabelPresence
  onToggleCatalogLabel: (label: string) => void
  onCreateLabel: (label: string) => void
  listClassName?: string
}) {
  const q = query.trim().toLowerCase()
  const filtered = catalogLabels.filter(
    (l) => q.length === 0 || l.toLowerCase().includes(q)
  )
  const trimmed = query.trim()
  const hasExact = catalogLabels.some(
    (l) => l.toLowerCase() === trimmed.toLowerCase()
  )
  const canCreate = trimmed.length > 0 && !hasExact

  return (
    <>
      <div
        className="shrink-0 border-b border-[#eceff1] p-2"
        onPointerDown={(e) => e.stopPropagation()}
      >
        <Input
          value={query}
          onChange={(e) => onQueryChange(e.target.value)}
          placeholder="Rechercher ou créer un libellé…"
          className="h-8 border-[#dadce0] text-sm shadow-none"
          autoComplete="off"
          onPointerDown={(e) => e.stopPropagation()}
          onClick={(e) => e.stopPropagation()}
          onKeyDown={(e) => e.stopPropagation()}
        />
      </div>
      <div className={cn("min-h-0 overflow-y-auto py-1", listClassName ?? "max-h-52")}>
        {canCreate ? (
          <Item
            onSelect={(e) => {
              e.preventDefault()
              onCreateLabel(trimmed)
            }}
          >
            <Plus className="size-[18px] shrink-0 text-[#0b57d0]" strokeWidth={1.5} />
            <span className="min-w-0 text-[#0b57d0]">
              Créer le libellé « {trimmed} »
            </span>
          </Item>
        ) : null}
        {filtered.map((label) => {
          const presence = getLabelPresence(label)
          const boxChecked: boolean | "indeterminate" =
            presence === "all" ? true : presence === "some" ? "indeterminate" : false
          return (
            <Item
              key={label}
              onSelect={(e) => {
                e.preventDefault()
                onToggleCatalogLabel(label)
              }}
            >
              <LabelPickerCheckboxVisual checked={boxChecked} />
              <span className="min-w-0 truncate">{label}</span>
            </Item>
          )
        })}
        {filtered.length === 0 && !canCreate ? (
          <div className="px-3 py-2 text-sm text-[#5f6368]">
            Aucun libellé correspondant
          </div>
        ) : null}
      </div>
    </>
  )
}