import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ajaxPost } from '../api/ajax';
import { useNotices } from '../contexts/NoticesContext';
import { getAddons, getPublicUrl } from '../Helpers';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

const Arrow = () => (
	<svg className="ssgsw-button__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
		<path d="M4 10h12M11 5l5 5-5 5" />
	</svg>
);

const External = () => (
	<svg className="ssgsw-button__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
		<path d="M8 4H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3M11 4h5v5M16 4l-7 7" />
	</svg>
);

const STATUS = {
	active: { label: __( 'Active', TEXT_DOMAIN ), tone: 'success' },
	pro: { label: __( 'PRO active', TEXT_DOMAIN ), tone: 'success' },
	inactive: { label: __( 'Installed', TEXT_DOMAIN ), tone: 'neutral' },
	missing: { label: __( 'Not installed', TEXT_DOMAIN ), tone: 'muted' },
};

const StatusPill = ( { status } ) => (
	<span className={ `ssgsw-pill ssgsw-pill--${ STATUS[ status ].tone }` }>
		<span className="ssgsw-pill__dot" aria-hidden="true"></span>
		{ STATUS[ status ].label }
	</span>
);

const LinkButton = ( { href, children, variant = 'primary', external = false } ) => (
	<a className={ `ssgsw-button ssgsw-button--${ variant }` } href={ href } { ...( external ? { target: '_blank', rel: 'noopener noreferrer' } : {} ) }>
		{ children }
		{ external ? <External /> : <Arrow /> }
		{ external && <span className="screen-reader-text">{ __( '(opens in a new tab)', TEXT_DOMAIN ) }</span> }
	</a>
);

/**
 * "Activate" through the allowlisted ssgsw_activate_plugin action.
 */
const ActivateButton = ( { basename, label, loadingSlug, onActivate } ) => {
	const busy = loadingSlug === basename;

	return (
		<button type="button" className="ssgsw-button ssgsw-button--primary" onClick={ () => onActivate( basename ) } disabled={ !! loadingSlug } aria-busy={ busy }>
			{ busy ? (
				<>
					<span className="ssgsw-spinner" aria-hidden="true"></span>
					{ __( 'Activating...', TEXT_DOMAIN ) }
				</>
			) : (
				label
			) }
		</button>
	);
};

const AddonCard = ( { icon, title, description, status, primary, secondary } ) => (
	<article className="ssgsw-addon">
		<div className="ssgsw-addon__head">
			<span className="ssgsw-addon__icon">
				<img src={ icon } alt="" />
			</span>
			<div className="ssgsw-addon__title">
				<h2>{ title }</h2>
				<StatusPill status={ status } />
			</div>
		</div>
		<p className="ssgsw-addon__text">{ description }</p>
		<div className="ssgsw-addon__actions">
			{ primary }
			{ secondary }
		</div>
	</article>
);

const Addons = () => {
	const addons = getAddons();
	const notices = useNotices();
	const [ loadingSlug, setLoadingSlug ] = useState( '' );

	const activate = async ( basename ) => {
		setLoadingSlug( basename );
		try {
			const response = await ajaxPost( 'ssgsw_activate_plugin', { plugin_basename: basename } );
			if ( response.success ) {
				notices.success( __( 'Plugin activated successfully!', TEXT_DOMAIN ) );
				window.setTimeout( () => window.location.reload(), 1000 );
				return;
			}
			notices.error( response.message || __( 'Activation failed.', TEXT_DOMAIN ) );
		} catch ( error ) {
			notices.error( __( 'Unexpected error during activation.', TEXT_DOMAIN ) );
		}
		setLoadingSlug( '' );
	};

	const settingsLink = ( href ) => (
		<LinkButton href={ href } variant="secondary">
			{ __( 'Settings', TEXT_DOMAIN ) }
		</LinkButton>
	);

	// Multi-vendor add-on.
	let vendor;
	if ( addons.vendorActive ) {
		vendor = { status: 'active', primary: settingsLink( addons.multivendor_settings ) };
	} else if ( addons.vendorInstalled ) {
		vendor = {
			status: 'inactive',
			primary: <ActivateButton basename={ addons.multivendor_basename } label={ __( 'Activate', TEXT_DOMAIN ) } loadingSlug={ loadingSlug } onActivate={ activate } />,
		};
	} else {
		vendor = {
			status: 'missing',
			primary: (
				<LinkButton href={ addons.multivendor_get_url } external>
					{ __( 'Get add-on', TEXT_DOMAIN ) }
				</LinkButton>
			),
		};
	}

	// Multi-Store add-on (and its PRO plugin).
	let store;
	if ( ! addons.multiStoreActive ) {
		store = addons.multiStoreInstalled
			? {
				status: 'inactive',
				primary: <ActivateButton basename={ addons.multistore_basename } label={ __( 'Activate', TEXT_DOMAIN ) } loadingSlug={ loadingSlug } onActivate={ activate } />,
			}
			: {
				status: 'missing',
				primary: <LinkButton href={ addons.multistore_get_url }>{ __( 'Get add-on', TEXT_DOMAIN ) }</LinkButton>,
			};
	} else if ( addons.multistore_simple_card || addons.multiStoreProActive ) {
		// The Multi-Store add-on reports itself as fully active; show its settings only.
		store = { status: addons.multiStoreProActive ? 'pro' : 'active', primary: settingsLink( addons.multistore_settings ) };
	} else {
		store = {
			status: 'active',
			primary: addons.multiStoreProInstalled ? (
				<ActivateButton basename={ addons.multistore_pro_basename } label={ __( 'Activate PRO', TEXT_DOMAIN ) } loadingSlug={ loadingSlug } onActivate={ activate } />
			) : (
				<LinkButton href={ addons.multistore_pro_get_url } external>
					{ __( 'Upgrade to PRO', TEXT_DOMAIN ) }
				</LinkButton>
			),
			secondary: settingsLink( addons.multistore_settings ),
		};
	}

	return (
		<div className="ssgsw-addons">
			<header className="ssgsw-addons__header">
				<h1>{ __( 'Add-ons', TEXT_DOMAIN ) }</h1>
				<p>{ __( 'Add your favorite add-ons and supercharge your workflow', TEXT_DOMAIN ) }</p>
			</header>
			<div className="ssgsw-addons__grid">
				<AddonCard
					icon={ `${ getPublicUrl() }images/multivendor/multi-vendor.svg` }
					title={ __( 'Multi-vendor Addon', TEXT_DOMAIN ) }
					description={ __(
						'Power up your multi-vendor experience with Dokan, WCFM, MultivendorX, etc. This allows your multi-vendors to manage their inventory to sync with Google Sheets.',
						TEXT_DOMAIN
					) }
					{ ...vendor }
				/>
				<AddonCard
					icon={ `${ getPublicUrl() }images/multistore/MultiStore.svg` }
					title={ __( 'Multi-Store Addon', TEXT_DOMAIN ) }
					description={ __(
						'This plugin integrates with external websites to gather their data and intelligently merge it into a unified Google Sheet, giving you a comprehensive overview from a single source.',
						TEXT_DOMAIN
					) }
					{ ...store }
				/>
			</div>
		</div>
	);
};

export default Addons;