import { useEffect, useState } from '@wordpress/element';
import { loadAuthorExpanded } from '../api';
import { ProgressBar } from './ProgressBar';

export function AuthorExpandPanel( { userId, days, perfNonce, i18n } ) {
	const [ tab, setTab ] = useState( 'summary' );
	const [ data, setData ] = useState( null );
	const [ loading, setLoading ] = useState( true );

	useEffect( () => {
		let cancelled = false;
		setLoading( true );
		loadAuthorExpanded( userId, days, perfNonce )
			.then( ( res ) => {
				if ( ! cancelled ) {
					setData( res );
				}
			} )
			.finally( () => {
				if ( ! cancelled ) {
					setLoading( false );
				}
			} );
		return () => { cancelled = true; };
	}, [ userId, days, perfNonce ] );

	if ( loading ) {
		return <div className="nros-perf-expand-loading">{ i18n.loading }</div>;
	}
	if ( ! data ) {
		return null;
	}

	const tabs = [
		[ 'summary', i18n.summary ],
		[ 'articles', i18n.articles ],
		[ 'coaching', i18n.coaching ],
	];

	return (
		<div className="nros-perf-expand">
			<div className="nros-perf-tabs" role="tablist">
				{ tabs.map( ( [ id, label ] ) => (
					<button
						key={ id }
						type="button"
						role="tab"
						className={ `nros-perf-tabs__btn${ tab === id ? ' is-active' : '' }` }
						onClick={ () => setTab( id ) }
					>
						{ label }
					</button>
				) ) }
			</div>

			{ tab === 'summary' && (
				<div className="nros-perf-tab-panel">
					<div className="nros-perf-summary-grid">
						<div>
							<h4>{ i18n.editorial }</h4>
							<p>Focus { data.focus }% · Discover { data.discover }%</p>
							<ProgressBar value={ data.focus } tone="green" />
							<ProgressBar value={ data.discover } tone="purple" />
						</div>
						<div>
							<h4>{ i18n.gsc_totals }</h4>
							{ data.gscReady ? (
								<ul className="nros-gsc-mini">
									{ [ 'web', 'discover', 'googleNews' ].map( ( key ) => {
										const ch = data.gsc?.[ key ];
										if ( ! ch ) {
											return null;
										}
										return (
											<li key={ key }>
												<strong>{ key }</strong> { ch.clicks } { i18n.clicks }
											</li>
										);
									} ) }
								</ul>
							) : (
								<p className="nros-empty-hint">{ i18n.gsc_totals }</p>
							) }
						</div>
					</div>
					{ ( data.categories || [] ).length > 0 && (
						<div className="nros-perf-tags">
							<h4>{ i18n.categories }</h4>
							{ data.categories.map( ( c ) => (
								<span key={ c.name } className="nros-perf-tag">{ c.name } · { c.count }</span>
							) ) }
						</div>
					) }
				</div>
			) }

			{ tab === 'articles' && (
				<div className="nros-perf-tab-panel">
					<h4>{ i18n.latest_articles }</h4>
					<ul className="nros-article-list">
						{ ( data.articles || [] ).map( ( a, i ) => (
							<li key={ i }>
								<strong>{ a.title }</strong>
								<span>F { a.focus }% · D { a.discover }%</span>
							</li>
						) ) }
					</ul>
					{ ( data.topGsc || [] ).length > 0 && (
						<>
							<h4>{ i18n.top_gsc }</h4>
							<ul className="nros-article-list">
								{ data.topGsc.map( ( a, i ) => (
									<li key={ i }>
										<strong>{ a.title }</strong>
										<span>{ a.gscClicks } { i18n.clicks }</span>
									</li>
								) ) }
							</ul>
						</>
					) }
				</div>
			) }

			{ tab === 'coaching' && (
				<div className="nros-perf-tab-panel nros-perf-coaching-panel">
					{ ( data.weakSpots || [] ).length ? (
						<ul className="nros-coaching-list">
							{ data.weakSpots.map( ( w, i ) => (
								<li key={ i }>{ w.label }</li>
							) ) }
						</ul>
					) : (
						<p>{ i18n.no_coaching }</p>
					) }
				</div>
			) }
		</div>
	);
}
