<script lang="ts">
	// @ts-nocheck
	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
	import { appController } from '$lib/app/controller';
	import { appState } from '$lib/app/store';
	import { Avatar, AvatarFallback } from '$lib/components/ui/avatar/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
	import { Separator } from '$lib/components/ui/separator/index.js';

	const profileName = () => $appState.session?.user?.name || 'User';
	const profileEmail = () => $appState.session?.user?.email || 'user@example.com';
	const profileInitial = () => ($appState.session?.user?.name?.[0] || 'U').toUpperCase();
</script>

<AppChrome pageKey="settings">
	<section id="screen-settings" class="flex flex-col gap-6 max-w-2xl mx-auto py-8">
		<h2 class="text-2xl font-bold text-white tracking-tight px-2">Settings</h2>

		<Card class="glass-card rounded-3xl border-white/10 bg-[#16161d]/80">
			<CardContent class="flex items-center gap-6">
				<Avatar id="profileInitials" size="lg" class="size-20 bg-blue-600/20 text-2xl font-bold text-blue-500">
					<AvatarFallback>{profileInitial()}</AvatarFallback>
				</Avatar>
				<div>
					<h3 class="text-xl font-semibold tracking-wide text-white" id="profileName">{profileName()}</h3>
					<p class="mt-1 text-gray-400" id="profileEmail">{profileEmail()}</p>
				</div>
			</CardContent>
		</Card>

		<Card class="glass-card overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80">
			<CardHeader>
				<CardTitle class="text-sm font-semibold tracking-wide text-white">Tools</CardTitle>
			</CardHeader>
			<CardContent class="flex flex-col gap-0 p-0">
				<Button
				id="checkOpsBtn"
				variant="ghost"
				class="group h-auto w-full justify-between rounded-none px-5 py-5 text-left text-gray-300 hover:bg-white/5"
				onclick={() => appController.runDiagnostics()}
			>
				<div class="flex items-center gap-4">
					<div class="p-2 rounded-lg bg-white/5 group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
						<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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
							/>
						</svg>
					</div>
					<span class="font-medium">Run Diagnostics</span>
				</div>
				<svg data-icon="inline-end" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
				</svg>
				</Button>
				<Separator class="bg-white/5" />
				<Button variant="ghost" class="group h-auto w-full justify-between rounded-none px-5 py-5 text-left text-gray-300 hover:bg-white/5">
				<div class="flex items-center gap-4">
					<div class="p-2 rounded-lg bg-white/5 group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
						<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="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>
					</div>
					<span class="font-medium">Device Information</span>
				</div>
				<svg data-icon="inline-end" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
				</svg>
				</Button>
			</CardContent>
		</Card>

		<Button
			id="signOutBtn"
			variant="destructive"
			class="mt-4 h-14 w-full rounded-2xl border border-red-500/50 text-base font-medium hover:border-red-500 hover:bg-red-500/10"
			onclick={() => appController.signOut()}
		>
			<svg data-icon="inline-start" 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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 11-6 0v-1m6 0H9"
				/>
			</svg>
			Sign Out
		</Button>
	</section>
</AppChrome>
