import type { CSSProperties } from "react";

/**
 * Supported organ identifiers
 */
export type OrganId =
  | "head"
  | "eye"
  | "ear"
  | "heart"
  | "lung"
  | "digestive"
  | "kidney"
  | "integument"
  | "constitutional"
  | "limbs"
  | "nervous"
  | "breast"
  | "thoracicCavity"
  | "voice"
  | "metabolism"
  | "cell"
  | "endocrine"
  | "neoplasm"
  | "immune"
  | "muscle"
  | "growth"
  | "prenatal"
  | "blood";

/**
 * HPO official category labels
 * @see https://hpo.jax.org/
 */
export type HPOLabel =
  | "others"
  | "Growth abnormality"
  | "Abnormality of the genitourinary system"
  | "Abnormality of the immune system"
  | "Abnormality of the digestive system"
  | "Abnormality of metabolism/homeostasis"
  | "Abnormality of head or neck"
  | "Abnormality of the musculoskeletal system"
  | "Abnormality of the nervous system"
  | "Abnormality of the respiratory system"
  | "Abnormality of the eye"
  | "Abnormality of the cardiovascular system"
  | "Abnormality of the ear"
  | "Abnormality of prenatal development or birth"
  | "Abnormality of the integument"
  | "Abnormality of the breast"
  | "Abnormality of the endocrine system"
  | "Abnormality of blood and blood-forming tissues"
  | "Abnormality of limbs"
  | "Abnormality of the voice"
  | "Constitutional symptom"
  | "Neoplasm"
  | "Abnormal cellular phenotype"
  | "Abnormality of the thoracic cavity";

/**
 * Color scheme for each organ.
 */
export type ColorName = "blue" | "yellow" | "gray";
export type ColorScheme = ColorName;
/**
 * Color step
 */
export type ColorStep = 100 | 200 | 300;
/**
 * Solid color scale (required colors)
 */
export type SolidColorScale = Record<ColorStep, string>;
/**
 * Color scale for a color palette.
 * Solid colors (100, 200, 300) are required.
 * Alpha colors are all-or-nothing optional via the 'alpha' property.
 */
export type ColorScale = SolidColorScale & {
  alpha?: SolidColorScale;
};
export type ColorPalette = Record<ColorName, ColorScale>;
export type StrictColorPalette = Record<ColorName, Required<ColorScale>>;

/**
 * Style properties for organ SVG elements
 */
export interface OrganStyle {
  /** Fill color of the organ */
  fill?: string;
  /** Stroke (border) color */
  stroke?: string;
  /** Stroke width in pixels */
  strokeWidth?: number;
  /** Opacity (0-1) */
  opacity?: number;
  /** Whether the organ is visible */
  visible?: boolean;
  /** Blur effect in pixels (CSS filter blur) */
  blur?: number;
}

/**
 * Configuration for individual organ
 */
export interface OrganConfig {
  /** Organ identifier */
  id: OrganId;
  /** Associated HPO IDs for this organ (optional) */
  hpoIds?: string[];
  /** Default style */
  style?: OrganStyle;
  /** Style when hovered */
  hoverStyle?: OrganStyle;
  /** Style when selected/active */
  activeStyle?: OrganStyle;
  /** Color scheme to use for this organ */
  colorName?: ColorName;
  /** Show red outline around this organ */
  showOutline?: boolean;
}

/**
 * Props for individual organ SVG components
 */
export interface OrganSvgProps {
  // TODO: remove style, transition
  /** Current style to apply */
  style?: OrganStyle;
  /** CSS transition string for smooth style changes */
  transition?: string;
  /** Color scale to use for this organ (with guaranteed alpha values) */
  colorScale: Required<ColorScale>;
  /** Whether the organ is in active state (hovered or selected) */
  isActive?: boolean;
  /** Additional CSS class name */
  className?: string;
}

/**
 * Internal state for organ interaction
 */
export interface OrganInteractionState {
  /** Currently hovered organ ID */
  hoveredOrgan: OrganId | null;
  /** Currently selected/clicked organ ID */
  selectedOrgan: OrganId | null;
}

/**
 * Handlers returned by useOrganInteraction hook
 */
export interface OrganInteractionHandlers {
  /** Handle mouse enter on organ */
  handleMouseEnter: (organId: OrganId) => void;
  /** Handle mouse leave on organ */
  handleMouseLeave: () => void;
  /** Handle click on organ */
  handleClick: (organId: OrganId) => void;
}

/**
 * Props for the main HpoVisualizer component
 */
export interface HpoVisualizerProps {
  /** Detailed organ configurations */
  organs?: OrganConfig[];
  /**
   * List of organ IDs to display.
   * - undefined: all organs are visible
   * - OrganId[]: only the specified organs are visible
   * - []: no organs are visible
   */
  visibleOrgans?: OrganId[];
  /** Controlled: currently hovered organ */
  hoveredOrgan?: OrganId | null;
  /** Controlled: currently selected organ */
  selectedOrgan?: OrganId | null;
  /** Callback when hover state changes */
  onHover?: (organId: OrganId | null) => void;
  /** Callback when selection state changes */
  onSelect?: (organId: OrganId | null) => void;
  /** Color palette to use for organs */
  colorPalette?: Partial<ColorPalette>;
  /** Width of the visualizer */
  width?: number | string;
  /** Height of the visualizer */
  height?: number | string;
  /** Additional CSS class name */
  className?: string;
  /** Additional inline styles */
  style?: CSSProperties;
  /** Maximum zoom level (default: 5 = 500%) */
  maxZoom?: number;
  /** Enable zoom with mouse wheel (default: true) */
  wheelZoom?: boolean;
}