"use client"
import * as React from "react"
import { Button } from "../ui/button"
import { Tip } from "../ui/tip"
import { DragHandleGripIcon } from "../ui/drag-handle-grip"
import { type SortRule } from "../../lib/table-properties-types"
import { PROPERTIES_SHEET_TOOLTIP_Z, PROPERTIES_SHEET_TOOLTIP_Z_INDEX } from "./sheet-portal-z"
import { PropertiesCardIconAction } from "./properties-card-icon-action"

/** Sort rule card inside the Sort drawer panel */
export type DrawerSortCardProps = {
  rule: SortRule
  /**
   * Resolved column label for the sort rule's `fieldKey`. Required — every
   * consumer derives labels from its column defs (the drawer passes
   * `resolveColumnLabel(rule.fieldKey)`), so the card never falls back to a
   * product-specific column list.
   */
  fieldLabel: string
  isPrimary: boolean
  onRemove: () => void
  onToggleDir: () => void
}

export function DrawerSortCard(props: DrawerSortCardProps) {
  const { rule, fieldLabel, isPrimary, onRemove, onToggleDir } = props
  const label = fieldLabel || rule.fieldKey
  if (!label) return null
  const directionLabel = rule.direction === "asc" ? "Ascending" : "Descending"
  return (
    <div className="rounded-lg border border-border bg-background overflow-hidden">
      <div className="flex items-center gap-2 px-3 py-2.5">
        <DragHandleGripIcon className="text-xs text-muted-foreground/40" />
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-1.5">
            {isPrimary && (
              <span className="text-xs font-bold text-accent-foreground bg-accent rounded px-1 py-0.5 leading-none uppercase tracking-wide shrink-0">
                Primary
              </span>
            )}
            <p className="text-sm font-medium text-foreground truncate">{label}</p>
          </div>
          <Tip
            label="Toggle sort direction"
            side="left"
            contentClassName={PROPERTIES_SHEET_TOOLTIP_Z}
            contentZIndex={PROPERTIES_SHEET_TOOLTIP_Z_INDEX}
          >
            <Button
              type="button"
              variant="ghost"
              size="xs"
              aria-label={`Direction: ${directionLabel}. Click to toggle`}
              onClick={onToggleDir}
              className="h-auto py-0 px-1 -ms-1 mt-0.5 text-xs text-muted-foreground font-normal"
            >
              <i className={`fa-light ${rule.direction === "asc" ? "fa-arrow-up-a-z" : "fa-arrow-down-a-z"} text-xs`} aria-hidden="true" />
              {directionLabel}
              <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
            </Button>
          </Tip>
        </div>
        <PropertiesCardIconAction
          label={`Remove ${label} sort`}
          className="hover:text-destructive-ink hover:bg-destructive/10"
          onClick={onRemove}
        />
      </div>
    </div>
  )
}