{% extends 'core/base/base.html' %}
{% load form_tags %}
{% load static %}
{% load jalali_tags %}
{% load jalali_extras %}
{% block header %}
<style>
.highlight-msg {
    background-color: #e2e8f0; /* خاکستری روشن */
    transition: background-color 4.1s ease;
}

</style>
{% endblock header %}
{% block content %}
<div x-data="chat">
	<div class="relative flex h-full gap-5 sm:h-[calc(100vh_-_150px)] sm:min-h-0 min-h-[999px]">
		<div x-data="{ search: '' }" class="panel absolute z-10 w-full max-w-xs flex-none space-y-4 overflow-hidden p-4 xl:relative xl:block xl:h-full">
			<div class="flex items-center justify-between">
				<div class="flex items-center">
					<div class="flex-none">
						<img src="{% if request.user.image %}{{request.user.image.url}}{% else %}{% static 'assets/images/user-no-photo.png' %}{% endif %}"  class="h-12 w-12 rounded-full object-cover" />
					</div>
					<div class="mx-3">
						<p class="mb-1 font-semibold">{{request.user}}</p>
						<p class="text-xs text-white-dark">{{request.user.get_role_display}}</p>
					</div>
				</div>
			</div>

			<!-- سرچ -->
			<div class="relative">
				<input type="text" x-model="search" class="peer form-input ltr:pr-9 rtl:pl-9" placeholder="جستجو..." />
				<div class="absolute top-1/2 -translate-y-1/2 peer-focus:text-primary ltr:right-2 rtl:left-2">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
						<circle cx="11.5" cy="11.5" r="9.5" stroke="currentColor" stroke-width="1.5" opacity="0.5"></circle>
						<path d="M18.5 18.5L22 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
					</svg>
				</div>
			</div>

			<div class="h-px w-full border-b border-[#e0e6ed] dark:border-[#1b2e4b]"></div>

			<div class="!mt-0">
				<div class="chat-users perfect-scrollbar relative -mr-3.5 h-full min-h-[100px] space-y-0.5 pr-3.5 sm:h-[calc(100vh_-_357px)]">
					{% for chat in chats %}
					<{% if this_chat.id == chat.id %}div {% else %}a  {% endif %} type="button" href="{{chat.admin_url}}" class="flex w-full items-center justify-between rounded-md p-2 {% if this_chat.id == chat.id %} bg-gray-100 text-primary dark:bg-[#050b14] dark:text-primary {% endif %} hover:bg-gray-100 hover:text-primary dark:hover:bg-[#050b14] dark:hover:text-primary" x-show="'{{ chat.other_user.name|default:chat.other_user.username }} {{ chat.last_message.content|default:"هنوز پیامی ارسال نشده" }}'.toLowerCase().includes(search.toLowerCase())">
						<div class="flex-1">
							<div class="flex items-center">
								<div class="relative flex-shrink-0">
									<img src="{% if chat.other_user.image %}{{ chat.other_user.image.url }}{% else %}{% static 'assets/images/user-no-photo.png' %}{% endif %}" class="h-12 w-12 rounded-full object-cover" />
									{% if chat.other_user.profile.is_active %}
										<div class="absolute bottom-0 ltr:right-0 rtl:left-0">
											<div class="h-4 w-4 rounded-full bg-success"></div>
										</div>
									{% endif %}
								</div>

								<div class="mx-3 ltr:text-left rtl:text-right">
									<p class="mb-1 font-semibold">{{chat.other_user.name}}</p>
									<p class="max-w-[185px] truncate text-xs text-white-dark">{{ chat.last_message.display_content|slice:25|default:"هنوز پیامی ارسال نشده" }}</p>
								</div>
							</div>
						</div>

						<div class="whitespace-nowrap font-semibold">
							{% if chat.last_message %}
								<p class="text-[10px]">{{ chat.last_message.created_at|to_jalali:'%H:%m %y/%m/%d' }}</p>
							{% else %}
								<p class="text-[10px]">{{ chat.updated_at|to_jalali:'%H:%m %y/%m/%d' }}</p>
							{% endif %}
						</div>
					</{% if this_chat.id == chat.id %}div {% else %}a {% endif %}>
					{% endfor %}
				</div>
			</div>
		</div>
		<div class="panel flex-1 p-0">
			<div class="relative h-full">
				<!-- Header با اطلاعات کاربر مقابل -->
				<div class="flex items-center justify-between p-4">
					<div class="flex items-center space-x-2 rtl:space-x-reverse">
						<div class="relative flex-none">
							<img src="{% if this_chat.other_user.image %}{{ this_chat.other_user.image.url }}{% else %}{% static 'assets/images/user-no-photo.png' %}{% endif %}" 
								class="h-10 w-10 rounded-full object-cover sm:h-12 sm:w-12" />
							{% if this_chat.other_user.profile.is_active %}
							<div class="absolute bottom-0 ltr:right-0 rtl:left-0">
								<div class="h-4 w-4 rounded-full bg-success"></div>
							</div>
							{% endif %}
						</div>
						<div class="mx-3">
							<p class="font-semibold">{{ this_chat.other_user}}</p>
							<p class="text-xs text-white-dark">
								آخرین بازدید در {{ this_chat.other_user.last_seen|to_jalali:'%H:%m:%S %Y/%m/%d'}}
							</p>
						</div>
					</div>
				</div>

				<div class="h-px w-full border-b border-[#e0e6ed] dark:border-[#1b2e4b]"></div>

				<!-- نمایش پیام‌ها -->
				<div id="chat_body" class="perfect-scrollbar relative h-full overflow-auto sm:h-[calc(100vh_-_300px)] pb-14">
					<div class="chat-conversation-box min-h-[400px] space-y-5 p-4 pb-[68px] sm:min-h-[300px] sm:pb-0">
						{% for day, messages in grouped_messages.items %}
							<div class="m-6 mt-0 block">
								<h4 class="relative border-b border-[#f4f4f4] text-center text-xs dark:border-gray-800">
									<span class="relative top-2 bg-white px-3 dark:bg-[#0e1726] font-bold">{{ day }}</span>
								</h4>
							</div>

							{% for message in messages %}
								<div id="msg-{{ message.id }}" class="flex items-start rounded-lg gap-3 p-2 w-3/5 {% if message.sender == request.user %}justify-end float-end{% endif %}">
									<div class="flex-none {% if message.sender == request.user %}order-2{% endif %}">
										<img src="{% if message.sender.image %}{{ message.sender.image.url }}{% else %}{% static 'assets/images/user-no-photo.png' %}{% endif %}" class="h-10 w-10 rounded-full object-cover" />
									</div>

									<div class="space-y-2">
										{% if message.reply_to %}
											<div class="text-xs text-gray-500 p-2 rounded bg-gray-100 cursor-pointer hover:bg-gray-200 w-[92%]"
												onclick="scrollToMessage('{{ message.reply_to.id }}')">
												پاسخ به: {{ message.reply_to.text|truncatechars:50 }}
											</div>
										{% endif %}

										<div class="flex items-center gap-3">
											<div class="rounded-md p-4 py-2 {% if message.sender == request.user %}ltr:rounded-br-none rtl:rounded-bl-none bg-primary text-white{% else %}ltr:rounded-bl-none rtl:rounded-br-none bg-black/10 dark:bg-gray-800{% endif %}">
												<p class="text-justify">{{ message.text }}</p>
												{% if message.file %}
													{% with message.file.url as file_url %}
														{% with file_url|lower as file_lower %}
															{% if ".jpg" in file_lower or ".jpeg" in file_lower or ".png" in file_lower or ".gif" in file_lower or ".webp" in file_lower %}
																<!-- نمایش تصویر -->
																<div class="mt-1">
																	<img src="{{ file_url }}" alt="تصویر پیوست" class="max-w-xs rounded-md border" />
																</div>
															{% elif ".mp4" in file_lower or ".webm" in file_lower or ".ogg" in file_lower %}
																<!-- نمایش ویدئو -->
																<div class="mt-1">
																	<video controls class="max-w-xs rounded-md border">
																		<source src="{{ file_url }}" type="video/mp4">
																		مرورگر شما از تگ ویدئو پشتیبانی نمی‌کند.
																	</video>
																</div>
															{% else %}
																<!-- لینک فایل -->
																<div class="mt-1">
																	<a href="{{ file_url }}" target="_blank" class="text-sm underline text-blue-500">
																		فایل پیوست
																	</a>
																</div>
															{% endif %}
														{% endwith %}
													{% endwith %}
												{% endif %}

												{% if message.voice %}
													<div class="mt-1">
														<audio controls>
															<source src="{{ message.voice.url }}" type="audio/mpeg">
														</audio>
													</div>
												{% endif %}
											</div>

											<button type="button" class="text-xs text-gray-400 hover:text-primary" onclick="setReply('{{ message.id }}', '{{ message.text|escapejs }}')">
												<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
													<path opacity="0.4" d="M7.81 2H16.18C19.83 2 22 4.17 22 7.81V16.18C22 19.82 19.83 21.99 16.19 21.99H7.81C4.17 22 2 19.83 2 16.19V7.81C2 4.17 4.17 2 7.81 2Z" fill="#292D32"></path>
													<path d="M13.9214 8.97859H8.77141L9.10141 8.64859C9.39141 8.35859 9.39141 7.87859 9.10141 7.58859C8.81141 7.29859 8.33141 7.29859 8.04141 7.58859L6.47141 9.15859C6.18141 9.44859 6.18141 9.92859 6.47141 10.2186L8.04141 11.7886C8.19141 11.9386 8.38141 12.0086 8.57141 12.0086C8.76141 12.0086 8.95141 11.9386 9.10141 11.7886C9.39141 11.4986 9.39141 11.0186 9.10141 10.7286L8.84141 10.4686H13.9214C15.2014 10.4686 16.2514 11.5086 16.2514 12.7986C16.2514 14.0886 15.2114 15.1286 13.9214 15.1286H9.00141C8.59141 15.1286 8.25141 15.4686 8.25141 15.8786C8.25141 16.2886 8.59141 16.6286 9.00141 16.6286H13.9214C16.0314 16.6286 17.7514 14.9086 17.7514 12.7986C17.7514 10.6886 16.0314 8.97859 13.9214 8.97859Z" fill="#292D32"></path>
												</svg>
											</button>
										</div>

										<div class="text-xs text-white-dark {% if message.sender == request.user %}ltr:text-right rtl:text-left{% endif %}">
											{{ message.created_at|date:"H:i" }}
										</div>
									</div>
								</div>
							{% endfor %}
						{% endfor %}
					</div>
				</div>

				<!-- فرم ارسال پیام -->
				<div class="absolute bottom-0 left-0 w-full p-4 bg-white dark:bg-[#0e1726] mt-6">
					<div id="reply_preview" class="text-sm text-gray-500 hidden bg-black/10 dark:bg-gray-800 p-3 rounded-lg mb-1 border-t-2 border-gray-800">
						<p class="font-bold mb-1">در حال پاسخ به: </p>
						<span id="reply_text"></span> 
						<button type="button" onclick="clearReply()" class="text-red-500 mr-4">لغو</button>
					</div>
					<form method="POST" enctype="multipart/form-data" class="flex items-center space-x-3 rtl:space-x-reverse">
						{% csrf_token %}
						<input type="hidden" name="reply_to" id="reply_to_input" value="">


						<input type="text" name="content" placeholder="پیام خود را بنویسید" class="form-input rounded-full border-0 bg-[#f4f4f4] px-4 py-2 flex-1 focus:outline-none !m-0" required />

						<!-- آپلود فایل -->
						<input type="file" name="file" class="hidden" id="file_input">
						<label for="file_input" class="cursor-pointer p-2 bg-[#f4f4f4] rounded-md hover:bg-primary-light hover:text-primary dark:bg-[#1b2e4b]">
							<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
								<path d="M7 5.75C6.59 5.75 6.25 5.41 6.25 5V2C6.25 1.59 6.59 1.25 7 1.25C7.41 1.25 7.75 1.59 7.75 2V5C7.75 5.41 7.41 5.75 7 5.75Z" fill="#292D32"></path>
								<path d="M15 5.75C14.59 5.75 14.25 5.41 14.25 5V2C14.25 1.59 14.59 1.25 15 1.25C15.41 1.25 15.75 1.59 15.75 2V5C15.75 5.41 15.41 5.75 15 5.75Z" fill="#292D32"></path>
								<path d="M20 8.5V17C20 20 18.5 22 15 22H7C3.5 22 2 20 2 17V8.5C2 5.5 3.5 3.5 7 3.5H15C18.5 3.5 20 5.5 20 8.5Z" fill="#292D32" opacity="0.4"></path>
								<path d="M13 11.75H7C6.59 11.75 6.25 11.41 6.25 11C6.25 10.59 6.59 10.25 7 10.25H13C13.41 10.25 13.75 10.59 13.75 11C13.75 11.41 13.41 11.75 13 11.75Z" fill="#292D32"></path>
								<path d="M10 16.75H7C6.59 16.75 6.25 16.41 6.25 16C6.25 15.59 6.59 15.25 7 15.25H10C10.41 15.25 10.75 15.59 10.75 16C10.75 16.41 10.41 16.75 10 16.75Z" fill="#292D32"></path>
								<path d="M21 13.63C20.11 12.92 18.98 12.5 17.75 12.5C16.52 12.5 15.37 12.93 14.47 13.66C13.26 14.61 12.5 16.1 12.5 17.75C12.5 18.73 12.78 19.67 13.26 20.45C13.63 21.06 14.11 21.59 14.68 22C15.54 22.63 16.6 23 17.75 23C19.08 23 20.28 22.51 21.2 21.69C21.61 21.35 21.96 20.93 22.24 20.45C22.72 19.67 23 18.73 23 17.75C23 16.08 22.22 14.59 21 13.63ZM17.75 20.25C17.75 18.87 16.63 17.75 15.25 17.75C16.63 17.75 17.75 16.63 17.75 15.25C17.75 16.63 18.87 17.75 20.25 17.75C18.87 17.75 17.75 18.87 17.75 20.25Z" fill="#292D32"></path>
							</svg>
						</label>

						{% comment %} <!-- رکورد صوتی -->
						<input type="file" name="voice" class="hidden" id="voice_input" accept="audio/*">
						<label for="voice_input" class="cursor-pointer p-2 bg-[#f4f4f4] rounded-md hover:bg-primary-light hover:text-primary dark:bg-[#1b2e4b]">
							صوت
						</label> {% endcomment %}

						<button type="submit" class="p-2 bg-white border-primary border text-white rounded-full hover:bg-primary-dark">
							<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
								<path d="M2.70911 17.0192L4.44911 13.5392C4.92911 12.5692 4.92911 11.4392 4.44911 10.4692L2.70911 6.97924C1.21911 3.99924 4.42911 0.849241 7.37911 2.40924L8.91911 3.22924C9.13911 3.33924 9.30911 3.51924 9.39911 3.73924L15.0891 16.3892C15.3191 16.9092 15.1091 17.5192 14.6091 17.7792L7.36911 21.5892C4.42911 23.1492 1.21911 19.9992 2.70911 17.0192Z" fill="#292D32"></path>
								<path opacity="0.4" d="M16.3093 15.6004L12.5793 7.32045C12.1593 6.39045 13.1593 5.45045 14.0593 5.93045L19.8293 8.97045C22.2793 10.2604 22.2793 13.7604 19.8293 15.0504L17.7893 16.1204C17.2393 16.4004 16.5693 16.1704 16.3093 15.6004Z" fill="#292D32"></path>
							</svg>
						</button>
					</form>
				</div>

				<script>
				function setReply(msgId, msgText){
					document.getElementById('reply_to_input').value = msgId;
					document.getElementById('reply_preview').classList.remove('hidden');
					document.getElementById('reply_text').innerText = msgText.length > 50 ? msgText.substring(0,50)+'...' : msgText;
				}

				function clearReply(){
					document.getElementById('reply_to_input').value = '';
					document.getElementById('reply_preview').classList.add('hidden');
					document.getElementById('reply_text').innerText = '';
				}
				function scrollToMessage(msgId) {
					const container = document.getElementById('chat_body');
					const target = document.getElementById('msg-' + msgId);
					if (container && target) {
						// موقعیت پیام نسبت به کانتینر
						const offsetTop = target.offsetTop - container.offsetTop;
						// اسکرول به وسط کانتینر
						container.scrollTop = offsetTop - container.clientHeight / 2 + target.clientHeight / 2;
						 // افکت موقت پس‌زمینه
						target.classList.add('highlight-msg');
						// بعد از 2 ثانیه پس‌زمینه پاک شود
						setTimeout(() => {
							target.classList.remove('highlight-msg');
						}, 2000);
					}
				}
				</script>
			</div>
		</div>

	</div>
</div>
{% endblock %}

{% block js %}
{% endblock js %}