import Card from "../../components/Card";
import MetricCard from "../../components/MetricCard";
import PageScrollViewport from "../../components/PageScrollViewport";
import PageTitle from "../../components/PageTitle";
import { usePlatformModules } from "../../platform/ModuleContext";

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

  return (
    <PageScrollViewport className="core-dashboard-page">
      <div className="content-pad workspace-data-page">
      <div className="page-heading split workspace-heading">
        <div>
          <PageTitle>i18n:govoplan-core.dashboard.d87f47b4</PageTitle>
          <p>Install and enable the dashboard module to make this page configurable.</p>
        </div>
      </div>

      <div className="metric-grid">
        <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." />
      </div>

      <div className="dashboard-grid">
        <Card title="i18n:govoplan-core.installed_modules.32b3e799">
          {modules.length === 0 ? <p className="muted">i18n:govoplan-core.no_feature_modules_are_active.e9c2d936</p> :
          <dl className="detail-list">
              {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>
            )}
            </dl>
          }
        </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>
      </div>
      </div>
    </PageScrollViewport>);

}

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