/**
 * @file Component Mapping Configuration
 * @description Maps Drupal SDC story IDs to their corresponding KERN-UX reference story IDs.
 *
 * This mapping enables automated visual regression testing that compares
 * Drupal SDC components against the official KERN-UX design system implementation.
 *
 * ## Naming Convention Goals
 * - Eventually align Drupal SDC naming with KERN-UX naming
 * - For now, maintain this mapping to bridge the differences
 *
 * ## Adding New Mappings
 * 1. Find the Drupal SDC story ID from: storybook-static/index.json
 * 2. Find the matching KERN-UX story ID from: tests/vrt/reference-storybook/index.json
 * 3. Add the mapping below
 *
 * ## Useful Commands
 * To list all KERN-UX stories:
 *   cat tests/vrt/reference-storybook/index.json | python3 -c "import sys,json; d=json.load(sys.stdin); [print(e['id']) for e in d['entries'].values() if e['type']=='story']" | sort
 *
 * To list all Drupal SDC stories:
 *   cat storybook-static/index.json | python3 -c "import sys,json; d=json.load(sys.stdin); [print(e['id']) for e in d['entries'].values() if e['type']=='story']" | sort
 *
 * ## Coverage Tracking
 * - ✅ = Mapped and tested
 * - ⚠️ = Partial mapping (some variants missing in KERN-UX)
 * - ❌ = Not yet mapped
 */

/**
 * Interface for a single component mapping entry.
 */
export interface ComponentMapping {
  /** Drupal SDC story ID (from storybook-static/index.json) */
  drupalStoryId: string;
  /** KERN-UX reference story ID (from tests/vrt/reference-storybook/index.json) */
  kernUxStoryId: string;
  /** Human-readable description of what this maps */
  description: string;
  /** Whether this mapping is currently enabled for testing */
  enabled: boolean;
}

/**
 * Component mappings organized by component name.
 *
 * Each component contains an array of story mappings.
 */
