{#if !w.ready}

{:else if !w.accountType}

{:else if w.accountType === 'monero'} {#if w.downloading}

Downloading Monero binary (70MB)...

{:else if !w.installed} Monero Setup Download monero-wallet-rpc to get started {:else if !w.running} Monero Wallet Start the wallet RPC server to connect to the Monero network {:else if !w.walletOpen} Monero Wallet {w.wallets.length > 0 ? `${w.wallets.length} wallet${w.wallets.length > 1 ? 's' : ''} found on disk` : 'No existing wallets found'}

{#if w.wallets.length > 0}

Select a wallet to open:

{#each w.wallets as name} {/each}

{#if moneroSelectedWallet}

{#if w.biometricAvailable} {/if}

{/if}

Or create a new wallet:

{#if w.biometricAvailable} Save password with Touch ID {/if} {#if !moneroUseBiometric} {/if}

Restore from seed

<Input type="number" placeholder="Restore height (optional)" bind:value={moneroRestoreHeight} />
						{#if !moneroUseBiometric}
							<Input type="password" placeholder="Password" bind:value={moneroWalletPass} />
						{/if}
						<Button
							onclick={() => w.restoreWallet(moneroWalletName, moneroUseBiometric ? crypto.randomUUID() : moneroWalletPass, moneroMnemonic, moneroRestoreHeight, moneroUseBiometric)}
							disabled={w.loading || !moneroWalletName || (!moneroUseBiometric && !moneroWalletPass) || !moneroMnemonic.trim()}>
							Restore Wallet
						</Button>
					</div>
				</CardContent>
			</Card>
		{:else}
			
			<Card>
				<CardHeader>
					<div class="flex items-center justify-between">
						<CardTitle>Monero Wallet</CardTitle>
						<div class="flex items-center gap-1.5">
							<div class="size-2 rounded-full {w.connected ? 'bg-green-500' : 'bg-red-500'}"></div>
							<span class="text-xs text-muted-foreground">{w.connected ? 'Connected' : 'Disconnected'}</span>
						</div>
					</div>
					<CardDescription>
						{#if w.height < w.daemonHeight}
							Scanning: {w.height.toLocaleString()} / {w.daemonHeight.toLocaleString()}
						{:else}
							Height: {w.height.toLocaleString()}
						{/if}
					</CardDescription>
				</CardHeader>
				<CardContent>
					<div class="mb-4 space-y-1">
						<div class="flex items-start gap-3">
							<QrCode text={w.address} size={128} />
							<div class="min-w-0 flex-1 space-y-1">
								<p class="font-medium text-xs">Address</p>
								<p class="font-mono text-xs break-all">{w.address}</p>
							</div>
						</div>
						<p class="mt-2 font-medium text-xs">Balance</p>
						<p class="font-mono text-lg">{w.balance} XMR</p>
						{#if w.unlockedAtomic !== w.balAtomic}
							<p class="text-xs text-muted-foreground">
								Unlocked: {w.unlocked} XMR
							</p>
						{/if}
					</div>

{#if moneroMnemonic}
						<div class="mb-4 rounded-md bg-muted p-3">
							<p class="text-xs font-medium mb-1">Seed phrase (save this!)</p>
							<p class="font-mono text-xs break-all">{moneroMnemonic}</p>
						</div>
					{/if}

<div class="flex gap-2">
						<Button variant="outline" onclick={() => navigate('/monero/send')}>
							Send
						</Button>
						<Button variant="outline" onclick={() => navigate('/monero/settings')}>
							<SettingsIcon size={16} />
						</Button>
						<Button variant="outline" onclick={async () => { await w.logout(); window.location.href = '/' }}>
							Logout
						</Button>
					</div>
				</CardContent>
			</Card>

<Card>
				<CardHeader>
					<CardTitle>Transactions</CardTitle>
					{#if w.accounts.length > 0}
						<CardDescription>
							<div class="flex flex-wrap gap-1.5 mt-1">
								{#each w.accounts as acct}
									<button
										onclick={() => { w.selectedAccountIndex = acct.index; w.refresh() }}
										class="rounded-md px-2 py-0.5 text-xs transition-colors {w.selectedAccountIndex === acct.index ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'}">
										Account {acct.index}
									</button>
								{/each}
							</div>
						</CardDescription>
					{/if}
				</CardHeader>
				<CardContent>
					{#if w.loading}
						<div class="flex justify-center py-4">
							<Loader />
						</div>
					{:else if w.txs.length === 0}
						<p class="text-muted-foreground text-xs">No transactions found</p>
					{:else}
						<div class="max-h-96 space-y-1 overflow-y-auto">
							{#each w.txs as tx}
								<button
									onclick={() => navigate(`/monero/tx/${tx.hash}`)}
									class="flex w-full items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs text-left cursor-pointer hover:bg-muted/80 transition-colors">
									<div class="shrink-0 mt-0.5 {tx.direction === 'in' ? 'text-green-500' : 'text-muted-foreground'}">
										{#if tx.direction === 'in'}
											<ArrowDown size={16} />
										{:else}
											<ArrowUp size={16} />
										{/if}
									</div>
									<div class="min-w-0 flex-1 space-y-0.5">
										<p class="font-medium">
											{tx.direction === 'in' ? 'Received' : 'Sent'}
										</p>
										<p class="font-mono text-muted-foreground">
											{atomicToXmr(tx.amount)} XMR
										</p>
										{#if tx.timestamp && tx.timestamp !== '0'}
											<p class="text-muted-foreground">{new Date(Number(tx.timestamp) * 1000).toLocaleString()}</p>
										{/if}
										<p class="text-muted-foreground/50 truncate font-mono">
											{tx.hash.slice(0, 12)}...
										</p>
									</div>
								</button>
							{/each}
						</div>
					{/if}
				</CardContent>
			</Card>

<Card>
				<CardHeader>
					<CardTitle>Accounts & Addresses</CardTitle>
					<CardDescription>
						{w.accounts.length} account{w.accounts.length !== 1 ? 's' : ''}
					</CardDescription>
				</CardHeader>
				<CardContent>
					{#each w.accounts as account}
						<div class="mb-3 rounded-md bg-muted p-3">
							<div class="mb-1 flex items-center justify-between">
								<p class="text-xs font-medium">Account {account.index}</p>
								<p class="text-xs text-muted-foreground">
									{atomicToXmr(account.balance)} XMR
								</p>
							</div>
							<p class="mb-2 font-mono text-xs text-muted-foreground break-all">
								{account.primaryAddress}
							</p>
							{#if account.subaddresses.length > 1}
								<div class="space-y-1 border-t border-border pt-2">
									<p class="text-xs text-muted-foreground mb-1">Subaddresses</p>
								{#each account.subaddresses as sub}
									<div class="rounded-sm bg-background px-2 py-1.5 text-xs">
										<div class="flex items-start gap-2">
											<QrCode text={sub.address} size={64} />
											<div class="min-w-0 flex-1">
												<div class="flex items-center justify-between">
													<p class="font-medium">#{sub.index}{sub.label ? ` - ${sub.label}` : ''}</p>
													<p class="text-muted-foreground">{atomicToXmr(sub.balance)} XMR</p>
												</div>
												<p class="font-mono text-muted-foreground/50 truncate mt-0.5">{sub.address}</p>
											</div>
										</div>
									</div>
								{/each}
								</div>
							{/if}
						</div>
					{/each}
				</CardContent>
			</Card>
		{/if}
	{/if}
	</div>
</div>