"use client";

import Link from "next/link";
import {
  CalendarClock,
  ClipboardList,
  HandCoins,
  LineChart,
  MapPin,
  MessageSquareText,
  Package,
  Users,
  type LucideIcon,
} from "lucide-react";
import { useCan } from "@/features/auth/use-can";
import { useT } from "@/i18n";
import type { Dictionary } from "@/i18n/dictionaries/en";
import { cn } from "@/lib/cn";

interface ModuleEntry {
  key: string;
  nameKey: keyof Dictionary;
  href: string;
  icon: LucideIcon;
  tone: string;
  live?: boolean;
  canShow?: boolean;
}

export function ModuleStatusWidget() {
  const { can } = useCan();

  const modules: ModuleEntry[] = [
    {
      key: "orders",
      nameKey: "nav.orders",
      href: "/orders",
      icon: Package,
      tone: "bg-primary-soft text-primary",
      live: true,
      canShow: can(["orders.view", "orders.create", "orders.assign"]),
    },
    {
      key: "captains",
      nameKey: "nav.captains",
      href: "/captains",
      icon: Users,
      tone: "bg-primary-soft text-primary",
      live: true,
      canShow: can(["drivers.view", "drivers.update", "drivers.review"]),
    },
    {
      key: "applications",
      nameKey: "nav.applications",
      href: "/applications",
      icon: ClipboardList,
      tone: "bg-warning-soft text-warning",
      live: true,
      canShow: can("drivers.review"),
    },
    {
      key: "tracking",
      nameKey: "nav.tracking",
      href: "/tracking",
      icon: MapPin,
      tone: "bg-indigo-500/10 text-indigo-600 dark:bg-indigo-400/10 dark:text-indigo-300",
      live: true,
      canShow: can("dispatch.view"),
    },
    {
      key: "payments",
      nameKey: "nav.payments",
      href: "/payments",
      icon: HandCoins,
      tone: "bg-success-soft text-success",
    },
    {
      key: "attendance",
      nameKey: "nav.attendance",
      href: "/attendance",
      icon: CalendarClock,
      tone: "bg-muted text-muted-foreground",
    },
    {
      key: "performance",
      nameKey: "nav.performance",
      href: "/performance",
      icon: LineChart,
      tone: "bg-accent-soft text-accent",
      live: true,
      canShow: can("dispatch.view"),
    },
    {
      key: "support",
      nameKey: "nav.support",
      href: "/support",
      icon: MessageSquareText,
      tone: "bg-muted text-muted-foreground",
    },
  ];

  return (
    <ul className="grid grid-cols-2 gap-3 sm:grid-cols-4">
      {modules.map((module) => {
        const active = module.live && module.canShow !== false;
        return (
          <li key={module.key}>
            {active ? (
              <Link
                href={module.href}
                className="flex items-center gap-3 rounded-xl border border-input bg-surface p-3 transition-[border-color,box-shadow] hover:border-primary/40 hover:shadow-sm"
              >
                <ModuleChip module={module} />
              </Link>
            ) : (
              <div className="flex items-center gap-3 rounded-xl border border-dashed border-border bg-surface/50 p-3 opacity-75">
                <ModuleChip module={module} />
              </div>
            )}
          </li>
        );
      })}
    </ul>
  );
}

function ModuleChip({ module }: { module: ModuleEntry }) {
  const t = useT();
  const Icon = module.icon;
  const live = module.live && module.canShow !== false;
  return (
    <>
      <span className={cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", module.tone)} aria-hidden>
        <Icon className="h-[18px] w-[18px]" strokeWidth={2.1} />
      </span>
      <span className="min-w-0 flex-1">
        <span className="block truncate text-sm font-medium text-foreground">{t(module.nameKey)}</span>
        <span
          className={cn(
            "mt-0.5 inline-flex items-center gap-1 text-[11px] font-semibold",
            live ? "text-success" : "text-muted-foreground",
          )}
        >
          {live ? (
            <>
              <span className="relative flex h-1.5 w-1.5" aria-hidden>
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" />
                <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-success" />
              </span>
              {t("widgets.live")}
            </>
          ) : (
            t("widgets.comingSoon")
          )}
        </span>
      </span>
    </>
  );
}