import { SessionSummaryMetrics } from "./session-summary-metrics";
import { CustomerDemographicCard } from "./customer-demographic-card";
import { UserGrowthPanel } from "./user-growth-panel";
import { RecentSessions } from "@/features/sessions/recent-sessions";
import { ConnectorStatusChart } from "./connector-status-chart";
import { ChargeStatusDistributionChart } from "./charge-status-distribution-chart";
import type {
  ChargeStatusDistribution,
  DashboardRecentSessions,
  DashboardSessionSummaries,
  SummaryLoadState,
  DashboardUserSummaries,
} from "./types";
import type { NozzleStatusSummary } from "@/features/chargepoints/types";

export function DashboardView({
  sessionSummaries,
  userSummaries,
  connectorStatusSummary,
  chargeStatusDistribution,
  recentSessions,
}: {
  sessionSummaries: DashboardSessionSummaries;
  userSummaries: DashboardUserSummaries;
  connectorStatusSummary: SummaryLoadState<NozzleStatusSummary>;
  chargeStatusDistribution: SummaryLoadState<ChargeStatusDistribution>;
  recentSessions: DashboardRecentSessions;
}) {
  return (
    <div className="space-y-6">
      <SessionSummaryMetrics
        summaries={sessionSummaries}
        userSummaries={userSummaries}
      />
      <div className="grid gap-6 xl:grid-cols-2">
        <CustomerDemographicCard summary={userSummaries.nationality} />
        <UserGrowthPanel summary={userSummaries.growth} />
      </div>
      <div className="grid gap-6 xl:grid-cols-2">
        <ConnectorStatusChart summary={connectorStatusSummary} />
        <ChargeStatusDistributionChart summary={chargeStatusDistribution} />
      </div>
      <RecentSessions data={recentSessions.data} error={recentSessions.error} />
    </div>
  );
}