<script>
    import { onMount } from 'svelte';
    import { invoke } from '@tauri-apps/api/core';

    import { appState } from '../lib/state.js';
    import { navigate } from '../lib/routing.js';
    import Nav from '../ui/Nav.svelte';
    import Icon from '../ui/Icon.svelte';
    import Link from '../ui/Link.svelte';


    let launchBase = false;
    function launchTerminal() {
        invoke('launch_terminal', {base: launchBase});
        launchBase = false;
    }

    async function lock() {
        try {
            await invoke('lock');
        }
        catch (e) {
            console.log(e);
        }
    }
</script>


<Nav position="fixed">
    <h2 slot="title" class="text-3xl font-bold">Creddy</h2>
</Nav>

<div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
    <div class="grid grid-cols-2 gap-6">
        <Link target="ManageCredentials">
            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-primary hover:bg-base-200 transition-colors">
                <Icon name="key" class="size-12 stroke-1 stroke-primary" />
                <h3 class="text-lg font-bold">Credentials</h3>
                <p class="text-sm">Add, remove, and change defaults credentials.</p>
            </div>
        </Link>
        
        <Link target={launchTerminal}>
            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-secondary hover:bg-base-200 transition-colors">
                <Icon name="command-line" class="size-12 stroke-1 stroke-secondary" />
                <h3 class="text-lg font-bold">Terminal</h3>
                <p class="text-sm">Launch a terminal pre-configured with AWS credentials.</p>
            </div>
        </Link>

        <Link target={lock}>
            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-accent hover:bg-base-200 transition-colors">
                <Icon name="shield-check" class="size-12 stroke-1 stroke-accent" />
                <h3 class="text-lg font-bold">Lock</h3>
                <p class="text-sm">Lock Creddy.</p>
            </div>
        </Link>

        <Link target={() => invoke('exit')}>
            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-warning hover:bg-base-200 transition-colors">
                <Icon name="arrow-right-start-on-rectangle" class="size-12 stroke-1 stroke-warning" />
                <h3 class="text-lg font-bold">Exit</h3>
                <p class="text-sm">Close Creddy.</p>
            </div>
        </Link>
    </div>
</div>

{#if $appState.setupErrors.some(e => e.show)}
    <div class="toast">
        {#each $appState.setupErrors as error}
            {#if error.show}
                <div class="alert alert-error shadow-lg">
                    {error.msg}
                    <button class="btn btn-sm btn-alert-error" on:click={() => error.show = false}>Ok</button>
                </div>
            {/if}
        {/each}
    </div>
{/if}