<script lang="ts">
	import Icon from '@iconify/svelte';
	import ArxletHeader from '$lib/components/ArxletHeader.svelte';
	import LiquidGlass from '$lib/components/LiquidGlass.svelte';
	import InvitesSection from './Invites/InvitesSection.svelte';

	let copyStatus = $state('');
</script>

<ArxletHeader
	title="CCN Information"
	subtitle="Details and identity information for your Closed Community Network"
	icon="mingcute:invite-fill"
	iconColor="#10b981"
/>

<LiquidGlass class="min-h-full">
	<div class="max-w-6xl mx-auto p-6">
		{#await window.eve.getActiveCCN() then ccn}
			<div class="flex flex-row gap-2">
				<section class="bg-base-200 rounded-xl p-6">
					<div class="flex items-center gap-3 mb-6">
						<Icon icon="solar:letter-opened-bold-duotone" class="w-5 h-5" />
						<div>
							<h2 class="text-xl font-semibold text-base-content">Invite</h2>
							<p class="text-base-content/70 text-sm">Invite your friends to join your CCN</p>
						</div>
					</div>

					<InvitesSection />
				</section>

				<section class="flex flex-col space-y-2">
					<section class="bg-base-200 rounded-xl p-6">
						<div class="flex items-center gap-3 mb-6">
							<Icon icon="mdi:account-circle" class="w-6 h-6 text-primary" />
							<div>
								<h2 class="text-xl font-semibold text-base-content">Identity</h2>
								<p class="text-base-content/70 text-sm">Your CCN's primary identification</p>
							</div>
						</div>

						<div class="flex items-center space-x-6 justify-center">
							<img
								src={window.eve.getCCNAvatar(ccn?.publicKey)}
								alt="CCN Avatar"
								class="ccn-hex ccn-hex-large transition-transform group-hover:scale-105"
							/>
							<div>
								<h3 class="text-2xl font-bold text-base-content mb-2">
									{ccn?.name || 'Unknown CCN'}
								</h3>
								<p class="text-base-content/70 mb-3">
									{ccn?.description || 'No description available'}
								</p>
							</div>
						</div>
					</section>

					<section class="bg-base-200 rounded-xl p-6">
						<div class="flex items-center gap-3 mb-6">
							<Icon icon="mdi:fingerprint" class="w-6 h-6 text-secondary" />
							<div>
								<h2 class="text-xl font-semibold text-base-content">Unique Identity Icon</h2>
								<p class="text-base-content/70 text-sm">
									Visual representation generated from your CCN's public key
								</p>
							</div>
						</div>

						<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
							<div class="flex flex-col items-center text-center">
								<img
									src={window.eve.getCCNIcon(ccn?.publicKey)}
									alt="CCN Icon"
									class="ccn-hex ccn-hex-extra-large"
								/>
								<p class="text-base-content/70 text-sm max-w-xs">
									This icon is mathematically derived from your public key and serves as a unique
									visual identifier.
								</p>
							</div>

							<div class="space-y-4">
								<div class="bg-base-100 rounded-lg p-4">
									<h4 class="font-medium text-base-content mb-2 flex items-center gap-2">
										<Icon icon="mdi:information-outline" class="w-4 h-4" />
										About Identity Icons
									</h4>
									<ul class="text-sm text-base-content/70 space-y-1">
										<li>Generated deterministically from your public key</li>
										<li>Provides visual verification of identity</li>
										<li>Cannot be forged</li>
									</ul>
								</div>
							</div>
						</div>
					</section>
				</section>
			</div>
		{/await}
	</div>
</LiquidGlass>
