<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3';
import { ref, onMounted, nextTick, computed, watch } from 'vue';
import Select from '@/components/ui/Select.vue';
import { usePrimaryColor } from '@/composables/usePrimaryColor';
import UserLayout from '../../layouts/user/userlayout.vue';

type Props = { mustVerifyEmail: boolean; status?: string };
defineProps<Props>();

const page = usePage();
const user = computed(() => (page.props.auth as any).user || {});

const form = ref({
    name: '',
    email: '',
    first_name: '',
    last_name: '',
    birthdate: '',
    gender: '',
    country: '',
    address_line1: '',
    address_line2: '',
    city: '',
    state: '',
    postal_code: '',
    phone: '',
});

const locked = ref<Record<string, boolean>>({});
const isSaving = ref(false);
const showSuccess = ref(false);

// Accent color controls for quick access on Profile page
const { primaryColor, updatePrimaryColor } = usePrimaryColor();
const hexInput = ref<string>(primaryColor.value || '#ff007a');

watch(primaryColor, (val) => {
    if (val && val.toLowerCase() !== hexInput.value.toLowerCase()) {
        hexInput.value = val;
    }
});

function onPickColor(e: Event) {
    const value = (e.target as HTMLInputElement).value;
    hexInput.value = value;
    updatePrimaryColor(value);
}

function onHexInput(e: Event) {
    const value = (e.target as HTMLInputElement).value.trim();
    hexInput.value = value;
}

function applyHex() {
    let v = hexInput.value.trim();
    if (!v.startsWith('#')) v = `#${v}`;
    const isValid = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v);
    if (isValid) {
        hexInput.value = v.toLowerCase();
        updatePrimaryColor(hexInput.value);
    }
}

function resetToDefault() {
    const def = '#ff007a';
    hexInput.value = def;
    updatePrimaryColor(def);
}

onMounted(() => {
    const u: any = user.value || {};

    // Map fields
    form.value = {
        name: u.name || '',
        email: u.email || '',
        first_name: u.first_name || '',
        last_name: u.last_name || '',
        birthdate: u.birthdate ? String(u.birthdate).slice(0, 10) : '',
        gender: u.gender || '',
        country: (u.country || '').toString().toUpperCase(),
        address_line1: u.address_line1 || '',
        address_line2: u.address_line2 || '',
        city: u.city || '',
        state: u.state || '',
        postal_code: u.postal_code || '',
        phone: u.phone || '',
    };

    // Determine locks: If data exists in DB, it is locked.
    const fields = Object.keys(form.value);
    fields.forEach(f => {
        if (u[f] && String(u[f]).trim() !== '') {
            locked.value[f] = true;
        }
    });

    nextTick(() => { if ((window as any).lucide) (window as any).lucide.createIcons(); });
});

async function submit() {
    isSaving.value = true;

    const res = await fetch('/settings/profile', {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ ...form.value, _method: 'PATCH' }),
    });

    if (res.ok) {
        showSuccess.value = true;
        setTimeout(() => { window.location.reload(); }, 1000);
    } else {
        isSaving.value = false;
    }
}
</script>

