<style scoped>
.badge-larvae {
	background-color: #ffc107;
	color: #000;
}

.badge-pupae {
	background-color: #fd7e14;
	color: #fff;
}

.badge-adult {
	background-color: #dc3545;
	color: #fff;
}
.details-section {
	overflow-y: auto;
}
.icon-standing-water {
	color: #0dcaf0;
}

.icon-nuisance {
	color: #dc3545;
}
.map-container {
	height: 400px;
	width: 100%;
}
.photo-thumbnail {
	width: 100px;
	height: 100px;
	object-fit: cover;
	cursor: pointer;
	border-radius: 4px;
	transition: transform 0.2s;
}
.photo-thumbnail:hover {
	transform: scale(1.05);
}
</style>

<template>
	<div class="card shadow-sm mb-3">
		<div class="card-header bg-white pane-header">Communication Workbench</div>
		<div class="card-body">
			<div class="map-container">
				<MapMultipoint
					id="map"
					ref="mapRef"
					:organization-id="user.organization.id"
					:tegola="user.urls.tegola"
					:xmin="user.organization.service_area?.min.x ?? 0"
					:ymin="user.organization.service_area?.min.y ?? 0"
					:xmax="user.organization.service_area?.max.x ?? 0"
					:ymax="user.organization.service_area?.max.y ?? 0"
				/>
			</div>
			<div v-if="loading" class="loading">Loading...</div>
			<div v-else>
				<div
					v-if="!selectedCommunication"
					class="d-flex flex-column align-items-center justify-content-center text-muted"
				>
					<i class="bi bi-hand-index fs-1"></i>
					<p class="mt-2">Select a report to view details</p>
				</div>

				<div v-if="selectedCommunication" class="h-100 d-flex flex-column">
					<!-- Report Details -->
					<div class="details-section p-3 border-top">
						<div class="d-flex justify-content-between align-items-start mb-3">
							<div>
								<h5 class="mb-1">
									<span
										v-if="
											selectedCommunication.type === 'publicreport.nuisance'
										"
									>
										<i class="bi bi-mosquito icon-nuisance"></i>
										Nuisance Report
									</span>
									<span
										v-if="selectedCommunication.type === 'publicreport.water'"
									>
										<i class="bi bi-droplet-fill icon-standing-water"></i>
										Standing Water Report
									</span>
								</h5>
								<small class="text-muted"
									>Report ID: #{{ selectedCommunication.id }}</small
								>
							</div>
							<span class="badge bg-secondary">
								<TimeRelative :time="selectedCommunication.created" />
							</span>
						</div>

						<!-- Common Fields -->
						<div class="card mb-3">
							<div class="card-body">
								<div class="row g-3">
									<div class="col-12">
										<label class="form-label text-muted small mb-0">
											<i class="bi bi-geo-alt"></i> Address
										</label>
										<div class="fw-medium">
											{{
												formatAddress(
													selectedCommunication.public_report.address,
												)
											}}
										</div>
									</div>
									<div class="col-md-6">
										<label class="form-label text-muted small mb-0">
											<i class="bi bi-person"></i> Reporter Name
										</label>
										<div class="fw-medium">
											{{
												selectedCommunication.public_report.reporter.name ||
												"not given"
											}}
										</div>
									</div>
									<div class="col-md-6">
										<label
											v-if="
												selectedCommunication.public_report.reporter.has_email
											"
											class="form-label text-muted small mb-0"
										>
											<i class="bi bi-envelope"></i>
										</label>
										<label
											v-if="
												selectedCommunication.public_report.reporter.has_phone
											"
											class="form-label text-muted small mb-0"
										>
											<i class="bi bi-phone"></i>
										</label>
									</div>
								</div>
								<div v-if="water" class="row g-3">
									<div class="col-12">
										<ul>
											<li v-if="water?.is_reporter_owner">
												Reporter is the owner of the property
											</li>
											<li v-if="water?.is_reporter_confidential">
												Reporter has asked to be kept confidential
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>

						<!-- Nuisance-specific Fields -->
						<div v-if="nuisance" class="card mb-3">
							<div class="card-header bg-danger bg-opacity-10">
								<i class="bi bi-exclamation-triangle"></i> Nuisance Details
							</div>
							<div class="card-body">
								<div class="row g-3">
									<div class="col-md-6">
										<label class="form-label text-muted small mb-0">
											<i class="bi bi-clock"></i> Time of Day Encountered
										</label>
										<ul>
											<li v-if="nuisance?.time_of_day_early">Early</li>
											<li v-if="nuisance?.time_of_day_day">Daytime</li>
											<li v-if="nuisance?.time_of_day_evening">Evening</li>
											<li v-if="nuisance?.time_of_day_night">Night</li>
										</ul>
									</div>
									<div class="col-md-6">
										<label class="form-label text-muted small mb-0">
											<i class="bi bi-house"></i> Property Area
										</label>
										<div>
											<ul>
												<li v-if="nuisance?.is_location_backyard">Backyard</li>
												<li v-if="nuisance?.is_location_frontyard">
													Frontyard
												</li>
												<li v-if="nuisance?.is_location_garden">Garden</li>
												<li v-if="nuisance?.is_location_other">Other</li>
												<li v-if="nuisance?.is_location_pool">Pool</li>
											</ul>
										</div>
									</div>
									<div
										v-if="
											nuisance?.source_container ||
											nuisance?.source_gutter ||
											nuisance?.source_stagnant
										"
										class="col-md-6"
									>
										<label class="form-label text-muted small mb-0">
											<i class="bi bi-droplet"></i> Sources
										</label>
										<ul>
											<li v-if="nuisance?.source_container">Container</li>
											<li v-if="nuisance?.source_gutter">Gutter</li>
											<li v-if="nuisance?.source_stagnant">
												Sprinklers & Gutters
											</li>
										</ul>
									</div>
									<div v-if="nuisance?.source_description" class="col-12">
										<label class="form-label text-muted small mb-0">
											<i class="bi bi-chat-text"></i> Source Description
										</label>
										<div class="p-2 bg-light rounded">
											{{ nuisance?.source_description || "none" }}
										</div>
									</div>
									<div class="col-12">
										<label class="form-label text-mudet small mb-0">
											<i class="bi bi-clock"></i> Duration
										</label>
										<div class="p-2 bg-light rounded">
											{{ nuisance?.duration }}
										</div>
									</div>
									<div class="col-12">
										<label class="form-label text-muted small mb-0">
											<i class="bi bi-chat-text"></i> Additional Notes
										</label>
										<div class="p-2 bg-light rounded">
											{{ nuisance?.additional_info || "No additional notes" }}
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Standing Water-specific Fields -->
						<div v-if="water" class="card mb-3">
							<div class="card-header bg-info bg-opacity-10">
								<i class="bi bi-droplet"></i> Standing Water Details
							</div>
							<div class="card-body">
								<div
									v-if="
										water?.access_gate ||
										water?.access_fence ||
										water?.access_locked ||
										water?.access_dog ||
										water?.access_other
									"
									class="col-md-6"
								>
									<label class="form-label text-muted small mb-0">
										<i class="bi bi-droplet"></i> Access
									</label>
									<div>
										<ul>
											<li v-if="water?.access_gate">Gate</li>
											<li v-if="water?.access_fence">Fence</li>
											<li v-if="water?.access_locked">Locked</li>
											<li v-if="water?.access_dog">Dog</li>
											<li v-if="water?.access_other">Other access obstacle</li>
										</ul>
									</div>
								</div>
								<div v-if="water?.access_comments" class="col-12">
									<label class="form-label text-muted small mb-0">
										<i class="bi bi-chat-text"></i> Access Comments
									</label>
									<div class="p-2 bg-light rounded">
										{{ water?.access_comments }}
									</div>
								</div>
								<label class="form-label text-muted small mb-0">
									<i class="bi bi-eye"></i> Mosquito Life Stages Observed
								</label>
								<div class="mt-2">
									<span
										class="badge me-2"
										:class="
											water?.has_larvae ? 'badge-larvae' : 'bg-light text-muted'
										"
									>
										<i
											class="bi"
											:class="
												water?.has_larvae ? 'bi-check-circle' : 'bi-circle'
											"
										></i>
										Larvae
									</span>
									<span
										class="badge me-2"
										:class="
											water?.has_pupae ? 'badge-pupae' : 'bg-light text-muted'
										"
									>
										<i
											class="bi"
											:class="
												water?.has_pupae ? 'bi-check-circle' : 'bi-circle'
											"
										></i>
										Pupae
									</span>
									<span
										class="badge"
										:class="
											water?.has_adult ? 'badge-adult' : 'bg-light text-muted'
										"
									>
										<i
											class="bi"
											:class="
												water?.has_adult ? 'bi-check-circle' : 'bi-circle'
											"
										></i>
										Adult Mosquitoes
									</span>
								</div>
								<div v-if="water?.comments" class="col-12">
									<label class="form-label text-muted small mb-0">
										<i class="bi bi-chat-text"></i> Comments
									</label>
									<div class="p-2 bg-light rounded">
										{{ water?.comments }}
									</div>
								</div>
								<div class="col-md-6">
									<label class="form-label text-muted small mb-0">
										<i class="bi bi-person"></i> Owner Name
									</label>
									<div class="fw-medium">
										{{ water?.owner.name || "not given" }}
									</div>
								</div>
								<div class="col-md-6">
									<label
										v-if="water?.owner.has_email"
										class="form-label text-muted small mb-0"
									>
										<i class="bi bi-envelope"></i>
									</label>
									<label
										v-if="water?.owner.has_phone"
										class="form-label text-muted small mb-0"
									>
										<i class="bi bi-phone"></i>
									</label>
								</div>
							</div>
						</div>

						<!-- Images Section -->
						<div class="card">
							<div
								class="card-header d-flex justify-content-between align-items-center"
							>
								<span><i class="bi bi-images"></i> Attached Photos</span>
								<span class="badge bg-primary">
									{{ selectedCommunication.public_report.images?.length || 0 }}
								</span>
							</div>
							<div class="card-body">
								<div
									v-if="
										selectedCommunication.public_report.images &&
										selectedCommunication.public_report.images.length > 0
									"
									class="d-flex flex-wrap gap-2"
								>
									<img
										v-for="(photo, index) in selectedCommunication.public_report
											.images"
										:key="index"
										:src="photo.url_content"
										class="photo-thumbnail"
										@click="openPhotoViewer(index)"
										:alt="'Photo ' + (index + 1)"
									/>
								</div>
								<div
									v-if="
										!selectedCommunication.public_report.images ||
										selectedCommunication.public_report.images.length === 0
									"
									class="text-muted text-center py-3"
								>
									<i class="bi bi-camera-slash fs-4"></i>
									<p class="mb-0 small">No images attached</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import MapMultipoint from "../components/MapMultipoint.vue";
import TimeRelative from "../components/TimeRelative.vue";

interface Emits {
	(e: "viewImage", index: int): void;
}
interface Props {
	loading: boolean;
	selectedCommunication: Communication | null;
	user: User | null;
}

const emit = defineEmits<Emits>();
const props = defineProps<Props>();
const nuisance = computed(() => {
	return props.selectedCommunication?.value?.public_report?.nuisance || null;
});
const water = computed(() => {
	return props.selectedCommunication?.value?.public_report?.water || null;
});

function formatAddress(a) {
	if (a.number === "" && a.street === "") {
		return "no address provided";
	}
	return `${a.number} ${a.street}, ${a.locality}`;
}
function openPhotoViewer(index) {
	emit("viewImage", index);
}
</script>
