import type { ComponentType } from "react"
import type { LucideIcon } from "lucide-react"
import { Crosshair, Film, ListChecks, Radio, SlidersHorizontal } from "lucide-react"
import { DetectorPanel } from "./detector/DetectorPanel"
import { PreviewPanel } from "./preview/PreviewPanel"
import { RuleStudioPanel } from "./rules/RuleStudioPanel"
import { ActivityPanel } from "./activity/ActivityPanel"
import { SettingsPanel } from "./settings/SettingsPanel"

export type SectionId = "test" | "automation" | "settings"

/** Top-level horizontal bands, each separated by a rule. */
export interface DashboardSection {
  id: SectionId
  label: string
  hint: string
  order: number
}

export const SECTIONS: DashboardSection[] = [
  { id: "test", label: "Test", hint: "detect · replay · fired actions", order: 1 },
  { id: "automation", label: "Automations & Firings", hint: "compile · validate · log", order: 2 },
  { id: "settings", label: "Settings", hint: "dispatch · compiler", order: 3 },
]

/**
 * A dashboard module. Add functionality by dropping a new folder under
 * `modules/<name>/` that exports a Panel, then registering it here with the
 * `section` it belongs to and its `span` (out of a 12-column section grid).
 */
export interface DashboardModule {
  id: string
  index: string
  eyebrow: string
  title: string
  icon: LucideIcon
  section: SectionId
  order: number
  span: number
  Panel: ComponentType
}

export const MODULES: DashboardModule[] = [
  {
    id: "detector",
    index: "01",
    eyebrow: "input",
    title: "Detector",
    icon: Crosshair,
    section: "test",
    order: 1,
    span: 4,
    Panel: DetectorPanel,
  },
  {
    id: "replay",
    index: "02",
    eyebrow: "output",
    title: "Annotated Replay",
    icon: Film,
    section: "test",
    order: 2,
    span: 8,
    Panel: PreviewPanel,
  },
  {
    id: "rules",
    index: "03",
    eyebrow: "automation",
    title: "Rule Studio",
    icon: ListChecks,
    section: "automation",
    order: 1,
    span: 5,
    Panel: RuleStudioPanel,
  },
  {
    id: "activity",
    index: "04",
    eyebrow: "telemetry",
    title: "Activity & Firings",
    icon: Radio,
    section: "automation",
    order: 2,
    span: 7,
    Panel: ActivityPanel,
  },
  {
    id: "dispatch",
    index: "05",
    eyebrow: "config",
    title: "Dispatch & Compiler",
    icon: SlidersHorizontal,
    section: "settings",
    order: 1,
    span: 6,
    Panel: SettingsPanel,
  },
]

export function modulesForSection(section: SectionId): DashboardModule[] {
  return MODULES.filter((m) => m.section === section).sort((a, b) => a.order - b.order)
}

// Static map so Tailwind keeps the col-span classes (no dynamic interpolation).
export const SPAN_CLASS: Record<number, string> = {
  4: "lg:col-span-4",
  5: "lg:col-span-5",
  6: "lg:col-span-6",
  7: "lg:col-span-7",
  8: "lg:col-span-8",
  12: "lg:col-span-12",
}