import type { ComponentRecord } from "../types";

export type ComponentCatalogEntry = {
  /** Clearer name shown in selection UIs (overrides DB name when set). */
  displayName: string;
  shortDescription: string;
  purpose: string;
  layoutType: string;
  keyDifference: string;
  recommendedUse: string;
  /** Groups similar components for comparison hints. */
  topicGroup?: string;
  similarSlugs?: string[];
};

export const COMPONENT_CATALOG: Record<string, ComponentCatalogEntry> = {
  "pbel-guide-footer": {
    displayName: "PBEL Guide Footer",
    shortDescription: "Compact flyer footer bar with label, page text, and brand dots.",
    purpose: "Match the PBEL family flyer footer (reference /course/pbel-water) as a reusable page footer.",
    layoutType: "max-w-4xl · top border · 11px muted row · brand dots",
    keyDifference: "Separate from the Landing Footer / Site Settings footer. Use Page Settings → Show Default Footer to hide the site footer when needed.",
    recommendedUse: "PBEL Water (and similar) family flyer pages. Turn off Show Default Footer if you only want this flyer footer.",
    topicGroup: "pbel-flyer",
    similarSlugs: ["footer", "stay-in-the-loop"],
  },
  "closing-vision": {
    displayName: "Closing Vision",
    shortDescription: "Bark closing section with vision title, target line, and Portrait trait chips.",
    purpose: "End a landing or framework page with a memorable vision statement before the site footer.",
    layoutType: "full-bleed bark section · max-w-2xl centered copy",
    keyDifference: "Landing content — not the site Footer. Renders above the global/page footer.",
    recommendedUse: "Place after main content on Design to Impact or other landing-style pages. Keep a single Footer after it.",
    topicGroup: "landing-chrome",
    similarSlugs: ["footer", "hero"],
  },
  "steering-committees-grid": {
    displayName: "Steering Committees Grid",
    shortDescription: "Colored-header committee cards in a responsive 3-column grid.",
    purpose: "Show steering committees (or any similar labeled card set) with badge, icon, title, and purpose.",
    layoutType: "max-w-5xl · sm:2-col · lg:3-col · gap-5 · colored header bars",
    keyDifference: "Each card has its own accent color header (Committee N + emoji), unlike Club Category Grid’s plain white cards.",
    recommendedUse: "Steering Committees pages. Reuse with different committee data for any grade.",
    topicGroup: "grade-clubs-committees",
    similarSlugs: ["club-category-grid"],
  },
  "swot-analysis-grid": {
    displayName: "SWOT Analysis Grid",
    shortDescription: "Four colored SWOT quadrants with numbered observations linked to PoL dimensions.",
    purpose: "Capture Strengths, Weaknesses, Opportunities, and Threats for a student's Growth Plan.",
    layoutType: "max-w-5xl · sm:2-col · gap-4 · colored header bars",
    keyDifference: "Nested item lists with optional dimension tags — not a generic card grid.",
    recommendedUse: "My Growth Plan Step 1 and reusable SWOT sections across grades.",
    topicGroup: "growth-plan",
    similarSlugs: ["root-cause-fishbone", "portrait-goals-grid", "growth-radar-chart"],
  },
  "root-cause-fishbone": {
    displayName: "Root Cause Fishbone",
    shortDescription: "Ishikawa fishbone diagram with desktop SVG, mobile cards, and interventions.",
    purpose: "Map root causes behind growth gaps and list targeted interventions.",
    layoutType: "max-w-6xl · SVG fishbone + mobile cards + interventions panel",
    keyDifference: "Visual cause analysis diagram rather than a flat card grid.",
    recommendedUse: "My Growth Plan Step 2 root-cause analysis sections.",
    topicGroup: "growth-plan",
    similarSlugs: ["swot-analysis-grid", "portrait-goals-grid", "growth-radar-chart"],
  },
  "portrait-goals-grid": {
    displayName: "Portrait Goals Grid",
    shortDescription: "Six PoL dimension cards with Character and Mindset goals.",
    purpose: "Set observable Character Goals and internal Mindset Goals per Portrait dimension.",
    layoutType: "max-w-5xl · sm:2-col · lg:3-col · gap-4",
    keyDifference: "Goal pairs per dimension — not SWOT lists or radar scores.",
    recommendedUse: "My Growth Plan Step 3 Portrait goal setting.",
    topicGroup: "growth-plan",
    similarSlugs: ["swot-analysis-grid", "growth-radar-chart", "developing-the-whole-child"],
  },
  "growth-radar-chart": {
    displayName: "Growth Radar Chart",
    shortDescription: "Quarter tabs with Exposure vs Current Level radar chart and gap summary.",
    purpose: "Compare course exposure against current student levels across PoL dimensions by quarter.",
    layoutType: "max-w-4xl · quarter tabs · recharts RadarChart · gap cards",
    keyDifference: "Interactive radar visualization with numeric gaps — not a static card grid.",
    recommendedUse: "My Growth Plan Growth Radar section.",
    topicGroup: "growth-plan",
    similarSlugs: ["swot-analysis-grid", "portrait-goals-grid", "root-cause-fishbone"],
  },
  "competition-tabs": {
    displayName: "Competition Tabs (legacy)",
    shortDescription: "Deprecated nested Orion/Public panels. Tab switching now belongs in Grade Hero.",
    purpose: "Legacy content holder only — does not render a tab bar.",
    layoutType: "Timeline panel content (no navigation chrome)",
    keyDifference: "Superseded by Grade Hero → Competition Navigation + separate content blocks.",
    recommendedUse: "Do not add on new pages. Use Grade Hero Competition Navigation with Orion/Public blocks.",
    topicGroup: "competitions",
    similarSlugs: ["orion-competitions", "public-competitions", "grade-hero"],
  },
  "orion-competitions": {
    displayName: "Orion Competitions",
    shortDescription: "Month-grouped Orion competition timeline with optional Flexible / Ongoing grid.",
    purpose: "Content-only competition timeline panel switched by Grade Hero Competition Navigation.",
    layoutType: "Centered timeline with alternating cards",
    keyDifference: "Pure content — no tab buttons or active-state logic.",
    recommendedUse: "Competitions pages alongside Grade Hero Competition Navigation targeting this component.",
    topicGroup: "competitions",
    similarSlugs: ["public-competitions", "grade-hero"],
  },
  "public-competitions": {
    displayName: "Public Competitions",
    shortDescription: "Public competition timeline panel with Flexible / Ongoing cards.",
    purpose: "Content-only public competitions panel switched by Grade Hero Competition Navigation.",
    layoutType: "Centered timeline / flexible grid",
    keyDifference: "Pure content — no tab buttons or active-state logic.",
    recommendedUse: "Competitions pages alongside Grade Hero Competition Navigation targeting this component.",
    topicGroup: "competitions",
    similarSlugs: ["orion-competitions", "grade-hero"],
  },
  "progress-how-it-works": {
    displayName: "Progress How It Works",
    shortDescription: "Mastery overview sections: why mastery, scale, tracking, timeline, and reading tips.",
    purpose: "Content-only Progress Report overview panel switched by Grade Hero Competition Navigation.",
    layoutType: "Stacked explainer sections with cards, heatmap, and timeline",
    keyDifference: "Pure content — no tab buttons. Pair with Progress Sample Report.",
    recommendedUse: "Progress Report pages with Grade Hero Competition Navigation targeting this component.",
    topicGroup: "progress-report",
    similarSlugs: ["progress-sample-report", "grade-hero"],
  },
  "progress-sample-report": {
    displayName: "Progress Sample Report",
    shortDescription: "Sample mastery report with tables, competency bars, spiderweb, and narratives.",
    purpose: "Content-only Progress Report sample panel switched by Grade Hero Competition Navigation.",
    layoutType: "Stacked report cards with tables and radar chart",
    keyDifference: "Pure content — no tab buttons. Pair with Progress How It Works.",
    recommendedUse: "Progress Report pages with Grade Hero Competition Navigation targeting this component.",
    topicGroup: "progress-report",
    similarSlugs: ["progress-how-it-works", "grade-hero"],
  },
  "developing-the-whole-child": {
    displayName: "Portrait of the Learner — Dimension Grid",
    shortDescription: "Six Portrait dimensions as emoji cards with descriptions, plus a growth dashboard.",
    purpose: "Introduce the full Portrait of the Learner framework on curriculum or grade overview pages.",
    layoutType: "Card grid (2–3 columns) with emoji, title, and description blocks",
    keyDifference: "Static dimension cards — no percentage bars. Includes an interactive growth dashboard below the grid.",
    recommendedUse: "Curriculum pages and grade overviews when explaining whole-child development holistically.",
    topicGroup: "whole-child-portrait",
    similarSlugs: ["course-portrait"],
  },
  "course-portrait": {
    displayName: "Course Portrait — Progress Bars",
    shortDescription: "Shows how much each Portrait dimension is emphasized in a specific course using progress bars.",
    purpose: "Show parents how a single course develops each Portrait dimension with weighted emphasis.",
    layoutType: "Vertical list with animated progress bars and percentage labels",
    keyDifference: "Course-specific emphasis with % bars — no card grid or growth dashboard.",
    recommendedUse: "Individual course pages when showing how THIS course balances Portrait dimensions.",
    topicGroup: "whole-child-portrait",
    similarSlugs: ["developing-the-whole-child"],
  },
};

