import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import CheckCircleIcon from "@mui/icons-material/CheckCircle";

import { getFormSoftBg } from "@/components/ui/form";
import { pdfIcon as PdfIcon } from "@/components/ui/icon";
import type { UploadStatus } from "@/features/pswg/working-group-issues/components/create-issuses/add-working-group-issue-dialog-types";

type AttachmentFileCardProps = {
  fileName: string;
  fileSizeLabel: string;
  fileUrl?: string | null;
  uploadStatus: UploadStatus;
};

export function formatFileSize(size: number) {
  if (size < 1024 * 1024) {
    return `${Math.round(size / 1024)} KB`;
  }

  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
}

export function AttachmentFileCard({
  fileName,
  fileSizeLabel,
  fileUrl,
  uploadStatus,
}: AttachmentFileCardProps) {
  const theme = useTheme();
  const isLink = Boolean(fileUrl);

  return (
    <Box
      component={isLink ? "a" : "div"}
      href={fileUrl ?? undefined}
      target={isLink ? "_blank" : undefined}
      rel={isLink ? "noreferrer" : undefined}
      sx={{
        width: 250,
        height: 58,
        borderRadius: "8px",
        bgcolor: getFormSoftBg(theme),
        display: "flex",
        alignItems: "center",
        px: 1.5,
        gap: 1.2,
        textDecoration: "none",
        cursor: isLink ? "pointer" : "default",
      }}
    >
      <Box
        sx={{
          width: 32,
          height: 36,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: 0,
        }}
      >
        <PdfIcon sx={{ fontSize: 32 }} />
      </Box>

      <Box sx={{ minWidth: 0, flex: 1 }}>
        <Typography
          noWrap
          sx={{
            fontSize: 11,
            fontWeight: 700,
            color: theme.palette.text.primary,
          }}
        >
          {fileName}
        </Typography>

        <Typography
          sx={{
            fontSize: 10,
            color: theme.palette.text.secondary,
            mt: 0.4,
          }}
        >
          {fileSizeLabel}
        </Typography>
      </Box>

      <Box sx={{ width: 76 }}>
        <Box sx={{ display: "flex", alignItems: "center", gap: 0.4 }}>
          {uploadStatus === "completed" ? (
            <CheckCircleIcon sx={{ fontSize: 11, color: "#22C55E" }} />
          ) : null}

          <Typography
            sx={{
              fontSize: 10,
              color: theme.palette.text.secondary,
              mb: 0.3,
            }}
          >
            {uploadStatus === "completed" ? "Completed" : "Uploading"}
          </Typography>
        </Box>

        <Box
          sx={{
            height: 3,
            borderRadius: 99,
            bgcolor:
              uploadStatus === "completed"
                ? "#22C55E"
                : alpha("#22C55E", 0.18),
            overflow: "hidden",
          }}
        >
          <Box
            sx={{
              width: uploadStatus === "completed" ? "100%" : "45%",
              height: "100%",
              bgcolor: "#22C55E",
              transition: "width 0.3s ease",
            }}
          />
        </Box>
      </Box>
    </Box>
  );
}