"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { useDriverCount } 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 { useAnimatedNumber } from "./shared";

export function CaptainsPipelineWidget() {
  const t = useT();
  const { locale } = useI18n();
  const { can } = useCan();

  const pending = useDriverCount("pending");
  const approved = useDriverCount("approved");
  const suspended = useDriverCount("suspended");

  const pendingVal = useAnimatedNumber(pending ?? 0);
  const approvedVal = useAnimatedNumber(approved ?? 0);
  const suspendedVal = useAnimatedNumber(suspended ?? 0);
  const totalVal = useAnimatedNumber((approved ?? 0) + (pending ?? 0));

  const sections = [
    {
      key: "pending",
      label: t("dashboard.pendingApplications"),
      value: pendingVal,
      tint: "bg-warning-soft",
      valueClass: "text-warning",
      href: "/applications",
      visible: can("drivers.review"),
    },
    {
      key: "approved",
      label: t("dashboard.approvedCaptains"),
      value: approvedVal,
      tint: "bg-primary-soft",
      valueClass: "text-primary",
      href: "/captains",
      visible: can("drivers.view"),
    },
    {
      key: "suspended",
      label: t("dashboard.disabledCaptains"),
      value: suspendedVal,
      tint: "bg-destructive/10",
      valueClass: "text-destructive",
      href: "/captains",
      visible: can("drivers.view"),
    },
  ];

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

      <ul className="mt-4 grid grid-cols-3 gap-2">
        {sections.map((section) => (
          <li key={section.key}>
            <Link
              href={section.href}
              aria-disabled={!section.visible}
              tabIndex={section.visible ? 0 : -1}
              className={cn("rounded-lg border bg-surface p-3 transition-colors", section.visible && "hover:bg-muted/40", !section.visible && "pointer-events-none opacity-70")}
            >
              <p>
                <span className={cn("inline-block h-1.5 w-6 rounded-full", section.tint)} aria-hidden />
              </p>
              <p className={cn("numeric mt-1 text-lg font-bold", section.valueClass)}>{formatNumber(section.value, locale)}</p>
              <p className="mt-0.5 truncate text-[11px] text-muted-foreground">{section.label}</p>
            </Link>
          </li>
        ))}
      </ul>

      {can("drivers.review") ? (
        <Link href="/applications" className="mt-4 inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline">
          {t("dashboard.reviewApplications")}
          <ArrowRight className="h-3.5 w-3.5 rtl:rotate-180" aria-hidden />
        </Link>
      ) : null}
    </div>
  );
}