export const COMPONENT_MAPPINGS: Record<string, ComponentMapping[]> = {
  /**
   * ✅ Accordion Component
   */
  Accordion: [
    {
      drupalStoryId: "kern-ux-sdc-accordion--open",
      kernUxStoryId: "komponenten-accordion--accordion-open",
      description: "Accordion in open/expanded state",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-accordion--closed",
      kernUxStoryId: "komponenten-accordion--accordion",
      description: "Accordion in closed/collapsed state",
      enabled: true,
    },
  ],

  /**
   * ✅ Alert Component
   * Note: KERN-UX uses "danger" instead of "error"
   */
  Alert: [
    {
      drupalStoryId: "kern-ux-sdc-alert--info",
      kernUxStoryId: "komponenten-alert-alert--alert-info",
      description: "Info alert",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-alert--success",
      kernUxStoryId: "komponenten-alert-alert--alert-success",
      description: "Success alert",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-alert--warning",
      kernUxStoryId: "komponenten-alert-alert--alert-warning",
      description: "Warning alert",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-alert--danger",
      kernUxStoryId: "komponenten-alert-alert--alert-danger",
      description: "Error/Danger alert (KERN-UX calls this 'danger')",
      enabled: true,
    },
    // Note: "with-link" variant doesn't have a direct KERN-UX equivalent
  ],

  /**
   * ✅ Badge Component
   * Note: KERN-UX uses "danger" instead of "error"
   */
  Badge: [
    {
      drupalStoryId: "kern-ux-sdc-badge--info-iconless",
      kernUxStoryId: "komponenten-badge-badge--badge-info",
      description: "Info badge",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-badge--success-iconless",
      kernUxStoryId: "komponenten-badge-badge--badge-success",
      description: "Success badge",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-badge--warning-iconless",
      kernUxStoryId: "komponenten-badge-badge--badge-warning",
      description: "Warning badge",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-badge--danger-iconless",
      kernUxStoryId: "komponenten-badge-badge--badge-danger",
      description: "Error/Danger badge",
      enabled: true,
    },
  ],

  /**
   * ✅ Button Component
   */
  Button: [
    {
      drupalStoryId: "kern-ux-sdc-button--primary",
      kernUxStoryId: "komponenten-button-primary--primary",
      description: "Primary button",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-button--secondary",
      kernUxStoryId: "komponenten-button-secondary--secondary",
      description: "Secondary button",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-button--tertiary",
      kernUxStoryId: "komponenten-button-tertiary--tertiary",
      description: "Tertiary button",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-button--disabled",
      kernUxStoryId: "komponenten-button-primary--primary-disabled",
      description: "Disabled button (primary variant)",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-button--block",
      kernUxStoryId: "komponenten-button-primary--primary-block",
      description: "Block-level button",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-button--withicon",
      kernUxStoryId: "komponenten-button-primary--icon-left",
      description: "Button with icon on left",
      enabled: true,
    },
  ],

  /**
   * ⚠️ Card Component
   * Note: KERN-UX Card stories have different structure - limited mapping
   */
  Card: [
    {
      drupalStoryId: "kern-ux-sdc-card--default",
      kernUxStoryId: "komponenten-card--card",
      description: "Default card",
      enabled: true,
    },
    // Card with image and complete variants need investigation
  ],

  /**
   * ✅ Checkbox Component
   */
  Checkbox: [
    {
      drupalStoryId: "kern-ux-sdc-checkbox--default",
      kernUxStoryId: "komponenten-checkbox--checkbox",
      description: "Default checkbox (unchecked)",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-checkbox--checked",
      kernUxStoryId: "komponenten-checkbox--checkbox-checked",
      description: "Checked checkbox",
      enabled: true,
    },
  ],

  /**
   * ⚠️ Divider Component
   * Note: KERN-UX only has one divider story (no "large" variant)
   */
  Divider: [
    {
      drupalStoryId: "kern-ux-sdc-divider--default",
      kernUxStoryId: "komponenten-divider--divider",
      description: "Default divider",
      enabled: true,
    },
    // Large divider doesn't exist in KERN-UX
  ],

  /**
   * ⚠️ Heading Component
   * Note: KERN-UX uses different naming (display, x-large, large, medium, small)
   * Mapping H1 -> x-large, H2 -> large
   */
  Heading: [
    {
      drupalStoryId: "kern-ux-sdc-heading--h-1",
      kernUxStoryId: "typografie-heading--heading-x-large",
      description: "Heading level 1 (maps to x-large)",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-heading--h-2",
      kernUxStoryId: "typografie-heading--heading-large",
      description: "Heading level 2 (maps to large)",
      enabled: true,
    },
  ],

  /**
   * ✅ Input Component (Text Input)
   */
  Input: [
    {
      drupalStoryId: "kern-ux-sdc-input--default",
      kernUxStoryId: "komponenten-input-text--input-text",
      description: "Default text input",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-input--disabled",
      kernUxStoryId: "komponenten-input-text--input-text-disabled",
      description: "Disabled text input",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-input--with-hint",
      kernUxStoryId: "komponenten-input-text--input-text-hint",
      description: "Text input with hint",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-input--with-error",
      kernUxStoryId: "komponenten-input-text--input-text-hint-error",
      description: "Text input with error",
      enabled: true,
    },
    // Note: KERN-UX uses "optional" instead of "required" - different approach
  ],

  /**
   * ✅ Radio Component
   */
  Radio: [
    {
      drupalStoryId: "kern-ux-sdc-radio--default",
      kernUxStoryId: "komponenten-radios--radio",
      description: "Default radio button",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-radio--checked",
      kernUxStoryId: "komponenten-radios--radio-checked",
      description: "Checked radio button",
      enabled: true,
    },
  ],

  /**
   * ✅ Select Component
   */
  Select: [
    {
      drupalStoryId: "kern-ux-sdc-select--default",
      kernUxStoryId: "komponenten-select--select",
      description: "Default select dropdown",
      enabled: true,
    },
    // Note: KERN-UX uses "optional" instead of "required"
  ],

  /**
   * ✅ Text Component (Body/Label)
   */
  Text: [
    {
      drupalStoryId: "kern-ux-sdc-text--body",
      kernUxStoryId: "typografie-body--text",
      description: "Body text",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-text--label",
      kernUxStoryId: "typografie-label--label",
      description: "Label text",
      enabled: true,
    },
  ],

  /**
   * ✅ Textarea Component
   */
  Textarea: [
    {
      drupalStoryId: "kern-ux-sdc-textarea--default",
      kernUxStoryId: "komponenten-textarea--textarea",
      description: "Default textarea",
      enabled: true,
    },
    {
      drupalStoryId: "kern-ux-sdc-textarea--with-hint",
      kernUxStoryId: "komponenten-textarea--textarea-hint",
      description: "Textarea with hint",
      enabled: true,
    },
  ],
};

/**
 * Gets all enabled mappings as a flat array.
 *
 * @returns Array of all enabled component mappings
 */
export function getEnabledMappings(): ComponentMapping[] {
  const mappings: ComponentMapping[] = [];

  for (const componentMappings of Object.values(COMPONENT_MAPPINGS)) {
    for (const mapping of componentMappings) {
      if (mapping.enabled) {
        mappings.push(mapping);
      }
    }
  }

  return mappings;
}

/**
 * Gets mappings for a specific component.
 *
 * @param componentName - Name of the component
 * @returns Array of mappings for that component, or empty array if not found
 */
export function getMappingsForComponent(componentName: string): ComponentMapping[] {
  return COMPONENT_MAPPINGS[componentName] ?? [];
}

/**
 * Generates a summary of mapping coverage.
 *
 * @returns Object with coverage statistics
 */
export function getMappingCoverage(): {
  totalMappings: number;
  enabledMappings: number;
  componentCount: number;
  byComponent: Record<string, { total: number; enabled: number }>;
} {
  const byComponent: Record<string, { total: number; enabled: number }> = {};
  let totalMappings = 0;
  let enabledMappings = 0;

  for (const [componentName, mappings] of Object.entries(COMPONENT_MAPPINGS)) {
    const enabled = mappings.filter((m) => m.enabled).length;
    byComponent[componentName] = {
      total: mappings.length,
      enabled,
    };
    totalMappings += mappings.length;
    enabledMappings += enabled;
  }

  return {
    totalMappings,
    enabledMappings,
    componentCount: Object.keys(COMPONENT_MAPPINGS).length,
    byComponent,
  };
}
