import Image from 'next/image';
import { FiClock, FiTag } from 'react-icons/fi';
import ReactMarkdown from 'react-markdown';
import PagesMetaHead from '../../components/PagesMetaHead';
import RelatedProjects from '../../components/projects/RelatedProjects';

const API_BASE_URL =
	process.env.API_INTERNAL_URL || 'http://localhost:7341';

function ProjectSingle(props) {
	return (
		<div className="container mx-auto">
			<PagesMetaHead title={props.project.title} />

			{/* Header */}
			<div>
				<p className="font-general-medium text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-14 sm:mt-20 mb-7">
					{props.project.ProjectHeader.title}
				</p>
				<div className="flex">
					<div className="flex items-center mr-10">
						<FiClock className="text-xl text-ternary-dark dark:text-ternary-light" />
						<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
							{props.project.ProjectHeader.publishDate}
						</span>
					</div>
					<div className="flex items-center">
						<FiTag className="w-4 h-4 text-ternary-dark dark:text-ternary-light" />
						<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
							{props.project.ProjectHeader.tags}
						</span>
					</div>
				</div>
			</div>

			{/* Gallery */}
			<div className="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
				{props.project.ProjectImages.map((project) => {
					return (
						<div className="mb-10 sm:mb-0" key={project.id}>
							<Image
								src={project.img}
								className="rounded-xl cursor-pointer shadow-lg sm:shadow-none"
								alt={project.title}
								sizes="100vw"
								style={{ width: '100%', height: 'auto' }}
								width={100}
								height={90}
							/>
						</div>
					);
				})}
			</div>

			{/* Info */}
			<div className="block sm:flex gap-0 sm:gap-10 mt-14">
				<div className="w-full sm:w-1/3 text-left">
					{/* Single project client details */}
					<div className="mb-7">
						<p className="font-general-regular text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
							{props.project.ProjectInfo.ClientHeading}
						</p>
						<ul className="leading-loose">
							{props.project.ProjectInfo.CompanyInfo.map(
								(info) => {
									const isUrl = /^https?:\/\//i.test(info.details);
									return (
										<li
											className="font-general-regular text-ternary-dark dark:text-ternary-light"
											key={info.id}
										>
											<span>{info.title}: </span>
											{isUrl ? (
												<a
													href={info.details}
													target="_blank"
													rel="noopener noreferrer"
													className="hover:underline hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer duration-300 break-all"
													aria-label={`${info.title}: ${info.details}`}
												>
													{info.details}
												</a>
											) : (
												<span>{info.details}</span>
											)}
										</li>
									);
								}
							)}
						</ul>
					</div>

					{/* Single project objectives */}
					<div className="mb-7">
						<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
							{props.project.ProjectInfo.ObjectivesHeading}
						</p>
						<p className="font-general-regular text-primary-dark dark:text-ternary-light">
							{props.project.ProjectInfo.ObjectivesDetails}
						</p>
					</div>

					{/* Single project technologies */}
					<div className="mb-7">
						<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
							{props.project.ProjectInfo.Technologies[0].title}
						</p>
						<p className="font-general-regular text-primary-dark dark:text-ternary-light">
							{props.project.ProjectInfo.Technologies[0].techs.join(
								', '
							)}
						</p>
					</div>

				</div>

				{/*  Single project right section details */}
				<div className="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
					<p className="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
						{props.project.ProjectInfo.ProjectDetailsHeading}
					</p>
					{props.project.ProjectInfo.ProjectDetails.map((details) => {
						return (
							<div
								key={details.id}
								className="prose dark:prose-invert max-w-none mb-5 font-general-regular text-ternary-dark dark:text-ternary-light prose-headings:text-primary-dark dark:prose-headings:text-primary-light prose-strong:text-primary-dark dark:prose-strong:text-primary-light prose-h2:text-xl prose-h2:font-semibold prose-h2:mb-2 prose-h2:mt-4 prose-h3:text-base prose-h3:font-semibold prose-h3:mb-1 prose-h3:mt-3"
							>
								<ReactMarkdown>{details.details}</ReactMarkdown>
							</div>
						);
					})}
				</div>
			</div>

			<RelatedProjects projects={props.relatedProjects} />
		</div>
	);
}

export async function getServerSideProps({ query }) {
	const { url } = query;
	try {
		const res = await fetch(`${API_BASE_URL}/api/projects/${url}`);
		if (res.status === 404) {
			// 존재하지 않는 슬러그는 Next.js 404 로 응답
			return { notFound: true };
		}
		if (!res.ok) {
			// 5xx 등 비정상 응답은 404 로 위장하지 않고 Next.js 에러 페이지로 드러낸다
			throw new Error(`[project detail] API returned ${res.status}`);
		}
		const body = await res.json();
		const project = body?.data;
		if (!project) {
			return { notFound: true };
		}

		// Related projects 는 보조 섹션이므로 실패해도 메인 페이지 렌더를 막지 않는다
		let relatedProjects = [];
		try {
			const category = encodeURIComponent(project.category);
			const relRes = await fetch(
				`${API_BASE_URL}/api/projects?category=${category}`
			);
			if (relRes.ok) {
				const relBody = await relRes.json();
				relatedProjects = (relBody?.data ?? [])
					.filter((p) => p.url !== url)
					.slice(0, 4);
			}
		} catch (relErr) {
			console.error('[project detail] fetch related failed', relErr);
		}

		return { props: { project, relatedProjects } };
	} catch (err) {
		console.error('[project detail] fetch failed', err);
		throw err;
	}
}

export default ProjectSingle;