"use client";

import React, { useState, useEffect } from "react";
import {
	BookOpen,
	Code2,
	Globe,
	ChevronRight,
	Sparkles,
	Terminal,
} from "lucide-react";
import KomposeIcon from "@/components/icons/KomposeIcon";
import { PivoineDocsIcon } from "@/components/icons";

export default function DocsHub() {
	const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
	const [isHovering, setIsHovering] = useState<string | null>(null);

	useEffect(() => {
		const handleMouseMove = (e: MouseEvent) => {
			setMousePosition({
				x: (e.clientX / window.innerWidth) * 20 - 10,
				y: (e.clientY / window.innerHeight) * 20 - 10,
			});
		};
		window.addEventListener("mousemove", handleMouseMove);
		return () => window.removeEventListener("mousemove", handleMouseMove);
	}, []);

	const projects = [
		{
			name: "Kompose",
			status: "Active",
			description: "Comprehensive documentation for Kompose project",
			url: "/kompose",
			gradient: "from-violet-500 to-purple-600",
		},
	];

	const links = [
		{
			title: "Valknar's Blog",
			icon: Globe,
			url: "http://pivoine.art",
			gradient: "from-pink-500 to-rose-600",
		},
		{
			title: "Source Code",
			icon: Code2,
			url: "https://code.pivoine.art",
			gradient: "from-cyan-500 to-blue-600",
		},
	];

	return (
		<div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900 text-white overflow-hidden">
			{/* Animated background orbs */}
			<div className="fixed inset-0 overflow-hidden pointer-events-none">
				<div
					className="absolute w-96 h-96 bg-purple-500/20 rounded-full blur-3xl top-0 -left-48 animate-pulse"
					style={{
						transform: `translate(${mousePosition.x}px, ${mousePosition.y}px)`,
						transition: "transform 0.3s ease-out",
					}}
				/>
				<div
					className="absolute w-96 h-96 bg-pink-500/20 rounded-full blur-3xl bottom-0 -right-48 animate-pulse"
					style={{
						transform: `translate(${-mousePosition.x}px, ${-mousePosition.y}px)`,
						transition: "transform 0.3s ease-out",
						animationDelay: "1s",
					}}
				/>
				<div
					className="absolute w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse"
					style={{ animationDelay: "0.5s" }}
				/>
			</div>

			{/* Main content */}
			<div className="relative z-10 container mx-auto px-6 py-12 max-w-6xl">
				{/* Header */}
				<header className="text-center mb-20 pt-12">
					{/* Hero Icon */}
					<div className="flex justify-center mb-8">
						<PivoineDocsIcon
							size="200px"
							showLabel={false}
							interactive={true}
						/>
					</div>

					<div className="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-white/5 backdrop-blur-sm rounded-full border border-white/10">
						<Sparkles className="w-4 h-4 text-purple-400" />
						<span className="text-sm text-purple-300">Documentation Hub</span>
					</div>

					<h1 className="text-7xl font-bold mb-6 bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent animate-pulse">
						Pivoine Docs
					</h1>

					<p className="text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
						Comprehensive documentation for all projects by{" "}
						<span className="text-purple-400 font-semibold">Valknar</span>.
						Explore technical guides, API references, and tutorials.
					</p>
				</header>

				{/* Projects Grid */}
				<section className="mb-20">
					<div className="flex items-center gap-3 mb-8">
						<Terminal className="w-6 h-6 text-purple-400" />
						<h2 className="text-3xl font-bold">Project Documentation</h2>
					</div>

					<div className="grid md:grid-cols-2 gap-6">
						{projects.map((project, idx) => (
							<a
								key={idx}
								href={project.url}
								onMouseEnter={() => setIsHovering(project.name)}
								onMouseLeave={() => setIsHovering(null)}
								className="group relative bg-white/5 backdrop-blur-md rounded-2xl p-8 border border-white/10 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20"
							>
								<div
									className="absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-10 rounded-2xl transition-opacity duration-300"
									style={{
										background: `linear-gradient(135deg, rgb(168, 85, 247), rgb(147, 51, 234))`,
									}}
								/>

								<div className="relative">
									<div className="flex items-start justify-between mb-4">
										{project.name === "Kompose" ? (
											<div
												className={`relative w-14 h-14 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg flex items-center justify-center`}
											>
												<KomposeIcon
													size="36px"
													interactive={false}
													className=""
												/>
											</div>
										) : (
											<div
												className={`p-3 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg`}
											>
												<BookOpen className="w-8 h-8 text-white" />
											</div>
										)}
										<span className="px-3 py-1 bg-emerald-500/20 text-emerald-300 rounded-full text-sm border border-emerald-500/30">
											{project.status}
										</span>
									</div>

									<h3 className="text-2xl font-bold mb-3 group-hover:text-purple-300 transition-colors">
										{project.name}
									</h3>

									<p className="text-gray-400 mb-4 leading-relaxed">
										{project.description}
									</p>

									<div className="flex items-center text-purple-400 font-semibold group-hover:gap-3 gap-2 transition-all">
										Read docs
										<ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
									</div>
								</div>
							</a>
						))}

						{/* Coming Soon Card */}
						<div className="relative bg-white/5 backdrop-blur-md rounded-2xl p-8 border border-dashed border-white/20">
							<div className="opacity-60">
								<div className="p-3 rounded-xl bg-gradient-to-br from-gray-600 to-gray-700 w-fit mb-4">
									<BookOpen className="w-8 h-8 text-white" />
								</div>
								<h3 className="text-2xl font-bold mb-3 text-gray-400">
									More Projects
								</h3>
								<p className="text-gray-500 leading-relaxed">
									Additional documentation sites coming soon...
								</p>
							</div>
						</div>
					</div>
				</section>

				{/* External Links */}
				<section>
					<div className="flex items-center gap-3 mb-8">
						<Sparkles className="w-6 h-6 text-pink-400" />
						<h2 className="text-3xl font-bold">Explore More</h2>
					</div>

					<div className="grid md:grid-cols-2 gap-6">
						{links.map((link, idx) => {
							const Icon = link.icon;
							return (
								<a
									key={idx}
									href={link.url}
									target="_blank"
									rel="noopener noreferrer"
									className="group bg-white/5 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:border-pink-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20 flex items-center gap-4"
								>
									<div
										className={`p-4 rounded-xl bg-gradient-to-br ${link.gradient} shadow-lg group-hover:scale-110 transition-transform`}
									>
										<Icon className="w-7 h-7 text-white" />
									</div>
									<div className="flex-1">
										<h3 className="text-xl font-bold group-hover:text-pink-300 transition-colors">
											{link.title}
										</h3>
										<p className="text-gray-400 text-sm">{link.url}</p>
									</div>
									<ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-pink-400 group-hover:translate-x-1 transition-all" />
								</a>
							);
						})}
					</div>
				</section>

				{/* Footer */}
				<footer className="mt-20 pt-8 border-t border-white/10 text-center text-gray-400">
					<p className="text-sm">
						Crafted with passion by{" "}
						<span className="text-purple-400 font-semibold">Valknar</span> ·
						<a
							href="http://pivoine.art"
							className="hover:text-purple-300 transition-colors ml-1"
						>
							pivoine.art
						</a>
					</p>
				</footer>
			</div>
		</div>
	);
}