/**
 * Color Settings Panel
 * テーマカラーパレット表示（読み取り専用）
 */

import { useSettings } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import {
	PanelBody,
	ColorIndicator,
	__experimentalVStack as VStack,
	__experimentalText as Text,
} from '@wordpress/components';

const ColorPaletteSection = ( { title, colors } ) => {
	if ( ! colors || colors.length === 0 ) {
		return null;
	}

	return (
		<div className="zenblocks-color-section">
			<Text className="zenblocks-color-section__title">{ title }</Text>
			<div className="zenblocks-color-section__palette">
				{ colors.map( ( colorItem, index ) => (
					<ColorIndicator
						key={ index }
						colorValue={ colorItem.color }
						className="zenblocks-color-indicator"
					/>
				) ) }
			</div>
		</div>
	);
};

const GradientSection = ( { title, gradients } ) => {
	if ( ! gradients || gradients.length === 0 ) {
		return null;
	}

	return (
		<div className="zenblocks-color-section">
			<Text className="zenblocks-color-section__title">{ title }</Text>
			<div className="zenblocks-color-section__palette">
				{ gradients.map( ( gradientItem, index ) => (
					<div
						key={ index }
						className="zenblocks-gradient-indicator"
						style={ { background: gradientItem.gradient } }
					/>
				) ) }
			</div>
		</div>
	);
};

export const ColorSettings = ( { initialOpen = true } ) => {
	const [ themeColors = [], customColors = [], customGradients = [] ] =
		useSettings(
			'color.palette.theme',
			'color.palette.custom',
			'color.gradients.custom'
		);

	const getEditUrl = () => {
		const adminUrl = window.zenBlocks?.adminUrl || window.location.origin + '/wp-admin/';
		const isBlockTheme = window.zenBlocks?.isBlockTheme;
		if ( isBlockTheme ) {
			return adminUrl + 'site-editor.php?p=%2Fstyles&section=%2Fcolors';
		}
		return adminUrl + 'customize.php';
	};

	const hasAnyColors =
		themeColors.length > 0 ||
		customColors.length > 0 ||
		customGradients.length > 0;

	return (
		<PanelBody
			title={ __( 'Color Palette', 'zenblocks' ) }
			initialOpen={ initialOpen }
			className="zenblocks-color-settings"
		>
			<VStack spacing={ 4 }>
				{ ! hasAnyColors ? (
					<Text style={ { color: '#757575' } }>
						{ __( 'No color palette configured', 'zenblocks' ) }
					</Text>
				) : (
					<VStack spacing={ 3 }>
						<ColorPaletteSection
							title={ __( 'Theme', 'zenblocks' ) }
							colors={ themeColors }
						/>
						<ColorPaletteSection
							title={ __( 'Custom', 'zenblocks' ) }
							colors={ customColors }
						/>
						<GradientSection
							title={ __( 'Gradient (Custom)', 'zenblocks' ) }
							gradients={ customGradients }
						/>
					</VStack>
				) }

				<div
					style={ {
						borderTop: '1px solid #e0e0e0',
						paddingTop: '16px',
					} }
				>
					<a
						href={ getEditUrl() }
						target="_blank"
						rel="noopener noreferrer"
						className="zenblocks-edit-link-button"
					>
						<svg
							width="16"
							height="16"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							strokeWidth="2"
							strokeLinecap="round"
							strokeLinejoin="round"
						>
							<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
							<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
						</svg>
						{ __( 'Edit Color Palette', 'zenblocks' ) }
					</a>
				</div>
			</VStack>
		</PanelBody>
	);
};
