import { ProjectEditorSectionId } from '../models/project-editor.model';
import { AppIconName } from '../../../shared/ui/icon/icon-registry';

export type BuilderGroupId =
  | 'marketplace'
  | 'branding'
  | 'homepage'
  | 'content'
  | 'languages'
  | 'features'
  | 'navigation'
  | 'preview';

export interface BuilderGroup {
  id: BuilderGroupId;
  icon: AppIconName;
  labelKey: string;
  descriptionKey: string;
  purposeKey: string;
  whereKey: string;
  skipKey: string;
  sections: ProjectEditorSectionId[];
}

/**
 * The Builder's business-oriented information architecture (Sprint 3). Maps
 * every existing ProjectEditorSectionId to exactly one group - no section is
 * dropped, no group points at a section that doesn't exist yet. `static-pages`
 * routes here as "Content" (it's the same StaticPagesEditorComponent already
 * wired at that section id, just relabeled for a non-technical audience).
 */
export const BUILDER_GROUPS: BuilderGroup[] = [
  {
    id: 'marketplace',
    icon: 'store',
    labelKey: 'builder.groupMarketplaceLabel',
    descriptionKey: 'builder.groupMarketplaceDescription',
    purposeKey: 'builder.groupMarketplacePurpose',
    whereKey: 'builder.groupMarketplaceWhere',
    skipKey: 'builder.groupMarketplaceSkip',
    sections: ['general'],
  },
  {
    id: 'branding',
    icon: 'palette',
    labelKey: 'builder.groupBrandingLabel',
    descriptionKey: 'builder.groupBrandingDescription',
    purposeKey: 'builder.groupBrandingPurpose',
    whereKey: 'builder.groupBrandingWhere',
    skipKey: 'builder.groupBrandingSkip',
    // Theme (colors) intentionally precedes Branding (logos): merchants pick
    // their palette first, then upload logo assets that match it.
    sections: ['theme', 'branding', 'header', 'footer'],
  },
  {
    id: 'homepage',
    icon: 'home',
    labelKey: 'builder.groupHomepageLabel',
    descriptionKey: 'builder.groupHomepageDescription',
    purposeKey: 'builder.groupHomepagePurpose',
    whereKey: 'builder.groupHomepageWhere',
    skipKey: 'builder.groupHomepageSkip',
    sections: ['homepage', 'widgets'],
  },
  {
    id: 'content',
    icon: 'edit',
    labelKey: 'builder.groupContentLabel',
    descriptionKey: 'builder.groupContentDescription',
    purposeKey: 'builder.groupContentPurpose',
    whereKey: 'builder.groupContentWhere',
    skipKey: 'builder.groupContentSkip',
    sections: ['static-pages'],
  },
  {
    id: 'languages',
    icon: 'globe',
    labelKey: 'builder.groupLanguagesLabel',
    descriptionKey: 'builder.groupLanguagesDescription',
    purposeKey: 'builder.groupLanguagesPurpose',
    whereKey: 'builder.groupLanguagesWhere',
    skipKey: 'builder.groupLanguagesSkip',
    sections: ['languages'],
  },
  {
    id: 'features',
    icon: 'slidersHorizontal',
    labelKey: 'builder.groupFeaturesLabel',
    descriptionKey: 'builder.groupFeaturesDescription',
    purposeKey: 'builder.groupFeaturesPurpose',
    whereKey: 'builder.groupFeaturesWhere',
    skipKey: 'builder.groupFeaturesSkip',
    sections: ['features'],
  },
  {
    id: 'navigation',
    icon: 'compass',
    labelKey: 'builder.groupNavigationLabel',
    descriptionKey: 'builder.groupNavigationDescription',
    purposeKey: 'builder.groupNavigationPurpose',
    whereKey: 'builder.groupNavigationWhere',
    skipKey: 'builder.groupNavigationSkip',
    sections: ['navigation'],
  },
  {
    id: 'preview',
    icon: 'monitor',
    labelKey: 'builder.groupPreviewLabel',
    descriptionKey: 'builder.groupPreviewDescription',
    purposeKey: 'builder.groupPreviewPurpose',
    whereKey: 'builder.groupPreviewWhere',
    skipKey: 'builder.groupPreviewSkip',
    sections: ['preview'],
  },
];

export const SECTION_TO_GROUP: Record<ProjectEditorSectionId, BuilderGroupId> = BUILDER_GROUPS.reduce(
  (map, group) => {
    for (const section of group.sections) {
      map[section] = group.id;
    }
    return map;
  },
  {} as Record<ProjectEditorSectionId, BuilderGroupId>,
);
