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("tickets.company"),
                t("dashboard.openTickets"),
                t("dashboard.pendingInterventions"),
                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
                    aria-label={`${t("dashboard.openTickets")} · ${item.name}: ${item.tickets}`}
                    className="text-destructive"
                    onClick={() =>
                      onNavigate({ area: "tickets", companyId: item.id, pendingOnly: true })
                    }
                  >
                    {item.tickets}
                  </DashboardNavigationButton>
                </td>
                <td>
                  <DashboardNavigationButton
                    aria-label={`${t("dashboard.pendingInterventions")} · ${item.name}: ${item.interventions}`}
                    className="text-amber-600 dark:text-amber-400"
                    onClick={() =>
                      onNavigate({
                        area: "interventions",
                        companyId: item.id,
                        pendingOnly: true,
                      })
                    }
                  >
                    {item.interventions}
                  </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>
  );
}