"use client"

/**
 * Highlight colour for one conditional formatting rule.
 *
 * Three sources, because "green" and "the colour Overdue already is" are
 * different intents: `Palette` for a neutral tint, `Status` to borrow the status
 * badge fill so a highlighted row and its chip read as one colour, `Custom` for
 * a colour the workspace brings with it. Custom is stored as a tint at the
 * palette's strength (`customRuleBackground`), which is what keeps cell text
 * above the contrast floor in light, dark, and high-contrast modes.
 */

import * as React from "react"

import { cn } from "../../lib/utils"
import { Button } from "../ui/button"
import { ButtonSegmentedControl } from "../ui/button-segmented-control"
import { Tip } from "../ui/tip"
import {
  CONDITIONAL_RULE_COLOR_SOURCES,
  STATUS_RULE_COLORS,
  customRuleBackground,
  resolveRuleColorSource,
  ruleColorSourcePatch,
  ruleCustomColor,
} from "../../lib/conditional-rule-colors"
import {
  RULE_COLORS,
  type ConditionalRule,
  type ConditionalRuleColorSource,
} from "../../lib/table-properties-types"
import {
  PROPERTIES_SHEET_TOOLTIP_Z,
  PROPERTIES_SHEET_TOOLTIP_Z_INDEX,
} from "./sheet-portal-z"

export function ConditionalRuleColorPicker({
  rule,
  onUpdate,
}: {
  rule: ConditionalRule
  onUpdate: (id: string, patch: Partial<ConditionalRule>) => void
}) {
  const source = resolveRuleColorSource(rule)
  const customColor = ruleCustomColor(rule)
  const customInputId = React.useId()
  const swatches = source === "status" ? STATUS_RULE_COLORS : RULE_COLORS

  return (
    <div className="border-t border-border px-3 py-2.5 space-y-2">
      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
        Highlight color
      </p>
      <ButtonSegmentedControl<ConditionalRuleColorSource>
        aria-label="Highlight color source"
        value={source}
        onValueChange={next => onUpdate(rule.id, ruleColorSourcePatch(rule, next))}
        options={CONDITIONAL_RULE_COLOR_SOURCES}
      />
      {source === "custom" ? (
        <div className="flex items-center gap-2">
          <label htmlFor={customInputId} className="sr-only">
            Custom highlight color
          </label>
          <input
            id={customInputId}
            type="color"
            value={customColor}
            onChange={e => {
              const next = e.target.value
              onUpdate(rule.id, {
                colorSource: "custom",
                customColor: next,
                bgColor: customRuleBackground(next),
              })
            }}
            className={cn(
              "size-6 shrink-0 cursor-pointer rounded-md border border-input bg-background p-0.5",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
            )}
          />
          <span className="font-mono text-xs tabular-nums text-muted-foreground">
            {customColor.toUpperCase()}
          </span>
          <span
            aria-hidden="true"
            data-slot="conditional-rule-preview"
            className="ms-auto h-6 w-16 rounded-md border border-border"
            style={{ background: rule.bgColor }}
          />
        </div>
      ) : (
        <div className="flex flex-wrap gap-1.5">
          {swatches.map(c => {
            const selected = rule.bgColor === c.bg
            return (
              <Tip
                key={c.name}
                label={c.name}
                side="left"
                contentClassName={PROPERTIES_SHEET_TOOLTIP_Z}
                contentZIndex={PROPERTIES_SHEET_TOOLTIP_Z_INDEX}
              >
                <Button
                  type="button"
                  size="icon-xs"
                  variant="outline"
                  aria-label={c.name}
                  aria-pressed={selected}
                  className={cn(
                    "rounded-md border-2 p-0 transition-[transform,border-color] duration-150 ease-out",
                    selected
                      ? "border-foreground scale-110"
                      : "border-transparent hover:scale-105",
                  )}
                  style={{ background: c.bg }}
                  onClick={() =>
                    onUpdate(rule.id, { colorSource: source, bgColor: c.bg })
                  }
                />
              </Tip>
            )
          })}
        </div>
      )}
      {source === "custom" ? (
        <p className="text-xs text-muted-foreground">
          Applied as a tint of this color so cell text stays readable in every theme.
        </p>
      ) : null}
    </div>
  )
}