/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import type { TExternalContourMirroredActivity } from "@plane/types";
import { renderFormattedDate } from "@plane/utils";

const FIELD_TRANSLATIONS: Record<string, string> = {
  name: "external_contours_page.mirror.fields.name",
  description_html: "external_contours_page.mirror.fields.description",
  state: "external_contours_page.mirror.fields.state",
  priority: "external_contours_page.mirror.fields.priority",
  target_date: "external_contours_page.mirror.fields.due_date",
  assignees: "external_contours_page.mirror.fields.assignees",
  labels: "external_contours_page.mirror.fields.labels",
};

type Props = {
  activity: TExternalContourMirroredActivity[];
};

export const ExternalContoursMirroredActivity = observer(function ExternalContoursMirroredActivity(props: Props) {
  const { activity } = props;
  const { t } = useTranslation();

  const getFieldLabel = (field?: string | null) => {
    if (!field) return t("external_contours_page.mirror.fields.request");
    const key = FIELD_TRANSLATIONS[field];
    return key ? t(key) : field;
  };

  const renderMessage = (item: TExternalContourMirroredActivity) => {
    const actorName = item.actor_detail?.display_name || t("external_contours_page.mirror.system_actor");
    const fieldLabel = getFieldLabel(item.field);

    if (item.verb === "created") {
      return t("external_contours_page.mirror.activity_created", { actor: actorName });
    }

    if (item.old_value && item.new_value) {
      return t("external_contours_page.mirror.activity_changed_from_to", {
        actor: actorName,
        field: fieldLabel,
        oldValue: item.old_value,
        newValue: item.new_value,
      });
    }

    if (item.new_value) {
      return t("external_contours_page.mirror.activity_changed_to", {
        actor: actorName,
        field: fieldLabel,
        newValue: item.new_value,
      });
    }

    return t("external_contours_page.mirror.activity_changed", {
      actor: actorName,
      field: fieldLabel,
    });
  };

  return (
    <div className="nodedc-external-section space-y-3 px-4 py-4">
      <div className="text-body-sm-medium">{t("external_contours_page.mirror.activity_title")}</div>

      {activity.length > 0 ? (
        <div className="space-y-3">
          {activity.map((item) => (
            <div key={item.id} className="nodedc-external-panel px-4 py-3">
              <div className="text-13 text-primary">{renderMessage(item)}</div>
              <div className="mt-1 text-11 text-secondary">{renderFormattedDate(item.created_at)}</div>
            </div>
          ))}
        </div>
      ) : (
        <div className="nodedc-external-empty px-4 py-6 text-13 text-secondary">
          {t("external_contours_page.mirror.activity_empty")}
        </div>
      )}
    </div>
  );
});
