import { Box, Button, Typography } from '@mui/material'
import { ReactNode, useState } from 'react'
import ReactJoyride, { Step } from 'react-joyride'
import './CustomJoyRideStyles.css'

function ReactJoyRide({
  steps,
  children,
  tourName,
}: {
  steps: Step[]
  children?: ReactNode
  tourName: string
}) {
  const [run, setRun] = useState(false)

  const customSteps = steps.map((step, index) => ({
    ...step,
    title: '', // Remove the automatic title
    content: (
      <Box
        sx={{
          fontFamily: 'Roboto, sans-serif',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Typography
          variant="caption"
          sx={{
            color: '#6b7280',
            fontWeight: 500,
            textTransform: 'uppercase',
            letterSpacing: '0.5px',
            fontSize: '11px',
          }}
        >
          Step {index + 1}
        </Typography>
        <Box sx={{ padding: '4px 0' }}>
          <Typography
            sx={{
              lineHeight: 1.5,
              color: '#4b5563',
              fontFamily: 'Poppins, sans-serif',
              fontSize: '16px',
              fontWeight: '600',
              marginTop: '12px',
            }}
          >
            {step.title}
          </Typography>
        </Box>
        <Box sx={{ padding: '4px 0' }}>
          <Typography
            sx={{
              fontSize: '14px',
              lineHeight: 1.5,
              color: '#4b5563',
              fontFamily: 'Heebo, sans-serif',
              fontWeight: '500',
            }}
          >
            {step.content}
          </Typography>
        </Box>
      </Box>
    ),
  }))

  return (
    <>
      <Box>
        <ReactJoyride
          run={run}
          steps={customSteps}
          styles={{
            options: {
              primaryColor: '#121212',
              textColor: '#1f2937',
              backgroundColor: '#ffffff',
              overlayColor: 'rgba(0, 0, 0, 0.4)',
              arrowColor: '#ffffff',
              zIndex: 1000,
            },
            tooltip: {
              borderRadius: '12px',
              boxShadow:
                '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
              fontSize: '14px',
              padding: '20px',
              minWidth: '320px',
              maxWidth: '400px',
            },
            tooltipContainer: {
              textAlign: 'left',
            },
            tooltipTitle: {
              fontSize: '16px',
              fontWeight: '600',
              color: '#1f2937',
              fontFamily: 'Poppins, sans-serif',
            },
            tooltipContent: {
              fontSize: '14px',
              lineHeight: '1.5',
              color: '#4b5563',
              padding: '0',
              fontFamily: 'Heebo, sans-serif !important',
              fontWeight: '400',
            },
            buttonNext: {
              backgroundColor: '#121212',
              color: 'white',
              borderRadius: '8px',
              fontSize: '14px',
              fontWeight: '500',
              height: '40px',
              minWidth: '80px',
              padding: '0 16px',
              border: 'none',
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              fontFamily: 'Roboto, sans-serif',
            },
            buttonBack: {
              backgroundColor: 'transparent',
              color: '#121212',
              borderRadius: '8px',
              fontSize: '14px',
              fontWeight: '500',
              height: '40px',
              minWidth: '80px',
              padding: '0 16px',
              border: '1.5px solid #e5e7eb',
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              marginRight: '8px',
              fontFamily: 'Roboto, sans-serif',
            },
            buttonSkip: {
              backgroundColor: 'transparent',
              color: '#6b7280',
              fontSize: '13px',
              fontWeight: '500',
              border: 'none',
              cursor: 'pointer',
              position: 'absolute',
              top: '16px',
              right: '16px',
              padding: '4px 8px',
              borderRadius: '6px',
              transition: 'all 0.2s ease',
              fontFamily: 'Roboto, sans-serif',
            },
            buttonClose: {
              display: 'none',
            },
            beacon: {
              backgroundColor: '#3b82f6',
              borderRadius: '50%',
              border: '3px solid #3b82f6',
              boxShadow: '0 0 0 6px rgba(59, 130, 246, 0.2)',
            },
            beaconInner: {
              backgroundColor: '#3b82f6',
              borderRadius: '50%',
            },
          }}
          continuous
          showSkipButton
          showProgress
          scrollToFirstStep
          disableOverlay={false}
          disableOverlayClose
          disableScrolling={false}
          hideCloseButton
          locale={{
            last: 'Finish',
            next: 'Next',
            skip: 'Skip',
            back: 'Previous',
          }}
        />

        {children}

        <Button
          onClick={() => setRun(true)}
          variant="contained"
          sx={{
            position: 'fixed',
            top: '50%',
            right: '0px',
            transform: 'translateY(-50%)',
            zIndex: 1000,
            borderRadius: '8px 0 0 8px',
            backgroundColor: '#E0E0E7',
            color: '#4b5261ff',
            fontSize: '14px',
            fontWeight: 500,
            padding: '60px 4px',
            minWidth: 'auto',
            textTransform: 'none',
            border: '1px solid #D0D0E3',
            borderRight: 'none',
            fontFamily: 'Roboto, sans-serif',
            letterSpacing: '0.025em',
            writingMode: 'vertical-rl',
            textOrientation: 'mixed',
            whiteSpace: 'nowrap',
            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 2)',
            '&:hover': {
              backgroundColor: '#1E027F',
              color: 'white',
              boxShadow:
                '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
              transform: 'translateY(-50%) translateX(-4px)',
            },
            '&:active': {
              transform: 'translateY(-50%) translateX(0px)',
            },
          }}
        >
          Take a Tour
        </Button>
      </Box>
    </>
  )
}

export default ReactJoyRide