export function getComponentCatalog(slug: string): ComponentCatalogEntry | null {
  return COMPONENT_CATALOG[slug] ?? null;
}

export function getComponentDisplayName(component: Pick<ComponentRecord, "name" | "slug">): string {
  return COMPONENT_CATALOG[component.slug]?.displayName ?? component.name;
}

export function getComponentGuideDescription(component: Pick<ComponentRecord, "slug">): string | null {
  const entry = COMPONENT_CATALOG[component.slug];
  return entry?.shortDescription ?? null;
}

/** Topic groups with 2+ components visible in the current list (for comparison banners). */
export function getActiveComparisonGroups(components: ComponentRecord[]): string[] {
  const byGroup = new Map<string, ComponentRecord[]>();
  for (const component of components) {
    const group = COMPONENT_CATALOG[component.slug]?.topicGroup;
    if (!group) continue;
    const list = byGroup.get(group) ?? [];
    list.push(component);
    byGroup.set(group, list);
  }
  return Array.from(byGroup.entries())
    .filter(([, list]) => list.length >= 2)
    .map(([group]) => group);
}

export function getComponentsInTopicGroup(
  components: ComponentRecord[],
  topicGroup: string,
): ComponentRecord[] {
  return components.filter((c) => COMPONENT_CATALOG[c.slug]?.topicGroup === topicGroup);
}