/**
 * 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 { Badge } from "@plane/propel/badge";
import type { TExternalContourRequest } from "@plane/types";
import { Avatar } from "@plane/ui";
import { renderFormattedDate } from "@plane/utils";
import { ExternalContourStatePill } from "./state-pill";

type Props = {
  contourRequest: TExternalContourRequest;
};

export const ExternalContoursRequestTraceability = observer(function ExternalContoursRequestTraceability(props: Props) {
  const { contourRequest } = props;
  const { t } = useTranslation();

  const issue = contourRequest.issue;
  const requestedByName = contourRequest.requested_by_name || issue.created_by_detail?.display_name || t("common.none");
  const requestedAt = contourRequest.requested_at || contourRequest.created_at;
  const lastUpdatedAt = issue.updated_at || contourRequest.updated_at;
  const targetProjectName = contourRequest.target_project_name || issue.project_detail?.name || t("common.none");
  const sourceDecision =
    contourRequest.source_decision === "accepted"
      ? t("external_contours_page.traceability.source_decision_accepted")
      : t("external_contours_page.traceability.source_decision_pending");
  const targetIssueKey =
    issue.project_detail?.identifier && issue.sequence_id
      ? `${issue.project_detail.identifier}-${issue.sequence_id}`
      : issue.sequence_id
        ? `#${issue.sequence_id}`
        : t("common.none");

  return (
    <div className="rounded-lg border border-subtle bg-surface-2 p-4">
      <div className="mb-3">
        <h5 className="text-body-sm-medium">{t("external_contours_page.traceability.title")}</h5>
        <p className="mt-1 text-12 text-tertiary">{t("external_contours_page.traceability.description")}</p>
      </div>

      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
        <div className="rounded-md border border-subtle bg-surface-1 p-3">
          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.source_contour")}</div>
          <div className="mt-1 text-13 font-medium text-secondary">
            {contourRequest.source_project_name || t("common.none")}
          </div>
        </div>

        <div className="rounded-md border border-subtle bg-surface-1 p-3">
          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.target_contour")}</div>
          <div className="mt-1 flex items-center gap-2">
            <Badge variant="neutral">{targetProjectName}</Badge>
          </div>
        </div>

        <div className="rounded-md border border-subtle bg-surface-1 p-3">
          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.status")}</div>
          <div className="mt-1">
            <ExternalContourStatePill request={contourRequest} />
          </div>
        </div>

        <div className="rounded-md border border-subtle bg-surface-1 p-3">
          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.source_decision")}</div>
          <div className="mt-1 text-13 font-medium text-secondary">{sourceDecision}</div>
        </div>

        <div className="rounded-md border border-subtle bg-surface-1 p-3">
          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.requested_by")}</div>
          <div className="mt-1 flex items-center gap-2">
            <Avatar
              src={issue.created_by_detail?.avatar_url || ""}
              name={requestedByName}
              size="md"
              showTooltip
            />
            <span className="text-13 font-medium text-secondary">{requestedByName}</span>
          </div>
        </div>

        <div className="rounded-md border border-subtle bg-surface-1 p-3">
          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.requested_at")}</div>
          <div className="mt-1 text-13 font-medium text-secondary">
            {requestedAt ? renderFormattedDate(requestedAt) : t("common.none")}
          </div>
        </div>

        <div className="rounded-md border border-subtle bg-surface-1 p-3">
          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.last_updated")}</div>
          <div className="mt-1 text-13 font-medium text-secondary">
            {lastUpdatedAt ? renderFormattedDate(lastUpdatedAt) : t("common.none")}
          </div>
        </div>

        <div className="rounded-md border border-subtle bg-surface-1 p-3">
          <div className="text-11 font-medium text-tertiary">{t("external_contours_page.traceability.linked_item")}</div>
          <div className="mt-1 flex items-center gap-2">
            <Badge variant="neutral">{targetIssueKey}</Badge>
          </div>
        </div>
      </div>
    </div>
  );
});