import React from "react";
import styled from "styled-components";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

// Error icon component
const ErrorIcon = () => (
  <svg width="36" height="42" viewBox="0 0 36 42" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M18 0C8.06 0 0 8.06 0 18C0 27.94 8.06 36 18 36C27.94 36 36 27.94 36 18C36 8.06 27.94 0 18 0ZM19.8 27H16.2V23.4H19.8V27ZM19.8 19.8H16.2V9H19.8V19.8Z"
      fill="#F95454"
    />
  </svg>
);

// Close icon component
const CloseIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M18 6L6 18M6 6L18 18"
      stroke="#313333"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const CustomErrorToast = ({ message, onClose }) => (
  <Container>
    <IconBox>
      <ErrorIcon />
    </IconBox>
    <ContentSection>
      <p>{message}</p>
      <CloseButton onClick={onClose}>
        <CloseIcon />
      </CloseButton>
    </ContentSection>
  </Container>
);

const Container = styled.div`
  height: 82px;
  width: 100%;
  border-radius: 9.245px;
  border: 0.5px solid #da1c5c;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
`;

const IconBox = styled.div`
  padding-left: 14px;
  height: 100%;
  position: relative;
  width: 90px;
  display: grid;
  place-items: center;
  background: rgba(249, 84, 84, 0.1);

  &::before {
    content: "";
    position: absolute;
    display: block;
    width: 14px;
    bottom: 0;
    top: 0;
    left: 0;
    background: #f95454;
  }
`;

const ContentSection = styled.div`
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 30px 0 20px;

  p {
    color: #313333;
    font-size: 15.5px;
    font-weight: 400;
    flex: 1;
    margin: 0;
  }
`;

const CloseButton = styled.button`
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  svg {
    transform: scale(1.2);
  }

  &:hover {
    opacity: 0.7;
  }
`;

// Main toast functions
export const showErrorToast = (message) => {
  return toast(
    <CustomErrorToast 
      message={message} 
      onClose={() => toast.dismiss()} 
    />,
    {
      position: "top-right",
      autoClose: 5000,
      hideProgressBar: true,
      closeOnClick: false,
      pauseOnHover: true,
      draggable: true,
      closeButton: false,
      className: 'custom-error-toast',
      bodyClassName: 'custom-error-toast-body',
      style: {
        background: 'transparent',
        border: 'none',
        borderRadius: 0,
        padding: 0,
        boxShadow: 'none',
        width: '700px',
        maxWidth: '700px',
      },
      bodyStyle: {
        padding: 0,
        margin: 0,
      },
    }
  );
};

export const showSuccessToast = (message) => {
  return toast.success(message, {
    position: "top-right",
    autoClose: 3000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
  });
};

export const showInfoToast = (message) => {
  return toast.info(message, {
    position: "top-right",
    autoClose: 4000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
  });
};

export const showWarningToast = (message) => {
  return toast.warning(message, {
    position: "top-right",
    autoClose: 4000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
  });
};

// Default export for backward compatibility
const customToast = {
  error: showErrorToast,
  success: showSuccessToast,
  info: showInfoToast,
  warning: showWarningToast,
};

export default customToast;