/**
 * Feed Block - Edit Component
 * Fetches available feed types from /jvb/v1/feed/types
 * Allows configuration of content types and inherit query setting
 */

import { useEffect, useState } from '@wordpress/element';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import {
	PanelBody,
	CheckboxControl,
	ToggleControl,
	Spinner,
	Notice
} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { __ } from '@wordpress/i18n';

export default function Edit({ attributes, setAttributes }) {
	const [feedTypes, setFeedTypes] = useState(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(null);

	const blockProps = useBlockProps({
		className: 'feed-block-editor'
	});

	/**
	 * Fetch available feed types on component mount
	 */
	useEffect(() => {
		apiFetch({
			path: '/jvb/v1/feed/types',
			headers: {
				'If-Modified-Since': localStorage.getItem('feed_types_modified'),
			}
		})
			.then(types => {
				setFeedTypes(types);
				setLoading(false);

				// Store Last-Modified for future requests
				// (apiFetch doesn't expose response headers easily,
				// but the server will handle 304s)

				// Initialize contentTypes if not set and not inheriting
				if (!attributes.contentTypes && !attributes.inheritQuery) {
					const firstType = Object.keys(types)[0];
					if (firstType) {
						setAttributes({ contentTypes: [firstType] });
					}
				}
			})
			.catch(err => {
				console.error('Error loading feed types:', err);
				setError(err.message);
				setLoading(false);
			});
	}, [attributes.inheritQuery]);

	/**
	 * Toggle a content type in the selection
	 */
	const toggleContentType = (slug, checked) => {
		const currentTypes = attributes.contentTypes || [];

		const newTypes = checked
			? [...currentTypes, slug]
			: currentTypes.filter(t => t !== slug);

		setAttributes({ contentTypes: newTypes });
	};

	/**
	 * Get friendly label for content type
	 */
	const getTypeLabel = (slug, config) => {
		return `${config.plural} (${config.type})`;
	};

	/**
	 * Group types by category for better UX
	 */
	const groupedTypes = feedTypes ? {
		content: Object.entries(feedTypes)
			.filter(([_, config]) => config.type === 'content'),
		taxonomy: Object.entries(feedTypes)
			.filter(([_, config]) => config.type === 'taxonomy')
	} : { content: [], taxonomy: [] };

	return (
		<div {...blockProps}>
			<InspectorControls>
				<PanelBody
					title={__('Feed Settings', 'jvb')}
					initialOpen={true}
				>
					<ToggleControl
						label={__('Inherit from Page Context', 'jvb')}
						help={
							attributes.inheritQuery
								? __('Feed will adapt to the current page (profile, taxonomy, etc.)', 'jvb')
								: __('Manually select content types to display', 'jvb')
						}
						checked={attributes.inheritQuery}
						onChange={(value) => setAttributes({ inheritQuery: value })}
					/>

					{!attributes.inheritQuery && (
						<>
							{loading && (
								<div style={{ textAlign: 'center', padding: '20px' }}>
									<Spinner />
									<p>{__('Loading feed types...', 'jvb')}</p>
								</div>
							)}

							{error && (
								<Notice status="error" isDismissible={false}>
									{__('Error loading feed types: ', 'jvb')} {error}
								</Notice>
							)}

							{!loading && !error && feedTypes && (
								<>
									{groupedTypes.content.length > 0 && (
										<>
											<h4>{__('Content Types', 'jvb')}</h4>
											{groupedTypes.content.map(([slug, config]) => (
												<CheckboxControl
													key={slug}
													label={getTypeLabel(slug, config)}
													checked={
														attributes.contentTypes?.includes(slug) || false
													}
													onChange={(checked) =>
														toggleContentType(slug, checked)
													}
													help={
														config.taxonomies?.length > 0
															? `Filters: ${config.taxonomies.join(', ')}`
															: null
													}
												/>
											))}
										</>
									)}

									{groupedTypes.taxonomy.length > 0 && (
										<>
											<h4 style={{ marginTop: '20px' }}>
												{__('Content Taxonomies', 'jvb')}
											</h4>
											<p style={{ fontSize: '12px', color: '#757575' }}>
												{__('These are collections that group other content', 'jvb')}
											</p>
											{groupedTypes.taxonomy.map(([slug, config]) => (
												<CheckboxControl
													key={slug}
													label={getTypeLabel(slug, config)}
													checked={
														attributes.contentTypes?.includes(slug) || false
													}
													onChange={(checked) =>
														toggleContentType(slug, checked)
													}
													help={
														config.for_content?.length > 0
															? `Contains: ${config.for_content.join(', ')}`
															: null
													}
												/>
											))}
										</>
									)}

									{!attributes.contentTypes?.length && (
										<Notice status="warning" isDismissible={false}>
											{__('Please select at least one content type', 'jvb')}
										</Notice>
									)}
								</>
							)}
						</>
					)}
				</PanelBody>

				<PanelBody
					title={__('Display Settings', 'jvb')}
					initialOpen={false}
				>
					<ToggleControl
						label={__('Show Gallery View', 'jvb')}
						help={__('Enable lightbox for images', 'jvb')}
						checked={attributes.enableGallery || false}
						onChange={(value) =>
							setAttributes({ enableGallery: value })
						}
					/>
				</PanelBody>
			</InspectorControls>

			<div className="feed-block-placeholder">
				<div className="feed-block-icon">
					<svg width="48" height="48" viewBox="0 0 24 24" fill="none">
						<rect x="3" y="3" width="7" height="7" fill="currentColor" opacity="0.3" />
						<rect x="13" y="3" width="7" height="7" fill="currentColor" opacity="0.3" />
						<rect x="3" y="13" width="7" height="7" fill="currentColor" opacity="0.3" />
						<rect x="13" y="13" width="7" height="7" fill="currentColor" opacity="0.3" />
					</svg>
				</div>

				<h3>{__('Feed Block', 'jvb')}</h3>

				{attributes.inheritQuery ? (
					<p className="feed-block-description">
						{__('📍 Inheriting from page context', 'jvb')}
					</p>
				) : (
					<div className="feed-block-description">
						{attributes.contentTypes?.length > 0 ? (
							<>
								<p><strong>{__('Showing:', 'jvb')}</strong></p>
								<ul style={{
									listStyle: 'none',
									padding: '0',
									margin: '8px 0'
								}}>
									{attributes.contentTypes.map(type => {
										const config = feedTypes?.[type];
										return (
											<li key={type} style={{
												padding: '4px 0',
												color: '#2271b1'
											}}>
												✓ {config?.plural || type}
											</li>
										);
									})}
								</ul>
							</>
						) : (
							<p style={{ color: '#d63638' }}>
								{__('⚠️  No content types selected', 'jvb')}
							</p>
						)}
					</div>
				)}

				<p className="feed-block-note">
					{__('Feed will be displayed on the frontend', 'jvb')}
				</p>
			</div>
		</div>
	);
}