<script lang="ts">
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
	import { auth } from '$lib/stores/auth.svelte';
	import type { PageData } from './$types';

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

	// GraphQL user data from layout
	let user = $derived(data.user?.data?.me);
	let isTeamMember = $derived(user?.__typename === 'TeamProfileType');
	let userRole = $derived(
		isTeamMember && user?.__typename === 'TeamProfileType' ? user.role : null
	);

	// Kratos session data
	let kratosIdentity = $derived(auth.session?.identity);
	let kratosTraits = $derived(kratosIdentity?.traits);

	const roleLabels: Record<string, string> = {
		ADMIN: 'Admin',
		TEAM_LEADER: 'Team Leader',
		TEAM_MEMBER: 'Team Member'
	};

	const roleBadgeStyles: Record<string, string> = {
		ADMIN: 'bg-error-100 text-error-700 dark:bg-error-900 dark:text-error-300',
		TEAM_LEADER: 'bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-300',
		TEAM_MEMBER: 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
	};
</script>

<svelte:head>
	<title>My Profile - Nexus</title>
</svelte:head>

<div class="py-8">
	<ContentContainer>
		<TeamPageHeader title="My Profile" subtitle="View and manage your profile information." />

		<div class="space-y-6">
			<!-- Nexus Account Section (from Kratos) -->
			<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
				<div
					class="border-b border-theme bg-gradient-to-r from-accent-500/10 to-secondary-500/10 p-6"
				>
					<div class="flex items-center gap-3">
						<svg
							class="h-6 w-6 text-accent-600 dark:text-accent-400"
							style="fill: none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
							/>
						</svg>
						<div>
							<h2 class="text-lg font-semibold text-theme">Nexus Account</h2>
							<p class="text-sm text-theme-muted">Your authentication and identity information</p>
						</div>
					</div>
				</div>

				<div class="p-6">
					{#if kratosTraits}
						<dl class="space-y-4">
							<div class="flex flex-col sm:flex-row sm:gap-4">
								<dt class="text-sm font-medium text-theme-secondary sm:w-32">First Name</dt>
								<dd class="text-sm text-theme">{kratosTraits.name?.first ?? 'Not set'}</dd>
							</div>
							<div class="flex flex-col sm:flex-row sm:gap-4">
								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Last Name</dt>
								<dd class="text-sm text-theme">{kratosTraits.name?.last ?? 'Not set'}</dd>
							</div>
							<div class="flex flex-col sm:flex-row sm:gap-4">
								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Email</dt>
								<dd class="text-sm text-theme">{kratosTraits.email ?? 'Not set'}</dd>
							</div>
							<div class="flex flex-col sm:flex-row sm:gap-4">
								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Phone</dt>
								<dd class="text-sm text-theme">{kratosTraits.phone ?? 'Not set'}</dd>
							</div>
						</dl>
					{:else}
						<p class="text-sm text-theme-muted">Loading account information...</p>
					{/if}
				</div>

				<div class="border-t border-theme bg-black/[0.02] p-6 dark:bg-white/[0.02]">
					<a
						href="https://account.example.com/"
						target="_blank"
						rel="noopener noreferrer"
						class="inline-flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-600"
					>
						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
							/>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
							/>
						</svg>
						Manage Nexus Account
						<svg class="h-3 w-3" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
							<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>
					</a>
				</div>
			</div>

			<!-- Profile Information Section (from GraphQL/GetMe) -->
			{#if user}
				<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
					<div
						class="border-b border-theme bg-gradient-to-r from-primary-500/10 to-accent-500/10 p-6"
					>
						<div class="flex items-center gap-4">
							<!-- Avatar -->
							<div
								class="flex h-16 w-16 items-center justify-center rounded-full bg-primary-500 text-xl font-bold text-white"
							>
								{user.fullName?.charAt(0).toUpperCase() ?? '?'}
							</div>
							<div>
								<div class="flex items-center gap-3">
									<h2 class="text-lg font-semibold text-theme">Profile Information</h2>
									{#if userRole}
										<span
											class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold tracking-wide uppercase {roleBadgeStyles[
												userRole
											] ?? 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'}"
										>
											{roleLabels[userRole] ?? userRole}
										</span>
									{/if}
								</div>
								<p class="text-sm text-theme-muted">Your team profile data</p>
							</div>
						</div>
					</div>

					<div class="p-6">
						<dl class="space-y-4">
							<div class="flex flex-col sm:flex-row sm:gap-4">
								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Full Name</dt>
								<dd class="text-sm text-theme">{user.fullName ?? 'Not set'}</dd>
							</div>
							<div class="flex flex-col sm:flex-row sm:gap-4">
								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Email</dt>
								<dd class="text-sm text-theme">{user.email ?? 'Not set'}</dd>
							</div>
							<div class="flex flex-col sm:flex-row sm:gap-4">
								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Phone</dt>
								<dd class="text-sm text-theme">{user.phone ?? 'Not set'}</dd>
							</div>
							{#if userRole}
								<div class="flex flex-col sm:flex-row sm:gap-4">
									<dt class="text-sm font-medium text-theme-secondary sm:w-32">Role</dt>
									<dd class="text-sm text-theme">{roleLabels[userRole] ?? userRole}</dd>
								</div>
							{/if}
						</dl>
					</div>
				</div>
			{/if}
		</div>
	</ContentContainer>
</div>
