"use client";

import { useDashboardStats } from "@/features/dashboard/overview-data";
import { useI18n, useT } from "@/i18n";
import { formatCurrency, formatNumber } from "@/lib/format";
import { cn } from "@/lib/cn";
import type { OrderPaymentMethod } from "@/types/dashboard";
import { DeltaChip, useAnimatedNumber } from "./shared";

/** Colors for the payment-method legend dots. */
const METHOD_KEYS: OrderPaymentMethod[] = ["cash_on_delivery", "prepaid"];

const METHOD_DOT: Record<OrderPaymentMethod, string> = {
  cash_on_delivery: "bg-success",
  prepaid: "bg-indigo-500",
};

export function RevenueOverviewWidget() {
  const t = useT();
  const { locale } = useI18n();
  const { data } = useDashboardStats();

  const today = data?.revenue.today ?? 0;
  const yesterday = data?.revenue.yesterday ?? 0;
  const total = data?.revenue.total ?? 0;
  const methods = data?.revenue.by_payment_method ?? {};

  const animatedToday = useAnimatedNumber(today);

  return (
    <div>
      <div className="flex items-center justify-between gap-2">
        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("widgets.revenue.today")}</p>
        <DeltaChip
          current={today}
          previous={yesterday}
          locale={locale}
          upLabel={t("widgets.delta.up")}
          downLabel={t("widgets.delta.down")}
        />
      </div>
      <p className="numeric mt-1 text-4xl font-bold tracking-tight text-foreground">
        {formatCurrency(animatedToday, "SAR", locale)}
      </p>
      <p className="mt-1 text-xs text-muted-foreground">
        {t("widgets.revenue.yesterday")}{" "}
        <span className="numeric font-medium text-foreground">{formatCurrency(yesterday, "SAR", locale)}</span>
      </p>

      <div className="mt-4 space-y-3">
        <div className="flex items-center justify-between border-t pt-3 text-sm">
          <span className="text-muted-foreground">{t("widgets.revenue.total")}</span>
          <span className="numeric font-semibold text-foreground">{formatCurrency(total, "SAR", locale)}</span>
        </div>
        {METHOD_KEYS.map((method) => {
          const breakdown = methods[method];
          if (!breakdown) return null;
          return (
            <div key={method} className="flex items-center justify-between gap-2 text-sm">
              <span className="flex min-w-0 items-center gap-2 text-muted-foreground">
                <span className={cn("h-2.5 w-2.5 shrink-0 rounded-full", METHOD_DOT[method])} aria-hidden />
                <span className="truncate">{t(`widgets.paymentMethod.${method}`)}</span>
              </span>
              <span className="shrink-0 text-xs text-muted-foreground">
                {t("widgets.revenue.ordersCount", { count: formatNumber(breakdown.orders, locale) })}
                <span className="mx-1.5 text-muted-foreground/50">•</span>
                <span className="numeric font-semibold text-foreground">
                  {formatCurrency(breakdown.revenue, "SAR", locale)}
                </span>
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}