import Header from "@/components/Header";
import ProjectPlans from "@/components/plans/ProjectPlans";
import { getProjects } from "@/lib/data";
import Link from "next/link";
import { notFound } from "next/navigation";

export function generateStaticParams() {
	return getProjects().map(p => ({ slug: p.slug }));
}

export default async function ProjectPage({
	params,
}: {
	params: Promise<{ slug: string }>;
}) {
	const { slug } = await params;
	const project = getProjects().find(p => p.slug === slug);
	if (!project) notFound();

	return (
		<div className="min-h-screen bg-background flex flex-col">
			<Header />
			<main className="flex-1 p-6 max-w-3xl mx-auto w-full">
				<Link
					href="/"
					className="inline-flex items-center gap-1 text-sm text-text-secondary hover:text-accent transition-colors mb-8"
				>
					<svg
						className="w-4 h-4"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M15 19l-7-7 7-7"
						/>
					</svg>
					Back to all tools
				</Link>

				<div className="bg-surface border border-border rounded-lg p-8">
					<div className="flex items-start gap-4 mb-6">
						<div className="w-12 h-12 bg-raised rounded-lg flex items-center justify-center text-accent shrink-0">
							<svg
								className="w-7 h-7"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									strokeLinecap="round"
									strokeLinejoin="round"
									strokeWidth={2}
									d={project.icon}
								/>
							</svg>
						</div>
						<div>
							<div className="flex items-center gap-3 mb-1">
								<h1 className="text-2xl font-semibold text-text-primary">
									{project.title}
								</h1>
								{project.wip && (
									<span className="text-xs font-medium px-2 py-0.5 rounded-full bg-warning/15 text-warning">
										WIP
									</span>
								)}
							</div>
							<span
								className={`inline-block text-xs font-medium px-2 py-0.5 rounded-full ${
									project.category === "app"
										? "bg-accent/15 text-accent"
										: "bg-success/15 text-success"
								}`}
							>
								{project.category}
							</span>
						</div>
					</div>

					<p className="text-text-secondary mb-8">
						{project.description}
					</p>

					<div className="flex flex-wrap gap-3">
						{project.url && (
							<a
								href={project.url}
								target="_blank"
								rel="noopener noreferrer"
								className="inline-flex items-center gap-2 px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-hover transition-colors"
							>
								<svg
									className="w-4 h-4"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										strokeWidth={2}
										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
									/>
								</svg>
								Open App
							</a>
						)}
						<a
							href={project.github}
							target="_blank"
							rel="noopener noreferrer"
							className="inline-flex items-center gap-2 px-4 py-2 bg-raised border border-border rounded-lg text-sm text-text-primary hover:border-accent hover:text-accent transition-colors"
						>
							<svg
								className="w-4 h-4"
								fill="currentColor"
								viewBox="0 0 24 24"
							>
								<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
							</svg>
							GitHub
						</a>
						{project.link && (
							<a
								href={project.link}
								target="_blank"
								rel="noopener noreferrer"
								className="inline-flex items-center gap-2 px-4 py-2 bg-raised border border-border rounded-lg text-sm text-text-primary hover:border-accent hover:text-accent transition-colors"
							>
								<svg
									className="w-4 h-4"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										strokeWidth={2}
										d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
									/>
								</svg>
								Link
							</a>
						)}
						{project.deployment && (
							<a
								href={project.deployment}
								target="_blank"
								rel="noopener noreferrer"
								className="inline-flex items-center gap-2 px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-hover transition-colors"
							>
								<svg
									className="w-4 h-4"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										strokeWidth={2}
										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
									/>
								</svg>
								Open App
							</a>
						)}
					</div>
				</div>

				<ProjectPlans slug={project.slug} />
			</main>
		</div>
	);
}