"use client";

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

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

import type { ProgressReportRow } from "../../progress-report-data";

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>
  );
}

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>
  );
}

// The badge color comes from the status key ("Sent", "Draft"); 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 }} />;
}

export function ProgressReportActionCell({
  row,
  label,
  onView,
}: {
  row: ProgressReportRow;
  label: string;
  onView?: (row: ProgressReportRow) => void;
}) {
  return (
    <Button
      startIcon={<EyeViewIcon sx={{ fontSize: 20 }} />}
      onClick={() => onView?.(row)}
      sx={{
        color: "var(--mr-muted)",
        textTransform: "none",
        fontSize: 12,
        fontWeight: 400,
        px: 1,
        minWidth: 0,
        whiteSpace: "nowrap",
        "& .MuiButton-startIcon": { mr: 0.5 },
        "&:hover": { bgcolor: "transparent", color: "var(--mr-blue)" },
      }}
    >
      {label}
    </Button>
  );
}