"use client";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import {
    ClassicEditor,
    Bold,
    Italic,
    Link,
    List,
    BlockQuote,
    Heading,
    Table,
    TableToolbar,
    MediaEmbed,
    Undo,
    Essentials,
    Paragraph,
    Image,
    ImageToolbar,
    ImageUpload,
    ImageStyle,
    SimpleUploadAdapter,
} from "ckeditor5";

import "ckeditor5/ckeditor5.css";

interface Props {
    data: string;
    onChange: (data: string) => void;
    uploadUrl?: string; // optional: your image upload endpoint
}

export default function CKEditorInner({ data, onChange, uploadUrl }: Props) {
    return (
        <CKEditor
            editor={ClassicEditor}
            data={data}
            config={{
                plugins: [
                    Essentials,
                    Paragraph,
                    Heading,
                    Bold,
                    Italic,
                    Link,
                    List,
                    BlockQuote,
                    Table,
                    TableToolbar,
                    MediaEmbed,
                    Undo,
                    Image,
                    ImageToolbar,
                    ImageStyle,
                    ImageUpload,
                    SimpleUploadAdapter,
                ],
                toolbar: {
                    items: [
                        "heading", "|",
                        "bold", "italic", "link",
                        "bulletedList", "numberedList", "|",
                        "blockQuote", "uploadImage", "insertTable", "mediaEmbed", "|",
                        "undo", "redo",
                    ],
                    shouldNotGroupWhenFull: true,
                },
                image: {
                    toolbar: ["imageTextAlternative", "imageStyle:inline", "imageStyle:block", "imageStyle:side"],
                },
                table: {
                    contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
                },
                ...(uploadUrl && {
                    simpleUpload: {
                        uploadUrl,
                    },
                }),
            }}
            onChange={(_, editor) => onChange(editor.getData())}
        />
    );
}