<script lang="ts">
	import { goto } from "$app/navigation";
	import { page } from "$app/stores";
	import { Avatar } from "$lib/components/ui";
	import { getContext } from "svelte";
	import type { SupabaseClient } from "@supabase/supabase-js";
	import type { Database } from "$lib/supabase/types";
	import { toasts } from "$lib/stores/ui";
	import * as m from "$lib/paraglide/messages";

	interface EventItem {
		id: string;
		org_id: string;
		name: string;
		slug: string;
		description: string | null;
		status: "planning" | "active" | "completed" | "archived";
		start_date: string | null;
		end_date: string | null;
		venue_name: string | null;
		color: string | null;
		member_count: number;
	}

	interface Props {
		data: {
			org: { id: string; name: string; slug: string };
			userRole: string;
			events: EventItem[];
			statusFilter: string;
		};
	}

	let { data }: Props = $props();

	const supabase = getContext<SupabaseClient<Database>>("supabase");

	const isEditor = $derived(
		["owner", "admin", "editor"].includes(data.userRole),
	);

	// Create event modal
	let showCreateModal = $state(false);
	let newEventName = $state("");
	let newEventDescription = $state("");
	let newEventStartDate = $state("");
	let newEventEndDate = $state("");
	let newEventVenue = $state("");
	let newEventColor = $state("#00A3E0");
	let creating = $state(false);

	const statusTabs = $derived([
		{ value: "all", label: m.events_tab_all(), icon: "apps" },
		{ value: "planning", label: m.events_tab_planning(), icon: "edit_note" },
		{ value: "active", label: m.events_tab_active(), icon: "play_circle" },
		{ value: "completed", label: m.events_tab_completed(), icon: "check_circle" },
		{ value: "archived", label: m.events_tab_archived(), icon: "archive" },
	]);

	const presetColors = [
		"#00A3E0",
		"#8B5CF6",
		"#EC4899",
		"#F59E0B",
		"#10B981",
		"#EF4444",
		"#6366F1",
		"#14B8A6",
	];

	function getStatusColor(status: string): string {
		const map: Record<string, string> = {
			planning: "text-amber-400 bg-amber-400/10",
			active: "text-emerald-400 bg-emerald-400/10",
			completed: "text-blue-400 bg-blue-400/10",
			archived: "text-light/40 bg-light/5",
		};
		return map[status] ?? "text-light/40 bg-light/5";
	}

	function getStatusIcon(status: string): string {
		const map: Record<string, string> = {
			planning: "edit_note",
			active: "play_circle",
			completed: "check_circle",
			archived: "archive",
		};
		return map[status] ?? "help";
	}

	function formatDate(dateStr: string | null): string {
		if (!dateStr) return "";
		return new Date(dateStr).toLocaleDateString(undefined, {
			month: "short",
			day: "numeric",
			year: "numeric",
		});
	}

	function formatDateRange(
		start: string | null,
		end: string | null,
	): string {
		if (!start && !end) return m.events_no_dates();
		if (start && !end) return formatDate(start);
		if (!start && end) return `Until ${formatDate(end)}`;
		return `${formatDate(start)} — ${formatDate(end)}`;
	}

	async function handleCreate() {
		if (!newEventName.trim()) return;
		creating = true;
		try {
			const { data: created, error } = await (supabase as any)
				.from("events")
				.insert({
					org_id: data.org.id,
					name: newEventName.trim(),
					slug: newEventName
						.trim()
						.toLowerCase()
						.replace(/[^\w\s-]/g, "")
						.replace(/[\s_]+/g, "-")
						.replace(/-+/g, "-")
						.slice(0, 60) || "event",
					description: newEventDescription.trim() || null,
					start_date: newEventStartDate || null,
					end_date: newEventEndDate || null,
					venue_name: newEventVenue.trim() || null,
					color: newEventColor,
					created_by: (await supabase.auth.getUser()).data.user?.id,
				})
				.select()
				.single();

			if (error) throw error;

			toasts.success(m.events_created({ name: created.name }));
			showCreateModal = false;
			resetForm();
			goto(`/${data.org.slug}/events/${created.slug}`);
		} catch (e: any) {
			toasts.error(e.message || "Failed to create event");
		} finally {
			creating = false;
		}
	}

	function resetForm() {
		newEventName = "";
		newEventDescription = "";
		newEventStartDate = "";
		newEventEndDate = "";
		newEventVenue = "";
		newEventColor = "#00A3E0";
	}

	function switchStatus(status: string) {
		const url = new URL($page.url);
		if (status === "all") {
			url.searchParams.delete("status");
		} else {
			url.searchParams.set("status", status);
		}
		goto(url.toString(), { replaceState: true, invalidateAll: true });
	}
