/**
 * Task 10 — Related Posts dynamic block.
 *
 * Client metadata mirrors the PHP `register_block_type` shape in
 * RelatedContentBlocks.php so Gutenberg's block registry does not warn
 * about attribute mismatches and the inserter shows the block normally.
 */

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

const Icon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path fill="currentColor" d="M4 4h16v2H4zm0 6h10v2H4zm0 6h16v2H4zm12-6h4v2h-4z" />
  </svg>
);

const Edit = ({ attributes, setAttributes, name }) => {
  const blockProps = useBlockProps({ className: 'prorank-related-content-editor' });
  const { heading, maxLinks, layout, withExcerpt } = attributes;
  return (
    <div {...blockProps}>
      <InspectorControls>
        <PanelBody title={__('Related Posts', 'prorank-seo')} initialOpen={true}>
          <TextControl
            label={__('Heading', 'prorank-seo')}
            value={heading}
            onChange={(v) => setAttributes({ heading: v })}
            help={__('Leave blank to omit the heading.', 'prorank-seo')}
          />
          <RangeControl
            label={__('Maximum links', 'prorank-seo')}
            min={1}
            max={12}
            value={maxLinks}
            onChange={(v) => setAttributes({ maxLinks: Math.max(1, Math.min(12, v || 1)) })}
          />
          <SelectControl
            label={__('Layout', 'prorank-seo')}
            value={layout}
            onChange={(v) => setAttributes({ layout: v })}
            options={[
              { value: 'list',  label: __('List',         'prorank-seo') },
              { value: 'grid',  label: __('Compact grid', 'prorank-seo') },
            ]}
          />
          <ToggleControl
            label={__('Show excerpt under each link', 'prorank-seo')}
            checked={!!withExcerpt}
            onChange={(v) => setAttributes({ withExcerpt: !!v })}
          />
        </PanelBody>
      </InspectorControls>
      <ServerSideRender block={name} attributes={attributes} />
    </div>
  );
};

registerBlockType('prorank-seo/related-posts', {
  apiVersion: 3,
  title: __('ProRank Related Posts', 'prorank-seo'),
  description: __('Lists internally-relevant posts based on prominent words, with category/tag fallback.', 'prorank-seo'),
  category: 'prorank-seo',
  icon: Icon,
  keywords: [
    __('related', 'prorank-seo'),
    __('internal links', 'prorank-seo'),
    __('prorank-seo', 'prorank-seo'),
  ],
  supports: {
    html: false,
    align: true,
  },
  attributes: {
    heading:     { type: 'string',  default: __('Related Posts', 'prorank-seo') },
    maxLinks:    { type: 'number',  default: 5 },
    layout:      { type: 'string',  default: 'list' },
    className:   { type: 'string',  default: '' },
    withExcerpt: { type: 'boolean', default: false },
  },
  edit: Edit,
  save: () => null, // Server-rendered.
});