// ~/src/siteplane/components/color-swatch-picker/color-swatch-picker.tsx

"use client";

import * as React from "react";
import { useFormReset } from "../../system/form/use-form-reset";
import {
  ListBoxContext,
  type ListBoxRenderProps,
  ColorSwatchPicker as ColorSwatchPickerPrimitive,
  ColorSwatchPickerItem as ColorSwatchPickerItemPrimitive,
} from "react-aria-components";

import {
  type SiteplaneControlSize,
  type SiteplaneRadius,
  useResolvedControlSize,
  useResolvedRadius,
} from "../../system/provider/siteplane-ui-provider";
import { cn } from "../../system/utils/cn";
import {
  noOwnerValidation,
  useFieldControlBridge,
  useFieldControlProxy,
} from "../field/field-control-bridge";
import { ExternalInputOwner, Input } from "../input/input";
import {
  ColorSwatchFace,
  type ColorSwatchIndicator,
} from "./color-swatch-face";

import "./color-swatch-picker.css";

export type { ColorSwatchIndicator } from "./color-swatch-face";

/**
 * One choice. It is a `color`, or an `image` that fills the swatch (the
 * optional `color` then shows until the image has loaded). `imageSize` and
 * `imagePosition` take CSS `background-size` and `background-position`
 * values to show part of the image; by default it covers the swatch, centred.
 */
export type ColorSwatchPickerOption = {
  disabled?: boolean;
  label: string;
  value: string;
} & (
  | {
      color: string;
      image?: undefined;
      imagePosition?: undefined;
      imageSize?: undefined;
    }
  | {
      color?: string | undefined;
      image: string;
      imagePosition?: string | undefined;
      imageSize?: string | undefined;
    }
);

export interface ColorSwatchPickerProps extends Omit<
  React.ComponentProps<"div">,
  "children" | "defaultValue" | "onChange"
> {
  defaultValue?: string | undefined;
  disabled?: boolean | undefined;
  form?: string | undefined;
  /**
   * How the selected swatch shows its selection: `check` (the default) puts a
   * check inside it, `ring` draws an accent ring around it, like a row of image
   * thumbnails.
   */
  indicator?: ColorSwatchIndicator | undefined;
  inputRef?: React.Ref<HTMLInputElement> | undefined;
  name?: string | undefined;
  onValueChange?: ((value: string) => void) | undefined;
  options: readonly ColorSwatchPickerOption[];
  readOnly?: boolean | undefined;
  required?: boolean | undefined;
  size?: SiteplaneControlSize | undefined;
  value?: string | undefined;
}

