import React from 'react';
import { __ } from '@wordpress/i18n';
import { Alert, Button, EmptyState, Icon } from '../../shared/ui';

/**
 * Page title row: optional back link, title, subtitle and actions.
 */
export function PageHeader({ title, subtitle, actions, back, children }) {
	return (
		<header className="bp-page-header">
			<div className="bp-page-header__main">
				{back ? (
					<a className="bp-page-header__back" href={back.href}>
						<Icon name="arrow-left" />
						{back.label}
					</a>
				) : null}
				<h1 className="bp-page-header__title">{title}</h1>
				{subtitle ? <p className="bp-page-header__sub">{subtitle}</p> : null}
			</div>
			{actions ? <div className="bp-page-header__actions">{actions}</div> : null}
			{children}
		</header>
	);
}

/** Page body wrapper (max width + gutters). `wide` removes the max width (calendar, tables). */
export function Page({ children, wide = false, className = '' }) {
	return <div className={['bp-page', wide ? 'bp-page--wide' : '', className].filter(Boolean).join(' ')}>{children}</div>;
}

/** Titled card section, used to group form fields. */
export function Section({ title, description, actions, children, className = '' }) {
	return (
		<section className={['bp-section', className].filter(Boolean).join(' ')}>
			{title || actions ? (
				<div className="bp-section__head">
					<div>
						{title ? <h2 className="bp-section__title">{title}</h2> : null}
						{description ? <p className="bp-section__desc">{description}</p> : null}
					</div>
					{actions ? <div className="bp-cluster">{actions}</div> : null}
				</div>
			) : null}
			<div className="bp-section__body">{children}</div>
		</section>
	);
}

/** Two-column responsive form grid. */
export function FormGrid({ children, cols = 2 }) {
	return <div className={`bp-form-grid bp-form-grid--${cols}`}>{children}</div>;
}

/**
 * Sticky save bar. Appears while there are unsaved changes (or always with `alwaysVisible`).
 */
export function SaveBar({ dirty, saving, onSave, onDiscard, saveLabel, error, alwaysVisible = false, disabled = false }) {
	if (!dirty && !alwaysVisible && !saving) return null;
	return (
		<div className="bp-savebar" role="region" aria-label={__('Save changes', 'pointly-booking')}>
			<div className="bp-savebar__inner">
				<div className="bp-savebar__msg" role="status">
					{error ? (
						<span className="bp-text-danger">
							<Icon name="alert-circle" /> {error}
						</span>
					) : dirty ? (
						<>
							<span className="bp-savebar__dot" aria-hidden="true" />
							{__('You have unsaved changes', 'pointly-booking')}
						</>
					) : (
						<span className="bp-text-muted">{__('All changes saved', 'pointly-booking')}</span>
					)}
				</div>
				<div className="bp-cluster">
					{onDiscard && dirty ? (
						<Button variant="ghost" onClick={onDiscard} disabled={saving}>
							{__('Discard', 'pointly-booking')}
						</Button>
					) : null}
					<Button variant="primary" onClick={onSave} loading={saving} disabled={disabled || (!dirty && !alwaysVisible)} icon="check">
						{saveLabel || __('Save changes', 'pointly-booking')}
					</Button>
				</div>
			</div>
		</div>
	);
}

/** Loading / error / empty wrapper for a screen body. */
export function ScreenState({ loading, error, onRetry, children, skeleton }) {
	if (error && !loading) {
		return (
			<Alert
				tone="danger"
				title={__('This could not be loaded', 'pointly-booking')}
				actions={
					onRetry ? (
						<Button size="sm" variant="secondary" onClick={onRetry}>
							{__('Try again', 'pointly-booking')}
						</Button>
					) : null
				}
			>
				{error}
			</Alert>
		);
	}
	if (loading && skeleton) return skeleton;
	return children;
}

export function NoResults({ title, children, actions, icon = 'search' }) {
	return (
		<EmptyState icon={icon} title={title || __('Nothing found', 'pointly-booking')} actions={actions}>
			{children}
		</EmptyState>
	);
}

/**
 * Status/category filter tabs. Unlike ARIA tabs there is no tab panel, so these are
 * toggle buttons in a group (aria-pressed).
 */
export function FilterTabs({ tabs, value, onChange, label }) {
	return (
		<div className="bp-tabs" role="group" aria-label={label}>
			{tabs.map((t) => (
				<button key={t.id} type="button" className="bp-tab" aria-pressed={t.id === value ? 'true' : 'false'} onClick={() => onChange(t.id)}>
					{t.label}
					{t.count != null ? <span className="bp-tab__count">{t.count}</span> : null}
				</button>
			))}
		</div>
	);
}