import React, { useState, useRef } from "react";
import { Box, IconButton, CircularProgress, Typography } from "@mui/material";
import {
  Replay as ReplayIcon,
  HighlightOff as ClearIcon,
} from "@mui/icons-material";

// The component is self-contained and we will use inline styles and a single
// embedded CSS block to manage the styling to avoid file path issues in this environment.

// In a real project, this would be in a separate .scss or .css file.
const scssStyles = `
.image-uploader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #f0f0f0;
  border: 1px solid transparent;
  transition: border-color 0.3s ease-in-out;
}

.image-uploader-container.error {
  border-color: #f44336; /* Red border on error */
}

.upload-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

.image-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.action-overlay {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  border-radius: 16px;
  position: relative;

}

.close-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  z-index: 10;
}

.error-icons {
  display: flex;
  gap: 0px;
}
  .clear-icon-container{
    position: absolute;
    top: -8px;
    right: -8px;
  }
`;

// Helper to inject the styles into the document head
// In a real app, this would be handled by the CSS build process
const injectStyles = () => {
  const style = document.createElement("style");
  style.innerHTML = scssStyles;
  document.head.appendChild(style);
};

// We will call this function once when the component is first mounted.
injectStyles();

/**
 * A reusable React component for uploading and previewing images with various states.
 */
const ImageUploader = ({
  image,
  isLoading,
  isError,
  handleClear,
  handleRetry,
}) => {
  return (
    <Box className={`image-uploader-container ${isError ? "error" : ""}`}>
      {/* Show the preview image or a placeholder if loading/error */}
      {(image || isLoading || isError) && (
        <img
          src={image || "https://placehold.co/200x200?text=Preview"}
          alt="Image Preview"
          className="image-preview"
        />
      )}

      {/* Overlay for loading and error states */}
      {(isLoading || isError) && (
        <Box className="action-overlay">
          {isLoading && <CircularProgress size={20} />}

          {isError && (
            <Box className="error-icons">
              {/* Retry Icon */}
              <IconButton
                color="default"
                onClick={handleRetry}
                aria-label="retry upload"
              >
                <ReplayIcon sx={{ fontSize: 20 }} />
              </IconButton>
              <div className="clear-icon-container">
                <IconButton
                  color="default"
                  onClick={handleClear}
                  aria-label="clear image"
                >
                  <ClearIcon sx={{ fontSize: 20 }} />
                </IconButton>
              </div>
            </Box>
          )}
        </Box>
      )}

      {/* Close button for successful uploads */}
      {image && !isLoading && !isError && (
        <div className="clear-icon-container">
          <IconButton
            color="default"
            onClick={handleClear}
            aria-label="clear image"
          >
            <ClearIcon sx={{ fontSize: 20 }} />
          </IconButton>
        </div>
      )}
    </Box>
  );
};

export default ImageUploader;
