/**
 * Edit Component for Book Hero Block
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import { useEffect } from '@wordpress/element';

export default function Edit({ attributes, setAttributes, clientId }) {
    const {
        blockId,
        showBreadcrumbs,
        showStats,
        showBadge,
        showReviewCount,
        badgeText,
        subTitle,
        formatsText,
        formatsTitle,
        pagesLabel,
        yearLabel,
        languageLabel,
        reviewLinkText,
        readingAgeLabel,
        sectionBg,
        titleColor,
        primaryColor,
        secondaryColor,
        textColor,
        accentColor,
        btnBg,
        btnText,
        btnHoverBg,
        btnHoverText,
        anchor
    } = attributes;

    useEffect(() => {
        if (!blockId) {
            setAttributes({ blockId: `awt-book-hero-${clientId}` });
        }
    }, [blockId, clientId]);

    return (
        <div {...useBlockProps({
            id: anchor ? undefined : blockId
        })}>
            <InspectorControls>
                <PanelBody title={__('Content Visibility', 'author-website-templates')} initialOpen={true}>
                    <ToggleControl
                        label={__('Show Breadcrumbs', 'author-website-templates')}
                        checked={showBreadcrumbs}
                        onChange={(value) => setAttributes({ showBreadcrumbs: value })}
                    />
                    <ToggleControl
                        label={__('Show Stats', 'author-website-templates')}
                        checked={showStats}
                        onChange={(value) => setAttributes({ showStats: value })}
                    />
                    <ToggleControl
                        label={__('Show Badge', 'author-website-templates')}
                        checked={showBadge}
                        onChange={(value) => setAttributes({ showBadge: value })}
                    />
                    <ToggleControl
                        label={__('Show Review Count', 'author-website-templates')}
                        checked={showReviewCount}
                        onChange={(value) => setAttributes({ showReviewCount: value })}
                    />
                </PanelBody>

                <PanelBody title={__('Text Content', 'author-website-templates')} initialOpen={false}>
                    <TextControl
                        label={__('Badge Text', 'author-website-templates')}
                        value={badgeText}
                        onChange={(value) => setAttributes({ badgeText: value })}
                        help={__('Leave empty to hide badge if toggle is on.', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Subtitle / Tagline', 'author-website-templates')}
                        value={subTitle}
                        onChange={(value) => setAttributes({ subTitle: value })}
                        help={__('Appears below the main title. Falls back to Reading Age if empty.', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Formats Bottom Text', 'author-website-templates')}
                        value={formatsText}
                        onChange={(value) => setAttributes({ formatsText: value })}
                        help={__('Text below buttons ("Available in...")', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Formats List Title', 'author-website-templates')}
                        value={formatsTitle}
                        onChange={(value) => setAttributes({ formatsTitle: value })}
                        help={__('Title for the sidebar formats list', 'author-website-templates')}
                    />
                </PanelBody>

                <PanelBody title={__('Labels', 'author-website-templates')} initialOpen={false}>
                    <TextControl
                        label={__('Pages Label', 'author-website-templates')}
                        value={pagesLabel}
                        onChange={(value) => setAttributes({ pagesLabel: value })}
                    />
                    <TextControl
                        label={__('Year Label', 'author-website-templates')}
                        value={yearLabel}
                        onChange={(value) => setAttributes({ yearLabel: value })}
                    />
                    <TextControl
                        label={__('Language Label', 'author-website-templates')}
                        value={languageLabel}
                        onChange={(value) => setAttributes({ languageLabel: value })}
                    />
                    <TextControl
                        label={__('Review Link Text', 'author-website-templates')}
                        value={reviewLinkText}
                        onChange={(value) => setAttributes({ reviewLinkText: value })}
                    />
                    <TextControl
                        label={__('Reading Age Label', 'author-website-templates')}
                        value={readingAgeLabel}
                        onChange={(value) => setAttributes({ readingAgeLabel: value })}
                        help={__('Shown when Subtitle is empty and Reading Age meta exists.', 'author-website-templates')}
                    />
                </PanelBody>

                <PanelColorSettings
                    title={__('Design Settings', 'author-website-templates')}
                    initialOpen={false}
                    colorSettings={[
                        {
                            value: sectionBg,
                            onChange: (value) => setAttributes({ sectionBg: value }),
                            label: __('Section Background', 'author-website-templates'),
                        },
                        {
                            value: accentColor,
                            onChange: (value) => setAttributes({ accentColor: value }),
                            label: __('Accent Color', 'author-website-templates'),
                        },
                        {
                            value: primaryColor,
                            onChange: (value) => setAttributes({ primaryColor: value }),
                            label: __('Primary Color (Headings)', 'author-website-templates'),
                        },
                        {
                            value: secondaryColor,
                            onChange: (value) => setAttributes({ secondaryColor: value }),
                            label: __('Secondary Color (Body)', 'author-website-templates'),
                        },
                        {
                            value: btnBg,
                            onChange: (value) => setAttributes({ btnBg: value }),
                            label: __('Button Background', 'author-website-templates'),
                        },
                        {
                            value: btnText,
                            onChange: (value) => setAttributes({ btnText: value }),
                            label: __('Button Text', 'author-website-templates'),
                        },
                        {
                            value: btnHoverBg,
                            onChange: (value) => setAttributes({ btnHoverBg: value }),
                            label: __('Button Hover Background', 'author-website-templates'),
                        },
                        {
                            value: btnHoverText,
                            onChange: (value) => setAttributes({ btnHoverText: value }),
                            label: __('Button Hover Text', 'author-website-templates'),
                        }
                    ]}
                />
            </InspectorControls>

            <ServerSideRender
                block="awt/author-pro-book-hero"
                attributes={attributes}
            />
        </div>
    );
}
