<template>
	<div class="overview-container">
		<!-- Address Selector (only shows if multiple addresses) -->
		<AddressSelector
			v-if="!isNew && props.clientData.addresses && props.clientData.addresses.length > 1"
			:addresses="props.clientData.addresses"
			:selected-address-idx="selectedAddressIdx"
			:contacts="props.clientData.contacts"
			@update:selected-address-idx="handleAddressChange"
		/>

		<!-- Tabs Section -->
		<Tabs v-model="activeTab" class="overview-tabs">
			<TabList>
				<Tab value="overview">Overview</Tab>
				<Tab value="projects">Projects</Tab>
				<Tab value="financials">Financials</Tab>
			</TabList>
			<TabPanels>
				<!-- Overview Tab -->
				<TabPanel value="overview">
					<!-- Quick Actions (only in non-edit mode) -->
					<QuickActions
						v-if="!editMode && !isNew"
						:full-address="fullAddress"
						@edit-mode-enabled="enableEditMode"
					/>

					<!-- Special Modules Section -->
					<SpecialModules
						v-if="!isNew && !editMode"
						:selected-address="selectedAddressData"
						:full-address="fullAddress"
					/>

					<!-- Property Details -->
					<PropertyDetails
						v-if="!isNew && selectedAddressData"
						:address-data="selectedAddressData"
						:all-contacts="props.clientData.contacts"
						:edit-mode="editMode"
						@update:address-contacts="handleAddressContactsUpdate"
						@update:primary-contact="handlePrimaryContactUpdate"
					/>
				</TabPanel>

				<!-- Projects Tab -->
				<TabPanel value="projects">
					<div class="coming-soon-section">
						<i class="pi pi-wrench"></i>
						<h3>Projects</h3>
						<p>Section coming soon</p>
					</div>
				</TabPanel>

				<!-- Financials Tab -->
				<TabPanel value="financials">
					<div class="coming-soon-section">
						<i class="pi pi-dollar"></i>
						<h3>Financials</h3>
						<p>Section coming soon</p>
					</div>
				</TabPanel>
			</TabPanels>
		</Tabs>

		<!-- Form Actions (for edit mode) -->
		<div class="form-actions" v-if="editMode">
			<Button
				@click="handleCancelEdit"
				label="Cancel"
				severity="secondary"
				:disabled="isSubmitting"
			/>
			<Button
				@click="handleSaveEdit"
				label="Save Changes"
				:loading="isSubmitting"
			/>
		</div>
	</div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import Button from "primevue/button";
import Tabs from "primevue/tabs";
import TabList from "primevue/tablist";
import Tab from "primevue/tab";
import TabPanels from "primevue/tabpanels";
import TabPanel from "primevue/tabpanel";
import AddressSelector from "../clientView/AddressSelector.vue";
import QuickActions from "../clientView/QuickActions.vue";
import SpecialModules from "../clientView/SpecialModules.vue";
import PropertyDetails from "../clientView/PropertyDetails.vue";
import DataUtils from "../../utils";
import Api from "../../api";
import { useNotificationStore } from "../../stores/notifications-primevue";

const props = defineProps({
	clientData: {
		type: Object,
		default: () => ({}),
	},
	selectedAddress: {
		type: String,
		default: "",
	},
	isNew: {
		type: Boolean,
		default: false,
	},
});

const notificationStore = useNotificationStore();

// State
const activeTab = ref("overview");
const editMode = ref(false);
const isSubmitting = ref(false);
const selectedAddressIdx = ref(0);

// Find the address data object that matches the selected address string
const selectedAddressData = computed(() => {
	if (!props.clientData?.addresses || !props.selectedAddress) {
		return null;
	}
	return props.clientData.addresses.find(
		(addr) => DataUtils.calculateFullAddress(addr) === props.selectedAddress
	);
});

// Calculate full address for display
const fullAddress = computed(() => {
	if (!selectedAddressData.value) return "N/A";
	return DataUtils.calculateFullAddress(selectedAddressData.value);
});

// Handle address change
const handleAddressChange = (newIdx) => {
	selectedAddressIdx.value = newIdx;
	// TODO: Update route query with new address
};

// Enable edit mode
const enableEditMode = () => {
	editMode.value = true;
};

// Handle cancel edit
const handleCancelEdit = () => {
	editMode.value = false;
	// Restore original data
};

// Handle save edit
const handleSaveEdit = async () => {
	isSubmitting.value = true;
	try {
		// TODO: Implement save logic
		notificationStore.addSuccess("Changes saved successfully!");
		editMode.value = false;
	} catch (error) {
		console.error("Error saving changes:", error);
		notificationStore.addError("Failed to save changes");
	} finally {
		isSubmitting.value = false;
	}
};

// Handle address contacts update
const handleAddressContactsUpdate = (contactNames) => {
	console.log("Address contacts updated:", contactNames);
	// TODO: Store this for saving
};

// Handle primary contact update
const handlePrimaryContactUpdate = (contactName) => {
	console.log("Primary contact updated:", contactName);
	// TODO: Store this for saving
};
</script>

<style scoped>
.overview-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.overview-tabs {
	margin-bottom: 1rem;
}

.coming-soon-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 4rem 2rem;
	text-align: center;
	background: var(--surface-card);
	border-radius: 12px;
	border: 1px solid var(--surface-border);
}

.coming-soon-section i {
	font-size: 4rem;
	color: var(--text-color-secondary);
	opacity: 0.5;
}

.coming-soon-section h3 {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--text-color);
}

.coming-soon-section p {
	margin: 0;
	font-size: 1.1rem;
	color: var(--text-color-secondary);
}

.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	padding: 1.5rem;
	background: var(--surface-card);
	border-radius: 8px;
	border: 1px solid var(--surface-border);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
