/**
 * ProRank SEO Dataset Schema Block
 *
 * Mirrors the FAQ/HowTo block pattern. Server render lives in
 * AdvancedSchemaModule::render_dataset_schema_block (premium); JSON-LD is
 * built by DatasetSchemaService::render_script.
 */

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { SelectControl, TextControl, TextareaControl } from '@wordpress/components';

const DatasetIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path
      fill="currentColor"
      d="M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 4v3h5V8H6zm7 0v3h5V8h-5zM6 13v3h5v-3H6zm7 0v3h5v-3h-5z"
    />
  </svg>
);

const RequiredNote = ({ value, label }) => {
  if (value && value.trim() !== '') {
    return null;
  }
  return (
    <p className="pr:text-xs pr:text-amber-700 pr:m-0">{label}</p>
  );
};

const Edit = ({ attributes, setAttributes }) => {
  const blockProps = useBlockProps({ className: 'prorank-dataset-schema-block-editor' });
  const a = attributes;

  const partyOptions = [
    { value: 'Organization', label: __('Organization', 'prorank-seo') },
    { value: 'Person', label: __('Person', 'prorank-seo') },
  ];

  return (
    <div {...blockProps}>
      <div className="pr:space-y-4 pr:p-4 pr:border pr:border-gray-200 pr:rounded-lg pr:bg-white">
        <TextControl
          label={__('Dataset name (required)', 'prorank-seo')}
          value={a.name || ''}
          onChange={(value) => setAttributes({ name: value })}
          placeholder={__('NYC Taxi Trips 2023', 'prorank-seo')}
        />
        <RequiredNote value={a.name} label={__('Dataset name is required.', 'prorank-seo')} />

        <TextareaControl
          label={__('Description (required)', 'prorank-seo')}
          value={a.description || ''}
          onChange={(value) => setAttributes({ description: value })}
          rows={4}
        />
        <RequiredNote value={a.description} label={__('Description is required.', 'prorank-seo')} />

        <TextControl
          label={__('Dataset URL (optional)', 'prorank-seo')}
          value={a.url || ''}
          onChange={(value) => setAttributes({ url: value })}
          placeholder="https://example.com/dataset"
        />

        <details className="pr:rounded pr:border pr:border-gray-200 pr:p-3" open>
          <summary className="pr:cursor-pointer pr:font-medium">{__('Creator (optional)', 'prorank-seo')}</summary>
          <div className="pr:grid pr:grid-cols-1 pr:md:grid-cols-3 pr:gap-3 pr:mt-3">
            <TextControl
              label={__('Creator name', 'prorank-seo')}
              value={a.creatorName || ''}
              onChange={(value) => setAttributes({ creatorName: value })}
            />
            <SelectControl
              label={__('Creator type', 'prorank-seo')}
              value={a.creatorType || 'Organization'}
              options={partyOptions}
              onChange={(value) => setAttributes({ creatorType: value })}
            />
            <TextControl
              label={__('Creator URL', 'prorank-seo')}
              value={a.creatorUrl || ''}
              onChange={(value) => setAttributes({ creatorUrl: value })}
            />
          </div>
        </details>

        <details className="pr:rounded pr:border pr:border-gray-200 pr:p-3">
          <summary className="pr:cursor-pointer pr:font-medium">{__('Publisher (optional)', 'prorank-seo')}</summary>
          <div className="pr:grid pr:grid-cols-1 pr:md:grid-cols-3 pr:gap-3 pr:mt-3">
            <TextControl
              label={__('Publisher name', 'prorank-seo')}
              value={a.publisherName || ''}
              onChange={(value) => setAttributes({ publisherName: value })}
            />
            <SelectControl
              label={__('Publisher type', 'prorank-seo')}
              value={a.publisherType || 'Organization'}
              options={partyOptions}
              onChange={(value) => setAttributes({ publisherType: value })}
            />
            <TextControl
              label={__('Publisher URL', 'prorank-seo')}
              value={a.publisherUrl || ''}
              onChange={(value) => setAttributes({ publisherUrl: value })}
            />
          </div>
        </details>

        <TextControl
          label={__('License URL (optional)', 'prorank-seo')}
          value={a.license || ''}
          onChange={(value) => setAttributes({ license: value })}
          placeholder="https://creativecommons.org/licenses/by/4.0/"
        />

        <TextControl
          label={__('Keywords (comma-separated, optional)', 'prorank-seo')}
          value={a.keywords || ''}
          onChange={(value) => setAttributes({ keywords: value })}
          placeholder="taxi, nyc, 2023"
        />

        <div className="pr:grid pr:grid-cols-1 pr:md:grid-cols-2 pr:gap-3">
          <TextControl
            label={__('Temporal coverage (optional)', 'prorank-seo')}
            value={a.temporalCoverage || ''}
            onChange={(value) => setAttributes({ temporalCoverage: value })}
            placeholder="2023-01-01/2023-12-31"
          />
          <TextControl
            label={__('Spatial coverage (optional)', 'prorank-seo')}
            value={a.spatialCoverage || ''}
            onChange={(value) => setAttributes({ spatialCoverage: value })}
            placeholder={__('New York City', 'prorank-seo')}
          />
        </div>

        <TextControl
          label={__('Identifier (optional)', 'prorank-seo')}
          value={a.identifier || ''}
          onChange={(value) => setAttributes({ identifier: value })}
          placeholder="doi:10.1234/example"
        />
      </div>
    </div>
  );
};

registerBlockType('prorank-seo/dataset-schema', {
  apiVersion: 3,
  title: __('ProRank Dataset Schema', 'prorank-seo'),
  description: __('Describe a dataset with Dataset schema markup.', 'prorank-seo'),
  category: 'prorank-seo',
  icon: DatasetIcon,
  keywords: [
    __('dataset', 'prorank-seo'),
    __('schema', 'prorank-seo'),
    __('research', 'prorank-seo'),
  ],
  supports: {
    html: false,
  },
  attributes: {
    name: { type: 'string', default: '' },
    description: { type: 'string', default: '' },
    url: { type: 'string', default: '' },
    creatorName: { type: 'string', default: '' },
    creatorType: { type: 'string', default: 'Organization' },
    creatorUrl: { type: 'string', default: '' },
    publisherName: { type: 'string', default: '' },
    publisherType: { type: 'string', default: 'Organization' },
    publisherUrl: { type: 'string', default: '' },
    license: { type: 'string', default: '' },
    keywords: { type: 'string', default: '' },
    temporalCoverage: { type: 'string', default: '' },
    spatialCoverage: { type: 'string', default: '' },
    identifier: { type: 'string', default: '' },
    className: { type: 'string', default: '' },
  },
  edit: Edit,
  save: () => null,
});