"use client";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";
import type { SxProps, Theme } from "@mui/material/styles";

import { PdfIcon } from "@/components/ui/icon";
import {
  formatDocumentCellValue,
  getDisplayFileName,
  isDocumentPlaceholder,
  isMeaningfulFileSize,
  truncateFileName,
} from "@/lib/document-file";

type DocumentFileNameProps = {
  name: string;
  fontSize?: number;
  fontWeight?: number;
  color?: string;
  sx?: SxProps<Theme>;
};

export function DocumentFileName({
  name,
  fontSize = 12,
  fontWeight = 500,
  color,
  sx,
}: DocumentFileNameProps) {
  const theme = useTheme();

  return (
    <Typography
      component="span"
      noWrap
      sx={[
        {
          display: "block",
          overflow: "hidden",
          textOverflow: "ellipsis",
          fontSize,
          fontWeight,
          color: color ?? theme.palette.text.primary,
          maxWidth: "100%",
        },
        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
      ]}
    >
      {name}
    </Typography>
  );
}

type DocumentFileCellProps = {
  value?: string | null;
  compact?: boolean;
  emptyLabel?: string;
};

export function DocumentFileCell({
  value,
  compact = false,
  emptyLabel = "Not Uploaded",
}: DocumentFileCellProps) {
  const hasDocument = !isDocumentPlaceholder(value);
  const displayValue = formatDocumentCellValue(value, emptyLabel);
  const shortLabel = hasDocument
    ? truncateFileName(displayValue)
    : displayValue;

  return (
    <DocumentFileName
      name={shortLabel}
      fontSize={compact ? 12 : 13}
      fontWeight={500}
      sx={{ width: "100%" }}
    />
  );
}

type DocumentFileAttachmentProps = {
  value?: string | null;
  fileSize?: string | null;
  iconSize?: number;
  emptyLabel?: string;
};

export function DocumentFileAttachment({
  value,
  fileSize,
  iconSize = 20,
  emptyLabel = "Meeting Document",
}: DocumentFileAttachmentProps) {
  const theme = useTheme();

  if (isDocumentPlaceholder(value)) {
    return (
      <Typography
        sx={{
          fontSize: 12,
          fontWeight: 500,
          color: theme.palette.text.primary,
        }}
      >
        {emptyLabel}
      </Typography>
    );
  }

  const displayName = truncateFileName(
    getDisplayFileName(value, emptyLabel),
  );

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: "2px",
        minWidth: 0,
        overflow: "hidden",
      }}
    >
      <PdfIcon sx={{ fontSize: iconSize }} />
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          gap: "4px",
          minWidth: 0,
          overflow: "hidden",
        }}
      >
        <DocumentFileName name={displayName} />
        {isMeaningfulFileSize(fileSize) ? (
          <Typography
            sx={{
              fontSize: 8,
              color: theme.palette.text.secondary,
            }}
          >
            {fileSize}
          </Typography>
        ) : null}
      </Box>
    </Box>
  );
}