import { Building2Icon } 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,
  DashboardTable,
} from "../../shared";
import { dashboardApi, dashboardKeys } from "../../shared/api";
import type { DashboardNavigation } from "../../shared/helpers";

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

  return (
    <DashboardPanel
      action={onDetails}
      icon={<Building2Icon />}
      title={t("dashboard.companySummary")}
    >
      <BlockState empty={!totals.data?.items.length} emptyText={t("noCompanies")} query={totals}>
        <DashboardTable caption={t("dashboard.companySummary")}>
          <thead>
            <tr>
              {[t("companyLabel"), t("dashboard.registeredAssets"), t("people")].map((label) => (
                <th key={label} scope="col">
                  {label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {totals.data?.items.slice(0, 5).map((item) => (
              <tr key={item.id}>
                <td>
                  <DashboardNavigationButton
                    onClick={() =>
                      onNavigate({ area: "company", id: item.id, section: "inventory" })
                    }
                  >
                    <CompanyIdentity companyId={item.id} name={item.name} />
                  </DashboardNavigationButton>
                </td>
                <td>
                  <DashboardNavigationButton
                    onClick={() =>
                      onNavigate({ area: "company", id: item.id, section: "inventory" })
                    }
                  >
                    <span className="sr-only">
                      {t("dashboard.registeredAssets")} · {item.name}:{" "}
                    </span>
                    {item.assets}
                  </DashboardNavigationButton>
                </td>
                <td>
                  <DashboardNavigationButton
                    onClick={() => onNavigate({ area: "company", id: item.id, section: "people" })}
                  >
                    <span className="sr-only">
                      {t("people")} · {item.name}:{" "}
                    </span>
                    {item.people}
                  </DashboardNavigationButton>
                </td>
              </tr>
            ))}
          </tbody>
        </DashboardTable>
      </BlockState>
    </DashboardPanel>
  );
}