import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { api } from '../api';

const AVATAR_PATH = 'assets/images/avatar-dashboard.png';

function dashboardAvatarUrl() {
	if ( typeof window === 'undefined' ) {
		return '';
	}
	const cfg = window.jocbmAdmin || {};
	const base = String( cfg.pluginUrl || '' ).replace( /\/$/, '' );
	return base ? `${ base }/${ AVATAR_PATH }` : '';
}

/**
 * Dashboard hub — compact path cards that open dedicated list pages.
 */
export default function MyBlocks( { onNavigate } ) {
	const [ counts, setCounts ] = useState( {
		editors: 0,
		active: 0,
		updates: 0,
		shortcodes: 0,
	} );
	const [ loading, setLoading ] = useState( true );

	useEffect( () => {
		Promise.all( [ api.get( '/user-blocks' ), api.get( '/user-contents' ) ] )
			.then( ( [ ub, uc ] ) => {
				const editors = ub.items || [];
				const shortcodes = uc.items || [];
				setCounts( {
					editors: editors.length,
					active: editors.filter( ( b ) => b.isEnabled ).length,
					updates: editors.filter( ( b ) => b.updateAvailable ).length,
					shortcodes: shortcodes.length,
				} );
			} )
			.finally( () => setLoading( false ) );
	}, [] );

	const hasEditors = counts.editors > 0;

	return (
		<div className="bm-rise mx-auto w-full max-w-canvas px-gutter py-stack-lg font-sans">
			<header className="mb-stack-lg space-y-2">
				<p className="text-caps-micro font-bold uppercase tracking-widest text-outline">
					{ __( 'Dashboard', 'joc-blockora-morph' ) }
				</p>
				<h1 className="text-display-sm text-on-background">
					{ __( 'Welcome back', 'joc-blockora-morph' ) }
				</h1>
				<p className="max-w-2xl text-body-lg text-on-surface-variant">
					{ __(
						'Build branded sections once, then use them in the editor — or reuse them anywhere with a shortcode.',
						'joc-blockora-morph'
					) }
				</p>
			</header>

			<section
				className="bm-journey"
				aria-label={ __( 'Your path with Blockora Morph', 'joc-blockora-morph' ) }
			>
				<img
					src={ dashboardAvatarUrl() }
					alt=""
					className="bm-journey__avatar"
					width={ 160 }
					height={ 160 }
					decoding="async"
					aria-hidden="true"
				/>
				<div className="bm-journey__head">
					<div>
						<p className="bm-journey__eyebrow">
							{ __( 'Your path', 'joc-blockora-morph' ) }
						</p>
						<h2 className="bm-journey__title">
							{ __( 'From idea to live section — in three steps', 'joc-blockora-morph' ) }
						</h2>
					</div>
					<p className="bm-journey__hint hidden sm:block">
						{ __(
							'Tap a step to jump in. No design skills required.',
							'joc-blockora-morph'
						) }
					</p>
				</div>
				<ol className="bm-journey__steps">
					<li>
						<button
							type="button"
							className="bm-journey__step"
							onClick={ () => onNavigate( 'library' ) }
						>
							<div className="bm-journey__top">
								<span className="bm-journey__icon" aria-hidden="true">
									<span className="dashicons dashicons-portfolio" />
								</span>
								<span className="bm-journey__num">01</span>
							</div>
							<strong className="bm-journey__name">
								{ __( 'Find a design you love', 'joc-blockora-morph' ) }
							</strong>
							<p className="bm-journey__copy">
								{ __(
									'Browse the Library for heroes, testimonials, cards, and more — ready for your site.',
									'joc-blockora-morph'
								) }
							</p>
							<span className="bm-journey__cta">
								{ __( 'Open JBM Library', 'joc-blockora-morph' ) }
								<span
									className="dashicons dashicons-arrow-right-alt2"
									aria-hidden="true"
								/>
							</span>
						</button>
					</li>
					<li>
						<button
							type="button"
							className="bm-journey__step"
							onClick={ () => onNavigate( 'gutenberg-blocks' ) }
						>
							<div className="bm-journey__top">
								<span className="bm-journey__icon" aria-hidden="true">
									<span className="dashicons dashicons-art" />
								</span>
								<span className="bm-journey__num">02</span>
							</div>
							<strong className="bm-journey__name">
								{ __( 'Make it feel like your brand', 'joc-blockora-morph' ) }
							</strong>
							<p className="bm-journey__copy">
								{ __(
									'Swap in your words, colors, and images. Then use it in posts and pages like any Gutenberg block.',
									'joc-blockora-morph'
								) }
							</p>
							<span className="bm-journey__cta">
								{ __( 'My Blocks', 'joc-blockora-morph' ) }
								<span
									className="dashicons dashicons-arrow-right-alt2"
									aria-hidden="true"
								/>
							</span>
						</button>
					</li>
					<li>
						<button
							type="button"
							className="bm-journey__step"
							onClick={ () => onNavigate( 'shortcode-blocks' ) }
						>
							<div className="bm-journey__top">
								<span className="bm-journey__icon" aria-hidden="true">
									<span className="dashicons dashicons-shortcode" />
								</span>
								<span className="bm-journey__num">03</span>
							</div>
							<strong className="bm-journey__name">
								{ __( 'Reuse it wherever you need', 'joc-blockora-morph' ) }
							</strong>
							<p className="bm-journey__copy">
								{ __(
									'Need the same section in a sidebar or builder? Lock the content once and paste a shortcode anywhere.',
									'joc-blockora-morph'
								) }
							</p>
							<span className="bm-journey__cta">
								{ __( 'My Shortcodes', 'joc-blockora-morph' ) }
								<span
									className="dashicons dashicons-arrow-right-alt2"
									aria-hidden="true"
								/>
							</span>
						</button>
					</li>
				</ol>
			</section>

			<section className="bm-path-grid">
				<button
					type="button"
					className="bm-path-card bm-path-card--gutenberg bm-path-card--link"
					onClick={ () => onNavigate( 'gutenberg-blocks' ) }
				>
					<span className="bm-path-card__orb bm-path-card__orb--1" aria-hidden="true" />
					<span className="bm-path-card__orb bm-path-card__orb--2" aria-hidden="true" />
					<span className="bm-path-card__watermark" aria-hidden="true">
						<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect x="14" y="18" width="92" height="84" rx="14" stroke="currentColor" strokeWidth="6" />
							<path d="M14 46h92" stroke="currentColor" strokeWidth="6" />
							<rect x="28" y="58" width="28" height="28" rx="6" fill="currentColor" opacity="0.85" />
							<rect x="64" y="58" width="28" height="12" rx="4" fill="currentColor" opacity="0.55" />
							<rect x="64" y="76" width="28" height="10" rx="4" fill="currentColor" opacity="0.35" />
						</svg>
					</span>
					<div className="bm-path-card__icon" aria-hidden="true">
						<span className="dashicons dashicons-block-default" />
					</div>
					<p className="bm-path-card__eyebrow">
						{ __( 'For posts & pages', 'joc-blockora-morph' ) }
					</p>
					<h2 className="bm-path-card__title">
						{ __( 'Gutenberg Blocks', 'joc-blockora-morph' ) }
					</h2>
					<p className="bm-path-card__desc">
						{ __(
							'Appear in the WordPress + inserter. Editors can change text and styles per page.',
							'joc-blockora-morph'
						) }
					</p>
					<div className="bm-path-card__meta">
						<span>
							{ loading
								? '—'
								: __( '%d active', 'joc-blockora-morph' ).replace(
										'%d',
										String( counts.active )
								  ) }
						</span>
						{ counts.updates > 0 && (
							<span className="bm-badge bm-badge--update">
								{ __( '%d updates', 'joc-blockora-morph' ).replace(
									'%d',
									String( counts.updates )
								) }
							</span>
						) }
						<span className="bm-path-card__cta">
							{ __( 'Open list', 'joc-blockora-morph' ) }
							<span
								className="dashicons dashicons-arrow-right-alt2"
								aria-hidden="true"
							/>
						</span>
					</div>
				</button>

				<button
					type="button"
					className={
						hasEditors || loading
							? 'bm-path-card bm-path-card--shortcode bm-path-card--link'
							: 'bm-path-card bm-path-card--shortcode bm-path-card--link is-locked'
					}
					onClick={ () => onNavigate( 'shortcode-blocks' ) }
				>
					<span className="bm-path-card__orb bm-path-card__orb--1" aria-hidden="true" />
					<span className="bm-path-card__orb bm-path-card__orb--2" aria-hidden="true" />
					<span className="bm-path-card__watermark" aria-hidden="true">
						<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path
								d="M38 28c-12 0-22 10-22 22v20c0 12 10 22 22 22"
								stroke="currentColor"
								strokeWidth="8"
								strokeLinecap="round"
							/>
							<path
								d="M82 28c12 0 22 10 22 22v20c0 12-10 22-22 22"
								stroke="currentColor"
								strokeWidth="8"
								strokeLinecap="round"
							/>
							<rect x="48" y="52" width="24" height="16" rx="4" fill="currentColor" opacity="0.75" />
						</svg>
					</span>
					<div className="bm-path-card__icon" aria-hidden="true">
						<span className="dashicons dashicons-shortcode" />
					</div>
					<p className="bm-path-card__eyebrow">
						{ __( 'For widgets, templates & reuse', 'joc-blockora-morph' ) }
					</p>
					<h2 className="bm-path-card__title">
						{ __( 'Shortcode Blocks', 'joc-blockora-morph' ) }
					</h2>
					<p className="bm-path-card__desc">
						{ __(
							'Fill in real content once, then paste a shortcode in sidebars, classic editor, or builders.',
							'joc-blockora-morph'
						) }
					</p>
					<div className="bm-path-card__meta">
						<span>
							{ loading
								? '—'
								: __( '%d shortcodes', 'joc-blockora-morph' ).replace(
										'%d',
										String( counts.shortcodes )
								  ) }
						</span>
						{ ! hasEditors && ! loading && (
							<span className="bm-badge bm-badge--disabled">
								{ __( 'Needs a Gutenberg block', 'joc-blockora-morph' ) }
							</span>
						) }
						<span className="bm-path-card__cta">
							{ __( 'Open list', 'joc-blockora-morph' ) }
							<span
								className="dashicons dashicons-arrow-right-alt2"
								aria-hidden="true"
							/>
						</span>
					</div>
				</button>
			</section>

			<div className="flex flex-wrap gap-2">
				<button
					type="button"
					className="bm-btn bm-btn--soft"
					onClick={ () => onNavigate( 'library' ) }
				>
					<span className="dashicons dashicons-portfolio text-[16px]" aria-hidden="true" />
					{ __( 'Browse JBM Library', 'joc-blockora-morph' ) }
				</button>
			</div>
		</div>
	);
}
