"use client";
import clsx from "clsx";

import { cn } from "@/lib/utils";
import { IconInfoCircle } from "@tabler/icons-react";
import {
	ArrowRight,
	MinusIcon,
	PlusCircleIcon,
	PlusIcon,
	X,
	XCircleIcon,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Container } from "./Container";
import { ContactFormModal } from "./ContactFormModal";
import { Badge } from "./ui/badge";
import AnimatedGradientText from "./ui/animated-gradient-text";
import { Button, buttonVariants } from "./ui/button";
import HeroVideoDialog from "./ui/hero-video-dialog";
import { NumberInput } from "./ui/input";
import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "./ui/tooltip";

function SwirlyDoodle(props: React.ComponentPropsWithoutRef<"svg">) {
	return (
		<svg
			aria-hidden="true"
			viewBox="0 0 281 40"
			preserveAspectRatio="none"
			{...props}
		>
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M240.172 22.994c-8.007 1.246-15.477 2.23-31.26 4.114-18.506 2.21-26.323 2.977-34.487 3.386-2.971.149-3.727.324-6.566 1.523-15.124 6.388-43.775 9.404-69.425 7.31-26.207-2.14-50.986-7.103-78-15.624C10.912 20.7.988 16.143.734 14.657c-.066-.381.043-.344 1.324.456 10.423 6.506 49.649 16.322 77.8 19.468 23.708 2.65 38.249 2.95 55.821 1.156 9.407-.962 24.451-3.773 25.101-4.692.074-.104.053-.155-.058-.135-1.062.195-13.863-.271-18.848-.687-16.681-1.389-28.722-4.345-38.142-9.364-15.294-8.15-7.298-19.232 14.802-20.514 16.095-.934 32.793 1.517 47.423 6.96 13.524 5.033 17.942 12.326 11.463 18.922l-.859.874.697-.006c2.681-.026 15.304-1.302 29.208-2.953 25.845-3.07 35.659-4.519 54.027-7.978 9.863-1.858 11.021-2.048 13.055-2.145a61.901 61.901 0 0 0 4.506-.417c1.891-.259 2.151-.267 1.543-.047-.402.145-2.33.913-4.285 1.707-4.635 1.882-5.202 2.07-8.736 2.903-3.414.805-19.773 3.797-26.404 4.829Zm40.321-9.93c.1-.066.231-.085.29-.041.059.043-.024.096-.183.119-.177.024-.219-.007-.107-.079ZM172.299 26.22c9.364-6.058 5.161-12.039-12.304-17.51-11.656-3.653-23.145-5.47-35.243-5.576-22.552-.198-33.577 7.462-21.321 14.814 12.012 7.205 32.994 10.557 61.531 9.831 4.563-.116 5.372-.288 7.337-1.559Z"
			/>
		</svg>
	);
}

function CheckIcon({
	className,
	...props
}: React.ComponentPropsWithoutRef<"svg">) {
	return (
		<svg
			aria-hidden="true"
			className={clsx(
				"h-6 w-6 flex-none fill-current stroke-current",
				className,
			)}
			{...props}
		>
			<path
				d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
				strokeWidth={0}
			/>
			<circle
				cx={12}
				cy={12}
				r={8.25}
				fill="none"
				strokeWidth={1.5}
				strokeLinecap="round"
				strokeLinejoin="round"
			/>
		</svg>
	);
}
export const calculatePrice = (count: number, isAnnual = false) => {
	if (isAnnual) {
		if (count <= 1) return 45.9;
		return 35.7 * count;
	}
	if (count <= 1) return 4.5;
	return count * 3.5;
};

