import { cn } from "@/lib/utils";
import type {
  DashboardSummary,
  NewUserComparison,
  SummaryLoadState,
} from "./types";

export function SummaryMetrics({
  summary,
  newUsers,
}: {
  summary: DashboardSummary;
  newUsers: SummaryLoadState<NewUserComparison>;
}) {
  const newUserChange = newUsers.data
    ? newUsers.data.lastMonth === 0
      ? newUsers.data.thisMonth === 0
        ? "0.00%"
        : "New"
      : `${newUsers.data.thisMonth >= newUsers.data.lastMonth ? "+" : ""}${(((newUsers.data.thisMonth - newUsers.data.lastMonth) / newUsers.data.lastMonth) * 100).toFixed(2)}%`
    : null;
  const newUserChangeIsNegative =
    newUsers.data !== null &&
    newUsers.data.lastMonth > 0 &&
    newUsers.data.thisMonth < newUsers.data.lastMonth;
  const metrics = [
    {
      label: "Energy Delivered",
      value: `${summary.energy * 1000}Wh`,
      change: "+0.00%",
      down: false,
    },
    {
      label: "Total Revenue",
      value: `Rp ${(summary.revenue / 1000000).toFixed(2)}m`,
      change: "-98.54%",
      down: true,
    },
    {
      label: "Success Sessions",
      value: String(summary.sessions),
      change: "+0.00%",
      down: false,
    },
    {
      label: "New Users",
      value: newUsers.data
        ? newUsers.data.thisMonth.toLocaleString("id-ID")
        : "—",
      change: newUserChange,
      down: newUserChangeIsNegative,
      error: newUsers.error,
    },
  ];
  return (
    <div className="grid items-start gap-4 sm:grid-cols-2 xl:grid-cols-4 md:gap-6">
      {metrics.map((metric) => (
        <section key={metric.label} className="detail-panel p-5">
          <h2 className="text-sm text-muted-foreground">{metric.label}</h2>
          <div className="mt-3 flex items-end justify-between gap-2">
            <p className="text-2xl font-semibold">{metric.value}</p>
            {metric.change !== null && (
              <div className="flex items-center gap-1">
                <span
                  className={cn(
                    "whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium",
                    metric.down
                      ? "bg-destructive/10 text-destructive"
                      : metric.label === "New Users"
                        ? "bg-success/10 text-success"
                        : "bg-warning/5 text-warning",
                  )}
                >
                  {metric.change}
                </span>
                <span className="text-xs text-muted-foreground">
                  vs last month
                </span>
              </div>
            )}
          </div>
          {metric.label === "New Users" && metric.error && (
            <p role="alert" className="mt-2 text-xs text-destructive">
              {metric.error}
            </p>
          )}
        </section>
      ))}
    </div>
  );
}