"use client";

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

/** Ownership segments drawn on the fleet card, in a stable order. */
const OWNERSHIP_ORDER: { key: VehicleOwnershipValue; tone: string }[] = [
  { key: "company_owned", tone: "bg-primary" },
  { key: "personal", tone: "bg-accent" },
];

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

  const vehicles = data?.vehicles;
  const total = vehicles?.total ?? 0;
  const active = vehicles?.active ?? 0;

  const animatedTotal = useAnimatedNumber(total);
  const animatedActive = useAnimatedNumber(active);

  const byOwnership = vehicles?.by_ownership ?? { company_owned: 0, personal: 0 };
  const ownershipTotal = byOwnership.company_owned + byOwnership.personal;
  const activeShare = total > 0 ? Math.min(100, (active / total) * 100) : 0;

  return (
    <div>
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("widgets.fleetOverview.title")}</p>
      <div className="mt-1 flex items-end justify-between gap-2">
        <p className="numeric text-4xl font-bold tracking-tight text-foreground">
          {formatNumber(animatedTotal, locale)}
        </p>
        <p className="mb-1 flex items-baseline gap-1 text-sm text-muted-foreground">
          <span className="numeric font-semibold text-success">{formatNumber(animatedActive, locale)}</span>
          {t("widgets.fleetOverview.active")}
        </p>
      </div>

      <div className="mt-4" dir="ltr">
        <div className="flex h-2 w-full overflow-hidden rounded-full bg-muted">
          {OWNERSHIP_ORDER.map(({ key, tone }) => (
            <span
              key={key}
              className={cn("h-full transition-[width] duration-500", tone)}
              style={{
                width: ownershipTotal > 0 ? `${(byOwnership[key] / ownershipTotal) * 100}%` : "0%",
              }}
            />
          ))}
        </div>
        <div className="mt-3 flex items-center justify-between text-xs">
          {OWNERSHIP_ORDER.map(({ key, tone }) => (
            <span key={key} className="flex items-center gap-1.5 text-muted-foreground">
              <span className={cn("h-2.5 w-2.5 rounded-full", tone)} aria-hidden />
              {t(`widgets.fleetOwnership.${key}`)}
              <span className="numeric font-semibold text-foreground">{formatNumber(byOwnership[key], locale)}</span>
            </span>
          ))}
        </div>
      </div>

      <div className="mt-4">
        <div className="flex items-center justify-between text-xs text-muted-foreground">
          <span>{t("widgets.fleetOverview.active")}</span>
          <span className="numeric">{formatNumber(activeShare, locale)}%</span>
        </div>
        <div className="mt-1.5 flex h-1.5 w-full overflow-hidden rounded-full bg-muted" dir="ltr">
          <span className="block h-full rounded-full bg-success transition-[width] duration-500" style={{ width: `${activeShare}%` }} />
        </div>
      </div>
    </div>
  );
}