{/* Row 1 */}

{__("Number of FAQs", "easy-accordion-free")}

{__("Select a Language", "easy-accordion-free")}

{__("Select a Tone", "easy-accordion-free")}

{/* Row 2 */}

{__("FAQ Content Source", "easy-accordion-free")}

{/* Keywords */}

{__("Keywords & Focus Areas", "easy-accordion-free")} onFieldChange("keywords", e.target.value)} /> {__( "Add keywords to guide the AI and generate more relevant FAQs. Separate with commas.", "easy-accordion-free" )}

{/* Prompt */}

{__("AI Prompt", "easy-accordion-free")}

onFieldChange("prompt", e.target.value)}
						/>
						<span className="eab-faq-gen-prompt-card__help sp-d-block">
							{__(
								"Briefly describe your product, service, or content to generate relevant FAQs.",
								"easy-accordion-free"
							)}
						</span>
					</div>
				</div>

{/* Footer */}
				<div className="eab-faq-gen-prompt-card__footer sp-d-flex sp-align-center sp-justify-end sp-gap-12px">
					<span
						className="eab-faq-gen-prompt-card__notice"
						style={{ marginRight: "auto", display: "flex", alignItems: "center", fontSize: "15px" }}
					>
						{__("To generate unlimited FAQs with AI,", "easy-accordion-free")}
						<a
							href="https://easyaccordion.io/pricing/"
							target="_blank"
							rel="noopener noreferrer"
							style={{ marginLeft: "4px" }}
						>
							{__("Upgrade to Pro!", "easy-accordion-free")}
						</a>
					</span>
					{modelOptions?.length > 0 && (
						<div className="eab-faq-gen-prompt-card__field">
							<RenderSelect
								items={modelOptions}
								id="selectedModel"
								value={formData.selectedModel}
								onChange={onFieldChange}
							/>
						</div>
					)}
					<button
						type="submit"
						className="eab-faq-gen-prompt-card__submit sp-d-flex sp-align-center sp-gap-10px"
						disabled={loading || modelOptions?.length === 0 || generatedFaqItems === "5"}
					>
						<TriggerButtonIcon />
						{loading ? (
							<span className="sp-d-flex sp-align-end sp-gap-2px">
								{__("Generating FAQs", "easy-accordion-free")}
								<span className="eab-generating-spinner"></span>
							</span>
						) : (
							__("Generate FAQs", "easy-accordion-free")
						)}
					</button>
				</div>
			</form>
		);
	}
);

// ManageGeneratedData.
export const ManageGeneratedData = memo(
	({ apiResult, setStep, parentId, setIsOpenPopup, setApiResult, childName, resetForm }) => {
		const [generatedFaqs, setGeneratedFaqs] = useState(apiResult);
		const [activeId, setActiveId] = useState(0);

const { insertBlock } = useDispatch("core/block-editor");

// update single faqs value.
		const updateFaqsValue = (id, key, value) => {
			setGeneratedFaqs((prev) => prev.map((item) => (item.id === id ? { ...item, [key]: value } : item)));
		};

// update all faqs value.
		const handleFilteringAllFaqs = (value) => {
			setGeneratedFaqs((prev) => prev.map((item) => ({ ...item, isSelected: value })));
		};

const totalSelectedItems = generatedFaqs?.filter((item) => item.isSelected)?.length;

return (
			<div className="eab-manage-generated-faqs">
				<div className="eab-manage-generated-faqs__header sp-d-flex sp-align-center sp-justify-between">
					<div className="eab-manage-generated-faqs__header-titles">
						<h4>{__("Generated FAQs", "easy-accordion-free")}</h4>
						<span className="sp-d-block">
							{__("Select the FAQs you want to add to your block ", "easy-accordion-free")}
							{"("}
							{totalSelectedItems}
							{__(" selected", "easy-accordion-free")}
							{")"}
						</span>
					</div>
					<div className="eab-manage-generated-faqs__header-buttons sp-d-flex sp-align-center sp-gap-10px">
						<button
							disabled={totalSelectedItems === generatedFaqs?.length}
							onClick={() => handleFilteringAllFaqs(true)}
						>
							{__("Select All", "easy-accordion-free")}
						</button>
						<button disabled={totalSelectedItems === 0} onClick={() => handleFilteringAllFaqs(false)}>
							{__("Deselect All", "easy-accordion-free")}
						</button>
					</div>
				</div>

<div className="eab-manage-generated-faqs__body">
					{generatedFaqs?.map(({ id, question, answer, isSelected }, i) => (
						<div
							key={i}
							className={`eab-manage-generated-faqs__accordion${activeId === id ? " active" : ""}`}
						>
							<div
								className="eab-manage-generated-faqs__accordion-header sp-d-flex sp-align-center sp-justify-between"
								onClick={() => setActiveId((prev) => (prev === id ? null : id))}
							>
								<span className="sp-d-flex sp-align-center sp-gap-10px">
									<input
										type="checkbox"
										checked={isSelected}
										onChange={() => updateFaqsValue(id, "isSelected", !isSelected)}
										onClick={(e) => e.stopPropagation()}
									/>
									<RichText
										tagName="span"
										className="eab-manage-generated-faqs__accordion-title"
										value={question}
										onChange={(value) => updateFaqsValue(id, "question", value)}
									/>
								</span>
								<i
									className={
										activeId === id ? "eab-icon-angle-up-solid" : "eab-icon-angle-down-solid"
									}
								/>
							</div>

{activeId === id && (
								<div className="eab-manage-generated-faqs__accordion-content">
									<RichText
										tagName="span"
										value={answer}
										onChange={(value) => updateFaqsValue(id, "answer", value)}
									/>
								</div>
							)}
						</div>
					))}
				</div>

<div className="eab-faq-gen-prompt-card__footer sp-d-flex sp-align-center sp-justify-between">
					<button className="eab-manage-generated-faqs__back-button" onClick={() => setStep("prompt-modal")}>
						{__("Back to Settings", "easy-accordion-free")}
					</button>
					<button
						className="eab-manage-generated-faqs__next-button"
						onClick={createFaqsWithContent}
						disabled={totalSelectedItems <= 0}
					>
						{__("Add Selected FAQs", "easy-accordion-free")}
					</button>
				</div>
			</div>
		);
	}
);

// WarningMessage.
export const WarningMessage = memo(({ errorMessage }) => (
	<div className="eab-faq-gen-prompt-card__alert">
		{errorMessage}
		<a
			href={`${sp_eab_localize_data?.homeUrl}wp-admin/edit.php?post_type=sp_easy_accordion&page=eap_dashboard#integrations`}
			target="_blank"
			rel="noreferrer"
		>
			{__(" Integrations settings ", "easy-accordion-free")}
		</a>
		{__("to continue.", "easy-accordion-free")}
	</div>
));

// upgrade message.
export const UpgradeToProMessage = memo(() => (
	<div className="eab-faq-gen-prompt-card__alert eap-upgrade-message sp-d-flex sp-align-center sp-justify-between sp-gap-10px">
		{__(
			"You’ve reached your AI FAQ generation limit. Upgrade to Pro to continue generating unlimited FAQs.",
			"easy-accordion-free"
		)}
		<a
			href="https://easyaccordion.io/pricing/?ref=1"
			target="_blank"
			rel="noreferrer"
			className="sp-d-flex sp-align-center sp-gap-8px"
		>
			<ProIconLight />
			{__("Upgrade to Pro", "easy-accordion-free")}
		</a>
	</div>
));

{__("AI FAQs Generation", "easy-accordion-free")}