"use client";

import { formatDistanceToNow } from "date-fns";
import { fr } from "date-fns/locale";
import { Search, Send } from "lucide-react";
import * as React from "react";
import { toast } from "sonner";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useAuth } from "@/providers/auth-provider";
import { useSocket } from "@/providers/socket-provider";
import {
	type Conversation,
	type Message,
	MessageService,
} from "@/services/message.service";

export default function MessagesPage() {
	const { user } = useAuth();
	const { socket } = useSocket();
	const [conversations, setConversations] = React.useState<Conversation[]>([]);
	const [activeConv, setActiveConv] = React.useState<Conversation | null>(null);
	const [messages, setMessages] = React.useState<Message[]>([]);
	const [newMessage, setNewMessage] = React.useState("");
	const [isLoadingConvs, setIsLoadingConvs] = React.useState(true);
	const [isLoadingMsgs, setIsLoadingMsgs] = React.useState(false);
	const scrollRef = React.useRef<HTMLDivElement>(null);

	React.useEffect(() => {
		const fetchConvs = async () => {
			try {
				const data = await MessageService.getConversations();
				setConversations(data);
			} catch (_error) {
				toast.error("Erreur lors du chargement des conversations");
			} finally {
				setIsLoadingConvs(false);
			}
		};
		fetchConvs();
	}, []);

	React.useEffect(() => {
		if (activeConv) {
			const fetchMsgs = async () => {
				setIsLoadingMsgs(true);
				try {
					const data = await MessageService.getMessages(activeConv.id);
					setMessages(data.reverse()); // Plus ancien au plus récent
				} catch (_error) {
					toast.error("Erreur lors du chargement des messages");
				} finally {
					setIsLoadingMsgs(false);
				}
			};
			fetchMsgs();
		}
	}, [activeConv]);

	React.useEffect(() => {
		if (socket) {
			socket.on(
				"new_message",
				(data: { conversationId: string; message: Message }) => {
					if (activeConv?.id === data.conversationId) {
						setMessages((prev) => [...prev, data.message]);
					}
					// Mettre à jour la liste des conversations
					setConversations((prev) => {
						const index = prev.findIndex((c) => c.id === data.conversationId);
						if (index !== -1) {
							const updated = [...prev];
							updated[index] = {
								...updated[index],
								lastMessage: {
									text: data.message.text,
									createdAt: data.message.createdAt,
								},
								updatedAt: data.message.createdAt,
							};
							return updated.sort(
								(a, b) =>
									new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
							);
						}
						return prev;
					});
				},
			);

			return () => {
				socket.off("new_message");
			};
		}
	}, [socket, activeConv]);

	React.useEffect(() => {
		if (scrollRef.current) {
			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
		}
	}, []);

	const handleSendMessage = async (e: React.FormEvent) => {
		e.preventDefault();
		if (!newMessage.trim() || !activeConv) return;

		const text = newMessage.trim();
		setNewMessage("");

		try {
			const msg = await MessageService.sendMessage(
				activeConv.recipient.uuid,
				text,
			);
			setMessages((prev) => [...prev, msg]);
		} catch (_error) {
			toast.error("Erreur lors de l'envoi");
		}
	};

	return (
		<div className="h-[calc(100vh-4rem)] flex overflow-hidden bg-white dark:bg-zinc-950">
			{/* Sidebar - Liste des conversations */}
			<div className="w-80 border-r flex flex-col">
				<div className="p-4 border-b">
					<h2 className="text-xl font-bold mb-4">Messages</h2>
					<div className="relative">
						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
						<Input placeholder="Rechercher..." className="pl-9" />
					</div>
				</div>
				<ScrollArea className="flex-1">
					<div className="p-2 space-y-1">
						{isLoadingConvs ? (
							<div className="p-4 text-center text-sm text-muted-foreground">
								Chargement...
							</div>
						) : conversations.length === 0 ? (
							<div className="p-4 text-center text-sm text-muted-foreground">
								Aucune conversation.
							</div>
						) : (
							conversations.map((conv) => (
								<button
									key={conv.id}
									type="button"
									onClick={() => setActiveConv(conv)}
									className={`w-full flex items-center gap-3 p-3 rounded-xl transition-colors ${
										activeConv?.id === conv.id
											? "bg-primary/10 text-primary"
											: "hover:bg-zinc-100 dark:hover:bg-zinc-900"
									}`}
								>
									<Avatar>
										<AvatarImage src={conv.recipient.avatarUrl} />
										<AvatarFallback>
											{conv.recipient.username[0].toUpperCase()}
										</AvatarFallback>
									</Avatar>
									<div className="flex-1 text-left overflow-hidden">
										<div className="flex justify-between items-baseline">
											<span className="font-bold truncate">
												{conv.recipient.displayName || conv.recipient.username}
											</span>
											{conv.lastMessage && (
												<span className="text-[10px] text-muted-foreground whitespace-nowrap">
													{formatDistanceToNow(new Date(conv.lastMessage.createdAt), {
														locale: fr,
													})}
												</span>
											)}
										</div>
										<p className="text-xs text-muted-foreground truncate">
											{conv.lastMessage?.text || "Démarrer une conversation"}
										</p>
									</div>
								</button>
							))
						)}
					</div>
				</ScrollArea>
			</div>

			{/* Zone de chat */}
			<div className="flex-1 flex flex-col">
				{activeConv ? (
					<>
						{/* Header */}
						<div className="p-4 border-b flex items-center gap-3">
							<Avatar className="h-8 w-8">
								<AvatarImage src={activeConv.recipient.avatarUrl} />
								<AvatarFallback>
									{activeConv.recipient.username[0].toUpperCase()}
								</AvatarFallback>
							</Avatar>
							<div>
								<h3 className="font-bold leading-none">
									{activeConv.recipient.displayName || activeConv.recipient.username}
								</h3>
								<span className="text-xs text-green-500 font-medium">En ligne</span>
							</div>
						</div>

						{/* Messages */}
						<ScrollArea className="flex-1 p-4" viewportRef={scrollRef}>
							<div className="space-y-4">
								{isLoadingMsgs ? (
									<div className="text-center py-4 text-sm text-muted-foreground">
										Chargement...
									</div>
								) : (
									messages.map((msg) => (
										<div
											key={msg.id}
											className={`flex ${
												msg.senderId === user?.uuid ? "justify-end" : "justify-start"
											}`}
										>
											<div
												className={`max-w-[70%] p-3 rounded-2xl text-sm ${
													msg.senderId === user?.uuid
														? "bg-primary text-primary-foreground rounded-br-none"
														: "bg-zinc-100 dark:bg-zinc-800 rounded-bl-none"
												}`}
											>
												<p className="whitespace-pre-wrap">{msg.text}</p>
												<p
													className={`text-[10px] mt-1 ${
														msg.senderId === user?.uuid
															? "text-primary-foreground/70"
															: "text-muted-foreground"
													}`}
												>
													{new Date(msg.createdAt).toLocaleTimeString([], {
														hour: "2-digit",
														minute: "2-digit",
													})}
												</p>
											</div>
										</div>
									))
								)}
							</div>
						</ScrollArea>

						{/* Input */}
						<div className="p-4 border-t">
							<form onSubmit={handleSendMessage} className="flex gap-2">
								<Input
									placeholder="Écrivez un message..."
									value={newMessage}
									onChange={(e) => setNewMessage(e.target.value)}
									className="rounded-full px-4"
								/>
								<Button
									type="submit"
									size="icon"
									className="rounded-full shrink-0"
									disabled={!newMessage.trim()}
								>
									<Send className="h-4 w-4" />
								</Button>
							</form>
						</div>
					</>
				) : (
					<div className="flex-1 flex flex-col items-center justify-center text-center p-8">
						<div className="bg-primary/10 p-6 rounded-full mb-4">
							<Send className="h-12 w-12 text-primary" />
						</div>
						<h2 className="text-2xl font-bold mb-2">Vos messages</h2>
						<p className="text-muted-foreground max-w-sm">
							Sélectionnez une conversation ou démarrez-en une nouvelle pour commencer
							à discuter.
						</p>
					</div>
				)}
			</div>
		</div>
	);
}