"use client";

import { motion } from "framer-motion";
import { ArrowRight, GitCommit, Zap, Shield, Copy } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { ShipText } from "./_components/v1-text";
import { ReactNode } from "react";
import { BackgroundLines } from "./bg-line";
import Link from "next/link";
import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";

export default function V1Ship() {
	return (
		<div className="min-h-screen bg-transparnt overflow-hidden">
			<div className="h-[50vh] bg-transparent/10 relative">
				<BackgroundLines>
					<div className="absolute bottom-1/3 left-1/2 transform -translate-x-1/2 text-center">
						<h1 className="text-5xl mb-4">V1.0 - nov.22.2024</h1>
						<p className="text-lg text-gray-400 max-w-xl mx-auto">
							We are excited to announce the Better Auth V1.0 release.
						</p>
					</div>
				</BackgroundLines>
			</div>

			<div className="relative py-24">
				<div className="absolute inset-0 z-0">
					<div className="grid grid-cols-12 h-full">
						{Array(12)
							.fill(null)
							.map((_, i) => (
								<div
									key={i}
									className="border-l border-dashed border-stone-100 dark:border-white/10 h-full"
								/>
							))}
					</div>
					<div className="grid grid-rows-12 w-full absolute top-0">
						{Array(12)
							.fill(null)
							.map((_, i) => (
								<div
									key={i}
									className="border-t border-dashed border-stone-100 dark:border-stone-900/60 w-full"
								/>
							))}
					</div>
				</div>
				<div className="max-w-6xl mx-auto px-6 relative z-10">
					<h2 className="text-3xl font-bold mb-12 font-geist text-center">
						What does V1 means?
					</h2>
					<p>
						Hey there! Thanks for stopping by. Since announcing Better Auth,
						your excitement has been incredibly motivating—thank you! <br />
						<br />
						V1 is an important milestone for us, but it simply means we believe
						you can use it in production. We'll continue improving, adding new
						features, and fixing bugs at the same pace as before. While we
						strive to make this version as stable and secure as possible, we
						don't expect it to be perfect. <br /> <br />
						If you're using Better Auth, we recommend updating to V1 as soon as
						possible. There are some breaking changes, but join us on{" "}
						<Link
							href="https://discord.gg/GYC3W7tZzb"
							className="underline"
							target="_blank"
						>
							Discord
						</Link>
						, and we'll gladly help if you've been using Better Auth in
						production.
					</p>
				</div>
			</div>

			<ReleaseRelated />

			{/* <div className="max-w-6xl mx-auto px-6 py-24">
				<motion.div
					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
					initial={{ opacity: 0, y: 20 }}
					animate={{ opacity: 1, y: 0 }}
					transition={{ delay: 0.2 }}
				>
					<FeatureCard
						icon={<Zap className="w-6 h-6" />}
						title="Enhanced Performance"
						description="50% faster load times and optimized resource usage"
					/>
					<FeatureCard
						icon={<Shield className="w-6 h-6" />}
						title="Advanced Security"
						description="End-to-end encryption and improved authentication"
					/>
					<FeatureCard
						icon={<GitCommit className="w-6 h-6" />}
						title="New Architecture"
						description="Rebuilt from ground up for better scalability"
					/>
				</motion.div>

				<motion.div
					className="text-center mt-20"
					initial={{ opacity: 0 }}
					animate={{ opacity: 1 }}
					transition={{ delay: 0.4 }}
				>
					<Button
						size="lg"
						className="bg-white text-black hover:bg-gray-200 font-medium"
					>
						Get Started <ArrowRight className="ml-2 w-4 h-4" />
					</Button>
				</motion.div>
			</div> */}

			<div className="border-t border-white/10">
				<div className="max-w-4xl mx-auto px-6 py-24">
					<h2 className="text-3xl font-bold mb-12 font-geist">Changelog</h2>
					<div className="space-y-8">
						<ChangelogItem
							version="1.0.0"
							date="2024"
							changes={[
								"feat: Open API Docs Plugin",
								"docs: Sign In Box Builder",
								"fix: Bug fixes and performance improvements",
								"feat: New server only endpoints for Organization and Two Factor plugins",
								"refactor: all core tables now have `createdAt` and `updatedAt` fields",
								"refactor: session id and token are now stored in separate fields",
							]}
						/>
					</div>
				</div>
			</div>
		</div>
	);
}

