<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — ThemePicker.vue
//  Location: resources/js/Pages/Onboarding/ThemePicker.vue
//
//  Step 1 of the onboarding flow — shown before the register form.
//  The user sees both themes as live previews, picks one, and
//  the entire app switches instantly. Their choice is stored in
//  localStorage so it carries forward to the register form.
//  On registration, the backend saves it to the user record.
// ══════════════════════════════════════════════════════════════════

// 1. Imports
import { ref, onMounted }  from 'vue';
import { router }          from '@inertiajs/vue3';
import { useAuthStore }    from '@/Stores/useAuthStore';
import AuthLayout          from '@/Layouts/AuthLayout.vue';

// 2. Inertia layout
defineOptions({ layout: AuthLayout });

// 3. Store
const authStore = useAuthStore();

// 4. Reactive state
const selected = ref('navy'); // 'navy' | 'dark'

// 5. Methods
function pick(theme) {
    selected.value = theme;
    authStore.setThemeLocal(theme);
    localStorage.setItem('ip_theme', theme);
}

function proceed() {
    router.visit(route('register'), {
        data: { theme: selected.value },
    });
}

// 6. Lifecycle
onMounted(() => {
    const saved = localStorage.getItem('ip_theme') ?? 'navy';
    pick(saved);
});
</script>

<template>
    <div class="ip-theme-picker-page">

        <!-- Heading -->
        <div class="ip-theme-picker-page__header">
            <p class="ip-label">Step 1 of 2</p>
            <h1 class="ip-theme-picker-page__title">Choose your experience</h1>
            <p class="ip-theme-picker-page__subtitle">
                Pick a look you love — you can always change it later in settings.
            </p>
        </div>

        <!-- Live preview cards -->
        <div class="ip-theme-picker">

            <!-- Option A: Executive Navy -->
            <button
                class="ip-theme-option"
                :class="{ 'ip-theme-option--selected': selected === 'navy' }"
                @click="pick('navy')"
                aria-label="Executive Navy theme"
            >
                <div class="ip-theme-option__preview ip-theme-option__preview--navy">
                    <!-- Mini header bar -->
                    <div class="ip-theme-option__bar ip-theme-option__bar--navy">
                        <div class="ip-theme-option__dot" />
                        <div class="ip-theme-option__dot" style="opacity:0.4;" />
                        <div class="ip-theme-option__dot" style="opacity:0.2;" />
                    </div>
                    <!-- Mini body -->
                    <div class="ip-theme-option__body" style="background:#F4F6F9;">
                        <div class="ip-theme-option__line" style="background:#0F2044; opacity:0.15; width:70%;" />
                        <div class="ip-theme-option__line ip-theme-option__line--accent" />
                        <div class="ip-theme-option__line" style="background:#0F2044; opacity:0.10; width:85%;" />
                        <div class="ip-theme-option__line" style="background:#0F2044; opacity:0.10; width:60%;" />
                    </div>
                </div>
                <div class="ip-theme-option__label">
                    <span class="ip-theme-option__label-name">⚓ Executive Navy</span>
                    <span class="ip-theme-option__label-desc">Light & authoritative</span>
                </div>
            </button>

            <!-- Option B: Premium Dark -->
            <button
                class="ip-theme-option"
                :class="{ 'ip-theme-option--selected': selected === 'dark' }"
                @click="pick('dark')"
                aria-label="Premium Dark theme"
            >
                <div class="ip-theme-option__preview ip-theme-option__preview--dark">
                    <!-- Mini header bar -->
                    <div class="ip-theme-option__bar ip-theme-option__bar--dark">
                        <div class="ip-theme-option__dot" />
                        <div class="ip-theme-option__dot" style="opacity:0.4;" />
                        <div class="ip-theme-option__dot" style="opacity:0.2;" />
                    </div>
                    <!-- Mini body -->
                    <div class="ip-theme-option__body" style="background:#141D2B;">
                        <div class="ip-theme-option__line" style="width:70%;" />
                        <div class="ip-theme-option__line ip-theme-option__line--accent" />
                        <div class="ip-theme-option__line" style="width:85%;" />
                        <div class="ip-theme-option__line" style="width:60%;" />
                    </div>
                </div>
                <div class="ip-theme-option__label">
                    <span class="ip-theme-option__label-name">🌑 Premium Dark</span>
                    <span class="ip-theme-option__label-desc">Sleek & distinctive</span>
                </div>
            </button>

        </div>

        <!-- Selected confirmation -->
        <p class="ip-theme-picker-page__confirm">
            <span v-if="selected === 'navy'">⚓ Executive Navy selected</span>
            <span v-else>🌑 Premium Dark selected</span>
        </p>

        <!-- CTA -->
        <button
            class="ip-btn ip-btn--primary ip-btn--full"
            @click="proceed"
        >
            Continue to Registration →
        </button>

        <!-- Skip link -->
        <p class="ip-theme-picker-page__skip">
            Already have an account?
            <a :href="route('login')" class="ip-link">Sign in</a>
        </p>

    </div>
</template>

<style scoped>
/* ── Page wrapper ─────────────────────────────────────────────── */
.ip-theme-picker-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Header ───────────────────────────────────────────────────── */
.ip-theme-picker-page__header {
    text-align: center;
}

.ip-theme-picker-page__title {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    margin: var(--space-2) 0;
    letter-spacing: -0.01em;
}

.ip-theme-picker-page__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ── Option label enhanced ────────────────────────────────────── */
.ip-theme-option__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
}

.ip-theme-option__label-name {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
}

.ip-theme-option__label-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ── Confirmation ─────────────────────────────────────────────── */
.ip-theme-picker-page__confirm {
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    min-height: 20px;
}

/* ── Skip ─────────────────────────────────────────────────────── */
.ip-theme-picker-page__skip {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.ip-link {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.ip-link:hover {
    text-decoration: underline;
}
</style>
