import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, TextControl, SelectControl } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';

export default function Edit({ attributes, setAttributes }) {
    const {
        showGallery,
        showMeta,
        showBuyButtons,
        showDescription,
        showPrice,
        showFormats,
        sectionBgColor,
        titleColor,
        accentColor,
        btnBgColor,
        labelBack,
        labelLatest,
        labelIllustrated,
        labelOrder,
        labelPeek,
        labelAbout,
        labelDetails,
        detailsStyle,
        bookId
    } = attributes;

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Design Settings', 'author-website-templates')} initialOpen={true}>
                    <TextControl
                        label={__('Select Book ID', 'author-website-templates')}
                        value={bookId}
                        onChange={(value) => setAttributes({ bookId: value })}
                        help={__('Enter a specific Book ID to display. If left empty, it will use the current "book" page.', 'author-website-templates')}
                    />
                    <SelectControl
                        label={__('Layout Style', 'author-website-templates')}
                        value={detailsStyle}
                        options={[
                            { label: __('Fun (Default)', 'author-website-templates'), value: 'fun' },
                            { label: __('Elegant', 'author-website-templates'), value: 'elegant' },
                        ]}
                        onChange={(value) => setAttributes({ detailsStyle: value })}
                    />
                </PanelBody>

                <PanelBody title={__('Display Settings', 'author-website-templates')} initialOpen={false}>
                    <ToggleControl
                        label={__('Show Price', 'author-website-templates')}
                        help={__('Display book price below the title', 'author-website-templates')}
                        checked={showPrice}
                        onChange={(value) => setAttributes({ showPrice: value })}
                    />
                    <ToggleControl
                        label={__('Show Format Options', 'author-website-templates')}
                        help={__('Display format cards (Hardcover, Kindle, etc.) in Buy Box', 'author-website-templates')}
                        checked={showFormats}
                        onChange={(value) => setAttributes({ showFormats: value })}
                    />
                    <ToggleControl
                        label={__('Show Gallery', 'author-website-templates')}
                        help={__('Display interior/preview images below the cover', 'author-website-templates')}
                        checked={showGallery}
                        onChange={(value) => setAttributes({ showGallery: value })}
                    />
                    <ToggleControl
                        label={__('Show Buy Buttons', 'author-website-templates')}
                        help={__('Display the purchase links panel', 'author-website-templates')}
                        checked={showBuyButtons}
                        onChange={(value) => setAttributes({ showBuyButtons: value })}
                    />
                    <ToggleControl
                        label={__('Show Description', 'author-website-templates')}
                        help={__('Display the book description/synopsis', 'author-website-templates')}
                        checked={showDescription}
                        onChange={(value) => setAttributes({ showDescription: value })}
                    />
                    <ToggleControl
                        label={__('Show Book Details', 'author-website-templates')}
                        help={__('Display meta information (age range, pages, ISBN, etc.)', 'author-website-templates')}
                        checked={showMeta}
                        onChange={(value) => setAttributes({ showMeta: value })}
                    />
                </PanelBody>

                {/* Labels & Text Panel */}
                <PanelBody title={__('Labels & Text', 'author-website-templates')} initialOpen={false}>
                    <TextControl
                        label={__('Back Link Text', 'author-website-templates')}
                        value={labelBack}
                        onChange={(value) => setAttributes({ labelBack: value })}
                        help={__('Text for the "Back to All Books" link', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Latest Release Label', 'author-website-templates')}
                        value={labelLatest}
                        onChange={(value) => setAttributes({ labelLatest: value })}
                        help={__('Badge text above the book title', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Illustrator Label', 'author-website-templates')}
                        value={labelIllustrated}
                        onChange={(value) => setAttributes({ labelIllustrated: value })}
                        help={__('Text before the author name', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Order Section Heading', 'author-website-templates')}
                        value={labelOrder}
                        onChange={(value) => setAttributes({ labelOrder: value })}
                        help={__('Heading for the buy buttons section', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Gallery Heading', 'author-website-templates')}
                        value={labelPeek}
                        onChange={(value) => setAttributes({ labelPeek: value })}
                        help={__('Heading for the preview images section', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Description Heading', 'author-website-templates')}
                        value={labelAbout}
                        onChange={(value) => setAttributes({ labelAbout: value })}
                        help={__('Heading for the book description', 'author-website-templates')}
                    />
                    <TextControl
                        label={__('Details Heading', 'author-website-templates')}
                        value={labelDetails}
                        onChange={(value) => setAttributes({ labelDetails: value })}
                        help={__('Heading for the book meta information', 'author-website-templates')}
                    />
                </PanelBody>
            </InspectorControls>

            <InspectorControls group="styles">
                <PanelColorSettings
                    title={__('Colors', 'author-website-templates')}
                    initialOpen={true}
                    colorSettings={[
                        {
                            value: sectionBgColor,
                            onChange: (value) => setAttributes({ sectionBgColor: value || '#FFFDF5' }),
                            label: __('Background Color', 'author-website-templates'),
                        },
                        {
                            value: titleColor,
                            onChange: (value) => setAttributes({ titleColor: value || '#264653' }),
                            label: __('Title Color', 'author-website-templates'),
                        },
                        {
                            value: accentColor,
                            onChange: (value) => setAttributes({ accentColor: value || '#EF476F' }),
                            label: __('Accent Color (Price & Labels)', 'author-website-templates'),
                        },
                        {
                            value: btnBgColor,
                            onChange: (value) => setAttributes({ btnBgColor: value || '#FFD166' }),
                            label: __('Button Background Color', 'author-website-templates'),
                        },
                    ]}
                />
            </InspectorControls>

            <div {...useBlockProps()}>
                <div
                    className="awt-book-details-preview"
                    style={{
                        '--awt-section-bg': sectionBgColor || '#FFFDF5',
                        '--awt-title-color': titleColor || '#264653',
                        '--awt-accent-color': accentColor || '#EF476F',
                        '--awt-btn-bg': btnBgColor || '#FFD166',
                    }}
                >
                    <ServerSideRender
                        block="awt/child-author-book-details"
                        attributes={attributes}
                    />
                </div>
            </div>
        </>
    );
}
