import React, { useState, type ReactNode } from "react";
import { MIcon } from "../common/MIcon";
import { ModalHeader } from "../common/ModalHeader";
import { SlideInPanel } from "../common/SlideInPanel";

export const FAQ = ({
	isVisible,
	closePanel,
}: { isVisible: boolean; closePanel: () => void }) => {
	return (
		<SlideInPanel
			closePanel={closePanel}
			isVisible={isVisible}
			cardClasses="bn-h-full"
		>
			<div className="bn-flex bn-flex-col bn-overflow-hidden">
				<ModalHeader label="Frequently Asked Questions" closeModal={closePanel} />
				<div className="bn-p-4 bn-flex-1 bn-overflow-auto">
					{content.map((item) => (
						<Accordion item={item} key={item.question} />
					))}
				</div>
			</div>
		</SlideInPanel>
	);
};

interface AccordionType {
	question: string;
	answer: ReactNode;
}

const Accordion = ({ item }: { item: AccordionType }) => {
	const [open, toggle] = useState<boolean>(false);
	return (
		<div className="bn-pb-4 bn-border-0 bn-border-b bn-border-solid bn-border-primary">
			<button
				type="button"
				onClick={() => toggle(!open)}
				className="bn-w-full bn-flex bn-items-center bn-justify-between bn-text-primary bn-text-base bn-font-medium bn-text-left bn-bg-transparent bn-border-0 bn-p-0 bn-cursor-pointer bn-pt-4"
			>
				{item.question}
				<MIcon name="chevron_right" classNames="bn-text-secondary" />
			</button>
			{open && (
				<p className="bn-text-secondary bn-text-sm bn-font-normal bn-mt-2">
					{item.answer}
				</p>
			)}
		</div>
	);
};

const content: AccordionType[] = [
	{
		question: "What is Bungee Protocol?",
		answer: (
			<>
				Bungee Protocol is a global liquidity marketplace that enables users to perform
				any action across chains. Powered by Socket Protocol, it allows users to execute
				cross-chain actions by simply signing user-requests, without complex onchain
				interactions. Key features:
				<ul>
					<li>Universal Token Swaps: Trade any token across any supported chain</li>
					<li>
						Gasless Transactions: Sign transactions offchain using permit2 (ETH transactions
						excluded)
					</li>
					<li>
						User-Optimized: Complex operations like routing and path-finding are handled for
						you
					</li>
				</ul>
				Read more here:{" "}
				<a
					href="https://docs.bungee.exchange/get-started/bungee-intro"
					target="_blank"
					rel="noopener noreferrer"
					className="bn-text-accent"
				>
					Bungee Docs
				</a>
			</>
		),
	},
	{
		question: "What are the limitations for this preview?",
		answer: (
			<>
				This is an early and unaudited version, please proceed with caution. During this
				preview phase we limit:
				<ul>
					<li>Maximum swap amount to 1000 USD</li>
					<li>Amount of supported chains</li>
				</ul>
			</>
		),
	},
	{
		question: "Why is my order still pending while funds are in my wallet?",
		answer: (
			<>
				The funds remain in your wallet until a transmitter has picked up your order.
				This usually means that your order is being matched with available liquidity.
				What you can do:
				<ul>
					<li>Wait for the order to be matched</li>
					<li>
						If this takes longer, reach out to us in{" "}
						<a
							href="https://discord.com/invite/zfKJR8yWaH"
							target="_blank"
							rel="noopener noreferrer"
							className="bn-text-accent"
						>
							Discord
						</a>{" "}
						for help
					</li>
				</ul>
			</>
		),
	},
	{
		question: "Why haven't I received my tokens after funds left my wallet?",
		answer: (
			<>
				Don't worry, your funds are safe. This could happen because:
				<ul>
					<li>The transaction is being processed across chains</li>
					<li>Network confirmations are pending</li>
				</ul>
				Next steps:
				<ol>
					<li>Check your transaction status on our explorer, socketscan.io</li>
					<li>
						Contact support if the status hasn't been updated in 30 minutes in our{" "}
						<a
							href="https://discord.com/invite/zfKJR8yWaH"
							target="_blank"
							rel="noopener noreferrer"
							className="bn-text-accent"
						>
							Discord
						</a>
					</li>
				</ol>
			</>
		),
	},
	{
		question: "Where can I provide feedback?",
		answer: (
			<>
				We welcome your feedback! Join us on:
				<ul>
					<li>
						<a
							href="https://discord.com/invite/zfKJR8yWaH"
							target="_blank"
							rel="noopener noreferrer"
							className="bn-text-accent"
						>
							Discord
						</a>
					</li>
					<li>
						<a
							href="https://twitter.com/bungeeexchange"
							target="_blank"
							rel="noopener noreferrer"
							className="bn-text-accent"
						>
							Twitter
						</a>
					</li>
				</ul>
			</>
		),
	},
	{
		question: "Need help with your transaction?",
		answer: (
			<>
				For immediate assistance, join our{" "}
				<a
					href="https://discord.com/invite/zfKJR8yWaH"
					target="_blank"
					rel="noopener noreferrer"
					className="bn-text-accent"
				>
					Discord
				</a>
				. Please provide:
				<ul>
					<li>Transaction hash</li>
					<li>Wallet address</li>
					<li>Screenshots of any error messages</li>
				</ul>
			</>
		),
	},
	{
		question: "When do I earn rewards?",
		answer:
			"You earn OP rewards when you bridge any token TO Optimism or Base. Capped at 10 OP per transaction. Campaign runs from November 7th - November 19th.",
	},
	{
		question: "How and when can I claim my rewards?",
		answer:
			"All rewards earned during the campaign (November 7th - November 19th) will be claimable after the campaign ends. We'll announce the claim process and exact date through our official channels.",
	},
];
