import type { WorkstationDTO } from "@metis/assets/common";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useTranslation } from "react-i18next";

import type { WorkProfileDTO } from "../../common/work-profiles";

export function WorkProfileHistoryDialog({
  profile,
  workstations,
  person,
  asset,
  account,
  onClose,
}: {
  profile: WorkProfileDTO;
  workstations: readonly WorkstationDTO[];
  person: (id: string) => string;
  asset: (id: string) => string;
  account: (id: string | null) => string;
  onClose: () => void;
}) {
  const { t, i18n } = useTranslation("companies");

  return (
    <FormDialog
      cancelLabel={t("close")}
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      title={t("profiles.history")}
      wide
    >
      <div className="space-y-4">
        <p className="font-medium">
          {person(profile.values.personId)} · {asset(profile.values.assetId)}
        </p>
        <p>
          {t("profiles.account")}: {account(profile.values.accountId)}
        </p>
        {profile.needsReview && <p className="text-amber-700">{t("profiles.review")}</p>}
        <p className="text-sm text-muted-foreground">{t("profiles.unknownConfiguration")}</p>
        <div>
          <h3 className="font-medium">{t("profiles.stations")}</h3>
          <p className="text-sm">
            {workstations
              .filter(
                (station) =>
                  station.values.active &&
                  [...station.values.assetIds, ...station.values.sharedAssetIds].includes(
                    profile.values.assetId
                  )
              )
              .map((station) => station.values.name)
              .join(" · ") || t("profiles.noStation")}
          </p>
        </div>
        <ol className="space-y-3">
          {[...profile.history].reverse().map((revision) => (
            <li className="rounded-md border p-3 text-sm" key={revision.id}>
              <p className="font-medium">
                {new Intl.DateTimeFormat(i18n.language, {
                  dateStyle: "medium",
                  timeStyle: "short",
                }).format(new Date(revision.recordedAt))}{" "}
                · {revision.actorName}
              </p>
              <p>
                {revision.values.name} ·{" "}
                {t(revision.values.active ? "profiles.active" : "profiles.inactive")}
              </p>
              <p>{account(revision.values.accountId)}</p>
              {revision.values.notes && (
                <p className="mt-2 whitespace-pre-wrap">{revision.values.notes}</p>
              )}
            </li>
          ))}
        </ol>
      </div>
    </FormDialog>
  );
}