export function ColorSwatchPicker({
  "aria-describedby": ariaDescribedBy,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledBy,
  className,
  defaultValue,
  disabled,
  form,
  indicator = "check",
  inputRef,
  name,
  onValueChange,
  options,
  readOnly,
  required,
  size,
  value,
  ...props
}: ColorSwatchPickerProps): React.ReactElement {
  // Inside a Field, FieldLabel names the listbox, FieldDescription and
  // FieldError describe it, and the Field supplies name and disabled state.
  const field = useFieldControlBridge({
    "aria-describedby": ariaDescribedBy,
    "aria-labelledby": ariaLabelledBy,
    disabled,
    name,
  });
  const fieldDisabled = field.disabled;
  const fieldName = field.name;
  const inField = field.inField;
  const invalid = field.valid === false;
  const resolvedSize = useResolvedControlSize(size);
  const radius = useResolvedRadius<SiteplaneRadius>(undefined);
  const controlled = value !== undefined;
  const [resetVersion, setResetVersion] = React.useState(0);
  const markerRef = useFormReset<HTMLInputElement>(form, () => {
    if (!controlled) setResetVersion((current) => current + 1);
  });
  const optionEntries = React.useMemo(
    () =>
      options.map((option, index) => ({
        identity: getOptionIdentity(index),
        option,
      })),
    [options],
  );
  const selectedIdentity = optionEntries.find(
    ({ option }) => option.value === value,
  )?.identity;
  const defaultIdentity = optionEntries.find(
    ({ option }) => option.value === defaultValue,
  )?.identity;
  // React Aria's ColorSwatchPicker drops aria-invalid, aria-readonly and
  // aria-required from its props; its listbox receives these states through
  // the ListBox render. The form inputs follow the listbox: an option must not
  // contain another interactive element. With every option disabled, React
  // Aria makes the listbox itself a tab stop; a disabled picker leaves the
  // tab order instead and is announced as disabled.
  const listboxContext = React.useMemo(
    () => ({
      render: (
        listboxProps: React.JSX.IntrinsicElements["div"],
        { state }: ListBoxRenderProps,
      ) => (
        <>
          <div
            {...listboxProps}
            aria-disabled={fieldDisabled || undefined}
            aria-invalid={invalid || undefined}
            aria-readonly={readOnly || undefined}
            aria-required={required || undefined}
            tabIndex={fieldDisabled ? undefined : listboxProps.tabIndex}
          />
          {fieldName || required || inputRef ? (
            <SwatchFormValue
              disabled={fieldDisabled}
              form={form}
              inputRef={inputRef}
              listboxId={listboxProps.id}
              name={fieldName}
              optionEntries={optionEntries}
              readOnly={readOnly}
              required={required}
              selectedKeys={state.selectionManager.selectedKeys}
            />
          ) : null}
          {inField ? (
            <SwatchFieldProxy
              disabled={fieldDisabled}
              form={form}
              listboxId={listboxProps.id}
              name={fieldName}
              optionEntries={optionEntries}
              readOnly={readOnly}
              required={required}
              selectedKeys={state.selectionManager.selectedKeys}
            />
          ) : null}
        </>
      ),
    }),
    [
      fieldDisabled,
      fieldName,
      form,
      inField,
      inputRef,
      invalid,
      optionEntries,
      readOnly,
      required,
    ],
  );

  return (
    <>
      <ListBoxContext.Provider value={listboxContext}>
        <ColorSwatchPickerPrimitive
          {...(props as React.ComponentProps<
            typeof ColorSwatchPickerPrimitive
          >)}
          {...(field.describedBy === undefined
            ? {}
            : { "aria-describedby": field.describedBy })}
          {...(field.labelledBy || ariaLabel === undefined
            ? {}
            : { "aria-label": ariaLabel })}
          {...(field.labelledBy === undefined
            ? {}
            : { "aria-labelledby": field.labelledBy })}
          className={cn(
            "sp-color-swatch-picker sp-color-swatch-scope",
            className,
          )}
          data-disabled={fieldDisabled || undefined}
          data-indicator={indicator}
          data-radius={radius}
          data-size={resolvedSize}
          data-slot="color-swatch-picker"
          {...(controlled || readOnly
            ? { value: selectedIdentity ?? defaultIdentity ?? "#ffffff" }
            : defaultIdentity === undefined
              ? {}
              : { defaultValue: defaultIdentity })}
          key={controlled ? undefined : resetVersion}
          onChange={(color) => {
            if (readOnly) return;
            const identity = color.toString("hex").toLowerCase();
            const match = optionEntries.find(
              (entry) => entry.identity === identity,
            );
            if (match) onValueChange?.(match.option.value);
          }}
        >
          {optionEntries.map(({ identity, option }) => (
            <ColorSwatchPickerItemPrimitive
              key={option.value}
              aria-label={option.label}
              className="sp-color-swatch-picker-item sp-color-swatch-item"
              color={identity}
              data-slot="color-swatch-picker-item"
              {...(fieldDisabled
                ? { isDisabled: true }
                : option.disabled === undefined
                  ? {}
                  : { isDisabled: option.disabled })}
            >
              {({ isSelected }) => (
                <ColorSwatchFace
                  color={option.color}
                  image={option.image}
                  imagePosition={option.imagePosition}
                  imageSize={option.imageSize}
                  indicator={indicator}
                  label={option.label}
                  selected={isSelected}
                />
              )}
            </ColorSwatchPickerItemPrimitive>
          ))}
        </ColorSwatchPickerPrimitive>
      </ListBoxContext.Provider>
      <Input
        aria-hidden="true"
        disabled
        form={form}
        ref={markerRef}
        type="hidden"
      />
    </>
  );
}

