"use client"

import * as React from "react"
import { cn } from "../../lib/utils"
import { Tip } from "../ui/tip"
import {
  PROPERTIES_SHEET_TOOLTIP_Z,
  PROPERTIES_SHEET_TOOLTIP_Z_INDEX,
} from "./sheet-portal-z"

/** Fixed 13×13 box — keeps FA trash/chevron on the same vertical centerline. */
function CardActionIcon({ iconClassName }: { iconClassName: string }) {
  return (
    <span className="inline-flex size-[13px] items-center justify-center leading-none">
      <i
        className={cn("fa-light block text-xs leading-none", iconClassName)}
        aria-hidden="true"
      />
    </span>
  )
}

const CARD_ICON_BTN_CLASS =
  "icon-button-chrome inline-flex size-8 shrink-0 items-center justify-center rounded-md p-0 transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:translate-y-0"

type CardIconButtonProps = {
  label: string
  iconClassName: string
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
  className?: string
  "aria-expanded"?: boolean
}

function CardIconButton({
  label,
  iconClassName,
  onClick,
  className,
  "aria-expanded": ariaExpanded,
}: CardIconButtonProps) {
  return (
    <Tip
      label={label}
      side="left"
      contentClassName={PROPERTIES_SHEET_TOOLTIP_Z}
      contentZIndex={PROPERTIES_SHEET_TOOLTIP_Z_INDEX}
    >
      <button
        type="button"
        aria-label={label}
        aria-expanded={ariaExpanded}
        onClick={onClick}
        className={cn(CARD_ICON_BTN_CLASS, className)}
      >
        <CardActionIcon iconClassName={iconClassName} />
      </button>
    </Tip>
  )
}

export type PropertiesCardActionsProps = {
  removeLabel: string
  expandLabel: string
  expanded: boolean
  onRemove: (event: React.MouseEvent<HTMLButtonElement>) => void
  onToggleExpand: () => void
  groupAriaLabel: string
}

/** Delete + expand/collapse pair — single row so both icons share one vertical centerline. */
export function PropertiesCardActions({
  removeLabel,
  expandLabel,
  expanded,
  onRemove,
  onToggleExpand,
  groupAriaLabel,
}: PropertiesCardActionsProps) {
  return (
    <div className="inline-flex h-8 items-center" role="group" aria-label={groupAriaLabel}>
      <CardIconButton
        label={removeLabel}
        iconClassName="fa-trash-can translate-y-[1.5px]"
        className="hover:text-destructive-ink hover:bg-destructive/10"
        onClick={onRemove}
      />
      <CardIconButton
        label={expandLabel}
        iconClassName={expanded ? "fa-chevron-up" : "fa-chevron-down"}
        aria-expanded={expanded}
        onClick={event => {
          event.stopPropagation()
          onToggleExpand()
        }}
      />
    </div>
  )
}

export type PropertiesCardIconActionProps = {
  label: string
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
  className?: string
  tipSide?: "top" | "bottom" | "left" | "right"
  "aria-expanded"?: boolean
}

/** Single remove action (e.g. sort-card). */
export function PropertiesCardIconAction({
  label,
  onClick,
  className,
  tipSide = "left",
  "aria-expanded": ariaExpanded,
}: PropertiesCardIconActionProps) {
  return (
    <Tip
      label={label}
      side={tipSide}
      contentClassName={PROPERTIES_SHEET_TOOLTIP_Z}
      contentZIndex={PROPERTIES_SHEET_TOOLTIP_Z_INDEX}
    >
      <button
        type="button"
        aria-label={label}
        aria-expanded={ariaExpanded}
        onClick={onClick}
        className={cn(CARD_ICON_BTN_CLASS, className)}
      >
        <CardActionIcon iconClassName="fa-trash-can translate-y-[1.5px]" />
      </button>
    </Tip>
  )
}