/**
 * Empty State: No Syncs Yet
 * Shows when user has credentials but hasn't configured or run syncs
 */
import { RefreshCw, ArrowRight, BookOpen, CheckSquare } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import HelpResources from './HelpResources';

const EmptyStateNoSyncs = () => {
	const navigate = useNavigate();

	const quickSteps = [
		{
			icon: CheckSquare,
			title: 'Enable Content Types',
			description: 'Choose what to sync in General Settings',
		},
		{
			icon: CheckSquare,
			title: 'Configure Data Fields',
			description: 'Select which fields to sync in Data Options',
		},
		{
			icon: CheckSquare,
			title: 'Run Your First Sync',
			description: 'Click "Save & Sync" to start syncing',
		},
	];

	return (
		<div className="max-w-7xl space-y-6">
			{/* Hero Section */}
			<div className="bg-white rounded-oa-lg shadow-oa-sm p-12 text-center">
				<div className="inline-flex items-center justify-center w-20 h-20 bg-[#dbeafe] rounded-full mb-6">
					<RefreshCw className="w-12 h-12 text-[#2563eb]" />
				</div>
				<h1 className="text-3xl font-oa-bold text-oa-text-primary mb-3">
					Let's Get Your Content Syncing
				</h1>
				<p className="text-lg text-oa-text-secondary max-w-2xl mx-auto mb-8">
					You're connected to OpenAsset. Now configure what you want to sync and run your first sync.
				</p>

				{/* Quick Steps */}
				<div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
					{quickSteps.map((step, index) => {
						const Icon = step.icon;
						return (
							<div key={index} className="flex flex-col items-center text-center">
								<div className="w-12 h-12 bg-white border-2 border-[#2563eb] rounded-full flex items-center justify-center mb-3">
									<Icon className="w-6 h-6 text-[#2563eb]" />
								</div>
								<h3 className="font-oa-semibold text-oa-text-primary mb-1">
									{step.title}
								</h3>
								<p className="text-oa-sm text-oa-text-tertiary">
									{step.description}
								</p>
							</div>
						);
					})}
				</div>

				{/* CTA Buttons */}
				<div className="flex flex-col sm:flex-row gap-4 justify-center pt-6 border-t border-oa-border-secondary mt-8">
					<button
						onClick={() => navigate('/settings')}
						className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-[#2563eb] text-white font-oa-semibold rounded-oa-md hover:bg-[#1d4ed8] transition-colors shadow-sm"
					>
						Go to General Settings
						<ArrowRight className="w-5 h-5" />
					</button>
					<a
						href="https://success.openasset.com/en/articles/8970283-using-openasset-s-website-connector-for-wordpress"
						target="_blank"
						rel="noopener noreferrer"
						className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white text-oa-text-secondary font-oa-semibold rounded-oa-md border border-oa-border-secondary hover:bg-oa-bg-secondary transition-colors"
					>
						<BookOpen className="w-5 h-5" />
						View Setup Guide
					</a>
				</div>
			</div>

			{/* Help Resources */}
			<HelpResources />
		</div>
	);
};

export default EmptyStateNoSyncs;