import React from 'react';
import { __ } from '@wordpress/i18n';

const PREVIEW_LABELS = {
	max_snippet: {
		label: __('Max snippet length', 'ai-rank-suite'),
		hint: __('How many characters Google may quote. −1 = no limit, 0 = no snippet at all.', 'ai-rank-suite'),
		names: { '-1': __('No limit', 'ai-rank-suite'), 0: __('No snippet', 'ai-rank-suite'), 50: __('50 characters', 'ai-rank-suite'), 100: __('100 characters', 'ai-rank-suite'), 160: __('160 characters', 'ai-rank-suite'), 200: __('200 characters', 'ai-rank-suite') },
	},
	max_image_preview: {
		label: __('Max image preview', 'ai-rank-suite'),
		hint: __('Size of the image Google may show next to this result.', 'ai-rank-suite'),
		names: { none: 'No image', standard: 'Standard', large: 'Large' },
	},
	max_video_preview: {
		label: __('Max video preview', 'ai-rank-suite'),
		hint: __('Seconds of video Google may play in the result. −1 = no limit.', 'ai-rank-suite'),
		names: { '-1': 'No limit', 0: 'No preview', 15: '15 seconds', 30: '30 seconds' },
	},
};

const SOCIAL_FIELDS = [
	{ key: 'og_title', label: __('Facebook title', 'ai-rank-suite'), type: 'text' },
	{ key: 'og_desc', label: __('Facebook description', 'ai-rank-suite'), type: 'textarea' },
	{ key: 'og_image', label: __('Facebook image URL', 'ai-rank-suite'), type: 'text' },
	{ key: 'tw_title', label: __('X title', 'ai-rank-suite'), type: 'text' },
	{ key: 'tw_desc', label: __('X description', 'ai-rank-suite'), type: 'textarea' },
	{ key: 'tw_image', label: __('X image URL', 'ai-rank-suite'), type: 'text' },
];

export default function AdvancedSeo({ item, onChange }) {
	const previews = item.previews || {};
	const social = item.social || {};
	const options = item.preview_options || {};

	const setPreview = (key, value) => onChange({ previews: { ...previews, [key]: value } });
	const setSocial = (key, value) => onChange({ social: { ...social, [key]: value } });

	const warn = item.social_card?.image_warn;
	const meta = item.social_card?.image_meta;

	return (
		<div className="grid gap-4">
			{warn === 'none' && (
				<div
					className="ars-r-lg px-4 py-3 text-[12.5px]"
					style={{ background: 'var(--ars-warning-tonal)' }}
				>
					{__('No share image — set a featured image, a social override below, or a site-wide default under Social & sharing. Links shared without an image get far fewer clicks.', 'ai-rank-suite')}
				</div>
			)}
			{(warn === 'small' || warn === 'too_small') && meta && (
				<div
					className="ars-r-lg px-4 py-3 text-[12.5px]"
					style={{ background: warn === 'too_small' ? 'var(--ars-serious-tonal)' : 'var(--ars-warning-tonal)' }}
				>
					The share image is {meta.width}×{meta.height}px —{' '}
					{warn === 'too_small'
						? 'below the 600×315 minimum, some platforms will drop it entirely.'
						: 'sharp previews need 1200×630 or larger.'}
				</div>
			)}
			<div>
				<label className="block font-medium mb-1">{__('Permalink', 'ai-rank-suite')}</label>
				<input
					type="text"
					value={item.slug || ''}
					onChange={(e) => onChange({ slug: e.target.value })}
					placeholder={item.slug}
				/>
				<div className="text-[11.5px] mt-1" style={{ color: 'var(--ars-ink-3)' }}>
					{__('The last part of the address. Change it and this plugin writes a redirect from the old one, so existing links keep working.', 'ai-rank-suite')}
				</div>
			</div>

			<div>
				<label className="block font-medium mb-1">{__('Canonical URL', 'ai-rank-suite')}</label>
				<input
					type="text"
					value={item.canonical || ''}
					placeholder={item.canonical_auto}
					onChange={(e) => onChange({ canonical: e.target.value })}
				/>
				<div className="text-[11.5px] mt-1" style={{ color: 'var(--ars-ink-3)' }}>
					{__('Leave empty to point at this page itself. Set it only when this page duplicates another one — a wrong canonical removes the page from search entirely.', 'ai-rank-suite')}
				</div>
			</div>

			<div>
				<label className="block font-medium mb-1">{__('Breadcrumb title', 'ai-rank-suite')}</label>
				<input
					type="text"
					value={item.breadcrumb_title || ''}
					placeholder={item.title}
					onChange={(e) => onChange({ breadcrumb_title: e.target.value })}
				/>
				<div className="text-[11.5px] mt-1" style={{ color: 'var(--ars-ink-3)' }}>{__('A shorter label for the breadcrumb trail and the BreadcrumbList schema.', 'ai-rank-suite')}</div>
			</div>

			<div className="grid gap-3">
				{Object.entries(PREVIEW_LABELS).map(([key, meta]) => (
					<div key={key} className="sm:max-w-[440px]">
						<label className="block font-medium mb-1">{meta.label}</label>
						<select value={previews[key] ?? ''} onChange={(e) => setPreview(key, e.target.value)}>
							<option value="">{__('Use the site default', 'ai-rank-suite')}</option>
							{(options[key] || []).filter(Boolean).map((v) => (
								<option key={v} value={v}>
									{meta.names[v] || v}
								</option>
							))}
						</select>
						<div className="text-[11.5px] mt-1" style={{ color: 'var(--ars-ink-3)' }}>
							{meta.hint}
						</div>
					</div>
				))}
			</div>

			<details>
				<summary className="cursor-pointer font-medium text-[13px]">{__('Social overrides', 'ai-rank-suite')}</summary>
				<div className="grid gap-3 mt-3">
					<p className="m-0 text-[12px]" style={{ color: 'var(--ars-ink-2)' }}>{__('Empty fields fall back to the SEO title, the meta description and the featured image.', 'ai-rank-suite')}</p>
					{SOCIAL_FIELDS.map((f) => (
						<div key={f.key} className={f.type === 'textarea' ? '' : 'sm:max-w-[440px]'}>
							<label className="block font-medium mb-1">{f.label}</label>
							{f.type === 'textarea' ? (
								<textarea rows={2} value={social[f.key] || ''} onChange={(e) => setSocial(f.key, e.target.value)} />
							) : (
								<input type="text" value={social[f.key] || ''} onChange={(e) => setSocial(f.key, e.target.value)} />
							)}
						</div>
					))}
					<div className="sm:max-w-[440px]">
						<label className="block font-medium mb-1">{__('X card type', 'ai-rank-suite')}</label>
						<select value={social.tw_card || ''} onChange={(e) => setSocial('tw_card', e.target.value)}>
							<option value="">{__('Automatic', 'ai-rank-suite')}</option>
							<option value="summary">{__('Small image', 'ai-rank-suite')}</option>
							<option value="summary_large_image">{__('Large image', 'ai-rank-suite')}</option>
						</select>
					</div>
				</div>
			</details>
		</div>
	);
}