'use client'

import {useState, useEffect} from 'react'
import PropTypes from 'prop-types'
import dynamic from 'next/dynamic'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import {useTheme} from '@mui/material/styles'

const MDEditor = dynamic(
  () => import('@uiw/react-md-editor').then(mod => mod.default),
  {ssr: false}
)

export default function RichTextEditor({
  value = '',
  onChange,
  placeholder = 'Rédigez votre contenu...',
  label,
  isRequired = false,
  name = 'content'
}) {
  const [content, setContent] = useState(value)
  const [wordCount, setWordCount] = useState(0)
  const [charCount, setCharCount] = useState(0)
  const theme = useTheme()

  useEffect(() => {
    setContent(value)
  }, [value])

  useEffect(() => {
    if (content) {
      const words = content.trim().split(/\s+/).filter(word => word.length > 0)
      setWordCount(words.length)
      setCharCount(content.length)
    } else {
      setWordCount(0)
      setCharCount(0)
    }
  }, [content])

  const handleChange = val => {
    setContent(val || '')
    if (onChange) {
      onChange({
        target: {
          name,
          value: val || ''
        }
      })
    }
  }

  return (
    <Box sx={{mt: 2, width: '100%'}}>
      {label && (
        <Typography variant='body2' sx={{mb: 1, color: theme.palette.text.primary}}>
          {label} {isRequired && '*'}
        </Typography>
      )}
      <Box
        sx={{
          '& .w-md-editor': {
            backgroundColor: theme.palette.mode === 'dark' ? '#2d2d2d' : '#ffffff',
            '& .w-md-editor-text-pre, & .w-md-editor-text-input, & .w-md-editor-text': {
              color: theme.palette.text.primary + ' !important',
              backgroundColor: 'transparent !important'
            },
            '& .w-md-editor-bar': {
              backgroundColor: theme.palette.mode === 'dark' ? '#1e1e1e' : '#f5f5f5',
              borderColor: theme.palette.divider
            },
            '& .w-md-editor-focus': {
              borderColor: theme.palette.primary.main
            }
          }
        }}
      >
        <MDEditor
          data-color-mode={theme.palette.mode}
          height={200}
          placeholder={placeholder}
          value={content}
          visibleDragBar={false}
          onChange={handleChange}
        />
      </Box>

      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          mt: 1,
          px: 1
        }}
      >
        <Typography variant='caption' color='text.secondary'>
          Formatage Markdown supporté
        </Typography>
        <Typography variant='caption' color='text.secondary'>
          {charCount} caractères • {wordCount} mots
        </Typography>
      </Box>

      {/* Hidden input for form submission */}
      <input
        type='hidden'
        name={name}
        value={content}
      />
    </Box>
  )
}

RichTextEditor.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  label: PropTypes.string,
  isRequired: PropTypes.bool,
  name: PropTypes.string
}