"use client";

import { useDashboardStats, 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 { DeltaChip, STATUS_BAR_COLORS, StatRow, useAnimatedNumber } from "./shared";

export function OrdersPulseWidget() {
  const t = useT();
  const { locale } = useI18n();
  const { can } = useCan();
  const statusCounts = useOrderStatusCounts();
  const { data } = useDashboardStats();

  const total = Math.max(statusCounts.reduce((sum, s) => sum + s.count, 0), 0);
  const animatedTotal = useAnimatedNumber(total);
  const barTotal = Math.max(total, 1);

  const todayTiles = [
    {
      key: "created",
      label: t("widgets.ordersPulse.createdToday"),
      value: data?.orders.today ?? 0,
      previous: data?.orders.yesterday ?? 0,
    },
    {
      key: "delivered",
      label: t("widgets.ordersPulse.deliveredToday"),
      value: data?.deliveries.today ?? 0,
      previous: data?.deliveries.yesterday ?? 0,
    },
  ];

  return (
    <div>
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("dashboard.totalOrders")}</p>
      <p className="numeric mt-1 text-4xl font-bold tracking-tight text-foreground">
        {formatNumber(animatedTotal, locale)}
      </p>

      <div className="mt-4 grid grid-cols-2 gap-2">
        {todayTiles.map((tile) => (
          <div key={tile.key} className="rounded-lg border bg-surface p-2.5">
            <p className="text-[11px] text-muted-foreground">{tile.label}</p>
            <div className="mt-1 flex items-center justify-between gap-2">
              <span className="numeric text-lg font-bold text-foreground">{formatNumber(tile.value, locale)}</span>
              <DeltaChip
                current={tile.value}
                previous={tile.previous}
                locale={locale}
                upLabel={t("widgets.delta.up")}
                downLabel={t("widgets.delta.down")}
              />
            </div>
          </div>
        ))}
      </div>

      <div className="mt-4 flex h-2.5 w-full overflow-hidden rounded-full bg-muted" dir="ltr">
        {statusCounts.map(({ status, count }) =>
          count > 0 ? (
            <span
              key={status}
              className={cn("h-full", STATUS_BAR_COLORS[status])}
              style={{ width: `${(count / barTotal) * 100}%` }}
              title={t(`orders.status.${status}`)}
            />
          ) : null,
        )}
      </div>

      <ul className="mt-4 space-y-2">
        {statusCounts.map(({ status, count }) => (
          <StatRow
            key={status}
            label={t(`orders.status.${status}`)}
            value={formatNumber(count, locale)}
            dotClassName={STATUS_BAR_COLORS[status]}
            href={can("orders.view") ? `/orders?status=${status}` : undefined}
          />
        ))}
      </ul>
    </div>
  );
}