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

import type { ReactNode } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
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;
};

const TraceabilityCell = ({ label, children }: { label: string; children: ReactNode }) => (
  <div className="nodedc-external-panel p-4">
    <div className="text-11 font-medium text-tertiary">{label}</div>
    <div className="mt-2 min-h-6 text-13 font-medium text-secondary">{children}</div>
  </div>
);

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 sourceProjectName = contourRequest.source_project_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 dueDate = issue.target_date ? renderFormattedDate(issue.target_date) : t("common.none");
  const assigneeDetails = issue.assignee_details ?? [];

  return (
    <div className="nodedc-external-section p-5">
      <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-3">
        <TraceabilityCell label={t("external_contours_page.traceability.source_contour")}>
          {sourceProjectName}
        </TraceabilityCell>

        <TraceabilityCell label={t("external_contours_page.traceability.target_contour")}>
          {targetProjectName}
        </TraceabilityCell>

        <TraceabilityCell label={t("external_contours_page.traceability.status")}>
          <ExternalContourStatePill request={contourRequest} />
        </TraceabilityCell>

        <TraceabilityCell label={t("external_contours_page.traceability.requested_by")}>
          <div className="flex items-center gap-2">
            <Avatar src={issue.created_by_detail?.avatar_url || ""} name={requestedByName} size="md" showTooltip />
            <span>{requestedByName}</span>
          </div>
        </TraceabilityCell>

        <TraceabilityCell label={t("external_contours_page.traceability.assignee")}>
          {assigneeDetails.length > 0 ? (
            <div className="flex flex-wrap items-center gap-2">
              {assigneeDetails.map((assignee) => (
                <div key={assignee.id} className="flex items-center gap-2">
                  <Avatar src={assignee.avatar_url || ""} name={assignee.display_name || t("common.none")} size="sm" showTooltip />
                  <span className="text-13 font-medium text-secondary">{assignee.display_name}</span>
                </div>
              ))}
            </div>
          ) : (
            t("external_contours_page.list.unassigned")
          )}
        </TraceabilityCell>

        <TraceabilityCell label={t("external_contours_page.traceability.source_decision")}>
          {sourceDecision}
        </TraceabilityCell>

        <TraceabilityCell label={t("external_contours_page.traceability.requested_at")}>
          {requestedAt ? renderFormattedDate(requestedAt) : t("common.none")}
        </TraceabilityCell>

        <TraceabilityCell label={t("external_contours_page.traceability.due_date")}>
          {dueDate}
        </TraceabilityCell>

        <TraceabilityCell label={t("external_contours_page.traceability.last_updated")}>
          {lastUpdatedAt ? renderFormattedDate(lastUpdatedAt) : t("common.none")}
        </TraceabilityCell>
      </div>
    </div>
  );
});