"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { useOrderStatusCounts } from "@/features/dashboard/overview-data";
import { useCan } from "@/features/auth/use-can";
import { useI18n, useT } from "@/i18n";
import { formatNumber } from "@/lib/format";
import { cn } from "@/lib/cn";
import { StatRow, useAnimatedNumber } from "./shared";

const ACTIVE_STATUSES = ["assigned", "picked_up", "on_the_way"] as const;

export function ActiveDeliveriesWidget() {
  const t = useT();
  const { locale } = useI18n();
  const { can } = useCan();
  const counts = useOrderStatusCounts();

  const byStatus = Object.fromEntries(counts.map((s) => [s.status, s.count])) as Record<string, number>;
  const total = ACTIVE_STATUSES.reduce((sum, s) => sum + (byStatus[s] ?? 0), 0);
  const animated = useAnimatedNumber(total);

  const rows = ACTIVE_STATUSES.map((status) => ({
    status,
    count: byStatus[status] ?? 0,
  }));

  return (
    <div>
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
        {t("dashboard.activeDeliveries")}
      </p>
      <p className="numeric mt-1 text-4xl font-bold tracking-tight text-foreground">
        {formatNumber(animated, locale)}
      </p>
      <ul className="mt-4 space-y-2">
        {rows.map(({ status, count }) => (
          <StatRow
            key={status}
            label={t(`orders.status.${status}`)}
            value={formatNumber(count, locale)}
            dotClassName={cn(
              "bg-primary",
              status === "picked_up" && "bg-pink-600",
              status === "on_the_way" && "bg-indigo-500",
            )}
            href={can("orders.view") ? `/orders?status=${status}` : undefined}
          />
        ))}
      </ul>
      {can("orders.view") ? (
        <Link href="/orders" className="mt-4 inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline">
          {t("common.viewAll")}
          <ArrowRight className="h-3.5 w-3.5 rtl:rotate-180" aria-hidden />
        </Link>
      ) : null}
    </div>
  );
}