// A form adapter reads the collection's selection; it owns no second selection
// state. A visually hidden text input also participates in native validation.
function SwatchFormValue({
  disabled,
  form,
  inputRef,
  listboxId,
  name,
  optionEntries,
  readOnly,
  required,
  selectedKeys,
}: Pick<
  ColorSwatchPickerProps,
  "disabled" | "form" | "inputRef" | "name" | "readOnly" | "required"
> & {
  listboxId: string | undefined;
  optionEntries: SwatchOptionEntry[];
  selectedKeys: Iterable<React.Key>;
}) {
  const selected = getSelectedOption(optionEntries, selectedKeys);
  // The listbox owns the field semantics; this adapter stays out of a Field.
  return (
    <ExternalInputOwner>
      <Input
        aria-hidden="true"
        className="sr-only"
        disabled={disabled}
        form={form}
        name={name}
        nativeInput
        onChange={() => {}}
        onInvalid={(event) => {
          event.preventDefault();
          if (!listboxId) return;
          event.currentTarget.ownerDocument
            .getElementById(listboxId)
            ?.querySelector<HTMLElement>(
              '[role="option"]:not([aria-disabled="true"])',
            )
            ?.focus();
        }}
        readOnly={readOnly}
        ref={inputRef}
        required={required}
        tabIndex={-1}
        type="text"
        unstyled
        value={selected?.option.value ?? ""}
      />
    </ExternalInputOwner>
  );
}

// Inside a Field, a visually hidden proxy registers the picker with Field and
// Form like the date fields: FieldLabel focuses the selected or first
// available swatch, and Form validation checks `required`, so FieldError
// explains a missing choice.
function SwatchFieldProxy({
  disabled,
  form,
  listboxId,
  name,
  optionEntries,
  readOnly,
  required,
  selectedKeys,
}: Pick<
  ColorSwatchPickerProps,
  "disabled" | "form" | "name" | "readOnly" | "required"
> & {
  listboxId: string | undefined;
  optionEntries: SwatchOptionEntry[];
  selectedKeys: Iterable<React.Key>;
}): React.ReactElement | null {
  const proxyProps = useFieldControlProxy({
    controlled: false,
    disabled: Boolean(disabled),
    displayValidation: noOwnerValidation,
    focusTarget: () => getFocusableSwatch(listboxId),
    form,
    name,
    onRevalidate: () => {},
    realtimeValidation: noOwnerValidation,
    required,
    value: getSelectedOption(optionEntries, selectedKeys)?.option.value ?? "",
  });

  return proxyProps ? (
    <ExternalInputOwner>
      <Input nativeInput readOnly={readOnly} unstyled {...proxyProps} />
    </ExternalInputOwner>
  ) : null;
}

type SwatchOptionEntry = { identity: string; option: ColorSwatchPickerOption };

function getSelectedOption(
  optionEntries: SwatchOptionEntry[],
  selectedKeys: Iterable<React.Key>,
): SwatchOptionEntry | undefined {
  const selectedKey = [...selectedKeys][0];
  return optionEntries.find(
    ({ identity }) => `${identity}ff` === String(selectedKey).toLowerCase(),
  );
}

function getFocusableSwatch(listboxId: string | undefined): HTMLElement | null {
  const listbox = listboxId ? document.getElementById(listboxId) : null;
  return (
    listbox?.querySelector<HTMLElement>(
      '[role="option"][aria-selected="true"]:not([aria-disabled="true"])',
    ) ??
    listbox?.querySelector<HTMLElement>(
      '[role="option"]:not([aria-disabled="true"])',
    ) ??
    null
  );
}

function getOptionIdentity(index: number): string {
  return `#${(index + 1).toString(16).padStart(6, "0")}`;
}


// ~/src/siteplane/components/color-swatch-picker/color-swatch-face.tsx

"use client";

import * as React from "react";
import { ColorSwatch as ColorSwatchPrimitive } from "react-aria-components";

import "./color-swatch-picker.css";

