import * as React from 'react';
import { useKnobTheme } from '../core/theme';

export interface LampRowItem {
  label: string;
  on: boolean;
  color?: string;
}

export interface LampRowProps {
  lamps: readonly LampRowItem[];
  /** Lamp diameter in px. Default: 9. */
  size?: number;
  /** Caption font size in px. Default: 9.5. */
  labelSize?: number;
  /** Caption placement relative to each lamp. Default: 'right'. */
  labelPosition?: 'right' | 'below';
  /** Make lamps clickable (a compact indicator toggle bank). */
  onToggle?: (index: number, on: boolean) => void;
  /** Spacing between lamp cells in px. Default: 14. */
  gap?: number;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  'aria-label'?: string;
}

/**
 * A row of small indicator lamps with console-print captions — the
 * `● CUE  ● MUTE` bank hardware panels use, standardized. Read-only status by
 * default; pass `onToggle` to make the lamps pressable.
 */
export const LampRow: React.FC<LampRowProps> = ({
  lamps,
  size = 9,
  labelSize,
  labelPosition = 'right',
  onToggle,
  gap = 14,
  disabled = false,
  className,
  style,
  ...aria
}) => {
  const theme = useKnobTheme();
  const below = labelPosition === 'below';
  const interactive = !!onToggle;

  return (
    <div
      className={className}
      role="group"
      aria-label={aria['aria-label']}
      data-disabled={disabled ? '' : undefined}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap,
        opacity: disabled ? 0.45 : 1,
        ...style,
      }}
    >
      {lamps.map((lamp, i) => {
        const accent = lamp.color ?? theme.accent ?? theme.zoneGood;
        const dot = (
          <span
            aria-hidden="true"
            style={{
              width: size,
              height: size,
              flex: 'none',
              borderRadius: '50%',
              background: lamp.on ? accent : 'rgba(255,255,255,0.1)',
              border: '1px solid rgba(0,0,0,0.5)',
              boxShadow: lamp.on
                ? `0 0 ${size * 0.8}px ${accent}, inset 0 0 ${size * 0.25}px rgba(255,255,255,0.5)`
                : 'inset 0 1px 2px rgba(0,0,0,0.6)',
              transition: 'background 80ms, box-shadow 80ms',
            }}
          />
        );
        const caption = (
          <span
            style={{
              fontFamily: theme.fontUI,
              fontSize: labelSize ?? 9.5,
              fontWeight: 600,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: lamp.on ? theme.text : theme.label,
              whiteSpace: 'nowrap',
              transition: 'color 80ms',
            }}
          >
            {lamp.label}
          </span>
        );
        const inner = (
          <span
            style={{
              display: 'inline-flex',
              flexDirection: below ? 'column' : 'row',
              alignItems: 'center',
              gap: below ? 4 : 6,
            }}
          >
            {dot}
            {caption}
          </span>
        );

        return interactive ? (
          <button
            key={i}
            type="button"
            role="switch"
            aria-checked={lamp.on}
            aria-label={lamp.label}
            disabled={disabled}
            onClick={() => onToggle!(i, !lamp.on)}
            style={{
              background: 'none',
              border: 'none',
              padding: 0,
              cursor: disabled ? 'not-allowed' : 'pointer',
              font: 'inherit',
            }}
          >
            {inner}
          </button>
        ) : (
          <React.Fragment key={i}>{inner}</React.Fragment>
        );
      })}
    </div>
  );
};