'use client';

import React, { useMemo } from 'react';
import { Form } from 'antd';
import type { FormItemProps } from 'antd/es/form';
import dynamic from 'next/dynamic';

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
import 'react-quill/dist/quill.snow.css';

interface FormRichEditorProps extends Omit<FormItemProps, 'children'> {
    placeholder?: string;
    height?: number;
    minHeight?: number;
}

/** Tipo dos módulos do Quill (compatível com react-quill). */
type QuillModules = Record<string, unknown>;

/** Wrapper para que o Form receba apenas o valor string (ReactQuill passa content, delta, source, editor). */
function QuillWrapper({
    value,
    onChange,
    placeholder,
    style,
    modules,
}: {
    value?: string;
    onChange?: (value: string) => void;
    placeholder?: string;
    style?: React.CSSProperties;
    modules?: QuillModules;
}) {
    return (
        <ReactQuill
            theme="snow"
            value={value ?? ''}
            onChange={(content) => onChange?.(content)}
            placeholder={placeholder}
            style={style}
            modules={modules as import('quill').StringMap}
        />
    );
}

export default function FormRichEditor({
    name,
    label,
    required = false,
    help,
    rules,
    placeholder = 'Digite o conteúdo...',
    height,
    minHeight = 200,
    ...formItemRest
}: FormRichEditorProps) {
    const formRules = useMemo(
        () => (required ? [{ required: true, message: `${label || 'Campo'} é obrigatório` }, ...(rules || [])] : rules),
        [required, label, rules]
    );

    const modules = useMemo(
        () => ({
            toolbar: [
                [{ header: [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                ['link', 'image'],
                ['clean'],
            ],
        }),
        []
    );

    return (
        <Form.Item
            name={name}
            label={label}
            rules={formRules}
            help={help}
            {...formItemRest}
        >
            <QuillWrapper
                placeholder={placeholder}
                style={{
                    height: height ? `${height}px` : undefined,
                    minHeight: `${minHeight}px`,
                }}
                modules={modules}
            />
        </Form.Item>
    );
}