<script lang="ts">
	import { onMount } from 'svelte';
	import { page } from '$app/stores';
	import GoogleAuthButton from '$lib/components/GoogleAuthButton.svelte';

	let { data } = $props();

	// Types
	interface Event {
		id: string;
		created_at: string;
		created_by: string;
		name: string;
		date: string;
		section_id: string;
		email_subject: string;
		email_body: string;
		sheet_id: string;
		name_column: number;
		surname_column: number;
		email_column: number;
		confirmation_column: number;
	}

	interface Participant {
		id: string;
		name: string;
		surname: string;
		email: string;
		scanned: boolean;
		email_sent: boolean;
	}

	// State
	let event = $state<Event | null>(null);
	let participants = $state<Participant[]>([]);
	let loading = $state(true);
	let participantsLoading = $state(true);
	let syncingParticipants = $state(false);
	let sendingEmails = $state(false);
	let emailProgress = $state({ sent: 0, total: 0 });
	let emailResults = $state<{success: boolean, results: any[], summary: any} | null>(null);
	let error = $state('');

	// Get event ID from URL params
	let eventId = $derived($page.url.searchParams.get('id'));

	onMount(async () => {
		if (eventId) {
			await loadEvent();
			await loadParticipants();
		}
	});

	async function loadEvent() {
		loading = true;
		try {
			const { data: eventData, error: eventError } = await data.supabase
				.from('events')
				.select('*')
				.eq('id', eventId)
				.single();

			if (eventError) throw eventError;
			event = eventData;
		} catch (err) {
			console.error('Error loading event:', err);
			error = 'Failed to load event';
		} finally {
			loading = false;
		}
	}

	async function loadParticipants() {
		participantsLoading = true;
		try {
			const { data: participantsData, error: participantsError } = await data.supabase
				.from('participants')
				.select('id, name, surname, email, scanned, email_sent')
				.eq('event', eventId)
				.order('scanned', { ascending: true })
				.order('email_sent', { ascending: true })
				.order('name', { ascending: true });

			if (participantsError) throw participantsError;
			participants = participantsData || [];
		} catch (err) {
			console.error('Error loading participants:', err);
			error = 'Failed to load participants';
		} finally {
			participantsLoading = false;
		}
	}

	async function syncParticipants() {
		if (!event || !event.sheet_id) return;

		// Check if user has Google authentication
		const refreshToken = localStorage.getItem('google_refresh_token');
		if (!refreshToken) {
			error = 'Please connect your Google account first to sync participants';
			return;
		}

		syncingParticipants = true;
		error = '';
		try {
			// Fetch sheet data
			const response = await fetch(`/private/api/google/sheets/${event.sheet_id}/data`, {
				method: 'GET',
				headers: {
					Authorization: `Bearer ${refreshToken}`
				}
			});

			if (!response.ok) {
				if (response.status === 401) {
					throw new Error('Google authentication expired. Please reconnect your Google account.');
				}
				throw new Error('Failed to fetch sheet data');
			}

			const sheetData = await response.json();
			const rows = sheetData.values || [];

			if (rows.length === 0) throw new Error('No data found in sheet');

			// Extract participant data based on column mapping
			const names: string[] = [];
			const surnames: string[] = [];
			const emails: string[] = [];

			// Skip header row (start from index 1)
			for (let i = 1; i < rows.length; i++) {
				const row = rows[i];
				if (row.length > 0) {
					const name = row[event.name_column - 1] || '';
					const surname = row[event.surname_column - 1] || '';
					const email = row[event.email_column - 1] || '';
					const confirmation = row[event.confirmation_column - 1] || '';

					// Only add if the row has meaningful data (not all empty) AND confirmation is TRUE
					const isConfirmed =
						confirmation.toString().toLowerCase() === 'true' ||
						confirmation.toString().toLowerCase() === 'yes' ||
						confirmation === '1' ||
						confirmation === 'x';

					if ((name.trim() || surname.trim() || email.trim()) && isConfirmed) {
						names.push(name.trim());
						surnames.push(surname.trim());
						emails.push(email.trim());
					}
				}
			}

			// Call database function to add participants
			const { error: syncError } = await data.supabase.rpc('participants_add_bulk', {
				p_event: eventId,
				p_names: names,
				p_surnames: surnames,
				p_emails: emails
			});

			if (syncError) throw syncError;

			// Reload participants
			await loadParticipants();
		} catch (err) {
			console.error('Error syncing participants:', err);
			error = 'Failed to sync participants';
		} finally {
			syncingParticipants = false;
		}
	}

	async function sendEmailsToUncontacted() {
		if (!event) return;

		// Check if user has Google authentication
		const refreshToken = localStorage.getItem('google_refresh_token');
		if (!refreshToken) {
			error = 'Please connect your Google account first to send emails';
			return;
		}

		const uncontactedParticipants = participants.filter(p => !p.email_sent);
		if (uncontactedParticipants.length === 0) {
			error = 'No uncontacted participants found';
			return;
		}

		sendingEmails = true;
		emailProgress = { sent: 0, total: uncontactedParticipants.length };
		emailResults = null;
		error = '';

		try {
			// Send all emails in batch
			const response = await fetch('/private/api/gmail', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					participants: uncontactedParticipants,
					subject: event.email_subject,
					text: event.email_body,
					eventId: event.id,
					refreshToken: refreshToken
				})
			});			if (response.ok) {
				const result = await response.json();
				emailProgress.sent = result.summary.success;
				emailResults = result;
				
				// Update participants state to reflect email_sent status
				participants = participants.map(p => {
					const emailedParticipant = result.results.find((r: any) => r.participant.id === p.id);
					if (emailedParticipant && emailedParticipant.success) {
						return { ...p, email_sent: true };
					}
					return p;
				});
			} else {
				const errorData = await response.json();
				error = errorData.error || 'Failed to send emails';
				console.error('Email sending failed:', errorData);
			}
		} catch (err) {
			console.error('Error sending emails:', err);
			error = 'Failed to send emails to participants';
		} finally {
			sendingEmails = false;
		}
	}

	function formatDate(dateString: string) {
		return new Date(dateString).toLocaleDateString('en-GB', {
			day: '2-digit',
			month: '2-digit',
			year: 'numeric'
		});
	}
