import type { AssetDTO } from "@metis/assets/common";
import type { ResourceDTO } from "@metis/resources/common";
import { useTranslation } from "react-i18next";

import type { CompanyDTO } from "../../../../common";
import type { RemoteConnectionDTO } from "../../../../common/remote-connections";
import { remoteEndpoints } from "../helpers";

export function RemoteSummary({
  connection,
  company,
  assets,
  resources,
}: {
  connection: RemoteConnectionDTO;
  company: CompanyDTO;
  assets: readonly AssetDTO[];
  resources: readonly ResourceDTO[];
}) {
  const { t } = useTranslation("companies");
  const endpoints = remoteEndpoints(connection.values, company, assets, resources, t);

  return (
    <div className="space-y-2 text-sm">
      <p className="break-words font-medium">
        {endpoints.source} → {connection.values.method} → {endpoints.target}
      </p>
      <p>{t(`mail.${connection.values.state}`)}</p>
      {connection.values.requiresVpn && (
        <p>
          {t("remote.vpnRequired")} · {t("remote.vpnNote")}
        </p>
      )}
      {!(
        connection.authorizationEffective ||
        ["removed", "never_configured"].includes(connection.values.state)
      ) && <p className="text-amber-700">{t("remote.authorizationMissing")}</p>}
      {connection.needsReview && <p className="text-amber-700">{t("remote.review")}</p>}
      {connection.values.notes && (
        <p className="whitespace-pre-wrap text-muted-foreground">{connection.values.notes}</p>
      )}
    </div>
  );
}