<template>
	<div class="error-handling-example">
		<h3>PrimeVue Toast Error Handling Demo</h3>

		<!-- Error Display Section -->
		<div class="error-section" v-if="errorStore.hasAnyError">
			<h4>Current Component Errors (for debugging):</h4>
			<div class="error-list">
				<div v-if="errorStore.lastError" class="error-item global-error">
					<strong>Global Error:</strong> {{ errorStore.lastError.message }}
					<button @click="errorStore.clearGlobalError()" class="clear-btn">Clear</button>
				</div>

				<div
					v-for="(error, component) in errorStore.componentErrors"
					:key="component"
					v-if="error"
					class="error-item component-error"
				>
					<strong>{{ component }} Error:</strong> {{ error.message }}
					<button @click="errorStore.clearComponentError(component)" class="clear-btn">
						Clear
					</button>
				</div>
			</div>
		</div>

		<!-- Demo Buttons -->
		<div class="demo-section">
			<h4>Test PrimeVue Toast Notifications:</h4>
			<div class="button-group">
				<Button
					@click="testSuccessfulApiCall"
					label="Successful API Call"
					class="p-button-success"
					:loading="loadingStore.getComponentLoading('demo-success')"
				/>

				<Button
					@click="testFailingApiCall"
					label="Failing API Call"
					class="p-button-danger"
					:loading="loadingStore.getComponentLoading('demo-fail')"
				/>

				<Button
					@click="testRetryApiCall"
					label="API Call with Retry"
					class="p-button-warning"
					:loading="loadingStore.getComponentLoading('demo-retry')"
				/>

				<Button
					@click="testDirectToasts"
					label="Direct Toast Messages"
					class="p-button-info"
				/>
			</div>

			<div class="button-group">
				<Button @click="testComponentError" label="Component Error" severity="secondary" />

				<Button @click="testGlobalError" label="Global Error" severity="secondary" />

				<Button @click="clearAllErrors" label="Clear All Errors" severity="secondary" />
			</div>
		</div>

		<!-- Real API Demo with ApiWithToast -->
		<div class="api-demo-section">
			<h4>Real API Integration with ApiWithToast:</h4>
			<div class="button-group">
				<Button
					@click="loadClientData"
					label="Load Client Data"
					class="p-button-primary"
					:loading="loadingStore.getComponentLoading('clients')"
				/>

				<Button
					@click="loadJobData"
					label="Load Job Data"
					class="p-button-primary"
					:loading="loadingStore.getComponentLoading('jobs')"
				/>

				<Button
					@click="createTestClient"
					label="Create Test Client"
					class="p-button-success"
					:loading="loadingStore.getComponentLoading('form')"
				/>
			</div>

			<div v-if="clientData.length > 0" class="data-preview">
				<h5>Client Data ({{ clientData.length }} items):</h5>
				<pre>{{ JSON.stringify(clientData.slice(0, 2), null, 2) }}</pre>
			</div>

			<div v-if="clientStatusData" class="data-preview">
				<h5>Client Status Counts:</h5>
				<div class="status-grid">
					<div
						v-for="(count, status) in clientStatusData"
						:key="status"
						class="status-item"
					>
						<strong>{{ status }}:</strong> {{ count }}
					</div>
				</div>
			</div>
		</div>

		<!-- Error History -->
		<div class="history-section">
			<h4>Error History:</h4>
			<Button
				@click="showHistory = !showHistory"
				:label="`${showHistory ? 'Hide' : 'Show'} History (${errorStore.errorHistory.length})`"
				severity="secondary"
			/>

			<div v-if="errorStore.errorHistory.length === 0 && showHistory" class="no-history">
				<p>
					No errors in history yet. Try clicking the error buttons above to generate some
					errors!
				</p>
			</div>

			<!-- Debug info -->
			<div v-if="showHistory" class="debug-info">
				<p><strong>Debug Info:</strong></p>
				<p>History array length: {{ errorStore.errorHistory.length }}</p>
				<p>
					Recent errors method returns: {{ errorStore.getRecentErrors(5).length }} items
				</p>
			</div>

			<div v-if="showHistory && errorStore.errorHistory.length > 0" class="history-list">
				<div
					v-for="error in errorStore.getRecentErrors(5)"
					:key="error.id"
					class="history-item"
				>
					<div class="history-header">
						<span class="error-type">{{ error.type }}</span>
						<span class="error-source">{{ error.source }}</span>
						<span class="error-time">{{ formatTime(error.timestamp) }}</span>
					</div>
					<div class="error-message">{{ error.message }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Button from "primevue/button";
import { useErrorStore } from "@/stores/errors";
import { useLoadingStore } from "@/stores/loading";
import ApiWithToast from "@/api-toast";

const errorStore = useErrorStore();
const loadingStore = useLoadingStore();

const clientData = ref([]);
const clientStatusData = ref(null);
const showHistory = ref(false);

// Test functions using ApiWithToast
const testSuccessfulApiCall = async () => {
	try {
		await ApiWithToast.makeApiCall(
			async () => {
				await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
				return { success: true };
			},
			{
				componentName: "demo-success",
				showSuccessToast: true,
				successMessage: "API call completed successfully!",
				loadingMessage: "Processing request...",
			},
		);
	} catch (error) {
		// Error toast shown automatically
		console.log("Error was handled automatically");
	}
};

const testFailingApiCall = async () => {
	try {
		await ApiWithToast.makeApiCall(
			async () => {
				await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
				throw new Error("This is a simulated API failure for demo purposes");
			},
			{
				componentName: "demo-fail",
				showErrorToast: true,
				customErrorMessage: "Demo API call failed as expected",
				loadingMessage: "Attempting to fail...",
			},
		);
	} catch (error) {
		console.log("Error was handled by ApiWithToast");
	}
};

const testRetryApiCall = async () => {
	let attempts = 0;

	try {
		await ApiWithToast.makeApiCall(
			async () => {
				attempts++;
				await new Promise((resolve) => setTimeout(resolve, 500));

				if (attempts < 3) {
					throw new Error(`Attempt ${attempts} failed - will retry`);
				}

				return { success: true, attempts };
			},
			{
				componentName: "demo-retry",
				retryCount: 2,
				retryDelay: 1000,
				showSuccessToast: true,
				successMessage: `Success after ${attempts} attempts!`,
				customErrorMessage: "All retry attempts failed",
				loadingMessage: "Retrying operation...",
			},
		);
	} catch (error) {
		console.log("Retry test completed");
	}
};

const testDirectToasts = () => {
	// Test different toast types directly through error store
	errorStore.setSuccess("This is a success message!");

	setTimeout(() => {
		errorStore.setInfo("This is an info message!");
	}, 500);

	setTimeout(() => {
		errorStore.setWarning("This is a warning message!");
	}, 1000);

	setTimeout(() => {
		errorStore.setGlobalError(new Error("This is an error message!"));
	}, 1500);
};

const testComponentError = () => {
	errorStore.setComponentError(
		"demo-component",
		new Error("This is a component-specific error"),
	);
	// Error notification will be shown automatically!
};

const testGlobalError = () => {
	errorStore.setGlobalError(
		new Error("This is a global error that affects the entire application"),
	);
	// Error notification will be shown automatically!
};

const clearAllErrors = () => {
	errorStore.clearAllErrors();
	errorStore.setSuccess("All errors cleared!");
};

// Real API integration using ApiWithToast
const loadClientData = async () => {
	try {
		const result = await ApiWithToast.getPaginatedClientDetails(
			{ page: 0, pageSize: 5 },
			{},
			[],
			{
				showSuccessToast: true,
				successMessage: "Client data loaded successfully!",
			},
		);

		clientData.value = result?.data || [];

		// Also load client status counts
		const statusResult = await ApiWithToast.getClientStatusCounts();
		clientStatusData.value = statusResult;
	} catch (error) {
		console.log("Client data loading failed, but error was handled automatically");
	}
};

const loadJobData = async () => {
	try {
		const result = await ApiWithToast.getPaginatedJobDetails(
			{ page: 0, pageSize: 5 },
			{},
			[],
			{
				showSuccessToast: true,
				successMessage: "Job data loaded successfully!",
			},
		);
		console.log("Job data loaded:", result);
	} catch (error) {
		console.log("Job data loading failed, but error was handled automatically");
	}
};

const createTestClient = async () => {
	const testClient = {
		customer_name: `Demo Client ${Date.now()}`,
		mobile_no: "555-0199",
		email: `demo${Date.now()}@example.com`,
		status: "Active",
	};

	try {
		await ApiWithToast.createClient(testClient);
		// Success toast shown automatically
		// Reload client data to show the change
		await loadClientData();
	} catch (error) {
		console.log("Client creation failed, but error was handled automatically");
	}
};

// Utility functions
const formatTime = (timestamp) => {
	return new Date(timestamp).toLocaleTimeString();
};

onMounted(() => {
	// Show a welcome notification using the integrated error store
	errorStore.setInfo(
		"🎉 Error Store now automatically creates PrimeVue Toast notifications! No need to import both stores anymore.",
		"Welcome",
	);

	// Add some sample errors to history for demonstration (without showing notifications)
	setTimeout(() => {
		errorStore.setComponentError(
			"demo-component",
			new Error("Sample component error from page load"),
			false,
		);
		errorStore.setApiError(
			"demo-api",
			new Error("Sample API error from initialization"),
			false,
		);

		// Clear the component errors so they don't show in the error section, but keep them in history
		setTimeout(() => {
			errorStore.clearComponentError("demo-component");
			errorStore.clearApiError("demo-api");
		}, 100);
	}, 1000);
});
</script>

<style scoped>
.error-handling-example {
	padding: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.info-banner {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 12px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.info-banner h4 {
	color: white;
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

.info-banner p {
	margin-bottom: 0.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

.info-banner strong {
	color: #ffd700;
}

.error-section {
	background: var(--surface-card);
	border: 1px solid var(--surface-border);
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 2rem;
	border-left: 4px solid var(--orange-500);
}

.error-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.error-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem;
	border-radius: 4px;
}

.global-error {
	background: #fee2e2;
	border-left: 4px solid #ef4444;
}

.component-error {
	background: #fef3c7;
	border-left: 4px solid #f59e0b;
}

.demo-section,
.api-demo-section,
.history-section {
	margin-bottom: 2rem;
	background: var(--surface-card);
	padding: 1.5rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.button-group {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.btn {
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s;
}

.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn.success {
	background: #10b981;
	color: white;
}

.btn.success:hover:not(:disabled) {
	background: #059669;
}

.btn.error {
	background: #ef4444;
	color: white;
}

.btn.error:hover:not(:disabled) {
	background: #dc2626;
}

.btn.warning {
	background: #f59e0b;
	color: white;
}

.btn.warning:hover:not(:disabled) {
	background: #d97706;
}

.btn.info {
	background: #3b82f6;
	color: white;
}

.btn.info:hover:not(:disabled) {
	background: #2563eb;
}

.btn.primary {
	background: #6366f1;
	color: white;
}

.btn.primary:hover:not(:disabled) {
	background: #4f46e5;
}

.btn.secondary {
	background: #6b7280;
	color: white;
}

.btn.secondary:hover:not(:disabled) {
	background: #4b5563;
}

.clear-btn {
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.75rem;
}

.clear-btn:hover {
	background: #e5e7eb;
}

.data-preview {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--surface-ground);
	border-radius: 6px;
	border: 1px solid var(--surface-border);
}

.data-preview pre {
	margin: 0;
	font-size: 0.75rem;
	color: var(--text-color);
	white-space: pre-wrap;
}

.status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.status-item {
	padding: 0.75rem;
	background: var(--surface-card);
	border: 1px solid var(--surface-border);
	border-radius: 6px;
	text-align: center;
}

.history-list {
	margin-top: 1rem;
}

.history-item {
	padding: 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	margin-bottom: 0.5rem;
	background: white;
}

.history-header {
	display: flex;
	gap: 1rem;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	color: #6b7280;
}

.error-type {
	font-weight: 600;
	text-transform: capitalize;
}

.error-source {
	color: #3b82f6;
}

.error-message {
	font-size: 0.875rem;
	color: #374151;
}

h3,
h4,
h5 {
	color: var(--text-color);
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.75rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 2rem;
}

h4 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--primary-color);
}

h5 {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-color-secondary);
}

/* Keep some button styles for legacy buttons like clear-btn */
.btn {
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s;
}

.btn.secondary {
	background: #6b7280;
	color: white;
}

.btn.secondary:hover:not(:disabled) {
	background: #4b5563;
}

.no-history {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--surface-ground);
	border-radius: 6px;
	color: var(--text-color-secondary);
	text-align: center;
	font-style: italic;
}

.debug-info {
	margin-top: 1rem;
	padding: 0.75rem;
	background: var(--yellow-50);
	border: 1px solid var(--yellow-200);
	border-radius: 6px;
	font-size: 0.875rem;
}

.debug-info p {
	margin: 0.25rem 0;
}
</style>
