import { ClockIcon } from "@repo/rdx-ui/lib/icons";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";

import { CompanyIdentity } from "../../../companies/shared/ui/company-identity";
import { BlockState, DashboardNavigationButton, DashboardPanel } from "../../shared";
import { dashboardApi, dashboardKeys } from "../../shared/api";
import type { DashboardNavigation } from "../../shared/helpers";
import { KIND_ICONS, entryDestination } from "../../shared/helpers";

export function DashboardActivityPanel({
  companyId,
  onDetails,
  onNavigate,
}: {
  companyId: string | undefined;
  onDetails: () => void;
  onNavigate: (destination: DashboardNavigation) => void;
}) {
  const { t, i18n } = useTranslation("companies");
  const activity = useQuery({
    queryKey: dashboardKeys.block("activity", companyId),
    queryFn: ({ signal }) => dashboardApi.activity(signal, companyId),
    staleTime: 0,
  });

  const date = (value: string | null) =>
    value
      ? new Intl.DateTimeFormat(i18n.language, { dateStyle: "medium", timeStyle: "short" }).format(
          new Date(value)
        )
      : "—";

  return (
    <DashboardPanel action={onDetails} icon={<ClockIcon />} title={t("dashboard.recentActivity")}>
      <BlockState
        empty={!activity.data?.items.length}
        emptyText={t("dashboard.noRecentActivity")}
        query={activity}
      >
        <ol className="grid gap-5">
          {activity.data?.items.slice(0, 4).map((item) => {
            const Icon = KIND_ICONS[item.kind];

            return (
              <li
                className="grid grid-cols-[24px_minmax(0,1fr)] items-start gap-3 text-sm leading-[1.5] shell:grid-cols-[110px_24px_minmax(0,1fr)]"
                key={item.eventId ?? item.id}
              >
                <time
                  className="col-span-full text-xs text-muted-foreground shell:col-span-1"
                  dateTime={item.recordedAt ?? undefined}
                >
                  {date(item.recordedAt)}
                </time>
                <Icon aria-hidden="true" className="size-5 text-primary shrink-0" />
                <div>
                  <DashboardNavigationButton onClick={() => onNavigate(entryDestination(item))}>
                    {t("dashboard.recordUpdated", { name: item.name })}
                  </DashboardNavigationButton>
                  <p className="text-xs text-muted-foreground">
                    <CompanyIdentity companyId={item.companyId} name={item.companyName} />
                    {item.actorName ? ` · ${item.actorName}` : ""}
                  </p>
                </div>
              </li>
            );
          })}
        </ol>
      </BlockState>
    </DashboardPanel>
  );
}