</script>

<svelte:head>
	<title>{m.events_title()} | {data.org.name}</title>
</svelte:head>

<div class="flex flex-col h-full">
	<!-- Header -->
	<header
		class="flex items-center justify-between px-6 py-5 border-b border-light/5"
	>
		<div>
			<h1 class="text-h1 font-heading text-white">{m.events_title()}</h1>
			<p class="text-body-sm text-light/50 mt-1">
				{m.events_subtitle()}
			</p>
		</div>
		{#if isEditor}
			<button
				type="button"
				class="flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
				onclick={() => (showCreateModal = true)}
			>
				<span
					class="material-symbols-rounded"
					style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
					>add</span
				>
				{m.events_new()}
			</button>
		{/if}
	</header>

	<!-- Status Tabs -->
	<div class="flex items-center gap-1 px-6 py-3 border-b border-light/5">
		{#each statusTabs as tab}
			<button
				type="button"
				class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {data.statusFilter ===
				tab.value
					? 'bg-primary text-background'
					: 'text-light/60 hover:text-white hover:bg-dark/50'}"
				onclick={() => switchStatus(tab.value)}
			>
				<span
					class="material-symbols-rounded"
					style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
					>{tab.icon}</span
				>
				{tab.label}
			</button>
		{/each}
	</div>

	<!-- Events Grid -->
	<div class="flex-1 overflow-auto p-6">
		{#if data.events.length === 0}
			<div
				class="flex flex-col items-center justify-center h-full text-light/40"
			>
				<span
					class="material-symbols-rounded mb-4"
					style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
					>celebration</span
				>
				<p class="text-h3 font-heading mb-2">{m.events_empty_title()}</p>
				<p class="text-body text-light/30">
					{m.events_empty_desc()}
				</p>
				{#if isEditor}
					<button
						type="button"
						class="mt-4 flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
						onclick={() => (showCreateModal = true)}
					>
						<span
							class="material-symbols-rounded"
							style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
							>add</span
						>
						{m.events_create()}
					</button>
				{/if}
			</div>
		{:else}
			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
				{#each data.events as event}
					<a
						href="/{data.org.slug}/events/{event.slug}"
						class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-2xl p-5 flex flex-col gap-3 transition-all"
					>
						<!-- Color bar + Status -->
						<div class="flex items-center justify-between">
							<div class="flex items-center gap-2">
								<div
									class="w-3 h-3 rounded-full"
									style="background-color: {event.color ||
										'#00A3E0'}"
								></div>
								<h3
									class="text-body font-heading text-white group-hover:text-primary transition-colors truncate"
								>
									{event.name}
								</h3>
							</div>
							<span
								class="text-[11px] font-body px-2 py-0.5 rounded-full capitalize {getStatusColor(
									event.status,
								)}"
							>
								{event.status}
							</span>
						</div>

						<!-- Description -->
						{#if event.description}
							<p
								class="text-body-sm text-light/50 line-clamp-2"
							>
								{event.description}
							</p>
						{/if}

						<!-- Meta row -->
						<div
							class="flex items-center gap-4 text-[12px] text-light/40 mt-auto pt-2"
						>
							<!-- Date -->
							<div class="flex items-center gap-1">
								<span
									class="material-symbols-rounded"
									style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
									>calendar_today</span
								>
								<span
									>{formatDateRange(
										event.start_date,
										event.end_date,
									)}</span
								>
							</div>

							<!-- Venue -->
							{#if event.venue_name}
								<div class="flex items-center gap-1">
									<span
										class="material-symbols-rounded"
										style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
										>location_on</span
									>
									<span class="truncate max-w-[120px]"
										>{event.venue_name}</span
									>
								</div>
							{/if}

							<!-- Members -->
							<div class="flex items-center gap-1 ml-auto">
								<span
									class="material-symbols-rounded"
									style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
									>group</span
								>
								<span>{event.member_count}</span>
							</div>
						</div>
					</a>
				{/each}
			</div>
		{/if}
	</div>
</div>

<!-- Create Event Modal -->
{#if showCreateModal}
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<!-- svelte-ignore a11y_interactive_supports_focus -->
	<div
		class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
		onkeydown={(e) => e.key === "Escape" && (showCreateModal = false)}
		onclick={(e) => e.target === e.currentTarget && (showCreateModal = false)}
		role="dialog"
		aria-modal="true"
		aria-label={m.events_create()}
	>
		<div
			class="bg-night rounded-2xl w-full max-w-lg shadow-2xl border border-light/10"
		>
			<div class="flex items-center justify-between p-5 border-b border-light/5">
				<h2 class="text-h3 font-heading text-white">{m.events_create()}</h2>
				<button
					type="button"
					class="text-light/40 hover:text-white transition-colors"
					onclick={() => (showCreateModal = false)}
					aria-label={m.btn_close()}
				>
					<span
						class="material-symbols-rounded"
						style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
						>close</span
					>
				</button>
			</div>

			<form
				class="p-5 flex flex-col gap-4"
				onsubmit={(e) => {
					e.preventDefault();
					handleCreate();
				}}
			>
				<!-- Name -->
				<div class="flex flex-col gap-1.5">
					<label
						for="event-name"
						class="text-body-sm text-light/60 font-body"
						>{m.events_form_name()}</label
					>
					<input
						id="event-name"
						type="text"
						bind:value={newEventName}
						placeholder={m.events_form_name_placeholder()}
						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
						required
					/>
				</div>

				<!-- Description -->
				<div class="flex flex-col gap-1.5">
					<label
						for="event-desc"
						class="text-body-sm text-light/60 font-body"
						>{m.events_form_description()}</label
					>
					<textarea
						id="event-desc"
						bind:value={newEventDescription}
						placeholder={m.events_form_description_placeholder()}
						rows="2"
						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none"
					></textarea>
				</div>

				<!-- Dates -->
				<div class="grid grid-cols-2 gap-3">
					<div class="flex flex-col gap-1.5">
						<label
							for="event-start"
							class="text-body-sm text-light/60 font-body"
							>{m.events_form_start_date()}</label
						>
						<input
							id="event-start"
							type="date"
							bind:value={newEventStartDate}
							class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white focus:outline-none focus:border-primary"
						/>
					</div>
					<div class="flex flex-col gap-1.5">
						<label
							for="event-end"
							class="text-body-sm text-light/60 font-body"
							>{m.events_form_end_date()}</label
						>
						<input
							id="event-end"
							type="date"
							bind:value={newEventEndDate}
							class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white focus:outline-none focus:border-primary"
						/>
					</div>
				</div>

				<!-- Venue -->
				<div class="flex flex-col gap-1.5">
					<label
						for="event-venue"
						class="text-body-sm text-light/60 font-body"
						>{m.events_form_venue()}</label
					>
					<input
						id="event-venue"
						type="text"
						bind:value={newEventVenue}
						placeholder={m.events_form_venue_placeholder()}
						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
					/>
				</div>

				<!-- Color -->
				<div class="flex flex-col gap-1.5">
					<!-- svelte-ignore a11y_label_has_associated_control -->
					<label class="text-body-sm text-light/60 font-body"
						>{m.events_form_color()}</label
					>
					<div class="flex items-center gap-2">
						{#each presetColors as color}
							<button
								type="button"
								class="w-7 h-7 rounded-full border-2 transition-all {newEventColor ===
								color
									? 'border-white scale-110'
									: 'border-transparent hover:border-light/30'}"
								style="background-color: {color}"
								onclick={() => (newEventColor = color)}
								aria-label={m.events_form_select_color({ color })}
							></button>
						{/each}
					</div>
				</div>

				<!-- Actions -->
				<div
					class="flex items-center justify-end gap-3 pt-2 border-t border-light/5"
				>
					<button
						type="button"
						class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
						onclick={() => {
							showCreateModal = false;
							resetForm();
						}}
					>
						{m.btn_cancel()}
					</button>
					<button
						type="submit"
						disabled={!newEventName.trim() || creating}
						class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
					>
						{creating ? m.events_creating() : m.events_create()}
					</button>
				</div>
			</form>
		</div>
	</div>
{/if}