/**
 * How a selected swatch shows its selection: a check inside the swatch (the
 * default) or a ring around it, as the swatch rows of image and avatar
 * choosers do.
 */
export type ColorSwatchIndicator = "check" | "ring";

/**
 * The picture of one swatch: the color or image, and the check of the `check`
 * indicator. ColorSwatchPicker items and the swatch trigger of ColorPicker
 * both draw it, so a swatch keeps one appearance wherever it appears. The
 * selection ring, hover, focus and disabled states belong to the swatch box
 * around it (`sp-color-swatch-item`) and are styled in
 * `color-swatch-picker.css`.
 */
export function ColorSwatchFace({
  color,
  image,
  imagePosition,
  imageSize,
  indicator = "check",
  label,
  selected,
}: {
  /** The swatch color; behind an image it shows until the image has loaded. */
  color?: string | undefined;
  image?: string | undefined;
  /** CSS `background-position` of the image; centred by default. */
  imagePosition?: string | undefined;
  /** CSS `background-size` of the image; it covers the swatch by default. */
  imageSize?: string | undefined;
  indicator?: ColorSwatchIndicator | undefined;
  label?: string | undefined;
  selected?: boolean | undefined;
}): React.ReactElement {
  return (
    <>
      {/* An image option is a swatch like any other: the swatch element names
          the option, and the picture lies over its (transparent) color. */}
      <ColorSwatchPrimitive
        aria-hidden="true"
        className="sp-color-swatch-picker-swatch"
        {...(label === undefined ? {} : { colorName: label })}
        data-image={image === undefined ? undefined : ""}
        data-slot="color-swatch-picker-swatch"
        style={{
          backgroundColor: color ?? "transparent",
          ...(image === undefined
            ? {}
            : {
                backgroundImage: `url(${JSON.stringify(image)})`,
                ...(imagePosition === undefined
                  ? {}
                  : { backgroundPosition: imagePosition }),
                ...(imageSize === undefined
                  ? {}
                  : { backgroundSize: imageSize }),
              }),
        }}
      />
      {indicator === "check" ? (
        <span
          aria-hidden="true"
          className="sp-checkbox-indicator sp-color-swatch-picker-indicator"
          data-selected={selected || undefined}
          data-slot="checkbox-indicator"
          style={{
            color: `contrast-color(color-mix(in oklch, ${color ?? "black"} 90%, black))`,
          }}
        >
          <svg
            className="sp-check-glyph-motion"
            fill="none"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="3"
            viewBox="0 0 24 24"
          >
            <path
              className="sp-check-path-motion"
              d="M5.252 12.7 10.2 18.63 18.748 5.37"
            />
          </svg>
        </span>
      ) : null}
    </>
  );
}


// ~/src/siteplane/components/color-swatch-picker/color-swatch-picker.css

@layer theme, base, components, siteplane, utilities;