<template>
    <UserLayout>
        <Head title="Profile Settings" />
        <section class="content">
            <div class="wrap">
                <div class="panel main-panel">
                    <header class="page-head">
                        <div class="head-flex">
                            <div class="title-group">
                                <div class="title">User Profile</div>
                                <p class="subtitle">Manage your personal identity and contact details</p>
                            </div>
                            <div class="security-badge">
                                <i data-lucide="shield-check"></i>
                                <span>Verified Account</span>
                            </div>
                        </div>
                    </header>

                    <div class="settings-nav">
                        <a href="/settings/profile" class="nav-item active"><i data-lucide="user"></i> Profile</a>
                        <a href="/settings" class="nav-item"><i data-lucide="globe"></i> Public Profile</a>
                        <a href="/settings/kyc" class="nav-item"><i data-lucide="file-check"></i> KYC</a>
                        <a href="/settings/security" class="nav-item"><i data-lucide="lock"></i> Security</a>
                        <a href="/settings/two-factor" class="nav-item"><i data-lucide="shield"></i> 2FA</a>
                    </div>

                    <form class="profile-form" @submit.prevent="submit">
                        <div class="form-section">
                            <div class="sec-label">Account Core</div>
                            <div class="grid2">
                                <label class="field" :class="{ locked: locked.email }">
                                    <span class="lbl">Email Address</span>
                                    <div class="input-wrapper">
                                        <i data-lucide="mail"></i>
                                        <input class="inp" type="email" v-model="form.email" :disabled="locked.email" required />
                                        <i v-if="locked.email" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                    <div v-if="locked.email" class="locked-hint">Contact support to change</div>
                                </label>
                                <label class="field" :class="{ locked: locked.name }">
                                    <span class="lbl">Display Name</span>
                                    <div class="input-wrapper">
                                        <i data-lucide="user"></i>
                                        <input class="inp" type="text" v-model="form.name" :disabled="locked.name" required />
                                        <i v-if="locked.name" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                    <div v-if="locked.name" class="locked-hint">Contact support to change</div>
                                </label>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="sec-label">Identity Details</div>
                            <div class="grid2">
                                <label class="field" :class="{ locked: locked.first_name }">
                                    <span class="lbl">First Name</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="text" v-model="form.first_name" :disabled="locked.first_name" />
                                        <i v-if="locked.first_name" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                                <label class="field" :class="{ locked: locked.last_name }">
                                    <span class="lbl">Last Name</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="text" v-model="form.last_name" :disabled="locked.last_name" />
                                        <i v-if="locked.last_name" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                            </div>

                            <div class="grid3">
                                <label class="field" :class="{ locked: locked.birthdate }">
                                    <span class="lbl">Birthdate</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="date" v-model="form.birthdate" :disabled="locked.birthdate" />
                                        <i v-if="locked.birthdate" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                                <label class="field" :class="{ locked: locked.gender }">
                                    <span class="lbl">Gender</span>
                                    <div class="input-wrapper">
                                        <Select
                                            v-model="form.gender"
                                            :disabled="locked.gender"
                                            :options="[
                                                { label: 'Male', value: 'male', icon: 'user' },
                                                { label: 'Female', value: 'female', icon: 'user' },
                                                { label: 'Other', value: 'other', icon: 'user' }
                                            ]"
                                            placeholder="Select Gender"
                                        />
                                        <i v-if="locked.gender" data-lucide="lock" class="lock-icon" style="right: 30px; left: auto; z-index: 10;"></i>
                                    </div>
                                </label>
                                <label class="field" :class="{ locked: locked.country }">
                                    <span class="lbl">Country (ISO)</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="text" v-model="form.country" placeholder="e.g. DE" maxlength="2" :disabled="locked.country" />
                                        <i v-if="locked.country" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="sec-label">Residential Address</div>
                            <div class="grid1">
                                <label class="field" :class="{ locked: locked.address_line1 }">
                                    <span class="lbl">Address Line 1</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="text" v-model="form.address_line1" placeholder="Street and house number" :disabled="locked.address_line1" />
                                        <i v-if="locked.address_line1" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                            </div>
                            <div class="grid2">
                                <label class="field" :class="{ locked: locked.address_line2 }">
                                    <span class="lbl">Address Line 2 (Optional)</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="text" v-model="form.address_line2" :disabled="locked.address_line2" />
                                        <i v-if="locked.address_line2" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                                <label class="field" :class="{ locked: locked.city }">
                                    <span class="lbl">City</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="text" v-model="form.city" :disabled="locked.city" />
                                        <i v-if="locked.city" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                            </div>
                            <div class="grid2">
                                <label class="field" :class="{ locked: locked.state }">
                                    <span class="lbl">State / Region</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="text" v-model="form.state" :disabled="locked.state" />
                                        <i v-if="locked.state" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                                <label class="field" :class="{ locked: locked.postal_code }">
                                    <span class="lbl">Postal Code</span>
                                    <div class="input-wrapper">
                                        <input class="inp pl-reset" type="text" v-model="form.postal_code" :disabled="locked.postal_code" />
                                        <i v-if="locked.postal_code" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="sec-label">Contact Information</div>
                            <div class="grid1">
                                <label class="field" :class="{ locked: locked.phone }">
                                    <span class="lbl">Mobile Phone</span>
                                    <div class="input-wrapper">
                                        <i data-lucide="phone"></i>
                                        <input class="inp" type="tel" v-model="form.phone" placeholder="+49 123 456789" :disabled="locked.phone" />
                                        <i v-if="locked.phone" data-lucide="lock" class="lock-icon"></i>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="sec-label">Appearance</div>
                            <div class="grid1">
                                <div class="field">
                                    <span class="lbl">Accent color</span>
                                    <div class="input-wrapper" style="gap:8px; align-items:center;">
                                        <input class="inp pl-reset" type="color" :value="primaryColor" @input="onPickColor" style="width:46px; height:36px; padding:0;" />
                                        <input class="inp pl-reset" type="text" v-model="hexInput" @input="onHexInput" placeholder="#ff007a" style="max-width:160px;" />
                                        <button type="button" class="inp pl-reset" @click="applyHex" style="width:auto; cursor:pointer;">Apply</button>
                                        <button type="button" class="inp pl-reset" @click="resetToDefault" style="width:auto; cursor:pointer;">Reset</button>
                                    </div>
                                    <div class="locked-hint" style="margin-top:6px; display:flex; align-items:center; gap:6px;">
                                        <span>Preview:</span>
                                        <span :style="{background: primaryColor, display:'inline-block', width:'18px', height:'12px', borderRadius:'4px', border:'1px solid #222'}"></span>
                                        <code style="color:#aaa;">{{ primaryColor }}</code>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-footer">
                            <button class="btn-save" type="submit" :disabled="isSaving">
                                <span v-if="!isSaving">{{ showSuccess ? 'Updated!' : 'Save Protocol' }}</span>
                                <div v-else class="loader"></div>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </UserLayout>
