import { Users, Building2, ArrowRight, Star, LucideIcon, Check, Cloud } from "lucide-react"
import type { Metadata } from "next"
import Link from "next/link"

import { Button } from "@/components/ui"
import { AnimatedBackground } from "@/components/homepage"
import { ContactForm } from "@/components/enterprise/contact-form"
import { SEO } from "@/lib/seo"
import { EXTERNAL_LINKS } from "@/lib/constants"

const TITLE = "Pricing - Roo Code Cloud"
const DESCRIPTION =
	"Simple, transparent pricing for Roo Code Cloud. The VS Code extension is free forever. Choose the cloud plan that fits your needs."
const PATH = "/pricing"
const OG_IMAGE = SEO.ogImage

export const metadata: Metadata = {
	title: TITLE,
	description: DESCRIPTION,
	alternates: {
		canonical: `${SEO.url}${PATH}`,
	},
	openGraph: {
		title: TITLE,
		description: DESCRIPTION,
		url: `${SEO.url}${PATH}`,
		siteName: SEO.name,
		images: [
			{
				url: OG_IMAGE.url,
				width: OG_IMAGE.width,
				height: OG_IMAGE.height,
				alt: OG_IMAGE.alt,
			},
		],
		locale: SEO.locale,
		type: "website",
	},
	twitter: {
		card: SEO.twitterCard,
		title: TITLE,
		description: DESCRIPTION,
		images: [OG_IMAGE.url],
	},
	keywords: [
		...SEO.keywords,
		"pricing",
		"plans",
		"subscription",
		"cloud pricing",
		"AI development pricing",
		"team pricing",
		"enterprise pricing",
	],
}

interface PricingTier {
	name: string
	icon: LucideIcon
	price: string
	period?: string
	trial?: string
	cancellation?: string
	description: string
	featuresIntro?: string
	features: string[]
	cta: {
		text: string
		href?: string
		isContactForm?: boolean
	}
}

const pricingTiers: PricingTier[] = [
	{
		name: "Cloud Free",
		icon: Cloud,
		price: "$0",
		cancellation: "Cancel anytime",
		description: "For folks just getting started",
		features: [
			"Token usage analytics",
			"Access your task history across devices",
			"Follow your tasks from anywhere",
			"Community support",
		],
		cta: {
			text: "Get started",
			href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP,
		},
	},
	{
		name: "Pro",
		icon: Star,
		price: "$20",
		period: "/mo",
		trial: "Free 14-day trial · ",
		cancellation: "Cancel anytime",
		description: "For pro Roo coders",
		featuresIntro: "Everything in Free, plus:",
		features: [
			"Roomote Control",
			"Start, stop and control tasks from anywhere",
			"Course-correct Roo from afar",
			"Paid support",
		],
		cta: {
			text: "Get started",
			href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/billing",
		},
	},
	{
		name: "Team",
		icon: Users,
		price: "$99",
		period: "/mo",
		trial: "Free 14-day trial · ",
		cancellation: "Cancel anytime",
		description: "For AI-forward teams",
		featuresIntro: "Everything in Pro, plus:",
		features: ["Unlimited users (no per-seat cost)", "Shared configuration & policies", "Centralized billing"],
		cta: {
			text: "Get started",
			href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/billing",
		},
	},
	{
		name: "Enterprise",
		icon: Building2,
		price: "Custom",
		description: "For complex orgs",
		featuresIntro: "Everything in Team, plus:",
		features: [
			"SAML SSO provisioning",
			"Custom integrations and terms",
			"Security questionnaires and all that fun stuff",
			"Dedicated support",
		],
		cta: {
			text: "Talk to Sales",
			isContactForm: true,
		},
	},
]