@layer siteplane {
  .sp-color-swatch-picker {
    display: flex;
    flex-flow: row wrap;
    gap: var(--sp-rw-space-4);
    outline: none;
  }

  .sp-color-swatch-picker[data-disabled] {
    opacity: var(--sp-semantic-state-disabled-opacity);
  }

  /* One size, shape and ring per swatch scope. A scope is a ColorSwatchPicker or
   * the wrapper of a ColorPicker whose trigger is a swatch, so both draw the same
   * swatch box (`sp-color-swatch-item`) from the same rules. */
  .sp-color-swatch-scope {
    --sp-swatch-size: 2rem;
    --sp-swatch-check: 0.875rem;
    --sp-swatch-radius: 999px;
  }

  .sp-color-swatch-scope[data-size="sm"] {
    --sp-swatch-size: 1.75rem;
    --sp-swatch-check: 0.75rem;
  }

  .sp-color-swatch-scope[data-size="lg"] {
    --sp-swatch-size: 2.25rem;
    --sp-swatch-check: 1rem;
  }

  /* A ColorPicker whose trigger is a swatch takes the same 40 px at xl as the
   * palette it ends, so a row of swatches and its custom color match at every
   * size. */
  .sp-color-swatch-scope[data-size="xl"] {
    --sp-swatch-size: 2.5rem;
    --sp-swatch-check: 1.125rem;
  }

  .sp-color-swatch-scope[data-radius="none"] {
    --sp-swatch-radius: 0;
  }

  .sp-color-swatch-scope[data-radius="sm"] {
    --sp-swatch-radius: var(--sp-primitive-dimension-radius-sm);
  }

  /* Compact swatches sit closer together, so a palette and its neighbours fit one
   * row. A ring stands 4px outside its swatch and keeps a wider gap. */
  .sp-color-swatch-picker[data-size="sm"] {
    gap: var(--sp-rw-space-2);
  }

  .sp-color-swatch-picker[data-size="sm"][data-indicator="ring"] {
    gap: var(--sp-rw-space-3);
  }

  .sp-color-swatch-item {
    position: relative;
    display: grid;
    width: var(--sp-swatch-size);
    height: var(--sp-swatch-size);
    flex: none;
    cursor: pointer;
    place-items: center;
    border-radius: var(--sp-swatch-radius);
    outline: none;
    transition:
      opacity var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .sp-color-swatch-item:hover:not([data-disabled]) {
    opacity: 0.8;
  }

  .sp-color-swatch-item:active:not([data-disabled]) {
    opacity: 0.7;
  }

  /* The gap ring takes the colour of the surface the picker sits on (published by
   * Card, Dialog, Popover, Sheet), falling back to the page background. */
  .sp-color-swatch-item[data-selected] {
    box-shadow:
      0 0 0 2px var(--sp-rw-surface-color, var(--sp-rw-bg-base)),
      0 0 0 3px var(--sp-semantic-color-border);
  }

  /* The ring indicator: the same gap, then a 2px accent ring. The accent ink
   * keeps its contrast on the surface in light and dark. */
  .sp-color-swatch-scope[data-indicator="ring"]
    .sp-color-swatch-item[data-selected] {
    box-shadow:
      0 0 0 2px var(--sp-rw-surface-color, var(--sp-rw-bg-base)),
      0 0 0 4px var(--sp-rw-fg-accent);
  }

  /* The focus outline is the one of every kit control. */
  .sp-color-swatch-item[data-focus-visible] {
    outline: var(--sp-semantic-state-focus-width) solid
      var(--sp-rw-border-focus);
    outline-offset: var(--sp-semantic-state-focus-offset);
  }

  /* A selected ring is not covered by the outline: the outline moves out beyond
   * it, so the selection and the focus both stay visible. */
  .sp-color-swatch-scope[data-indicator="ring"]
    .sp-color-swatch-item[data-selected][data-focus-visible] {
    outline-offset: calc(4px + var(--sp-semantic-state-focus-offset));
  }

  .sp-color-swatch-item[data-disabled] {
    cursor: not-allowed;
    opacity: var(--sp-semantic-state-disabled-opacity);
  }

  /* A disabled picker fades once; its swatches, disabled with it, do not fade a
   * second time. */
  .sp-color-swatch-picker[data-disabled] .sp-color-swatch-item[data-disabled] {
    opacity: 1;
  }

  .sp-color-swatch-picker-swatch {
    width: 100%;
    height: 100%;
    border: var(--sp-rw-border-default) solid var(--sp-rw-border-translucent);
    border-radius: inherit;
  }

  /* The picture fills the border box, so the translucent border is drawn over it
   * and the two never part at a fractional pixel position. */
  .sp-color-swatch-picker-swatch[data-image] {
    background-origin: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* The check draws and pops through the shared check motion in motion.css: the
   * glyph carries its classes and this indicator is the element that holds the
   * selected state around it. Only the box and the glyph size live here. */
  .sp-color-swatch-picker-indicator {
    position: absolute;
    inset: 0;
    display: grid;
    color: white;
    place-items: center;
    pointer-events: none;
  }

  .sp-color-swatch-picker-indicator svg {
    width: var(--sp-swatch-check);
    height: var(--sp-swatch-check);
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 32%));
  }
}


// ~/src/siteplane/components/color-swatch-picker/index.ts

export * from "./color-swatch-picker";