"use client";

// Small building blocks rendered inside the table cells.

import Typography from "@mui/material/Typography";

import { IssueStatusBadge } from "@/components/ui/issue-status-badge";
import { PdfDocumentIcon } from "@/components/ui/pdf-document-icon";
import { DocumentLink } from "@/components/ui/document-link";
import {
  truncateFileName,
  type UploadedFileMetadata,
} from "@/lib/document-file";

import type {
  ProgressReportActionsMenuLabels,
  ProgressReportCreateDialogLabels,
  ProgressReportCreateMeetingDialogLabels,
  ProgressReportSetDeadlineDialogLabels,
  ProgressReportUploadDraftSemesterDialogLabels,
} from "../../progress-report-i18n";
import type { ProgressReportRow } from "../../progress-report-data";
import {
  ProgressReportActionsMenu,
  type ProgressReportRowActions,
} from "./progress-report-actions-menu";

// Plain text cell (row number, report title, year, and all the date columns).
export function ProgressReportTextCell({
  value,
  align = "left",
}: {
  value: string | number;
  align?: "left" | "center" | "right";
}) {
  return (
    <Typography
      sx={{
        width: "100%",
        fontSize: 13,
        fontWeight: 500,
        color: "var(--mr-text)",
        whiteSpace: "nowrap",
        textAlign: align,
        lineHeight: 1.2,
      }}
    >
      {value}
    </Typography>
  );
}

// A document link: red PDF icon followed by the file label.
export function ProgressReportDocumentCell({
  file,
}: {
  file: UploadedFileMetadata | null;
}) {
  const hasDocument = Boolean(file);
  const displayLabel = file?.name || "-";
  const shortLabel = truncateFileName(displayLabel);
  return (
    <DocumentLink
      file={file}
      sx={{
        width: "100%",
        minWidth: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 1,
        overflow: "hidden",
      }}
    >
      {hasDocument ? <PdfDocumentIcon size={20} /> : null}
      <Typography
        title={displayLabel}
        sx={{
          minWidth: 0,
          flex: 1,
          fontSize: 12,
          fontWeight: 500,
          color: "var(--mr-text)",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis",
        }}
      >
        {shortLabel}
      </Typography>
    </DocumentLink>
  );
}

// Status pill. The badge colors come from the status key ("Sent", "Draft", ...)
// and the label is the translated text shown to the user.
export function ProgressReportStatusCell({
  status,
  label,
}: {
  status: string;
  label: string;
}) {
  return <IssueStatusBadge status={status} label={label} sx={{ minWidth: 72 }} />;
}

// The "⋮" actions button. Opens the row-actions dropdown menu.
export function ProgressReportActionCell({
  menuLabels,
  editReportLabels,
  uploadDraftSemesterLabels,
  createMeetingLabels,
  setDeadlineLabels,
  report,
  rowActions,
}: {
  menuLabels: ProgressReportActionsMenuLabels;
  editReportLabels: ProgressReportCreateDialogLabels;
  uploadDraftSemesterLabels: ProgressReportUploadDraftSemesterDialogLabels;
  createMeetingLabels: ProgressReportCreateMeetingDialogLabels;
  setDeadlineLabels: ProgressReportSetDeadlineDialogLabels;
  report: ProgressReportRow;
  rowActions: ProgressReportRowActions;
}) {
  return (
    <ProgressReportActionsMenu
      labels={menuLabels}
      editReportLabels={editReportLabels}
      uploadDraftSemesterLabels={uploadDraftSemesterLabels}
      createMeetingLabels={createMeetingLabels}
      setDeadlineLabels={setDeadlineLabels}
      report={report}
      rowActions={rowActions}
    />
  );
}