import type { RefAttributes } from 'react';
import React, { Fragment, useCallback, useId, useMemo, useState } from 'react';
import classNames from 'classnames';

import { useTranslations } from '@shoptet/ui-core-web';
import type { Complete } from '@shoptet/utils';
import { destruct, type Exact, type SafeOmit, useStableCallback } from '@shoptet/utils';

import { Button } from '../../Button/Button';
import type { ImageProps } from '../../Image/Image';
import { Image } from '../../Image/Image';
import type { ModalProps } from '../../Modal/Modal';
import { Modal } from '../../Modal/Modal';
import { Paragraph } from '../../Typography/Paragraph/Paragraph';
import type { RadioGroupProps, SelectKey } from '../RadioGroup/RadioGroup';
import { RadioGroup } from '../RadioGroup/RadioGroup';
import type { RenderRadioGroupOptionProps } from '../RadioGroup/types';

import { dictionary, type ImageSelectTranslations } from './dictionary';

export type { SelectKey };

const DEFAULT_ASPECT_RATIO: ImageProps['aspectRatio'] = '3 / 2';
const DEFAULT_OPTION_SIZE: NonNullable<ImageProps['size']> = 'sm';
const DEFAULT_IMAGE_SIZE: NonNullable<ImageProps['size']> = 'md';
const DEFAULT_MIN_COLUMN_WIDTH: Record<NonNullable<ImageProps['size']>, number> = {
  sm: 130,
  md: 220,
  lg: 440,
  full: 960,
};

export interface InheritedRadioGroupProps<T extends object = object, V extends SelectKey = SelectKey> extends SafeOmit<
  RadioGroupProps<T, V>,
  'id' | 'ref' | 'key' | 'name' | 'onChange' | 'layout' | 'orientation'
> {}

export interface ImageSelectOwnProps<
  T extends object = object,
  V extends SelectKey = SelectKey,
> extends RefAttributes<HTMLButtonElement> {
  /**
   * The id of the trigger button.
   */
  id?: string;
  /**
   * Called when the user confirms a selection in the modal.
   */
  onChange?: (value: V | null, event: React.MouseEvent<HTMLButtonElement>) => void;
  /**
   * Shows a loading spinner on the modal Confirm button. Use while a consumer-driven onChange is pending.
   */
  loading?: boolean;
  /**
   * Aspect ratio applied to both the trigger preview and the modal tiles.
   * @default '3 / 2'
   */
  aspectRatio?: ImageProps['aspectRatio'];
  /**
   * Returns the image source URL for an option.
   */
  getOptionImageSrc(option: T): string;
  /**
   * Returns the alt text for an option's image. Falls back to `getOptionLabel(option)` when not provided.
   */
  getOptionImageAlt?(option: T): string | undefined;
  /**
   * Override the trigger preview rendering. Receives the currently selected option.
   */
  renderValue?(option: T | null): React.ReactNode;
  /**
   * Optional override for the trigger preview aspect ratio. Falls back to `aspectRatio`.
   */
  previewAspectRatio?: ImageProps['aspectRatio'];
  /**
   * Size of the radio tiles inside the modal.
   * @default 'md'
   */
  optionSize?: ImageProps['size'];
  /**
   * Modal title. Defaults to the trigger CTA ('Choose image' / 'Change image').
   */
  modalTitle?: string;
  /**
   * Optional description shown below the modal title.
   */
  modalDescription?: React.ReactNode;
  modalMaxWidth?: ModalProps['maxWidth'];
  /**
   * Per-instance translation overrides.
   */
  translations?: Partial<ImageSelectTranslations>;
  /**
   * Width of the image preview.
   * Affects only the layout of the trigger, not the images inside the modal.
   * @default 'md'
   */
  width?: ImageProps['size'];
}

export interface ImageSelectProps<T extends object = object, V extends SelectKey = SelectKey>
  extends ImageSelectOwnProps<T, V>, InheritedRadioGroupProps<T, V> {}