</template>

<style scoped>
:global(:root) {
    --bg-card: #0a0a0a;
    --border: #151515;
    --cyan: #00f2ff;
    --magenta: #ff007a;
    --green: #00ff9d;
}

.content { padding: 30px; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
.wrap { max-width: 900px; margin: 0 auto; }

.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }

/* Header */
.page-head { padding: 25px 30px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(0,242,255,0.03), transparent); }
.head-flex { display: flex; justify-content: space-between; align-items: center; }
.title { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
.subtitle { color: #555; font-size: 12px; margin-top: 4px; font-weight: 600; }

.security-badge { display: flex; align-items: center; gap: 8px; color: var(--green); background: rgba(0,255,157,0.05); padding: 6px 14px; border-radius: 50px; border: 1px solid rgba(0,255,157,0.1); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.security-badge i { width: 14px; }

/* Navigation */
.settings-nav { display: flex; gap: 5px; padding: 15px 30px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); overflow-x: auto; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #666; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; text-decoration: none; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
.nav-item.active { color: var(--cyan); background: rgba(0,242,255,0.1); }
.nav-item i { width: 14px; }

/* Form Layout */
.profile-form { padding: 30px; display: grid; gap: 30px; }
.form-section { display: grid; gap: 15px; animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; }
.form-section:nth-child(1) { animation-delay: 0.1s; }
.form-section:nth-child(2) { animation-delay: 0.2s; }
.form-section:nth-child(3) { animation-delay: 0.3s; }
.form-section:nth-child(4) { animation-delay: 0.4s; }

.sec-label { font-size: 10px; font-weight: 900; color: #333; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; border-bottom: 1px solid #111; padding-bottom: 8px; }

.grid1 { display: grid; gap: 15px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }

/* Inputs */
.field { display: block; position: relative; }
.lbl { display: block; font-size: 10px; font-weight: 900; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; transition: 0.3s; }

.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper i:not(.lock-icon) { position: absolute; left: 14px; width: 14px; color: #444; pointer-events: none; transition: 0.3s; }
.input-wrapper .inp { padding-left: 40px; }
.input-wrapper .inp.pl-reset { padding-left: 14px; }

.inp, select { width: 100%; background: #000; border: 1px solid var(--border); color: #fff; padding: 12px 14px; border-radius: 12px; font-size: 13px; transition: 0.3s cubic-bezier(0.2, 0, 0, 1); }
.inp:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 15px rgba(0,242,255,0.1); background: #050505; }
.inp:focus + i { color: var(--cyan); }

/* Locked State */
.inp:disabled { background: #080808; color: #666; border-color: #111; cursor: not-allowed; }
.lock-icon { position: absolute; right: 14px; width: 12px; color: #333; pointer-events: none; }
.locked-hint { font-size: 9px; color: #444; margin-top: 6px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.locked-hint::before { content: ''; display: block; width: 4px; height: 4px; background: #333; border-radius: 50%; }

/* Custom Select */
.select-wrapper { position: relative; }
.select-wrapper::after { content: '↓'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #444; pointer-events: none; }

/* Actions & Footer */
.form-footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 20px; padding-top: 25px; border-top: 1px solid var(--border); animation: fade-in 1s 0.5s backwards; }

.btn-save { background: var(--cyan); color: #000; border: none; border-radius: 12px; padding: 14px 30px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s; box-shadow: 0 0 20px rgba(0,242,255,0.2); min-width: 160px; display: flex; justify-content: center; }
.btn-save:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 25px rgba(0,242,255,0.4); }
.btn-save:disabled { opacity: 0.6; cursor: not-allowed; }

.loader { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); border-top-color: #000; border-radius: 50%; animation: spin 0.8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .grid2, .grid3 { grid-template-columns: 1fr; }
    .form-footer { flex-direction: column-reverse; gap: 20px; align-items: stretch; }
    .profile-form { padding: 20px; }
    .settings-nav { padding: 10px 15px; }
}
</style>
