import React, { useState } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { useSettings } from '../useSettings';
import { api } from '../api';
import { Card, Button, Badge, Notice, Switch, MediaPicker, PageState } from '../components/ui';

export default function Social() {
	const { data, setData, s, update, save, busy, saved, error } = useSettings('/settings/social');

	if (!data) return <PageState error={error} />;

	const meta = data.image_meta;
	const imageWarn =
		s.default_image && meta && (meta.width < 1200 || meta.height < 630)
			? sprintf(__('This image is %1$d×%2$dpx — sharp link previews need 1200×630 or larger.', 'ai-rank-suite'), meta.width, meta.height)
			: null;

	return (
		<div className="ars-page">
			{error && <Notice tone="serious">{error}</Notice>}

			<div className="grid gap-5 lg:grid-cols-2 items-start">
				<Card
					title={__('Sharing defaults', 'ai-rank-suite')}
					subtitle={__('Site-wide behavior — every page can still override it individually', 'ai-rank-suite')}
					action={
						<div className="flex items-center gap-2">
							{saved && <Badge tone="good">✓ {__('Saved', 'ai-rank-suite')}</Badge>}
							<Button onClick={save} busy={busy}>{__('Save', 'ai-rank-suite')}</Button>
						</div>
					}
				>
					<div className="grid gap-4">
						<div>
							<MediaPicker
								label={__('Default share image', 'ai-rank-suite')}
								title={__('Select the default share image', 'ai-rank-suite')}
								value={s.default_image}
								onChange={(url) => update({ default_image: url })}
								hint={__('Used whenever a page has no featured image and no per-page override — nothing ships without an image anymore. 1200×630 or larger for sharp link previews.', 'ai-rank-suite')}
							/>
							{meta && !imageWarn && s.default_image && (
								<div className="mt-1.5">
									<Badge tone="good">✓ {meta.width}×{meta.height}px — perfect</Badge>
								</div>
							)}
							{imageWarn && (
								<div className="mt-1.5">
									<Notice tone="warning">{imageWarn}</Notice>
								</div>
							)}
						</div>

						<Switch
							checked={!!s.og_locale}
							onChange={(v) => update({ og_locale: v })}
							label={sprintf(__('Output og:locale (%s)', 'ai-rank-suite'), data.locale)}
						/>
						<Switch
							checked={!!s.article_meta}
							onChange={(v) => update({ article_meta: v })}
							label={__('Output article meta on posts (published/modified time, author, section, tags)', 'ai-rank-suite')}
						/>

						<div className="grid gap-3 pt-2" style={{ borderTop: '1px solid var(--ars-border)' }}>
							<div className="font-semibold text-[13px]">{__('Publisher accounts', 'ai-rank-suite')}</div>
							<div>
								<label className="block font-medium mb-1">{__('X / Twitter handle', 'ai-rank-suite')}</label>
								<input
									type="text"
									placeholder="@yourbrand"
									value={s.tw_site}
									onChange={(e) => update({ tw_site: e.target.value })}
								/>
							</div>
							<div>
								<label className="block font-medium mb-1">{__('Facebook page URL', 'ai-rank-suite')}</label>
								<input
									type="text"
									placeholder="https://www.facebook.com/yourbrand"
									value={s.fb_page}
									onChange={(e) => update({ fb_page: e.target.value })}
								/>
							</div>
							<div>
								<label className="block font-medium mb-1">{__('Facebook App ID (optional)', 'ai-rank-suite')}</label>
								<input
									type="text"
									placeholder="1234567890"
									value={s.fb_app_id}
									onChange={(e) => update({ fb_app_id: e.target.value })}
								/>
							</div>
						</div>
					</div>
				</Card>

				<div className="grid gap-5">
					<Card
						title={__('Social profiles', 'ai-rank-suite')}
						subtitle={__('These feed your Organization\'s sameAs — how Google and AI assistants connect your site to your accounts', 'ai-rank-suite')}
					>
						<div className="grid gap-3">
							{Object.entries(data.networks).map(([key, label]) => (
								<div key={key}>
									<label className="block font-medium mb-1">{label}</label>
									<input
										type="text"
										placeholder={`https://…`}
										value={(s.profiles || {})[key] || ''}
										onChange={(e) => update({ profiles: { ...s.profiles, [key]: e.target.value } })}
									/>
								</div>
							))}
							<div>
								<Button onClick={save} busy={busy}>{__('Save', 'ai-rank-suite')}</Button>
							</div>
						</div>
					</Card>

					<Card title={__('Validate', 'ai-rank-suite')} subtitle={__('Check how the big platforms actually see your site — opens with your URL prefilled', 'ai-rank-suite')}>
						<div className="grid gap-2">
							{data.validators.map((v) => (
								<a
									key={v.label}
									href={v.url}
									target="_blank"
									rel="noreferrer"
									className="flex items-center justify-between ars-r-lg px-4 py-3 font-medium text-[13px]"
									style={{ background: 'var(--ars-surface-2)', textDecoration: 'none', color: 'var(--ars-ink)' }}
								>
									{v.label}
									<span aria-hidden style={{ color: 'var(--ars-brand)' }}>
										↗
									</span>
								</a>
							))}
							<p className="m-0 text-[11.5px]" style={{ color: 'var(--ars-ink-3)' }}>
								{__('WhatsApp, Slack, Discord and Telegram all read the same Open Graph tags — if Facebook\'s debugger is happy, they all are.', 'ai-rank-suite')}
							</p>
						</div>
					</Card>
				</div>
			</div>
		</div>
	);
}