import {useState} from '@wordpress/element';
import {__} from '@wordpress/i18n';
import Button from '../components/Button';
import '../scss/_html5_upload.scss';

const Html5UploadField = ( {field, value, onChange} ) => {
	const [isExtracting, setIsExtracting] = useState( false );
	const [error, setError] = useState( '' );

	const openMediaLibrary = () => {
		const frame = wp.media( {
			title:    __( 'Select HTML5 ZIP File', 'adpresso' ),
			button:   {text: __( 'Use this ZIP', 'adpresso' )},
			multiple: false,
			library:  {
				type: 'application/zip'
			}
		} );

		frame.on( 'select', () => {
			const attachment = frame.state().get( 'selection' ).first().toJSON();

			setError( '' );
			setIsExtracting( true );

			wp.apiFetch( {
				path:   '/adpresso/v1/extract-html5',
				method: 'POST',
				data:   {attachment_id: attachment.id}
			} ).then( response => {
				onChange( field.id, response.directory );
			} ).catch( err => {
				console.error( err );
				// WP_Error responses (400/403/404/500) carry a translated message.
				setError( err?.message || __( 'The ZIP file could not be extracted.', 'adpresso' ) );
			} ).finally( () => {
				setIsExtracting( false );
			} );
		} );

		frame.open();
	};

	const getFileName = ( url ) => {
		if ( !url ) {
			return '';
		}
		return url.split( '/' ).pop();
	};

	return (
		<div className="adpresso-html5-upload-wrapper" aria-busy={isExtracting}>
			<div className="adpresso-html5-preview">
				{isExtracting ? (
					<span className="spinner is-active"></span>
				) : value ? (
					<div className="adpresso-file-display">
						<span className="dashicons dashicons-media-archive adpresso-file-icon"></span>
						<span className="adpresso-file-name">{getFileName( value )}</span>
					</div>
				) : (
					<div className="adpresso-image-placeholder">
						{__( 'No ZIP file selected', 'adpresso' )}
					</div>
				)}
			</div>

			<div className="adpresso-html5-actions">
				<Button
					variant="primary"
					className="adpresso-btn adpresso-btn-action"
					onClick={openMediaLibrary}
					disabled={isExtracting}
				>
					{isExtracting ? __( 'Extracting ZIP…', 'adpresso' ) : __( 'Select ZIP file', 'adpresso' )}
				</Button>

				{value && !isExtracting && (
					<Button
						variant="destructive"
						className="adpresso-btn adpresso-btn-action"
						isDestructive
						onClick={() => {
							setError( '' );
							onChange( field.id, '' );
						}}
					>
						{__( 'Remove ZIP', 'adpresso' )}
					</Button>
				)}
			</div>

			{error && (
				<p className="adpresso-field-error" role="alert">
					{error}
				</p>
			)}
		</div>
	);
};

export default Html5UploadField;