</script>

<!-- Header -->
<div class="mt-2 mb-4">
	<h1 class="text-center text-2xl font-bold">Event Overview</h1>
</div>

<!-- Event Information -->
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
	{#if loading}
		<!-- Loading placeholder -->
		<div class="space-y-4">
			<div class="h-8 w-1/2 animate-pulse rounded bg-gray-200"></div>
			<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
			<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
			<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
		</div>
	{:else if event}
		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
			<div>
				<h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
				<div class="space-y-3">
					<div class="flex items-center">
						<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
						<span class="text-sm text-gray-900">{formatDate(event.date)}</span>
					</div>
					<div class="flex items-center">
						<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
						<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
					</div>
					<div class="flex items-center">
						<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
						<a
							href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
							target="_blank"
							rel="noopener noreferrer"
							class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="mr-1 h-3 w-3"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
								/>
							</svg>
							Open in Google Sheets
						</a>
					</div>
				</div>
			</div>
			<div>
				<h3 class="mb-3 text-lg font-medium text-gray-900">Email Details</h3>
				<div class="space-y-2">
					<div>
						<span class="text-sm font-medium text-gray-500">Subject:</span>
						<p class="text-sm text-gray-900">{event.email_subject}</p>
					</div>
					<div>
						<span class="text-sm font-medium text-gray-500">Body:</span>
						<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
					</div>
				</div>
			</div>
		</div>
	{:else if error}
		<div class="py-8 text-center">
			<p class="text-red-600">{error}</p>
		</div>
	{/if}
</div>

<!-- Google Authentication Section -->
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
	<div class="mb-4 flex items-center justify-between">
		<h2 class="text-xl font-semibold text-gray-900">Google Account</h2>
		<p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
	</div>
	<GoogleAuthButton 
		size="small" 
		variant="secondary"
		onSuccess={() => {
			// Refresh the page or update UI state as needed
			error = '';
		}}
		onError={(errorMsg) => {
			error = errorMsg;
		}}
	/>
</div>

<!-- Participants Section -->
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
	<div class="mb-4 flex items-center justify-between">
		<h2 class="text-xl font-semibold text-gray-900">Participants</h2>
		<button
			onclick={syncParticipants}
			disabled={syncingParticipants || !event}
			class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
		>
			{#if syncingParticipants}
				Syncing...
			{:else}
				Sync Participants
			{/if}
		</button>
	</div>

	{#if participantsLoading}
		<!-- Loading placeholder for participants -->
		<div class="space-y-3">
			{#each Array(5) as _}
				<div class="grid grid-cols-5 gap-4 border-b border-gray-200 py-3">
					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
					<div class="h-4 animate-pulse rounded bg-gray-200"></div>
				</div>
			{/each}
		</div>
	{:else if participants.length > 0}
		<div class="overflow-x-auto">
			<table class="w-full">
				<thead class="bg-gray-50">
					<tr>
						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Surname</th>
						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Scanned</th>
						<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email Sent</th>
					</tr>
				</thead>
				<tbody>
					{#each participants as participant}
						<tr class="border-b border-gray-200 hover:bg-gray-50">
							<td class="px-4 py-3 text-sm text-gray-900">{participant.name}</td>
							<td class="px-4 py-3 text-sm text-gray-900">{participant.surname}</td>
							<td class="px-4 py-3 text-sm text-gray-900">{participant.email}</td>
							<td class="px-4 py-3 text-sm">
								{#if participant.scanned}
									<div class="flex items-center text-green-600">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											class="h-5 w-5"
											viewBox="0 0 20 20"
											fill="currentColor"
										>
											<path
												fill-rule="evenodd"
												d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
												clip-rule="evenodd"
											/>
										</svg>
									</div>
								{:else}
									<div class="flex items-center text-gray-400">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											class="h-5 w-5"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M6 18L18 6M6 6l12 12"
											/>
										</svg>
									</div>
								{/if}
							</td>
							<td class="px-4 py-3 text-sm">
								{#if participant.email_sent}
									<div class="flex items-center text-blue-600">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											class="h-5 w-5"
											viewBox="0 0 20 20"
											fill="currentColor"
										>
											<path
												fill-rule="evenodd"
												d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
												clip-rule="evenodd"
											/>
										</svg>
									</div>
								{:else}
									<div class="flex items-center text-gray-400">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											class="h-5 w-5"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M6 18L18 6M6 6l12 12"
											/>
										</svg>
									</div>
								{/if}
							</td>
						</tr>
					{/each}
				</tbody>
			</table>
		</div>
	{:else}
		<div class="py-8 text-center">
			<p class="text-gray-500">
				No participants found. Click "Sync Participants" to load from Google Sheets.
			</p>
		</div>
	{/if}
</div>

<!-- Email Sending Section -->
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
	<div class="mb-4 flex items-center justify-between">
		<h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
		<div class="text-sm text-gray-500">
			{participants.filter(p => !p.email_sent).length} uncontacted participants
		</div>
	</div>

	{#if sendingEmails}
		<div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
			<div class="flex items-center justify-center">
				<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
				</svg>
				<span class="text-blue-800 font-medium">Sending {emailProgress.total} emails... Please wait.</span>
			</div>
		</div>
	{:else}
		<div class="space-y-4">
			{#if participants.filter(p => !p.email_sent).length > 0}
				<div class="rounded-lg bg-yellow-50 p-4 border border-yellow-200">
					<div class="flex items-center">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
							<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
						</svg>
						<span class="text-yellow-800 text-sm sm:text-base">
							<strong>Warning:</strong> Do not close this window while emails are being sent. The process may take several minutes.
						</span>
					</div>
				</div>
				
				<div class="flex items-center justify-end">
					<button
						onclick={sendEmailsToUncontacted}
						disabled={!event || participants.filter(p => !p.email_sent).length === 0}
						class="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
					>
						Send Emails
					</button>
				</div>
			{:else}
				<div class="text-center py-4">
					<div class="flex items-center justify-center text-green-600 mb-2">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
							<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
						</svg>
					</div>
					<p class="text-green-700 font-medium">All participants have been contacted!</p>
					<p class="text-sm text-green-600">No pending emails to send.</p>
				</div>
			{/if}
		</div>
	{/if}
</div>

<!-- Email Results Section -->
{#if emailResults}
	<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
		<div class="mb-4 flex items-center justify-between">
			<h2 class="text-xl font-semibold text-gray-900">Email Results</h2>
			<div class="text-sm text-gray-500">
				{emailResults.summary.success} successful, {emailResults.summary.errors} failed
			</div>
		</div>

		<div class="mb-4">
			<div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
				<div class="flex items-center gap-2">
					<div class="w-3 h-3 rounded-full bg-green-500"></div>
					<span class="text-sm font-medium">Sent: {emailResults.summary.success}</span>
				</div>
				<div class="flex items-center gap-2">
					<div class="w-3 h-3 rounded-full bg-red-500"></div>
					<span class="text-sm font-medium">Failed: {emailResults.summary.errors}</span>
				</div>
				<div class="flex items-center gap-2">
					<div class="w-3 h-3 rounded-full bg-blue-500"></div>
					<span class="text-sm font-medium">Total: {emailResults.summary.total}</span>
				</div>
			</div>
		</div>

		{#if emailResults.results.length > 0}
			<div class="overflow-x-auto">
				<table class="w-full">
					<thead class="bg-gray-50">
						<tr>
							<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
							<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
							<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
						</tr>
					</thead>
					<tbody>
						{#each emailResults.results as result}
							<tr class="border-b border-gray-200 hover:bg-gray-50">
								<td class="px-4 py-3 text-sm text-gray-900">
									{result.participant.name} {result.participant.surname}
								</td>
								<td class="px-4 py-3 text-sm text-gray-900">{result.participant.email}</td>
								<td class="px-4 py-3 text-sm">
									{#if result.success}
										<div class="flex items-center text-green-600">
											<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
												<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
											</svg>
											<span class="text-sm font-medium">Sent</span>
										</div>
									{:else}
										<div class="flex items-center text-red-600">
											<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
											</svg>
											<span class="text-sm font-medium">Failed</span>
											{#if result.error}
												<span class="text-xs text-red-500 ml-2">({result.error})</span>
											{/if}
										</div>
									{/if}
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		{/if}
	</div>
{/if}

{#if error}
	<div class="mt-4 rounded border border-red-200 bg-red-50 p-3">
		<p class="text-sm text-red-600">{error}</p>
	</div>
{/if}