export function ImageSelect<T extends object = object, V extends SelectKey = SelectKey>(props: ImageSelectProps<T, V>) {
  const [ownProps, radioGroupProps] = destruct(props, [
    'id',
    'ref',
    'key',
    'onChange',
    'loading',
    'aspectRatio',
    'getOptionImageSrc',
    'getOptionImageAlt',
    'renderValue',
    'previewAspectRatio',
    'optionSize',
    'modalTitle',
    'modalDescription',
    'modalMaxWidth',
    'translations',
    'width',
  ]);
  ownProps satisfies Exact<Complete<ImageSelectOwnProps<T, V>>, typeof ownProps>;
  radioGroupProps satisfies Exact<Complete<InheritedRadioGroupProps<T, V>>, typeof radioGroupProps>;

  const {
    id,
    key,
    ref,
    onChange,
    getOptionImageSrc,
    getOptionImageAlt,
    renderValue,
    loading,
    aspectRatio = DEFAULT_ASPECT_RATIO,
    previewAspectRatio,
    optionSize = DEFAULT_OPTION_SIZE,
    modalTitle,
    modalDescription,
    modalMaxWidth,
    translations: translationOverrides,
    width = DEFAULT_IMAGE_SIZE,
    ...exhaustedOwnProps
  } = ownProps;
  exhaustedOwnProps satisfies Record<PropertyKey, never>;

  const {
    value: valueProp,
    defaultValue,
    disabled,
    getOptionValue,
    getOptionLabel,
    options,
    renderOption,
    required,
    minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH[optionSize],
    ...radioGroupRestProps
  } = radioGroupProps;

  const baseTranslations = useTranslations(dictionary);
  const translations = useMemo(
    () => ({ ...baseTranslations, ...translationOverrides }),
    [baseTranslations, translationOverrides]
  );

  const radioGroupName = useId();

  const isControlled = valueProp !== undefined;
  const [localValue, setLocalValue] = useState<V | null>(defaultValue ?? null);
  const selectedValue = isControlled ? valueProp : localValue;

  const selectedOption = useMemo(
    () => (selectedValue == null ? null : (options.find(option => getOptionValue(option) === selectedValue) ?? null)),
    [options, selectedValue, getOptionValue]
  );

  const hasNoOptions = options.length === 0;
  const triggerDisabled = disabled || hasNoOptions;
  const triggerLabel = selectedOption ? translations.changeImage : translations.chooseImage;
  const resolvedModalTitle = modalTitle ?? triggerLabel;

  const [isOpen, setIsOpen] = useState(false);
  const [pendingValue, setPendingValue] = useState<V | null>(selectedValue);

  const handleOpen = useStableCallback(() => {
    if (triggerDisabled) return;
    setPendingValue(selectedValue);
    setIsOpen(true);
  });

  const handleCancel = useStableCallback(() => {
    setIsOpen(false);
  });

  const handleConfirm: React.MouseEventHandler<HTMLButtonElement> = useStableCallback(event => {
    if (!isControlled) {
      setLocalValue(pendingValue);
    }
    onChange?.(pendingValue, event);
    setIsOpen(false);
  });

  const handlePendingChange = useCallback((next: V | null) => {
    setPendingValue(next);
  }, []);

  const resolveAlt = useCallback(
    (option: T) => getOptionImageAlt?.(option) ?? getOptionLabel(option),
    [getOptionImageAlt, getOptionLabel]
  );

  const defaultRenderOption = useCallback(
    (option: T, renderProps: RenderRadioGroupOptionProps<V>) => (
      <RadioGroup.ImageOption
        {...renderProps}
        src={getOptionImageSrc(option)}
        alt={resolveAlt(option)}
        fit='cover'
        aspectRatio={aspectRatio}
        size={optionSize}
      />
    ),
    [aspectRatio, getOptionImageSrc, optionSize, resolveAlt]
  );

  const previewRatio = previewAspectRatio ?? aspectRatio;

  const previewContent = renderValue ? (
    renderValue(selectedOption)
  ) : (
    <Image
      src={selectedOption ? getOptionImageSrc(selectedOption) : undefined}
      alt={selectedOption ? resolveAlt(selectedOption) : ''}
      aspectRatio={previewRatio}
      size='full'
      fit='cover'
    />
  );

  const validity = radioGroupRestProps.validity;

  return (
    <Fragment key={key}>
      <div
        className={classNames('imageSelect', {
          'imageSelect--disabled': triggerDisabled,
          'imageSelect--width-sm': width === 'sm',
          'imageSelect--width-md': width === 'md',
          'imageSelect--width-lg': width === 'lg',
          'imageSelect--width-full': width === 'full',
        })}
      >
        <div
          className={classNames('imageSelect__preview', {
            'imageSelect__preview--warning': validity === 'warning',
            'imageSelect__preview--error': validity === 'error',
          })}
          onClick={triggerDisabled ? undefined : handleOpen}
          aria-hidden='true'
        >
          {previewContent}
        </div>
        <div className='imageSelect__action'>
          <Button
            id={id}
            ref={ref}
            type='button'
            variant='secondary'
            size='sm'
            isLoading={loading}
            disabled={triggerDisabled}
            aria-required={required ? true : undefined}
            onClick={handleOpen}
          >
            {triggerLabel}
          </Button>
        </div>
      </div>
      <Modal isOpen={isOpen} onClose={handleCancel} maxWidth={modalMaxWidth}>
        <Modal.Header>{resolvedModalTitle}</Modal.Header>
        <Modal.Content>
          <div className='imageSelect__modalBody'>
            {!!modalDescription && <Paragraph>{modalDescription}</Paragraph>}
            <RadioGroup<T, V>
              {...radioGroupRestProps}
              name={radioGroupName}
              value={pendingValue}
              onChange={handlePendingChange}
              disabled={disabled}
              options={options}
              getOptionValue={getOptionValue}
              getOptionLabel={getOptionLabel}
              renderOption={renderOption ?? defaultRenderOption}
              required={required}
              layout='grid'
              minColumnWidth={minColumnWidth}
            />
          </div>
        </Modal.Content>
        <Modal.Footer>
          {({ primaryButtonProps, secondaryButtonProps }) => (
            <>
              <Button {...secondaryButtonProps} onClick={handleCancel}>
                {translations.cancel}
              </Button>
              <Button {...primaryButtonProps} isLoading={loading} onClick={handleConfirm}>
                {translations.confirm}
              </Button>
            </>
          )}
        </Modal.Footer>
      </Modal>
    </Fragment>
  );
}

ImageSelect.displayName = 'ImageSelect';