import { createElement, lazy } from "react";
import type { DashboardWidgetsUiCapability, PlatformWebModule } from "@govoplan/core-webui";
import InstalledModulesWidget from "./features/dashboard/widgets/InstalledModulesWidget";
import { generatedTranslations } from "./i18n/generatedTranslations";
import "./styles/dashboard.css";

const DashboardPage = lazy(() => import("./features/dashboard/DashboardPage"));

const dashboardWidgets: DashboardWidgetsUiCapability = {
  widgets: [
    {
      id: "dashboard.installed-modules",
      surfaceId: "dashboard.widget.installed-modules",
      title: "Active interface modules",
      description: "Tenant-enabled modules with a loaded WebUI in this browser session.",
      moduleId: "dashboard",
      category: "Platform",
      order: 10,
      defaultSize: "medium",
      supportedSizes: ["small", "medium", "wide"],
      defaultConfiguration: {
        maxItems: 8,
        showVersions: true,
        sortBy: "module"
      },
      configurationFields: [
        {
          id: "maxItems",
          label: "Maximum modules",
          description: "Limit how many active modules are listed.",
          kind: "number",
          min: 1,
          max: 50,
          step: 1,
          required: true
        },
        {
          id: "sortBy",
          label: "Sort modules by",
          kind: "select",
          required: true,
          options: [
            { value: "module", label: "Module id" },
            { value: "label", label: "Display name" }
          ]
        },
        {
          id: "showVersions",
          label: "Show module versions",
          kind: "boolean"
        }
      ],
      render: ({ modules, configuration }) =>
        createElement(InstalledModulesWidget, { modules, configuration })
    }
  ]
};

const translations = {
  en: generatedTranslations.en,
  de: generatedTranslations.de
};

export const dashboardModule: PlatformWebModule = {
  id: "dashboard",
  label: "i18n:govoplan-dashboard.dashboard.3f8b4df2",
  version: "1.0.0",
  dependencies: ["access"],
  optionalDependencies: ["ops", "campaigns", "files", "mail", "tasks", "notifications", "reporting"],
  translations,
  viewSurfaces: [
    {
      id: "dashboard.page",
      moduleId: "dashboard",
      kind: "route",
      label: "i18n:govoplan-dashboard.dashboard.3f8b4df2",
      order: 10
    },
    {
      id: "dashboard.summary",
      moduleId: "dashboard",
      kind: "section",
      label: "i18n:govoplan-dashboard.summary",
      parentId: "dashboard.page",
      order: 10
    },
    {
      id: "dashboard.library",
      moduleId: "dashboard",
      kind: "section",
      label: "i18n:govoplan-dashboard.library",
      parentId: "dashboard.page",
      order: 20
    },
    {
      id: "dashboard.grid",
      moduleId: "dashboard",
      kind: "section",
      label: "i18n:govoplan-dashboard.grid",
      parentId: "dashboard.page",
      order: 30
    },
    {
      id: "dashboard.widget-settings",
      moduleId: "dashboard",
      kind: "action",
      label: "i18n:govoplan-dashboard.widget_settings",
      parentId: "dashboard.grid",
      order: 40
    },
    {
      id: "dashboard.widget.installed-modules",
      moduleId: "dashboard",
      kind: "section",
      label: "i18n:govoplan-dashboard.installed_modules_widget",
      parentId: "dashboard.grid",
      order: 10
    }
  ],
  navItems: [{ to: "/dashboard", label: "i18n:govoplan-dashboard.dashboard.3f8b4df2", iconName: "dashboard", order: 10 }],
  routes: [
    {
      path: "/dashboard",
      order: 10,
      surfaceId: "dashboard.page",
      render: ({ settings, auth }) => createElement(DashboardPage, { settings, auth })
    }
  ],
  uiCapabilities: {
    "dashboard.widgets": dashboardWidgets
  }
};

export default dashboardModule;