import type {
  DashboardSessionSummaries,
  DashboardUserSummaries,
  SessionSummaryValue,
} from "./types";
import { formatEnergyKwh } from "@/lib/format";

function formatNumber(value: number, digits = 2) {
  return value.toLocaleString("id-ID", { maximumFractionDigits: digits });
}

function formatValue(value: SessionSummaryValue, fallbackUnit: string) {
  const unit = value.unit || fallbackUnit;
  const decimals = ["users", "sessions"].includes(unit.toLowerCase()) ? 0 : 2;
  const displayUnit = unit.toLowerCase() === "minutes" ? "min" : unit;
  return [formatNumber(value.total, decimals), displayUnit].filter(Boolean).join(" ");
}

function SummaryCard({
  title,
  description,
  error,
  value,
}: {
  title: string;
  description: string;
  error: string | null;
  value: string | null;
}) {
  return (
    <section className="detail-panel min-w-0 p-5">
      <h2 className="text-sm text-muted-foreground">{title}</h2>
      <p className="mt-3 truncate text-2xl font-semibold" title={value ?? undefined}>
        {error ? "Unavailable" : value ?? "—"}
      </p>
      <p className="mt-1 text-xs text-muted-foreground">{description}</p>
      {error && (
        <p role="alert" className="mt-2 text-xs text-destructive">
          {error}
        </p>
      )}
    </section>
  );
}

export function SessionSummaryMetrics({
  summaries,
  userSummaries,
}: {
  summaries: DashboardSessionSummaries;
  userSummaries: DashboardUserSummaries;
}) {
  const newUserCount = userSummaries.newUsers.data?.thisMonth;
  const newUserComparison = userSummaries.newUsers.data;
  const newUserDescription = newUserComparison
    ? newUserComparison.lastMonth === 0
      ? newUserComparison.thisMonth === 0
        ? "No new registrations this month"
        : "New registrations this month"
      : `${((newUserComparison.thisMonth - newUserComparison.lastMonth) / newUserComparison.lastMonth >= 0 ? "+" : "")}${(((newUserComparison.thisMonth - newUserComparison.lastMonth) / newUserComparison.lastMonth) * 100).toFixed(2)}% vs last month`
    : "New user registrations this month.";

  const metrics = [
    {
      title: "Energy Delivered",
      description: "Across recorded charging sessions.",
      error: summaries.energy.error,
      value: summaries.energy.data
        ? `${formatEnergyKwh(summaries.energy.data.total)} kWh`
        : null,
    },
    {
      title: "Total Sessions",
      description: "All sessions represented in the summary response.",
      error: summaries.activeUsers.error,
      value: summaries.activeUsers.data
        ? formatNumber(summaries.activeUsers.data.count, 0)
        : null,
    },
    {
      title: "Active Users",
      description: "Distinct users with recorded charging sessions.",
      error: summaries.activeUsers.error,
      value: summaries.activeUsers.data
        ? formatValue(summaries.activeUsers.data, "users")
        : null,
    },
    {
      title: "Mean Charging Duration",
      description: "Average duration across recorded charging sessions.",
      error: summaries.meanCharging.error,
      value: summaries.meanCharging.data
        ? formatValue(summaries.meanCharging.data, "minutes")
        : null,
    },
    {
      title: "Sessions from Returning Users",
      description: "Sessions belonging to users with multiple sessions.",
      error: summaries.returningUsers.error,
      value: summaries.returningUsers.data
        ? formatNumber(summaries.returningUsers.data.total, 0)
        : null,
    },
    {
      title: "Charge Point Utilization",
      description: "Utilization across charge points in the summary response.",
      error: summaries.utilization.error,
      value: summaries.utilization.data
        ? formatValue(summaries.utilization.data, "percent")
        : null,
    },
    {
      title: "New Users",
      description: newUserDescription,
      error: userSummaries.newUsers.error,
      value:
        newUserCount === undefined
          ? null
          : formatNumber(newUserCount, 0),
    },
  ];

  return (
    <div className="grid items-start gap-4 sm:grid-cols-2 xl:grid-cols-4 md:gap-6">
      {metrics.map((metric) => (
        <SummaryCard
          key={metric.title}
          title={metric.title}
          description={metric.description}
          error={metric.error}
          value={metric.value}
        />
      ))}
    </div>
  );
}