"use client";

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

const STEP_TINTS: Record<string, { dot: string; bar: string }> = {
  total: { dot: "bg-muted", bar: "bg-muted" },
  approved: { dot: "bg-primary", bar: "bg-primary" },
  online: { dot: "bg-success", bar: "bg-success" },
  ready: { dot: "bg-warning", bar: "bg-warning" },
};

const OPEN_STATUSES: OrderStatus[] = ["pending", "assigned", "picked_up", "on_the_way"];

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

  const total = Object.values(data?.drivers.by_status ?? {}).reduce((sum, n) => sum + (n ?? 0), 0);
  const approved = data?.drivers.by_status.approved ?? 0;
  const online = data?.drivers.online ?? 0;
  const ready = data?.drivers.ready_to_assign ?? 0;

  const activeOrders = OPEN_STATUSES.reduce((sum, status) => sum + (data?.orders.by_status[status] ?? 0), 0);
  const load = ready > 0 ? activeOrders / ready : 0;

  const animatedTotal = useAnimatedNumber(total);
  const animatedApproved = useAnimatedNumber(approved);
  const animatedOnline = useAnimatedNumber(online);
  const animatedReady = useAnimatedNumber(ready);

  const steps = [
    { key: "total" as const, count: total, animated: animatedTotal, label: t("widgets.conversion.total") },
    { key: "approved" as const, count: approved, animated: animatedApproved, label: t("widgets.conversion.approved") },
    { key: "online" as const, count: online, animated: animatedOnline, label: t("widgets.conversion.online") },
    { key: "ready" as const, count: ready, animated: animatedReady, label: t("widgets.conversion.ready") },
  ];

  return (
    <div>
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
        {t("widgets.captainsConversion.hint")}
      </p>
      <ul className="mt-3 space-y-2">
        {steps.map((step, index) => {
          const previous = index > 0 ? steps[index - 1].count : 0;
          const conversion = previous > 0 ? Math.round((step.count / previous) * 100) : null;
          const share = total > 0 ? Math.min(100, (step.count / total) * 100) : 0;

          return (
            <li
              key={step.key}
              className="rounded-lg border bg-surface p-3"
            >
              <div className="flex items-center justify-between gap-2">
                <span className="flex min-w-0 items-center gap-2 text-sm text-muted-foreground">
                  <span className={cn("h-2.5 w-2.5 shrink-0 rounded-full", STEP_TINTS[step.key].dot)} aria-hidden />
                  <span className="truncate">{step.label}</span>
                </span>
                <span className="flex shrink-0 items-center gap-2">
                  {conversion !== null ? (
                    <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground" dir="ltr">
                      {formatNumber(conversion, locale)}%
                    </span>
                  ) : null}
                  <span className="numeric font-semibold text-foreground">{formatNumber(step.animated, locale)}</span>
                </span>
              </div>
              <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-muted" dir="ltr">
                <span
                  className={cn("block h-full rounded-full transition-[width] duration-500", STEP_TINTS[step.key].bar)}
                  style={{ width: `${share}%` }}
                />
              </div>
            </li>
          );
        })}
      </ul>

      <div className="mt-3 rounded-lg border border-accent/30 bg-accent-soft/40 px-3 py-2">
        <div className="flex items-center justify-between gap-2 text-sm">
          <span className="text-muted-foreground">{t("widgets.captainsConversion.load")}</span>
          <span className="numeric font-semibold text-foreground">
            {ready > 0 ? formatNumber(Math.round(load * 10) / 10, locale) : "—"}
          </span>
        </div>
        <p className="mt-0.5 text-[11px] leading-relaxed text-muted-foreground">
          {t("widgets.captainsConversion.loadHint", {
            active: formatNumber(activeOrders, locale),
            ready: formatNumber(ready, locale),
          })}
        </p>
      </div>
    </div>
  );
}