import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import {
  getFormBorderColor,
  getFormSoftBg,
} from "@/components/ui/form";

import type { UploadStatus } from "./add-issue-dialog-types";

type AttachmentFileCardProps = {
  attachment: File;
  uploadStatus: UploadStatus;
};

function formatFileSize(size: number): string {
  if (size < 1024) {
    return `${size} B`;
  }

  if (size < 1024 * 1024) {
    return `${Math.round(size / 1024)} KB`;
  }

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

function getFileExtension(filename: string): string {
  const extension = filename.split(".").pop()?.trim();

  if (!extension) {
    return "FILE";
  }

  return extension.toUpperCase();
}

export function AttachmentFileCard({
  attachment,
  uploadStatus,
}: AttachmentFileCardProps) {
  const theme = useTheme();

  const isCompleted = uploadStatus === "completed";
  const fileExtension = getFileExtension(attachment.name);

  return (
    <Box
      sx={{
        width: {
          xs: "100%",
          sm: 250,
        },
        minWidth: 0,
        height: 58,
        borderRadius: "8px",
        bgcolor: getFormSoftBg(theme),
        display: "flex",
        alignItems: "center",
        px: 1.5,
        gap: 1.2,
      }}
    >
      <Box
        sx={{
          width: 32,
          height: 36,
          borderRadius: "6px",
          bgcolor: theme.palette.background.paper,
          border: `1px solid ${getFormBorderColor(theme)}`,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          position: "relative",
          flexShrink: 0,
        }}
      >
        <InsertDriveFileIcon
          sx={{
            fontSize: 24,
            color: theme.palette.text.secondary,
          }}
        />

        <Box
          sx={{
            position: "absolute",
            bottom: 3,
            left: 3,
            maxWidth: 27,
            px: 0.4,
            py: 0.1,
            borderRadius: "2px",
            bgcolor: "#EF4444",
            color: "#FFFFFF",
            fontSize: 6,
            fontWeight: 700,
            lineHeight: 1,
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
          }}
        >
          {fileExtension}
        </Box>
      </Box>

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

        <Typography
          sx={{
            mt: 0.4,
            fontSize: 10,
            color: theme.palette.text.secondary,
          }}
        >
          {formatFileSize(attachment.size)}
        </Typography>
      </Box>

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

          <Typography
            noWrap
            sx={{
              fontSize: 10,
              color: theme.palette.text.secondary,
            }}
          >
            {isCompleted ? "Completed" : "Uploading"}
          </Typography>
        </Box>

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