import React, { useState, useEffect, useRef } from "react";
import Input from "../Input/Input";
import Button, { ToggleButton } from "../Input/Button";
import AuthModal from "../Auth/AuthModal";
import { useAuthModal } from "../../hooks/useAuthModal";
import { useAuth } from "../../context/AuthContext";
import { useSocket } from "../../context/SocketContext";
import { useChat } from "../../context/ChatContext";
import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon, CrownIcon } from "lucide-react";

interface ChatMessage {
	chatter_username: string;
	message: string;
	time_sent: string;
	is_subscribed: boolean;
}

interface ChatPanelProps {
	streamId: number;
	onViewerCountChange?: (count: number) => void;
}

const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange }) => {
	const { isLoggedIn, username, userId } = useAuth();
	const { showChat, setShowChat } = useChat();
	const { showAuthModal, setShowAuthModal } = useAuthModal();
	const { socket, isConnected } = useSocket();
	const [messages, setMessages] = useState<ChatMessage[]>([]);
	const [inputMessage, setInputMessage] = useState("");
	const chatContainerRef = useRef<HTMLDivElement>(null);
	const [justToggled, setJustToggled] = useState(false);
	const subscribedUsersRef = useRef<Record<string, boolean>>({});

	// Join chat room when component mounts
	useEffect(() => {
		if (socket && isConnected) {
			// Add username check
			socket.emit("join", {
				userId: userId ? userId : null,
				username: username ? username : "Guest",
				stream_id: streamId,
			});

			// Handle beforeunload event
			const handleBeforeUnload = () => {
				socket.emit("leave", {
					userId: userId ? userId : null,
					username: username ? username : "Guest",
					stream_id: streamId,
				});
				socket.disconnect();
			};

			window.addEventListener("beforeunload", handleBeforeUnload);

			// Load initial chat history
			fetch(`/api/chat/${streamId}`)
				.then((response) => {
					if (!response.ok) throw new Error("Failed to fetch chat history");
					return response.json();
				})
				.then((data) => {
					if (data.chat_history) {
						// Store subscription status for each user
						data.chat_history.forEach((msg: ChatMessage) => {
							if (msg.is_subscribed) {
								subscribedUsersRef.current[msg.chatter_username] = true;
							}
						});
						setMessages(data.chat_history);
					}
				})
				.catch((error) => {
					console.error("Error loading chat history:", error);
				});

			// Handle incoming messages
			socket.on("new_message", (data: ChatMessage) => {
				// If subscription info is missing, use our stored knowledge
				if (data.is_subscribed === undefined) {
					data.is_subscribed = !!subscribedUsersRef.current[data.chatter_username];
				} else if (data.is_subscribed) {
					// Update our subscription tracking
					subscribedUsersRef.current[data.chatter_username] = true;
				}
				
				setMessages((prev) => [...prev, data]);
			});

			// Handle live viewership
			socket.on("status", (data: any) => {
				if (onViewerCountChange && data.num_viewers) {
					onViewerCountChange(data.num_viewers);
				}
			});

			// Cleanup function
			return () => {
				window.removeEventListener("beforeunload", handleBeforeUnload);
				socket.emit("leave", { stream_id: streamId });
				socket.disconnect();
			};
		}
	}, [socket, isConnected, userId, username, streamId]);

	// Auto-scroll to bottom when new messages arrive
	useEffect(() => {
		if (chatContainerRef.current) {
			chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
		}
	}, [messages]);

	// Keyboard shortcut to toggle chat
	useEffect(() => {
		const handleKeyPress = (e: KeyboardEvent) => {
			if (e.key === "c" && document.activeElement == document.body) {
				toggleChat();
			}
		};

		document.addEventListener("keydown", handleKeyPress);

		return () => {
			document.removeEventListener("keydown", handleKeyPress);
		};
	}, [showChat]);

	const toggleChat = () => {
		setShowChat(!showChat);
		setJustToggled(true);
		setTimeout(() => setJustToggled(false), 200);
	};

	const sendChat = () => {
		if (!inputMessage.trim() || !socket || !isConnected) {
			console.log("Invalid message or socket not connected");
			return;
		}

		socket.emit("send_message", {
			username: username,
			stream_id: streamId,
			message: inputMessage.trim(),
		});

		setInputMessage("");
	};

	const handleKeyPress = (e: React.KeyboardEvent) => {
		if (e.key === "Enter" && !e.shiftKey) {
			e.preventDefault();
			sendChat();
		}
	};

	return (
		<div
			id="chat-panel"
			className="relative max-w-[30vw] max-h-[83vh] flex flex-col rounded-lg p-[2vh] justify-between"
			style={{ gridArea: "1 / 2 / 3 / 3" }}
		>
			{/* Toggle Button for Chat */}
			<button
				onClick={toggleChat}
				className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${
					showChat ? "" : "delay-[0.75s] -translate-x-[4vw]"
				} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[20] duration-[0.3s] transition-all`}
			>
				{showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}

				<small
					className={`absolute ${
						showChat
							? justToggled
								? "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"
								: "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80"
							: justToggled
							? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80"
							: "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"
					} p-1 rounded-md w-fit text-nowrap font-bold opacity-0 group-hover:opacity-100 text-white transition-all`}
				>
					Press C
				</small>
			</button>

			{/* Chat Header */}
			<h2 className="cursor-default text-xl font-bold mb-4 text-white text-center flex-none">Stream Chat</h2>

			{/* Message List */}
			<div ref={chatContainerRef} id="chat-message-list" className="w-full h-full overflow-y-auto mb-4 space-y-2 rounded-md">
				{messages.map((msg, index) => (
					<div key={index} className="flex items-start space-x-2 bg-gray-800 rounded p-2 text-white relative">
						{/* User avatar with image */}
						<div
							className={`w-2em h-2em rounded-full overflow-hidden flex-shrink-0 ${
								msg.chatter_username === username ? "" : "cursor-pointer"
							}`}
							onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
						>
							<img
								src={`/user/${msg.chatter_username}/profile_picture`}
								onError={(e) => {
									e.currentTarget.src = "/images/pfps/default.png";
									e.currentTarget.onerror = null;
								}}
								alt="User Avatar"
								className="w-full h-full object-cover"
								style={{ width: "2.5em", height: "2.5em" }}
							/>
						</div>

						<div className="flex-grow overflow-hidden">
							<div className="flex items-center space-x-0.5em">
								{/* Username */}
								<span
									className={`flex items-center gap-2 font-bold text-[1em] ${
										msg.chatter_username === username ? "text-purple-600" : "text-green-400 cursor-pointer"
									}`}
									onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
								>
									{msg.chatter_username}
									{msg.is_subscribed && <CrownIcon size={20} color="gold" />}
								</span>
							</div>
							{/* Message content */}
							<div className="message w-full text-[0.9em] mt-0.5em flex flex-col overflow-hidden">{msg.message}</div>
						</div>

						{/* Time sent */}
						<div className="text-gray-500 text-[0.8em] absolute top-0 right-0 p-2">
							{new Date(msg.time_sent).toLocaleTimeString("en-GB", {
								hour12: false,
								hour: "2-digit",
								minute: "2-digit",
							})}
						</div>
					</div>
				))}
			</div>

			{/* Input area */}
			<div className="flex-none flex justify-center gap-2">
				{isLoggedIn ? (
					<>
						<Input
							type="text"
							value={inputMessage}
							onChange={(e) => setInputMessage(e.target.value)}
							onKeyDown={handleKeyPress}
							placeholder="Type a message..."
							extraClasses="flex-grow w-full focus:w-full"
							maxLength={200}
							onClick={() => !isLoggedIn && setShowAuthModal(true)}
						/>

						<button onClick={sendChat} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
							Send
						</button>
					</>
				) : (
					<Button extraClasses="text-[1rem] flex items-center flex-nowrap" onClick={() => setShowAuthModal(true)}>
						Login to Chat
					</Button>
				)}
			</div>
			{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
		</div>
	);
};

export default ChatPanel;