export default function PricingPage() {
	return (
		<>
			<AnimatedBackground />

			{/* Hero Section */}
			<section className="relative overflow-hidden pt-16 pb-12">
				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
					<div className="text-center">
						<h1 className="text-5xl font-bold tracking-tight">Roo Code Cloud Pricing</h1>
						<p className="mx-auto mt-4 max-w-2xl text-lg text-muted-foreground">
							Simple, transparent pricing that scales with your needs.
							<br />
							Free 14-day trials to kick the tires.
						</p>
					</div>
				</div>
			</section>

			{/* Free Extension Notice */}
			<div className="mx-auto max-w-6xl">
				<div className="rounded-xl p-4 mb-8 text-center bg-gradient-to-r from-blue-500/10 via-cyan-500/10 to-purple-500/10 border border-blue-500/20 dark:border-white/20">
					<p className="text-center">
						<strong className="font-semibold">The Roo Code extension is free! </strong>
						Roo Code Cloud is an optional service which takes it to the next level.
					</p>
				</div>
			</div>

			{/* Pricing Tiers */}
			<section className="">
				<div className="container mx-auto px-4 sm:px-6 lg:px-8">
					<div className="mx-auto grid max-w-6xl gap-4 lg:grid-cols-4">
						{pricingTiers.map((tier) => {
							const Icon = tier.icon
							return (
								<div
									key={tier.name}
									className="relative p-6 flex flex-col justify-start bg-background border rounded-2xl transition-all hover:shadow-lg">
									<div className="mb-6">
										<div className="flex items-center justify-between">
											<h3 className="text-2xl font-bold tracking-tight">{tier.name}</h3>
											<Icon className="size-6" />
										</div>
										<p className="text-sm text-muted-foreground">{tier.description}</p>
									</div>

									<div className="grow mb-8">
										<p className="text-sm text-muted-foreground font-light mb-2">
											{tier.featuresIntro}&nbsp;
										</p>
										<ul className="space-y-3 my-0">
											{tier.features.map((feature) => (
												<li key={feature} className="flex items-start gap-2">
													<Check className="mt-0.5 h-4 w-4 text-muted-foreground shrink-0" />
													<span className="text-sm">{feature}</span>
												</li>
											))}
										</ul>
									</div>

									<p className="text-2xl mt-0 mb-1 tracking-tight">
										<strong>{tier.price}</strong>
										{tier.period}
									</p>
									<p className="text-xs text-muted-foreground mb-4">
										{tier.trial}
										{tier.cancellation}&nbsp;
									</p>

									{tier.cta.isContactForm ? (
										<ContactForm
											formType="demo"
											buttonText={tier.cta.text}
											buttonClassName="w-full transition-all duration-300"
										/>
									) : (
										<Button size="lg" className="w-full transition-all duration-300" asChild>
											<Link href={tier.cta.href!} className="flex items-center justify-center">
												{tier.cta.text}
											</Link>
										</Button>
									)}
								</div>
							)
						})}
					</div>
				</div>
			</section>

			{/* Additional Information */}
			<section className="bg-background py-16 my-16 border-t border-b relative z-50">
				<div className="container mx-auto px-4 sm:px-6 lg:px-8">
					<div className="mx-auto max-w-3xl text-center">
						<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Frequently Asked Questions</h2>
						<p className="mt-4 text-lg text-muted-foreground">Got questions about our pricing?</p>
					</div>
					<div className="mx-auto mt-12 grid max-w-5xl gap-8 md:grid-cols-2">
						<div className="rounded-lg border border-border bg-card p-6">
							<h3 className="font-semibold">Wait, is Roo Code free or not?</h3>
							<p className="mt-2 text-sm text-muted-foreground">
								Yes! The Roo Code VS Code extension is open source and free forever. The extension acts
								as a powerful AI coding assistant right in your editor. These are the prices for Roo
								Code Cloud.
							</p>
						</div>
						<div className="rounded-lg border border-border bg-card p-6">
							<h3 className="font-semibold">Is there a free trial?</h3>
							<p className="mt-2 text-sm text-muted-foreground">
								Yes, all paid plans come with a 14-day free trial.
							</p>
						</div>
						<div className="rounded-lg border border-border bg-card p-6">
							<h3 className="font-semibold">Do I need a credit card for the free trial?</h3>
							<p className="mt-2 text-sm text-muted-foreground">
								Yes, but you won&apos;t be charged until your trial ends. You can cancel anytime with
								one click .
							</p>
						</div>
						<div className="rounded-lg border border-border bg-card p-6">
							<h3 className="font-semibold">What payment methods do you accept?</h3>
							<p className="mt-2 text-sm text-muted-foreground">
								We accept all major credit cards, debit cards, and can arrange invoice billing for
								Enterprise customers.
							</p>
						</div>
						<div className="rounded-lg border border-border bg-card p-6">
							<h3 className="font-semibold">Can I change plans anytime?</h3>
							<p className="mt-2 text-sm text-muted-foreground">
								Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in
								your next billing cycle.
							</p>
						</div>
					</div>

					<div className="mt-12 text-center">
						<p className="text-muted-foreground">
							Still have questions?{" "}
							<a
								href={EXTERNAL_LINKS.DISCORD}
								target="_blank"
								rel="noopener noreferrer"
								className="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
								Join our Discord
							</a>{" "}
							or{" "}
							<Link
								href="/enterprise#contact"
								className="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
								contact our sales team
							</Link>
						</p>
					</div>
				</div>
			</section>

			{/* CTA Section */}
			<section className="py-20">
				<div className="container mx-auto px-4 sm:px-6 lg:px-8">
					<div className="mx-auto max-w-4xl rounded-3xl border border-border/50 bg-gradient-to-br from-blue-500/5 via-cyan-500/5 to-purple-500/5 p-8 text-center shadow-2xl backdrop-blur-xl dark:border-white/20 dark:bg-gradient-to-br dark:from-gray-800 dark:via-gray-900 dark:to-black sm:p-12">
						<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Try Roo Code Cloud now</h2>
						<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">Code from anywhere.</p>
						<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
							<Button
								size="lg"
								className="bg-black text-white hover:bg-gray-800 hover:shadow-lg hover:shadow-black/20 dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:hover:shadow-white/20 transition-all duration-300"
								asChild>
								<a
									href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
									target="_blank"
									rel="noopener noreferrer"
									className="flex items-center justify-center">
									Create a free Cloud account
									<ArrowRight className="ml-2 h-4 w-4" />
								</a>
							</Button>
						</div>
					</div>
				</div>
			</section>
		</>
	)
}