import Link from "next/link";
import React, { Dispatch, SetStateAction } from "react";
import { TbHexagon } from "react-icons/tb";

import Event from "@appTypes/Event";
import getMagnitudeColor from "@utils/getMagnitudeColour";

interface SidebarProps {
	logTitle: string;
	logSubtitle: string;
	recentsTitle: string;
	events: Event[];
	selectedEventId: Event["id"];
	setSelectedEventId: Dispatch<SetStateAction<string>>;
	hoveredEventId: Event["id"];
	setHoveredEventId: Dispatch<SetStateAction<string>>;
	button1Name: string;
	button2Name: string;
}

function MagnitudeNumber({ magnitude }: { magnitude: number }) {
	// Convert magnitude to string with one decimal place
	const magnitudeStr = magnitude.toFixed(1);
	const [whole, decimal] = magnitudeStr.split(".");

	// Define color based on magnitude (0-10 scale)
	return (
		<div className={`relative`} style={{ color: getMagnitudeColor(magnitude) }}>
			<TbHexagon size={40} className="drop-shadow-sm" />
			<div className="absolute inset-0 flex items-center justify-center">
				<div className="flex items-baseline font-mono font-bold tracking-tight">
					<span className="text-xl -mr-1">{whole}</span>
					<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
					<span className="text-xs -mr-[1px]">{decimal}</span>
				</div>
			</div>
		</div>
	);
}

export default function Sidebar({
	logTitle,
	logSubtitle,
	recentsTitle,
	events,
	selectedEventId,
	setSelectedEventId,
	hoveredEventId,
	setHoveredEventId,
	button1Name,
	button2Name,
}: SidebarProps) {
	return (
		<div className={`flex flex-col h-full w-80 relative bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg`}>
			<div className="py-6">
				<div className="px-6 pb-8 border-b border-neutral-200">
					<h2 className={`text-2xl font-bold text-neutral-800 mb-2`}>{logTitle}</h2>
					<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>

					<Link href="/">
						<button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
							{button1Name}
						</button>
					</Link>
					<Link href="/">
						<button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
							{button2Name}
						</button>
					</Link>
				</div>

				<div className="flex-1 px-6 pt-6 overflow-y-auto">
					<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
					<div className="space-y-3">
						{events.map((event) => (
							<button
								key={event.title}
								className={`w-full border ${hoveredEventId === event.id ? "bg-neutral-100" : "bg-white"} ${
									selectedEventId === event.id ? "border-neutral-800" : "border-neutral-200"
								} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 shadow-sm text-left`}
								onClick={() => {
									setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
								}}
								onMouseEnter={() => setHoveredEventId(event.id)}
								onMouseLeave={() => setHoveredEventId("")}
							>
								<div className="flex-1">
									<p className="text-sm font-medium text-neutral-800">{event.title}</p>
									{/* Uncomment if you want to use text1 */}
									{/* <p className="text-xs text-neutral-600">{event.text1}</p> */}
									<p className="text-xs text-neutral-500 mt-1">{event.text2}</p>
								</div>
								{event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
							</button>
						))}
					</div>
				</div>
			</div>
		</div>
	);
}
