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 InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";

import {
  getBorderColor,
  getSoftBg,
} from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-styles";
import type { UploadStatus } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-types";

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

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

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

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

  return (
    <Box
      sx={{
        width: 250,
        height: 58,
        borderRadius: "8px",
        bgcolor: getSoftBg(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 ${getBorderColor(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,
            px: 0.4,
            py: 0.1,
            borderRadius: "2px",
            bgcolor: "#EF4444",
            color: "#fff",
            fontSize: 7,
            fontWeight: 700,
            lineHeight: 1,
          }}
        >
          PDF
        </Box>
      </Box>

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

        <Typography
          sx={{
            fontSize: 10,
            color: theme.palette.text.secondary,
            mt: 0.4,
          }}
        >
          {formatFileSize(attachment.size)}
        </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>
  );
}