function ReleaseRelated() {
	return (
		<div className="relative dark:bg-transparent/10 bg-zinc-100 border-b-2 border-white/10 rounded-none py-24">
			<div className="absolute inset-0 z-0">
				<div className="grid grid-rows-12 w-full absolute top-0">
					{Array(12)
						.fill(null)
						.map((_, i) => (
							<div
								key={i}
								className="border-t border-dashed border-white/10 w-full"
							/>
						))}
				</div>
			</div>
			<div className="max-w-6xl mx-auto px-6 relative z-10">
				<h2 className="text-7xl font-bold mb-16 font-geist leading-tight">
					What will you
					<br />
					do next?
				</h2>
				<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
					<div>
						<h3 className="text-xl font-semibold mb-4">Install Latest</h3>
						<div className="dark:bg-white/5 bg-black/10 rounded-lg p-4 mb-2">
							<code className="text-sm font-mono">
								npm i better-auth@latest
							</code>
						</div>
						<p className="text-sm text-gray-400">
							Get the latest{" "}
							<a href="#" className="underline">
								Node.js and npm
							</a>
							.
						</p>
					</div>
					<div>
						<h3 className="text-xl font-semibold mb-4">Adopt the new Schema</h3>
						<div className="dark:bg-white/5 bg-black/10 rounded-lg p-4 mb-2">
							<code className="text-sm font-mono ">
								pnpx @better-auth/cli migrate
								<br />
							</code>
						</div>
						<p className="text-sm text-gray-400">
							Ensure you have the latest{" "}
							<code className="text-xs dark:bg-white/5 bg-black/10 px-1 py-0.5 rounded">
								schema required
							</code>{" "}
							by Better Auth.
							<code className="text-xs dark:bg-white/5 bg-black/10 px-1 py-0.5 rounded">
								You can also
							</code>{" "}
							add them manually. Read the{" "}
							<a
								href="/docs/concepts/database#core-schema"
								className="underline"
							>
								Core Schema
							</a>{" "}
							for full instructions.
						</p>
					</div>
					<div>
						<h3 className="text-xl font-semibold mb-4">
							Check out the change log, the new UI Builder, OpenAPI Docs, and ⭐
							on GitHub (if you haven't already)
						</h3>
						<p className="text-sm text-gray-400 mb-4">
							We have some exciting new features and updates that you should
							check out.
						</p>
						<Button variant="outline" className="w-full justify-between">
							<div className="flex items-center gap-2">
								<GitHubLogoIcon fontSize={10} />
								Star on GitHub
							</div>
							<ArrowRight className="w-4 h-4" />
						</Button>
						<Button
							variant="outline"
							className="w-full justify-between border-t-0"
						>
							<div className="flex items-center gap-2">
								<DiscordLogoIcon />
								Join Discord
							</div>
							<ArrowRight className="w-4 h-4" />
						</Button>
					</div>
				</div>
			</div>
		</div>
	);
}

function FeatureCard({
	icon,
	title,
	description,
}: { icon: ReactNode; title: string; description: string }) {
	return (
		<div className="p-6 rounded-none border border-white/10 bg-white/5 hover:bg-white/10 transition-colors">
			<div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center mb-4">
				{icon}
			</div>
			<h3 className="text-xl font-bold mb-2 font-geist">{title}</h3>
			<p className="text-gray-400">{description}</p>
		</div>
	);
}

function ChangelogItem({
	version,
	date,
	changes,
}: { version: string; date: string; changes: string[] }) {
	return (
		<div className="border-l-2 border-white/10 pl-6 relative">
			<div className="absolute w-3 h-3 bg-white rounded-full -left-[7px] top-2" />
			<div className="flex items-center gap-4 mb-4">
				<h3 className="text-xl font-bold font-geist">{version}</h3>
				<span className="text-sm text-gray-400">{date}</span>
			</div>
			<ul className="space-y-3">
				{changes.map((change, i) => (
					<li key={i} className="text-gray-400">
						{change}
					</li>
				))}
			</ul>
		</div>
	);
}

function ChangeCard({
	title,
	description,
}: { title: string; description: string }) {
	return (
		<Card className="bg-white/5 rounded-none border-white/10 hover:bg-white/10 transition-colors">
			<div className="p-6">
				<h3 className="text-xl font-bold mb-2 font-geist-mono">{title}</h3>
				<p className="text-gray-400 font-geist-mono">{description}</p>
			</div>
		</Card>
	);
}