<script lang="ts">
	import { useQuery, useConvexClient } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
	import { MapPin, Plus, Edit, Power, Search, X, Loader2 } from 'lucide-svelte';
	import { toast } from 'svelte-sonner';
	import { maskCEP, onlyDigits } from '$lib/utils/masks';

	const client = useConvexClient();
	const enderecosQuery = useQuery(api.enderecosMarcacao.listarEnderecos, { incluirInativos: true });

	const enderecos = $derived(enderecosQuery?.data || []);

	// Estados do formulário
	let mostrarFormulario = $state(false);
	let editandoId: Id<'enderecosMarcacao'> | null = $state(null);
	let processando = $state(false);
	let termoBusca = $state('');
	let buscandoCEP = $state(false);
	let buscandoCoordenadas = $state(false);

	// Campos do formulário
	let nome = $state('');
	let descricao = $state('');
	let latitude = $state<number | ''>('');
	let longitude = $state<number | ''>('');
	let endereco = $state('');
	let bairro = $state('');
	let cep = $state('');
	let cidade = $state('');
	let estado = $state('');
	let pais = $state('Brasil');
	let raioMetros = $state(100);
	let tipo: 'sede' | 'home_office' | 'deslocamento' | 'cliente' = $state('sede');

	// Endereços filtrados
	const enderecosFiltrados = $derived(
		enderecos.filter((e) => {
			if (!termoBusca) return true;
			const busca = termoBusca.toLowerCase();
			return (
				e.nome.toLowerCase().includes(busca) ||
				e.endereco.toLowerCase().includes(busca) ||
				e.cidade.toLowerCase().includes(busca) ||
				e.estado.toLowerCase().includes(busca) ||
				e.tipo.toLowerCase().includes(busca)
			);
		})
	);

	// Função para buscar endereço por CEP usando ViaCEP
	async function buscarEnderecoPorCEP() {
		const cepLimpo = onlyDigits(cep);

		if (cepLimpo.length !== 8) {
			return;
		}

		buscandoCEP = true;
		try {
			const response = await fetch(`https://viacep.com.br/ws/${cepLimpo}/json/`);
			const data = await response.json();

			if (data.erro) {
				toast.error('CEP não encontrado');
				return;
			}

			// Preencher campos automaticamente
			endereco = data.logradouro || '';
			bairro = data.bairro || '';
			cidade = data.localidade || '';
			estado = data.uf || '';

			// Formatar CEP com máscara
			cep = maskCEP(cepLimpo);

			// Se tiver endereço, tentar buscar coordenadas
			if (endereco && cidade && estado) {
				await buscarCoordenadasPorEndereco();
			} else {
				toast.success(
					'Endereço encontrado! Preencha o número do endereço e busque as coordenadas.'
				);
			}
		} catch (error) {
			console.error('Erro ao buscar CEP:', error);
			toast.error('Erro ao buscar CEP. Tente novamente.');
		} finally {
			buscandoCEP = false;
		}
	}

	// Função para buscar coordenadas por endereço usando Google Maps Geocoding API
	async function buscarCoordenadasPorEndereco() {
		if (!endereco.trim() || !cidade.trim() || !estado.trim()) {
			toast.warning('Preencha o endereço, cidade e estado antes de buscar coordenadas');
			return;
		}

		buscandoCoordenadas = true;
		try {
			// Construir endereço completo para busca
			let enderecoCompleto = endereco.trim();
			if (bairro.trim()) {
				enderecoCompleto += `, ${bairro.trim()}`;
			}
			enderecoCompleto += `, ${cidade.trim()}, ${estado.trim()}, Brasil`;

			// Tentar primeiro com Google Maps Geocoding API (se API key estiver configurada)
			const googleApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;

			if (googleApiKey) {
				try {
					const googleUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(enderecoCompleto)}&key=${googleApiKey}&language=pt-BR&region=br`;

					const googleResponse = await fetch(googleUrl);
					const googleData = await googleResponse.json();

					if (googleData.status === 'OK' && googleData.results && googleData.results.length > 0) {
						const resultado = googleData.results[0];
						const location = resultado.geometry.location;

						latitude = parseFloat(location.lat.toFixed(6));
						longitude = parseFloat(location.lng.toFixed(6));

						toast.success('Coordenadas encontradas via Google Maps!');
						return;
					}
				} catch (googleError) {
					console.warn('Erro ao buscar no Google Maps, tentando OpenStreetMap...', googleError);
				}
			}

			// Fallback para Nominatim (OpenStreetMap) se Google Maps falhar ou não tiver API key
			const nominatimUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(enderecoCompleto)}&limit=1&addressdetails=1`;

			const response = await fetch(nominatimUrl, {
				headers: {
					'User-Agent': 'SGSE-App/1.0'
				}
			});

			const data = await response.json();

			if (data && data.length > 0) {
				const resultado = data[0];
				latitude = parseFloat(parseFloat(resultado.lat).toFixed(6));
				longitude = parseFloat(parseFloat(resultado.lon).toFixed(6));

				toast.success('Coordenadas encontradas via OpenStreetMap!');
			} else {
				toast.warning('Coordenadas não encontradas. Preencha manualmente.');
			}
		} catch (error) {
			console.error('Erro ao buscar coordenadas:', error);
			toast.error('Erro ao buscar coordenadas. Preencha manualmente.');
		} finally {
			buscandoCoordenadas = false;
		}
	}

	// Handler para CEP com máscara e busca automática
	function handleCEPInput(event: Event) {
		const target = event.target as HTMLInputElement;
		const cepLimpo = onlyDigits(target.value);

		// Aplicar máscara
		cep = maskCEP(cepLimpo);

		// Buscar endereço quando CEP estiver completo
		if (cepLimpo.length === 8) {
			setTimeout(() => buscarEnderecoPorCEP(), 500); // Delay para evitar múltiplas requisições
		}
	}

	// Handler para buscar coordenadas quando endereço mudar
	function handleEnderecoChange() {
		// Buscar coordenadas automaticamente quando todos os campos estiverem preenchidos
		if (endereco.trim() && cidade.trim() && estado.trim() && !latitude && !longitude) {
			// Não buscar automaticamente, apenas quando o usuário clicar em buscar
		}
	}

	function limparFormulario() {
		nome = '';
		descricao = '';
		latitude = '';
		longitude = '';
		endereco = '';
		bairro = '';
		cep = '';
		cidade = '';
		estado = '';
		pais = 'Brasil';
		raioMetros = 100;
		tipo = 'sede';
		editandoId = null;
		mostrarFormulario = false;
		buscandoCEP = false;
		buscandoCoordenadas = false;
	}

	function abrirFormularioEdicao(enderecoParaEditar: (typeof enderecos)[number]) {
		editandoId = enderecoParaEditar._id;
		nome = enderecoParaEditar.nome;
		descricao = enderecoParaEditar.descricao || '';
		latitude = enderecoParaEditar.latitude;
		longitude = enderecoParaEditar.longitude;
		endereco = enderecoParaEditar.endereco;
		bairro = (enderecoParaEditar as any).bairro || '';
		cep = enderecoParaEditar.cep ? maskCEP(enderecoParaEditar.cep) : '';
		cidade = enderecoParaEditar.cidade;
		estado = enderecoParaEditar.estado;
		pais = enderecoParaEditar.pais || 'Brasil';
		raioMetros = enderecoParaEditar.raioMetros;
		tipo = enderecoParaEditar.tipo;
		buscandoCEP = false;
		buscandoCoordenadas = false;
		mostrarFormulario = true;
	}

	async function salvarEndereco() {
		if (!nome.trim()) {
			toast.error('Nome é obrigatório');
			return;
		}

		if (
			latitude === '' ||
			longitude === '' ||
			typeof latitude !== 'number' ||
			typeof longitude !== 'number'
		) {
			toast.error('Latitude e longitude são obrigatórias');
			return;
		}

		if (!endereco.trim()) {
			toast.error('Endereço é obrigatório');
			return;
		}

		if (!cidade.trim()) {
			toast.error('Cidade é obrigatória');
			return;
		}

		if (!estado.trim()) {
			toast.error('Estado é obrigatório');
			return;
		}

		if (raioMetros < 0 || raioMetros > 50000) {
			toast.error('Raio deve estar entre 0 e 50000 metros');
			return;
		}

		processando = true;
		try {
			if (editandoId) {
				await client.mutation(api.enderecosMarcacao.atualizarEndereco, {
					enderecoId: editandoId,
					nome: nome.trim(),
					descricao: descricao.trim() || undefined,
					latitude: typeof latitude === 'number' ? latitude : Number(latitude),
					longitude: typeof longitude === 'number' ? longitude : Number(longitude),
					endereco: endereco.trim(),
					bairro: bairro.trim() || undefined,
					cep: cep.trim() ? onlyDigits(cep.trim()) : undefined,
					cidade: cidade.trim(),
					estado: estado.trim(),
					pais: pais.trim() || undefined,
					raioMetros,
					tipo
				});
				toast.success('Endereço atualizado com sucesso!');
			} else {
				await client.mutation(api.enderecosMarcacao.criarEndereco, {
					nome: nome.trim(),
					descricao: descricao.trim() || undefined,
					latitude: typeof latitude === 'number' ? latitude : Number(latitude),
					longitude: typeof longitude === 'number' ? longitude : Number(longitude),
					endereco: endereco.trim(),
					bairro: bairro.trim() || undefined,
					cep: cep.trim() ? onlyDigits(cep.trim()) : undefined,
					cidade: cidade.trim(),
					estado: estado.trim(),
					pais: pais.trim() || undefined,
					raioMetros,
					tipo
				});
				toast.success('Endereço criado com sucesso!');
			}

			limparFormulario();
		} catch (error) {
			console.error('Erro ao salvar endereço:', error);
			toast.error(
				error instanceof Error ? error.message : 'Erro ao salvar endereço. Tente novamente.'
			);
		} finally {
			processando = false;
		}
	}

	async function desativarEndereco(enderecoId: Id<'enderecosMarcacao'>) {
		if (!confirm('Tem certeza que deseja desativar este endereço?')) {
			return;
		}

		try {
			await client.mutation(api.enderecosMarcacao.desativarEndereco, { enderecoId });
			toast.success('Endereço desativado com sucesso!');
		} catch (error) {
			console.error('Erro ao desativar endereço:', error);
			toast.error('Erro ao desativar endereço. Tente novamente.');
		}
	}

	async function ativarEndereco(enderecoId: Id<'enderecosMarcacao'>) {
		try {
			await client.mutation(api.enderecosMarcacao.atualizarEndereco, {
				enderecoId,
				ativo: true
			});
			toast.success('Endereço ativado com sucesso!');
		} catch (error) {
			console.error('Erro ao ativar endereço:', error);
			toast.error('Erro ao ativar endereço. Tente novamente.');
		}
	}

	const tiposLabel: Record<'sede' | 'home_office' | 'deslocamento' | 'cliente', string> = {
		sede: 'Sede Principal',
		home_office: 'Home Office',
		deslocamento: 'Deslocamento',
		cliente: 'Cliente'
	};
</script>

<div class="container mx-auto max-w-7xl px-4 py-6">
	<!-- Header -->
	<div class="mb-6 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="bg-primary/10 rounded-xl p-3">
				<MapPin class="text-primary h-8 w-8" />
			</div>
			<div>
				<h1 class="text-base-content text-3xl font-bold">Endereços de Marcação</h1>
				<p class="text-base-content/60 mt-1">Gerenciar locais permitidos para registro de ponto</p>
			</div>
		</div>
		<button
			class="btn btn-primary gap-2"
			onclick={() => {
				limparFormulario();
				mostrarFormulario = true;
			}}
			disabled={mostrarFormulario}
		>
			<Plus class="h-5 w-5" />
			Novo Endereço
		</button>
	</div>

	<!-- Formulário Modal -->
	{#if mostrarFormulario}
		<div class="modal modal-open">
			<div class="modal-box max-h-[90vh] max-w-4xl overflow-y-auto">
				<!-- Header do Modal -->
				<div class="border-base-300 mb-6 flex items-center justify-between border-b pb-4">
					<div class="flex items-center gap-3">
						<div class="bg-primary/10 rounded-lg p-2">
							<MapPin class="text-primary h-6 w-6" strokeWidth={2.5} />
						</div>
						<div>
							<h2 class="text-base-content text-2xl font-bold">
								{editandoId ? 'Editar Endereço' : 'Novo Endereço'}
							</h2>
							<p class="text-base-content/60 mt-1 text-sm">
								{editandoId
									? 'Atualize as informações do endereço'
									: 'Preencha os dados do novo endereço de marcação'}
							</p>
						</div>
					</div>
					<button
						class="btn btn-sm btn-circle btn-ghost hover:btn-error transition-all"
						onclick={limparFormulario}
					>
						<X class="h-5 w-5" />
					</button>
				</div>

				<div class="space-y-6">
					<!-- Seção 1: Informações Básicas -->
					<div class="space-y-4">
						<div class="mb-4 flex items-center gap-2">
							<div
								class="via-base-300 h-px flex-1 bg-gradient-to-r from-transparent to-transparent"
							></div>
							<h3 class="text-base-content flex items-center gap-2 text-lg font-semibold">
								<span class="badge badge-primary badge-sm">1</span>
								Informações Básicas
							</h3>
							<div
								class="via-base-300 h-px flex-1 bg-gradient-to-r from-transparent to-transparent"
							></div>
						</div>

						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
							<div class="form-control">
								<label class="label">
									<span class="label-text font-semibold">Nome *</span>
								</label>
								<input
									type="text"
									bind:value={nome}
									placeholder="Ex: Sede Principal, Home Office João"
									class="input input-bordered input-primary focus:input-primary focus:ring-primary/20 focus:ring-2"
								/>
							</div>

							<div class="form-control">
								<label class="label">
									<span class="label-text font-semibold">Tipo *</span>
								</label>
								<select
									bind:value={tipo}
									class="select select-bordered select-primary focus:select-primary focus:ring-primary/20 focus:ring-2"
								>
									<option value="sede">🏢 Sede Principal</option>
									<option value="home_office">🏠 Home Office</option>
									<option value="deslocamento">🚗 Deslocamento</option>
									<option value="cliente">👥 Cliente</option>
								</select>
							</div>
						</div>

						<div class="form-control">
							<label class="label">
								<span class="label-text font-semibold">Descrição</span>
								<span class="label-text-alt text-base-content/50">(Opcional)</span>
							</label>
							<textarea
								bind:value={descricao}
								placeholder="Descrição detalhada do endereço ou observações importantes..."
								class="textarea textarea-bordered textarea-primary focus:textarea-primary focus:ring-primary/20 focus:ring-2"
								rows="3"
							></textarea>
						</div>
					</div>

					<!-- Seção 2: Endereço Físico -->
					<div class="space-y-4">
						<div class="mb-4 flex items-center gap-2">
							<div
								class="via-base-300 h-px flex-1 bg-gradient-to-r from-transparent to-transparent"
							></div>
							<h3 class="text-base-content flex items-center gap-2 text-lg font-semibold">
								<span class="badge badge-primary badge-sm">2</span>
								Endereço Físico
							</h3>
							<div
								class="via-base-300 h-px flex-1 bg-gradient-to-r from-transparent to-transparent"
							></div>
						</div>

						<div class="form-control">
							<label class="label">
								<span class="label-text font-semibold">Endereço *</span>
							</label>
							<div class="flex gap-2">
								<input
									type="text"
									bind:value={endereco}
									oninput={handleEnderecoChange}
									placeholder="Ex: Rua Deputado Cunha Rabelo, 214"
									class="input input-bordered input-primary focus:input-primary focus:ring-primary/20 flex-1 focus:ring-2"
								/>
								<button
									type="button"
									class="btn btn-primary gap-2"
									onclick={buscarCoordenadasPorEndereco}
									disabled={buscandoCoordenadas ||
										!endereco.trim() ||
										!cidade.trim() ||
										!estado.trim()}
									title="Buscar coordenadas GPS automaticamente"
								>
									{#if buscandoCoordenadas}
										<Loader2 class="h-4 w-4 animate-spin" />
									{:else}
										<MapPin class="h-4 w-4" />
									{/if}
									<span class="hidden sm:inline">Buscar GPS</span>
								</button>
							</div>
						</div>

						<div class="form-control">
							<label class="label">
								<span class="label-text font-semibold">Bairro</span>
								<span class="label-text-alt text-base-content/50">(Opcional)</span>
							</label>
							<input
								type="text"
								bind:value={bairro}
								placeholder="Ex: Boa Viagem, Centro, Pina"
								class="input input-bordered focus:input-primary focus:ring-primary/20 focus:ring-2"
							/>
						</div>

						<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
							<div class="form-control">
								<label class="label">
									<span class="label-text font-semibold">CEP</span>
									<span class="label-text-alt text-base-content/50"
										>(Opcional - Busca automática)</span
									>
								</label>
								<div class="relative">
									<input
										type="text"
										value={cep}
										oninput={handleCEPInput}
										onblur={() => {
											const cepLimpo = onlyDigits(cep);
											if (cepLimpo.length === 8) {
												buscarEnderecoPorCEP();
											}
										}}
										placeholder="00000-000"
										maxlength="9"
										class="input input-bordered focus:input-primary focus:ring-primary/20 w-full pr-10 focus:ring-2"
									/>
									{#if buscandoCEP}
										<div class="absolute top-1/2 right-3 -translate-y-1/2 transform">
											<Loader2 class="text-primary h-5 w-5 animate-spin" />
										</div>
									{/if}
								</div>
								<div class="label">
									<span class="label-text-alt text-info">
										{#if buscandoCEP}
											Buscando endereço...
										{:else if cep}
											Digite o CEP completo para buscar automaticamente
										{/if}
									</span>
								</div>
							</div>

							<div class="form-control">
								<label class="label">
									<span class="label-text font-semibold">Cidade *</span>
								</label>
								<input
									type="text"
									bind:value={cidade}
									placeholder="Ex: Recife"
									class="input input-bordered input-primary focus:input-primary focus:ring-primary/20 focus:ring-2"
								/>
							</div>

							<div class="form-control">
								<label class="label">
									<span class="label-text font-semibold">Estado *</span>
								</label>
								<input
									type="text"
									bind:value={estado}
									placeholder="Ex: PE"
									maxlength="2"
									class="input input-bordered input-primary focus:input-primary focus:ring-primary/20 uppercase focus:ring-2"
								/>
							</div>
						</div>

						<div class="form-control">
							<label class="label">
								<span class="label-text font-semibold">País</span>
								<span class="label-text-alt text-base-content/50">(Opcional)</span>
							</label>
							<input
								type="text"
								bind:value={pais}
								placeholder="Brasil"
								class="input input-bordered focus:input-primary focus:ring-primary/20 focus:ring-2"
							/>
						</div>
					</div>

					<!-- Seção 3: Localização GPS e Configuração -->
					<div class="space-y-4">
						<div class="mb-4 flex items-center gap-2">
							<div
								class="via-base-300 h-px flex-1 bg-gradient-to-r from-transparent to-transparent"
							></div>
							<h3 class="text-base-content flex items-center gap-2 text-lg font-semibold">
								<span class="badge badge-primary badge-sm">3</span>
								Localização GPS e Configuração
							</h3>
							<div
								class="via-base-300 h-px flex-1 bg-gradient-to-r from-transparent to-transparent"
							></div>
						</div>

						<div class="bg-base-200/50 border-base-300 mb-4 rounded-xl border p-4">
							<div class="flex items-start gap-3">
								<div class="bg-info/20 mt-0.5 rounded-lg p-2">
									<MapPin class="text-info h-5 w-5" strokeWidth={2} />
								</div>
								<div class="flex-1">
									<p class="text-base-content mb-1 text-sm font-semibold">Coordenadas GPS</p>
									<p class="text-base-content/70 text-xs">
										As coordenadas são usadas para validar a localização dos registros de ponto. O
										sistema busca automaticamente via Google Maps (se configurado) ou OpenStreetMap.
									</p>
								</div>
							</div>
						</div>

						<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
							<div class="form-control">
								<label class="label">
									<span class="label-text font-semibold">Latitude *</span>
								</label>
								<div class="relative">
									<input
										type="number"
										step="0.000001"
										bind:value={latitude}
										placeholder="-8.047600"
										class="input input-bordered input-primary focus:input-primary focus:ring-primary/20 w-full focus:ring-2"
									/>
									{#if buscandoCoordenadas}
										<div class="absolute top-1/2 right-3 -translate-y-1/2 transform">
											<Loader2 class="text-primary h-4 w-4 animate-spin" />
										</div>
									{/if}
								</div>
								<div class="label">
									<span class="label-text-alt text-base-content/50">Formato: -8.047600</span>
								</div>
							</div>

							<div class="form-control">
								<label class="label">
									<span class="label-text font-semibold">Longitude *</span>
								</label>
								<div class="relative">
									<input
										type="number"
										step="0.000001"
										bind:value={longitude}
										placeholder="-34.877000"
										class="input input-bordered input-primary focus:input-primary focus:ring-primary/20 w-full focus:ring-2"
									/>
									{#if buscandoCoordenadas}
										<div class="absolute top-1/2 right-3 -translate-y-1/2 transform">
											<Loader2 class="text-primary h-4 w-4 animate-spin" />
										</div>
									{/if}
								</div>
								<div class="label">
									<span class="label-text-alt text-base-content/50">Formato: -34.877000</span>
								</div>
							</div>

							<div class="form-control">
								<label class="label">
									<span class="label-text font-semibold">Raio Permitido *</span>
								</label>
								<input
									type="number"
									bind:value={raioMetros}
									min="0"
									max="50000"
									placeholder="100"
									class="input input-bordered input-primary focus:input-primary focus:ring-primary/20 focus:ring-2"
								/>
								<div class="label">
									<span class="label-text-alt text-base-content/50">
										Em metros. Ex: 100, 500, 1000
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Footer do Modal -->
				<div class="modal-action border-base-300 mt-6 border-t pt-4">
					<button
						class="btn btn-ghost hover:btn-error transition-all"
						onclick={limparFormulario}
						disabled={processando}
					>
						<X class="mr-2 h-4 w-4" />
						Cancelar
					</button>
					<button
						class="btn btn-primary gap-2 shadow-md transition-all hover:shadow-lg"
						onclick={salvarEndereco}
						disabled={processando}
					>
						{#if processando}
							<span class="loading loading-spinner loading-sm"></span>
							Salvando...
						{:else}
							<MapPin class="h-4 w-4" />
							{editandoId ? 'Atualizar Endereço' : 'Criar Endereço'}
						{/if}
					</button>
				</div>
			</div>
		</div>
	{/if}

	<!-- Barra de Busca -->
	<div class="card bg-base-100 mb-6 shadow-xl">
		<div class="card-body p-4">
			<div class="form-control">
				<div class="relative">
					<Search
						class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
					/>
					<input
						type="text"
						bind:value={termoBusca}
						placeholder="Buscar por nome, endereço, cidade, estado ou tipo..."
						class="input input-bordered w-full pl-10"
					/>
				</div>
			</div>
		</div>
	</div>

	<!-- Lista de Endereços -->
	<div class="grid grid-cols-1 gap-4">
		{#if enderecosFiltrados.length === 0}
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body py-12 text-center">
					<MapPin class="text-base-content/20 mx-auto mb-4 h-16 w-16" />
					<p class="text-base-content/60 text-lg">
						{termoBusca ? 'Nenhum endereço encontrado' : 'Nenhum endereço cadastrado'}
					</p>
				</div>
			</div>
		{:else}
			{#each enderecosFiltrados as enderecoItem (enderecoItem._id)}
				<div class="card bg-base-100 shadow-xl {enderecoItem.ativo ? '' : 'opacity-60'}">
					<div class="card-body">
						<div class="flex items-start justify-between">
							<div class="flex-1">
								<div class="mb-2 flex items-center gap-3">
									<h3 class="text-xl font-bold">{enderecoItem.nome}</h3>
									<span class="badge {enderecoItem.ativo ? 'badge-success' : 'badge-error'}">
										{enderecoItem.ativo ? 'Ativo' : 'Inativo'}
									</span>
									<span class="badge badge-outline">
										{tiposLabel[enderecoItem.tipo]}
									</span>
								</div>

								{#if enderecoItem.descricao}
									<p class="text-base-content/70 mb-2">{enderecoItem.descricao}</p>
								{/if}

								<div class="space-y-1 text-sm">
									<p class="text-base-content/80">
										<strong>Endereço:</strong>
										{enderecoItem.endereco}
										{#if (enderecoItem as any).bairro}
											- <strong>Bairro:</strong> {(enderecoItem as any).bairro}
										{/if}
									</p>
									<p class="text-base-content/80">
										<strong>Cidade:</strong>
										{enderecoItem.cidade}/{enderecoItem.estado}
										{#if enderecoItem.cep}
											- CEP: {enderecoItem.cep}
										{/if}
									</p>
									<p class="text-base-content/80">
										<strong>Coordenadas:</strong>
										{enderecoItem.latitude.toFixed(6)}, {enderecoItem.longitude.toFixed(6)}
									</p>
									<p class="text-base-content/80">
										<strong>Raio Permitido:</strong>
										{#if enderecoItem.raioMetros >= 1000}
											{@const raioKm = (enderecoItem.raioMetros / 1000).toFixed(2)}
											<span> {raioKm} km</span>
										{:else}
											<span> {enderecoItem.raioMetros} metros</span>
										{/if}
									</p>
								</div>
							</div>

							<div class="flex flex-col gap-2">
								<button
									class="btn btn-sm btn-outline btn-primary gap-2"
									onclick={() => abrirFormularioEdicao(enderecoItem)}
								>
									<Edit class="h-4 w-4" />
									Editar
								</button>
								{#if enderecoItem.ativo}
									<button
										class="btn btn-sm btn-outline btn-warning gap-2"
										onclick={() => desativarEndereco(enderecoItem._id)}
									>
										<Power class="h-4 w-4" />
										Desativar
									</button>
								{:else}
									<button
										class="btn btn-sm btn-outline btn-success gap-2"
										onclick={() => ativarEndereco(enderecoItem._id)}
									>
										<Power class="h-4 w-4" />
										Ativar
									</button>
								{/if}
							</div>
						</div>
					</div>
				</div>
			{/each}
		{/if}
	</div>
</div>
