"use client";

import { useMemo } from "react";
import { useLocale, useTranslations } from "next-intl";
import { Link } from "@/i18n/routing";
import { format } from "date-fns-jalali";
import { Wifi, WifiOff } from "lucide-react";
import { useAuthStore } from "@/lib/stores/auth.store";
import { useLiveClock } from "@/lib/hooks/use-live-clock";
import { useOnlineStatus } from "@/lib/hooks/use-online-status";
import {
  formatHeaderJalaliDate,
  formatHeaderTime,
  isPlanTierKey,
} from "@/lib/format-datetime";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

function HeaderDivider() {
  return <div className="mx-3 h-9 w-px shrink-0 bg-border/80" aria-hidden />;
}

/** WiFi + Jalali date/time + plan — grouped at header center; clock is the middle focus. */
export function HeaderCenterCluster() {
  const locale = useLocale();
  const t = useTranslations("dashboard");
  const tPlanNames = useTranslations("settings.plans.names");
  const online = useOnlineStatus();
  const now = useLiveClock();
  const planTier = useAuthStore((s) => s.user?.planTier);

  const time = useMemo(() => formatHeaderTime(now, locale), [now, locale]);
  const jalaliDate = useMemo(
    () => formatHeaderJalaliDate(now, locale),
    [now, locale]
  );

  const planLabel = planTier
    ? isPlanTierKey(planTier)
      ? tPlanNames(planTier)
      : planTier
    : "—";

  const planBadgeVariant =
    planTier === "Business" || planTier === "Enterprise"
      ? "default"
      : planTier === "Pro"
        ? "secondary"
        : "outline";

  return (
    <div
      className="pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center"
      aria-live="polite"
    >
      <div
        className="flex items-center gap-2 px-1"
        title={online ? t("online") : t("offline")}
        aria-label={online ? t("online") : t("offline")}
      >
        {online ? (
          <Wifi className="h-4 w-4 text-emerald-600" aria-hidden />
        ) : (
          <WifiOff className="h-4 w-4 text-muted-foreground" aria-hidden />
        )}
        <span
          className={cn(
            "hidden text-xs font-medium whitespace-nowrap lg:inline",
            online ? "text-emerald-700 dark:text-emerald-500" : "text-muted-foreground"
          )}
        >
          {online ? t("online") : t("offline")}
        </span>
      </div>

      <HeaderDivider />

      <div className="flex min-w-[5.5rem] flex-col items-center gap-0.5 px-1 text-center tabular-nums">
        <time
          className="max-w-[12rem] truncate text-[11px] leading-none text-muted-foreground"
          dateTime={format(now, "yyyy-MM-dd")}
          dir={locale === "en" ? "ltr" : "rtl"}
        >
          {jalaliDate}
        </time>
        <time
          className="text-base font-semibold leading-none tracking-tight sm:text-lg"
          dateTime={format(now, "HH:mm:ss")}
          dir="ltr"
        >
          {time}
        </time>
      </div>

      <HeaderDivider />

      <Link
        href="/subscription"
        className="pointer-events-auto flex flex-col items-center gap-0.5 rounded-md px-1 py-0.5 transition-colors hover:bg-accent/60"
        title={t("viewSubscription")}
      >
        <span className="text-[10px] font-medium uppercase leading-none tracking-wide text-muted-foreground">
          {t("activePlan")}
        </span>
        <Badge variant={planBadgeVariant} className="text-xs font-semibold">
          {planLabel}
        </Badge>
      </Link>
    </div>
  );
}
