"use client";

import type { RealWork } from "../types";

interface WorkExperienceProps {
	realWork: RealWork[];
}

function getWorkDateTimestamp(dateValue?: string) {
	if (!dateValue) return Number.NEGATIVE_INFINITY;
	const timestamp = Date.parse(dateValue);
	return Number.isNaN(timestamp) ? Number.NEGATIVE_INFINITY : timestamp;
}

function getSortTimestamp(entry: RealWork) {
	if (!entry.until || entry.until.trim().toLowerCase() === "present") {
		return Number.POSITIVE_INFINITY;
	}
	const untilTimestamp = getWorkDateTimestamp(entry.until);
	if (untilTimestamp !== Number.NEGATIVE_INFINITY) return untilTimestamp;
	return getWorkDateTimestamp(entry.from);
}

function formatWorkDate(dateValue: string) {
	const yearMonthMatch = /^(\d{4})-(\d{2})$/.exec(dateValue.trim());
	if (yearMonthMatch) {
		const year = Number.parseInt(yearMonthMatch[1], 10);
		const monthIndex = Number.parseInt(yearMonthMatch[2], 10) - 1;
		if (monthIndex >= 0 && monthIndex <= 11) {
			return new Date(Date.UTC(year, monthIndex, 1)).toLocaleDateString("en-US", {
				year: "numeric",
				month: "short",
				timeZone: "UTC",
			});
		}
	}

	const timestamp = Date.parse(dateValue);
	if (Number.isNaN(timestamp)) return dateValue;
	return new Date(timestamp).toLocaleDateString("en-US", {
		year: "numeric",
		month: "short",
	});
}

export function WorkExperience({ realWork }: WorkExperienceProps) {
	const sortedRealWork = [...realWork].sort(
		(a, b) =>
			getSortTimestamp(b) - getSortTimestamp(a) ||
			getWorkDateTimestamp(b.from) - getWorkDateTimestamp(a.from),
	);

	return (
		<section className="w-full max-w-4xl mx-auto px-4 space-y-6 sm:space-y-8">
			<div className="text-center space-y-2">
				<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-3xl">
					Work Experience
				</h2>
				<p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
					Actual work that i did at actual companies.
				</p>
			</div>

			{realWork.length === 0 ? (
				<div className="rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-blue-500/5 p-5 text-center backdrop-blur-sm sm:p-6 md:p-8">
					<p className="text-gray-300">No work experience entries available yet.</p>
				</div>
			) : (
				<div className="space-y-4">
					{sortedRealWork.map((entry, index) => (
						<div
							key={`${entry.company}-${index}`}
							className="mx-auto w-full max-w-[20rem] space-y-4 rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-blue-500/5 p-5 backdrop-blur-sm sm:max-w-none sm:space-y-5 sm:p-6 md:p-8"
						>
							<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
								<div>
									<h3 className="text-xl font-semibold text-white sm:text-2xl">{entry.company}</h3>
									{entry.role ? (
										<p className="text-sm font-medium text-cyan-200/90 mt-1">{entry.role}</p>
									) : null}
									{entry.from || entry.until ? (
										<p className="text-xs font-medium uppercase tracking-wide text-cyan-300/80 mt-1">
											{entry.from ? formatWorkDate(entry.from) : "Unknown"} -{" "}
											{entry.until
												? entry.until.trim().toLowerCase() === "present"
													? "Present"
													: formatWorkDate(entry.until)
												: "Present"}
										</p>
									) : null}
								</div>
								{entry.url ? (
									<a
										href={entry.url}
										target="_blank"
										rel="noreferrer"
										className="inline-flex items-center gap-2 self-start sm:self-auto rounded-full border border-cyan-400/30 bg-cyan-400/10 px-3 py-1.5 text-sm font-medium text-cyan-200 hover:bg-cyan-400/20 hover:border-cyan-300/50 transition-colors"
									>
										<span>{new URL(entry.url).hostname.replace(/^www\./, "")}</span>
										<svg
											viewBox="0 0 20 20"
											fill="currentColor"
											aria-hidden="true"
											className="h-4 w-4"
										>
											<path d="M5 6.75A1.75 1.75 0 0 1 6.75 5h2a.75.75 0 0 0 0-1.5h-2A3.25 3.25 0 0 0 3.5 6.75v6.5A3.25 3.25 0 0 0 6.75 16.5h6.5a3.25 3.25 0 0 0 3.25-3.25v-2a.75.75 0 0 0-1.5 0v2A1.75 1.75 0 0 1 13.25 15h-6.5A1.75 1.75 0 0 1 5 13.25v-6.5Z" />
											<path d="M11.25 3.5a.75.75 0 0 0 0 1.5h2.69l-4.72 4.72a.75.75 0 1 0 1.06 1.06L15 6.06v2.69a.75.75 0 0 0 1.5 0V3.5h-5.25Z" />
										</svg>
									</a>
								) : null}
							</div>

							<p className="text-gray-300 leading-relaxed">{entry.summary}</p>

							{entry.tags && entry.tags.length > 0 ? (
								<div className="flex flex-wrap gap-2">
									{entry.tags.map((tag) => (
										<span
											key={`${entry.company}-${tag}`}
											className="px-3 py-1 rounded-full text-xs font-semibold bg-cyan-500/20 text-cyan-200 border border-cyan-500/30"
										>
											{tag}
										</span>
									))}
								</div>
							) : null}
						</div>
					))}
				</div>
			)}
		</section>
	);
}
