import ContentGrid from "../../components/ContentGrid";
import Card from "../../components/Card";
import MetricCard from "../../components/MetricCard";
import MetricGrid from "../../components/MetricGrid";
import DescriptionList from "../../components/DescriptionList";
import PageLayout from "../../components/PageLayout";
import { usePlatformModules } from "../../platform/ModuleContext";

export default function DashboardPage() {
  const modules = usePlatformModules();

  return (
    <PageLayout
      archetype="overview"
      title="i18n:govoplan-core.dashboard.d87f47b4"
      description="Install and enable the dashboard module to make this page configurable."
      viewportClassName="core-dashboard-page"
    >
      <MetricGrid>
        <MetricCard label="i18n:govoplan-core.installed_modules.32b3e799" value={modules.length} tone="info" detail={modules.length ? moduleLabels(modules).join(", ") : "i18n:govoplan-core.core_only.d46ce7d9"} />
        <MetricCard label="Dashboard module" value="not installed" tone="neutral" detail="Core fallback is active." />
      </MetricGrid>

      <ContentGrid columns={2} collapseAt="workspace" className="">
        <Card title="i18n:govoplan-core.installed_modules.32b3e799">
          {modules.length === 0 ? <p className="muted">i18n:govoplan-core.no_feature_modules_are_active.e9c2d936</p> :
          <DescriptionList variant="inline">
              {modules.map((module) =>
            <div key={module.id}>
                  <dt>{module.id}</dt>
                  <dd><strong>{module.label}</strong><span className="muted"> i18n:govoplan-core.v.26c12f1e{module.version}</span></dd>
                </div>
            )}
            </DescriptionList>
          }
        </Card>
        <Card title="Home">
          <p className="muted">This minimal core home is only shown while no dashboard WebUI module is available. Feature modules own their pages and can expose dashboard widgets once the dashboard module is installed.</p>
        </Card>
      </ContentGrid>
    </PageLayout>);

}

function moduleLabels(modules: Array<{label: string;}>): string[] {
  return modules.map((module) => module.label).slice(0, 4);
}