export function PricingLegacy() {
	const router = useRouter();
	const [isAnnual, setIsAnnual] = useState(false);
	const [serverQuantity, setServerQuantity] = useState(1);
	const featured = true;

	const [openVideo, setOpenVideo] = useState(false);
	const [openContactModal, setOpenContactModal] = useState(false);
	return (
		<section
			id="pricing-legacy"
			aria-label="Pricing (Legacy)"
			className="border-t border-border/30 bg-black py-20 sm:py-32"
		>
			<div className="absolute inset-0">
				<svg viewBox="0 0 2000 1000" xmlns="http://www.w3.org/2000/svg">
					<mask id="b" x="0" y="0" width="2000" height="1000">
						<path fill="url(#a)" d="M0 0h2000v1000H0z" />
					</mask>
					<path d="M0 0h2000v1000H0z" />
					<g stroke="#22222233" strokeWidth=".4" fill="none" mask="url(#b)">
						<path d="M0 0h50v50H0zM50 0h50v50H50zM100 0h50v50h-50zM150 0h50v50h-50zM200 0h50v50h-50zM250 0h50v50h-50zM300 0h50v50h-50zM350 0h50v50h-50zM400 0h50v50h-50zM450 0h50v50h-50zM500 0h50v50h-50zM550 0h50v50h-50zM600 0h50v50h-50zM650 0h50v50h-50zM700 0h50v50h-50zM750 0h50v50h-50zM800 0h50v50h-50zM850 0h50v50h-50zM900 0h50v50h-50zM950 0h50v50h-50zM1000 0h50v50h-50zM1050 0h50v50h-50zM1100 0h50v50h-50zM1150 0h50v50h-50zM1200 0h50v50h-50zM1250 0h50v50h-50zM1300 0h50v50h-50zM1350 0h50v50h-50zM1400 0h50v50h-50zM1450 0h50v50h-50zM1500 0h50v50h-50zM1550 0h50v50h-50zM1600 0h50v50h-50zM1650 0h50v50h-50zM1700 0h50v50h-50zM1750 0h50v50h-50zM1800 0h50v50h-50zM1850 0h50v50h-50zM1900 0h50v50h-50zM1950 0h50v50h-50zM0 50h50v50H0zM50 50h50v50H50zM100 50h50v50h-50zM150 50h50v50h-50zM200 50h50v50h-50zM250 50h50v50h-50zM300 50h50v50h-50zM350 50h50v50h-50zM400 50h50v50h-50zM450 50h50v50h-50zM500 50h50v50h-50zM550 50h50v50h-50zM600 50h50v50h-50zM650 50h50v50h-50zM700 50h50v50h-50zM750 50h50v50h-50zM800 50h50v50h-50zM850 50h50v50h-50zM900 50h50v50h-50zM950 50h50v50h-50zM1000 50h50v50h-50zM1050 50h50v50h-50zM1100 50h50v50h-50zM1150 50h50v50h-50zM1200 50h50v50h-50zM1250 50h50v50h-50zM1300 50h50v50h-50zM1350 50h50v50h-50zM1400 50h50v50h-50zM1450 50h50v50h-50zM1500 50h50v50h-50zM1550 50h50v50h-50zM1600 50h50v50h-50zM1650 50h50v50h-50zM1700 50h50v50h-50zM1750 50h50v50h-50zM1800 50h50v50h-50zM1850 50h50v50h-50zM1900 50h50v50h-50zM1950 50h50v50h-50z" />
					</g>
					<defs>
						<radialGradient id="a">
							<stop offset="50%" stopColor="#fff" stopOpacity="0" />
							<stop offset="1" stopColor="#fff" stopOpacity="1" />
						</radialGradient>
					</defs>
				</svg>
			</div>
			<Container className="relative">
				<div className="text-center">
					<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
						<span className="relative whitespace-nowrap">
							<SwirlyDoodle className="absolute left-0 top-1/2 h-[1em] w-full fill-muted-foreground" />
							<span className="relative">Simple Affordable</span>
						</span>{" "}
						Pricing.
					</h2>
					<p className="mt-4 text-lg text-muted-foreground">
						Deploy Smarter and Scale Faster, Without Breaking the Bank
					</p>
				</div>

				<div className=" mx-auto mt-10">
					<div className="mx-auto mt-16 flex w-full flex-col items-center justify-center gap-10 lg:-mx-8 xl:mx-0 xl:gap-x-8">
						<Tabs
							defaultValue="monthly"
							value={isAnnual ? "annual" : "monthly"}
							onValueChange={(e) => setIsAnnual(e === "annual")}
						>
							<TabsList>
								<TabsTrigger value="monthly">Monthly</TabsTrigger>
								<TabsTrigger value="annual">Annual</TabsTrigger>
							</TabsList>
						</Tabs>
						<div className="mx-auto flex max-w-4xl flex-col gap-8">
							<div className="flex gap-4 max-sm:flex-wrap max-sm:justify-center sm:flex-row">
								<section
									className={clsx(
										"flex max-w-sm flex-col  rounded-3xl border-2 border-dashed border-muted px-4",
										featured
											? "order-first border bg-black py-8 lg:order-none"
											: "lg:py-8",
									)}
								>
								<div className="flex flex-row items-center gap-2">
									<p className=" text-2xl font-semibold tracking-tight text-primary ">
										Free
									</p>
									|
									<p className=" text-base font-semibold tracking-tight text-muted-foreground">
										Open Source
									</p>
								</div>

								<h3 className="mt-5 text-lg font-medium text-white">
									Dokploy Open Source
								</h3>
								<p
									className={clsx(
										"text-sm",
										featured ? "text-white" : "text-slate-400",
									)}
								>
									Install and manage Dokploy UI on your own server.
								</p>

								<ul
									role="list"
									className={clsx(
										" mt-4 flex flex-col gap-y-2 text-sm",
										featured ? "text-white" : "text-slate-200",
									)}
								>
									{[
										"Complete Flexibility: Install Dokploy UI on your own infrastructure",
										"Self-hosted Infrastructure",
										"Community Support",
										"Access to Core Features",
										"Access to All Updates",
										"Unlimited Servers",
									].map((feature) => (
										<li key={feature} className="flex text-muted-foreground">
											<CheckIcon />
											<span className="ml-2">{feature}</span>
										</li>
									))}
									<li className="flex text-muted-foreground">
										<XCircleIcon className="size-5 self-center text-destructive" />
										<span className="ml-3 text-destructive">
											Remote Servers Monitoring
										</span>
									</li>
								</ul>
								<div className="mt-4 flex flex-col gap-2">
									<div className="flex flex-col items-center justify-center gap-2">
										<span className="text-sm text-muted-foreground">
											Unlimited Servers
										</span>
										<Link
											href="https://docs.dokploy.com/docs/core/installation#docker"
											target="_blank"
											className="flex items-start text-sm text-primary"
										>
											Start deploying{" "}
											<ArrowRight className="ml-2 size-4 self-center" />
										</Link>
									</div>
								</div>
							</section>
							<section
								className={clsx(
									"flex max-w-sm flex-col  rounded-3xl  border-2 border-dashed px-4",
									featured
										? "order-first border bg-black py-8 lg:order-none"
										: "lg:py-8",
								)}
							>
								{isAnnual && (
									<div className="mb-4 flex flex-row items-center gap-2">
										<Badge>Recommended 🚀</Badge>
									</div>
								)}

								{isAnnual ? (
									<div className="flex flex-row items-center gap-2">
										<p className=" text-2xl font-semibold tracking-tight text-primary ">
											$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)}{" "}
											USD
										</p>
										|
										<p className=" text-base font-semibold tracking-tight text-muted-foreground">
											${" "}
											{(calculatePrice(serverQuantity, isAnnual) / 12).toFixed(
												2,
											)}{" "}
											/ Month USD
										</p>
									</div>
								) : (
									<p className=" text-2xl font-semibold tracking-tight text-primary">
										$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)} USD
									</p>
								)}
								<h3 className="mt-5 text-lg font-medium text-white">
									Dokploy Plan
								</h3>
								<p
									className={clsx(
										"text-sm",
										featured ? "text-white" : "text-slate-400",
									)}
								>
									We manage the Dokploy UI infrastructure, we take care of it
									for you.
								</p>

								<ul
									role="list"
									className={clsx(
										" mt-4 flex flex-col gap-y-2 text-sm",
										featured ? "text-white" : "text-slate-200",
									)}
								>
									{[
										"Managed Hosting: No need to manage your own servers",
										"Unlimited Deployments",
										"Unlimited Databases",
										"Unlimited Applications",
										"Unlimited Users",
										"Remote Servers Monitoring",
										"Priority Support",
									].map((feature, index) => (
										<li
											key={`${feature}-${index}`}
											className="flex text-muted-foreground"
										>
											<CheckIcon />
											<span className="ml-2">{feature}</span>
										</li>
									))}
								</ul>
								<div className="mt-4 flex flex-col gap-2">
									<div className="flex items-center justify-center gap-2">
										<span className="text-sm text-muted-foreground">
											No. of {serverQuantity} Servers (You bring the servers)
										</span>
										<TooltipProvider>
											<Tooltip open={openVideo}>
												<TooltipTrigger onClick={() => setOpenVideo(true)}>
													<IconInfoCircle className="size-5 text-muted-foreground transition-colors hover:text-primary " />
												</TooltipTrigger>
												<TooltipContent className=" z-[200] w-[400px] rounded-lg text-center font-semibold text-white">
													<div className="mb-2 flex w-full justify-end self-end text-muted-foreground transition-colors hover:text-primary">
														<X
															onClick={() => setOpenVideo(false)}
															className="flex size-4 cursor-pointer self-end text-muted-foreground transition-colors hover:text-primary"
														/>
													</div>
													<p className="mb-2 text-left text-primary">
														We recommend you to watch the video to understand
														the benefits of Dokploy Cloud
													</p>

													<HeroVideoDialog
														className="z-20 block w-full max-w-md rounded-xl"
														animationStyle="top-in-bottom-out"
														videoSrc="https://www.youtube.com/embed/x2s_Y5ON-ms?si=i6gntgMmyPDLuPih"
														thumbnailSrc="https://dokploy.com/banner.png"
														thumbnailAlt="Hero Video"
													/>
												</TooltipContent>
											</Tooltip>
										</TooltipProvider>
									</div>

									<div className="flex items-center space-x-2">
										<Button
											disabled={serverQuantity <= 1}
											variant="outline"
											onClick={() => {
												if (serverQuantity <= 1) return;

												setServerQuantity(serverQuantity - 1);
											}}
										>
											<MinusIcon className="h-4 w-4" />
										</Button>
										<NumberInput
											value={serverQuantity}
											onChange={(e) => {
												setServerQuantity(e.target.value as unknown as number);
											}}
										/>

										<Button
											variant="outline"
											onClick={() => {
												setServerQuantity(serverQuantity + 1);
											}}
										>
											<PlusIcon className="h-4 w-4" />
										</Button>
									</div>
									<div
										className={cn(
											"justify-between",
											"mt-4 flex  flex-row items-center gap-2",
										)}
									>
										<div className="w-full justify-end">
											<Link
												href="https://app.dokploy.com/register"
												target="_blank"
												className={buttonVariants({
													className: "w-full",
												})}
											>
												Subscribe
											</Link>
										</div>
									</div>
								</div>
							</section>
							</div>
							<div className="flex justify-center">
								<section
									className={clsx(
										"flex w-full max-w-4xl flex-col rounded-3xl border-2 border-dashed border-muted px-4 py-4",
									)}
								>
									<div className="flex flex-row items-center justify-start gap-3 w-fit">
										<p className="text-xl font-semibold tracking-tight text-primary">
											Enterprise
										</p>
										<AnimatedGradientText className="text-xs">
											Premium ✨
										</AnimatedGradientText>
									</div>

									<h3 className="mt-3 text-base font-medium text-white">
										Enterprise Support & Services
									</h3>
									<p className="text-sm text-muted-foreground">
										Custom solutions and dedicated support for your organization.
									</p>

									<ul className="mt-3 grid grid-cols-2 gap-y-1 text-sm text-slate-200">
										{[
											"SLA Guarantees / Priority Support",
											"Aditional Security & Governance",
											"Custom Solutions",
											"Private Labeling",
										].map((feature) => (
											<li key={feature} className="flex text-muted-foreground">
												<CheckIcon />
												<span className="ml-2">{feature}</span>
											</li>
										))}
									</ul>
									<div className="mt-4 flex flex-col gap-2">
										<Button
											onClick={() => setOpenContactModal(true)}
											className="w-full"
										>
											Get in touch
										</Button>
									</div>
								</section>
							</div>
						</div>
					</div>
				</div>
			</Container>
			<ContactFormModal
				open={openContactModal}
				onOpenChange={setOpenContactModal}
				defaultInquiryType="sales"
			/>
		</section>
	);
}
