<script lang="ts">
	import type { PageData } from './$types';
	import { invalidateAll } from '$app/navigation';
	import { ContentContainer } from '$lib/components/layout';
	import { PageHeader, SectionHeader } from '$lib/components/admin';
	import { FormDrawer } from '$lib/components/drawers';
	import { TeamProfileForm } from '$lib/components/forms';
	import { formatDate } from '$lib/utils/date';
	import type { TeamRole, EntityStatus } from '$lib/graphql/queries/team';

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

	let profile = $derived(data.profile);

	// Drawer state
	let drawerOpen = $state(false);

	function getStatusBadgeClass(status: EntityStatus): string {
		switch (status) {
			case 'ACTIVE':
				return 'badge-success';
			case 'INACTIVE':
				return 'badge-neutral';
			case 'PENDING':
				return 'badge-warning';
			default:
				return 'badge-neutral';
		}
	}

	function getRoleBadgeClass(role: TeamRole): string {
		switch (role) {
			case 'ADMIN':
				return 'bg-accent5-100 text-accent5-800 dark:bg-accent5-900/30 dark:text-accent5-400';
			case 'TEAM_LEADER':
				return 'bg-accent-100 text-accent-800 dark:bg-accent-900/30 dark:text-accent-400';
			case 'TEAM_MEMBER':
				return 'bg-secondary-100 text-secondary-800 dark:bg-secondary-900/30 dark:text-secondary-400';
			default:
				return 'badge-neutral';
		}
	}

	function formatRole(role: TeamRole): string {
		switch (role) {
			case 'ADMIN':
				return 'Admin';
			case 'TEAM_LEADER':
				return 'Team Leader';
			case 'TEAM_MEMBER':
				return 'Team Member';
			default:
				return role;
		}
	}

	function handleEditProfile() {
		drawerOpen = true;
	}

	function closeDrawer() {
		drawerOpen = false;
	}

	async function handleFormSuccess() {
		closeDrawer();
		await invalidateAll();
	}
</script>

<svelte:head>
	<title>{profile?.fullName ?? 'Team Profile'} - Admin - Nexus</title>
</svelte:head>

<div class="py-8">
	<ContentContainer maxWidth="4xl">
		{#if profile}
			<PageHeader
				title={profile.fullName}
				colorScheme="accent5"
				backHref="/admin/profiles"
				invalidateOnBack
			>
				<span class={getStatusBadgeClass(profile.status)}>{profile.status}</span>
			</PageHeader>

			<div class="space-y-6">
				<!-- Profile Information -->
				<section
					class="overflow-hidden rounded-xl border border-accent5-500/20 bg-theme-card shadow-theme-md"
				>
					<div
						class="border-b border-accent5-500/20 bg-linear-to-r from-accent5-500/10 to-transparent px-5 py-3"
					>
						<SectionHeader
							title="Profile Info"
							buttonText="Edit"
							buttonIcon="edit"
							onButtonClick={handleEditProfile}
						/>
					</div>
					<div class="grid grid-cols-1 gap-6 px-5 py-5 sm:grid-cols-2">
						<div>
							<p class="detail-label">First Name</p>
							<p class="text-theme">{profile.firstName}</p>
						</div>
						<div>
							<p class="detail-label">Last Name</p>
							<p class="text-theme">{profile.lastName}</p>
						</div>
						<div>
							<p class="detail-label">Email</p>
							<p class="text-theme">{profile.email || '—'}</p>
						</div>
						<div>
							<p class="detail-label">Phone</p>
							<p class="text-theme">{profile.phone || '—'}</p>
						</div>
					</div>
				</section>

				<!-- Role & Access -->
				<section
					class="overflow-hidden rounded-xl border border-accent5-500/20 bg-theme-card shadow-theme-md"
				>
					<div
						class="border-b border-accent5-500/20 bg-linear-to-r from-accent5-500/10 to-transparent px-5 py-3"
					>
						<SectionHeader title="Role & Access" />
					</div>
					<div class="grid grid-cols-1 gap-6 px-5 py-5 sm:grid-cols-2">
						<div>
							<p class="detail-label">Role</p>
							<span
								class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold {getRoleBadgeClass(
									profile.role
								)}"
							>
								{formatRole(profile.role)}
							</span>
						</div>
						<div>
							<p class="detail-label">Status</p>
							<span class={getStatusBadgeClass(profile.status)}>{profile.status}</span>
						</div>
					</div>
				</section>

				<!-- Notes -->
				<section
					class="overflow-hidden rounded-xl border border-accent5-500/20 bg-theme-card shadow-theme-md"
				>
					<div
						class="border-b border-accent5-500/20 bg-linear-to-r from-accent5-500/10 to-transparent px-5 py-3"
					>
						<SectionHeader title="Notes" />
					</div>
					<div class="px-5 py-5">
						{#if profile.notes}
							<p class="whitespace-pre-wrap text-theme">{profile.notes}</p>
						{:else}
							<p class="text-theme-muted">No notes</p>
						{/if}
					</div>
				</section>

				<!-- System Information (Read-only) -->
				<section
					class="overflow-hidden rounded-xl border border-theme bg-theme-card shadow-theme-md"
				>
					<div class="bg-theme-secondary/50 border-b border-theme px-5 py-3">
						<SectionHeader title="System Information" />
					</div>
					<div class="grid grid-cols-1 gap-6 px-5 py-5 sm:grid-cols-2">
						<div>
							<p class="detail-label">Kratos Identity ID</p>
							<p class="font-mono text-sm text-theme-muted">{profile.id}</p>
						</div>
						<div>
							<p class="detail-label">Created</p>
							<p class="text-theme">{formatDate(profile.createdAt)}</p>
						</div>
						<div>
							<p class="detail-label">Last Updated</p>
							<p class="text-theme">{formatDate(profile.updatedAt)}</p>
						</div>
					</div>
				</section>
			</div>

			<!-- Form Drawer -->
			<FormDrawer open={drawerOpen} title="Edit Profile" onClose={closeDrawer}>
				<TeamProfileForm {profile} onSuccess={handleFormSuccess} onCancel={closeDrawer} />
			</FormDrawer>
		{:else}
			<div class="empty-state">
				<svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="1.5"
						d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
				<h2 class="empty-state-title">Profile not found</h2>
				<p class="empty-state-text">
					The team profile you're looking for doesn't exist or has been deleted.
				</p>
				<a href="/admin/profiles" class="mt-4 btn-primary">Back to Profiles</a>
			</div>
		{/if}
	</ContentContainer>
</div>
