<template>
  <div class="prof-root">
    <Toast />

    <!-- ── HERO ────────────────────────────────────────────── -->


    <div ref="heroSentinelRef" class="prof-hero-sentinel" />
    <div ref="heroEl" class="prof-hero mb-4" :class="{ 'prof-hero--stuck': heroStuck }">
      <div class="prof-hero__blobs" aria-hidden="true">
        <div class="prof-hero__blob prof-hero__blob--1" />
        <div class="prof-hero__blob prof-hero__blob--2" />
        <div class="prof-hero__blob prof-hero__blob--3" />
      </div>

      <div class="prof-hero__inner">
	    <!-- Info decorativa (scrolls away naturalmente) -->
		<div class="flex items-center gap-4 flex-1 min-w-0">
		  <div class="prof-hero__av-wrap">
			<img v-if="ui.avatarPreview" :src="ui.avatarPreview" class="prof-hero__av-img" alt="avatar" />
			<div v-else class="prof-hero__av-init">{{ initials }}</div>
			<span class="prof-hero__online" />
		  </div>
		  <div class="min-w-0">
			<div class="prof-hero__name">{{ form.full_name || 'Meu Perfil' }}</div>
			<div class="prof-hero__email">{{ userEmail || 'Gerencie suas informações pessoais e segurança' }}</div>			
		  </div>
		</div>

        <!-- Desktop (≥1200px) -->
        <div class="hidden xl:flex items-center gap-2 shrink-0">
          <Button label="Voltar" icon="pi pi-arrow-left" severity="secondary" outlined class="rounded-full" @click="router.back()" />
          <Button label="Salvar" icon="pi pi-check" class="rounded-full" :loading="saving" :disabled="!dirty" @click="saveAll" />
        </div>

        <!-- Mobile (<1200px) -->
        <div class="flex xl:hidden items-center gap-2 shrink-0">
          <Button
            label="Ações"
            icon="pi pi-ellipsis-v"
            severity="secondary"
            size="small"
            class="rounded-full"
            @click="(e) => heroMenuRef.toggle(e)"
          />
          <Menu ref="heroMenuRef" :model="heroMenuItems" :popup="true" />
        </div>
      </div>
    </div>

    <!-- ── GRID ─────────────────────────────────────────────── -->
    <div class="grid grid-cols-12 gap-4 md:gap-5">

      <!-- Sidebar -->
      <div class="col-span-12 lg:col-span-3">
        <div class="sticky top-4 prof-sidebar">

          <!-- Mini user -->
          <div class="prof-sb__user">
            <div class="prof-sb__av-wrap">
              <img v-if="ui.avatarPreview" :src="ui.avatarPreview" class="prof-sb__av-img" alt="avatar" />
              <div v-else class="prof-sb__av-init">{{ initials }}</div>
              <span class="prof-sb__dot" />
            </div>
            <div class="min-w-0">
              <div class="prof-sb__name">{{ form.full_name || 'Conta' }}</div>
              <div class="prof-sb__email">{{ userEmail }}</div>
            </div>
          </div>

          <!-- Nav -->
          <nav class="prof-sb__nav">
            <button
              v-for="s in sections"
              :key="s.id"
              class="prof-sb__link"
              :class="{ 'prof-sb__link--active': activeSection === s.id }"
              @click="scrollTo(s.id)"
            >
              <i :class="[s.icon, 'prof-sb__link-icon']" />
              <span>{{ s.label }}</span>
            </button>
          </nav>

          <div class="prof-sb__divider" />

          <!-- Quick actions -->
          <div class="prof-sb__actions">
            <button class="prof-sb__action" @click="openPasswordDialog">
              <i class="pi pi-key" /> <span>Trocar senha</span>
            </button>
            <button class="prof-sb__action prof-sb__action--danger" @click="confirmSignOut">
              <i class="pi pi-sign-out" /> <span>Sair da conta</span>
            </button>
          </div>

          <p class="prof-sb__tip">
            Alterações em <b>Nome</b> e <b>Avatar</b> aparecem no menu e cabeçalhos do app.
          </p>
        </div>
      </div>

      <!-- Content -->
      <div class="col-span-12 lg:col-span-9 flex flex-col gap-4 md:gap-5">

        <!-- ── 01 CONTA ───────────────────────────────────── -->
        <div
          id="conta"
          class="prof-card scroll-mt-20"
          style="--c:#60A5FA;--c-dim:rgba(96,165,250,0.08);--c-border:rgba(96,165,250,0.2)"
        >
          <div class="prof-card__num">01</div>
          <div class="prof-card__shine" />

          <div class="prof-card__head">
            <div class="prof-card__icon"><i class="pi pi-user" /></div>
            <span class="prof-card__tag">Conta</span>
          </div>

          <div class="prof-card__title">Informações pessoais</div>
          <div class="prof-card__subtitle">Seu nome, contato e descrição exibidos no app.</div>

          <div class="prof-card__sep" />

          <div class="grid grid-cols-12 gap-4">

            <!-- Nome completo -->
            <div class="col-span-12 md:col-span-6">
              <FloatLabel variant="on">
                <InputText id="prof_name" v-model="form.full_name" class="w-full" autocomplete="name" @input="markDirty" />
                <label for="prof_name">Nome completo</label>
              </FloatLabel>
              <small class="prof-hint">Aparece no menu, cabeçalhos e registros.</small>
            </div>

            <!-- Como a Agência PSI deveria te chamar? -->
            <div class="col-span-12 md:col-span-6">
              <FloatLabel variant="on">
                <InputText id="prof_nickname" v-model="form.nickname" class="w-full" autocomplete="nickname" @input="markDirty" />
                <label for="prof_nickname">Como a Agência PSI deveria te chamar?</label>
              </FloatLabel>
              <small class="prof-hint">Apelido ou nome preferido para comunicação.</small>
            </div>

            <!-- O que melhor descreve seu trabalho? -->
            <div class="col-span-12 md:col-span-6">
              <FloatLabel variant="on">
                <Select
                  id="prof_work_desc"
                  v-model="form.work_description"
                  :options="workDescriptionOptions"
                  optionLabel="label"
                  optionValue="value"
                  class="w-full"
                  @change="markDirty"
                />
                <label for="prof_work_desc">O que melhor descreve seu trabalho?</label>
              </FloatLabel>
              <small class="prof-hint">Exibido no seu perfil público.</small>
            </div>

            <!-- E-mail -->
            <div class="col-span-12 md:col-span-6">
              <FloatLabel variant="on">
                <InputText id="prof_email" :modelValue="userEmail" class="w-full" disabled />
                <label for="prof_email">E-mail</label>
              </FloatLabel>
              <small class="prof-hint">Gerenciado pelo Supabase Auth.</small>
            </div>

            <!-- Informe seu trabalho (somente quando 'outro') -->
            <Transition name="prof-slide">
              <div v-if="form.work_description === 'outro'" class="col-span-12">
                <FloatLabel variant="on">
                  <InputText
                    id="prof_work_other"
                    v-model="form.work_description_other"
                    class="w-full"
                    autocomplete="off"
                    @input="markDirty"
                  />
                  <label for="prof_work_other">Informe qual é o seu trabalho</label>
                </FloatLabel>
                <small class="prof-hint">Descreva brevemente sua atuação profissional.</small>
              </div>
            </Transition>

            <!-- Bio -->
            <div class="col-span-12 md:col-span-6">
              <FloatLabel variant="on">
                <Textarea
                  id="prof_bio"
                  v-model="form.bio"
                  class="w-full"
                  rows="5"
                  maxlength="300"
                  @input="markDirty"
                />
                <label for="prof_bio">Bio</label>
              </FloatLabel>
              <div class="prof-hint flex justify-between">
                <span>Breve descrição sobre você.</span>
                <span>{{ (form.bio || '').length }}/300</span>
              </div>
            </div>

            <!-- Whatsapp -->
            <div class="col-span-12 md:col-span-6">
              <FloatLabel variant="on">
                <InputMask
                  id="prof_phone"
                  v-model="form.phone"
                  class="w-full"
                  mask="(99) 99999-9999"
                  :autoClear="false"
                  @update:modelValue="markDirty"
                />
                <label for="prof_phone">Whatsapp</label>
              </FloatLabel>
              <small class="prof-hint">Opcional.</small>
            </div>

          </div>
        </div>

        <!-- ── 02 SITES E REDES SOCIAIS ─────────────────────── -->
		<div
		  id="redes-sociais"
		  class="prof-card scroll-mt-20"
		  style="--c:#E879F9;--c-dim:rgba(232,121,249,0.08);--c-border:rgba(232,121,249,0.2)"
		>
		  <div class="prof-card__num">02</div>
		  <div class="prof-card__shine" />

		  <div class="prof-card__head">
			<div class="prof-card__icon"><i class="pi pi-share-alt" /></div>
			<span class="prof-card__tag">Sites e Redes Sociais</span>
		  </div>

		  <div class="prof-card__title">Seus Sites e Redes Sociais</div>
		  <div class="prof-card__subtitle">Links exibidos no seu perfil público.</div>

		  <div class="prof-card__sep" />

		  <div class="grid grid-cols-12 gap-4">

			<!-- Site -->
			<div class="col-span-12 md:col-span-6">
			  <FloatLabel variant="on">
				<IconField>
				  <InputIcon class="pi pi-globe" />
				  <InputText
					id="prof_site"
					v-model="form.site_url"
					class="w-full"
					type="url"
					@input="markDirty"
				  />
				</IconField>
				<label for="prof_site">Endereço do site</label>
			  </FloatLabel>
			  <small class="prof-hint">Ex: https://seuperfil.com.br</small>
			</div>

			<!-- Instagram -->
			<div class="col-span-12 md:col-span-6">
			  <FloatLabel variant="on">
				<IconField>
				  <InputIcon class="pi pi-instagram" />
				  <InputText
					id="prof_instagram"
					v-model="form.social_instagram"
					class="w-full"
					@input="markDirty"
				  />
				</IconField>
				<label for="prof_instagram">Instagram</label>
			  </FloatLabel>
			  <small class="prof-hint">Ex: @seuperfil</small>
			</div>

			<!-- Youtube -->
			<div class="col-span-12 md:col-span-6">
			  <FloatLabel variant="on">
				<IconField>
				  <InputIcon class="pi pi-youtube" />
				  <InputText
					id="prof_youtube"
					v-model="form.social_youtube"
					class="w-full"
					@input="markDirty"
				  />
				</IconField>
				<label for="prof_youtube">YouTube</label>
			  </FloatLabel>
			  <small class="prof-hint">Ex: @seucanal</small>
			</div>

			<!-- Facebook -->
			<div class="col-span-12 md:col-span-6">
			  <FloatLabel variant="on">
				<IconField>
				  <InputIcon class="pi pi-facebook" />
				  <InputText
					id="prof_facebook"
					v-model="form.social_facebook"
					class="w-full"
					@input="markDirty"
				  />
				</IconField>
				<label for="prof_facebook">Facebook</label>
			  </FloatLabel>
			  <small class="prof-hint">Ex: /suapagina</small>
			</div>

			<!-- X -->
			<div class="col-span-12 md:col-span-6">
			  <FloatLabel variant="on">
				<IconField>
				  <InputIcon class="pi pi-twitter" />
				  <InputText
					id="prof_x"
					v-model="form.social_x"
					class="w-full"
					@input="markDirty"
				  />
				</IconField>
				<label for="prof_x">X (Twitter)</label>
			  </FloatLabel>
			  <small class="prof-hint">Ex: @seuuser</small>
			</div>

		  </div>

          <!-- Outras redes -->
          <div class="mt-5">
            <div class="flex items-center justify-between mb-3">
              <div>
                <div class="text-sm font-semibold text-[var(--text-color)]">Outras redes ou links</div>
                <div class="text-xs text-[var(--text-color-secondary)]">Adicione qualquer outra rede social, podcast, link ou perfil.</div>
              </div>
              <Button
                icon="pi pi-plus"
                label="Adicionar"
                severity="secondary"
                size="small"
                outlined
                class="rounded-full"
                @click="addCustomSocial"
              />
            </div>

            <div v-if="customSocials.length" class="flex flex-col gap-3">
				<div
				  v-for="(item, idx) in customSocials"
				  :key="idx"
				  class="flex items-center gap-2"
				>
				  <FloatLabel variant="on" class="flex-1">
					<InputText
					  :id="`prof_cs_name_${idx}`"
					  v-model="item.name"
					  class="w-full"
					  @input="markDirty"
					/>
					<label :for="`prof_cs_name_${idx}`">Nome da rede</label>
				  </FloatLabel>

				  <FloatLabel variant="on" class="flex-[2]">
					<IconField>
					  <InputIcon class="pi pi-link" />
					  <InputText
						:id="`prof_cs_url_${idx}`"
						v-model="item.url"
						class="w-full"
						@input="markDirty"
					  />
					</IconField>
					<label :for="`prof_cs_url_${idx}`">URL / usuário</label>
				  </FloatLabel>

				  <Button
					icon="pi pi-trash"
					severity="danger"
					text
					rounded
					size="small"
					v-tooltip.top="'Remover'"
					@click="removeCustomSocial(idx)"
				  />
				</div>
            </div>

            <p v-else class="text-xs text-[var(--text-color-secondary)] italic mt-1">
              Nenhuma rede adicional cadastrada ainda.
            </p>
          </div>
        </div>

        <!-- ── 03 AVATAR ──────────────────────────────────── -->
        <div
          id="avatar"
          class="prof-card scroll-mt-20"
          style="--c:#4ADE80;--c-dim:rgba(74,222,128,0.08);--c-border:rgba(74,222,128,0.2)"
        >
          <div class="prof-card__num">03</div>
          <div class="prof-card__shine" />

          <div class="prof-card__head">
            <div class="prof-card__icon"><i class="pi pi-image" /></div>
            <span class="prof-card__tag">Avatar</span>
          </div>

          <div class="prof-card__title">Foto de perfil</div>
          <div class="prof-card__subtitle">Envie um arquivo ou cole uma URL pública.</div>

          <div class="prof-card__sep" />

          <div class="grid grid-cols-12 gap-4 items-start">

            <!-- Preview -->
            <div class="col-span-12 md:col-span-3 flex flex-col items-center gap-3">
              <div class="prof-av-preview">
                <img v-if="ui.avatarPreview" :src="ui.avatarPreview" class="prof-av-preview__img" alt="preview" />
                <div v-else class="prof-av-preview__init">{{ initials }}</div>
              </div>
              <div class="text-center">
                <div class="text-sm font-medium truncate max-w-[120px]">{{ form.full_name || '—' }}</div>
                <div class="text-xs text-[var(--text-color-secondary)] mt-0.5">Preview</div>
              </div>
              <Button
                label="Remover"
                icon="pi pi-trash"
                severity="danger"
                outlined
                size="small"
                :disabled="!form.avatar_url && !ui.avatarFile && !ui.avatarPreview"
                @click="removeAvatar"
              />
            </div>

            <!-- Upload + URL -->
            <div class="col-span-12 md:col-span-9 flex flex-col gap-4">
              <!-- Upload arquivo -->
              <div class="prof-upload-zone">
                <div class="prof-upload-zone__label">
                  <i class="pi pi-upload" />
                  <span>Arquivo (PNG · JPG · WebP · máx 5 MB)</span>
                </div>
                <div class="flex items-center gap-2 flex-wrap">
                  <input
                    ref="fileInput"
                    type="file"
                    accept="image/*"
                    class="prof-file-input"
                    @change="onAvatarFileSelected"
                  />
                  <Button
                    icon="pi pi-times"
                    severity="secondary"
                    outlined
                    size="small"
                    :disabled="!ui.avatarFile"
                    @click="clearAvatarFile"
                    v-tooltip.top="'Limpar'"
                  />
                </div>
                <small class="prof-hint">
                  Ao salvar, o arquivo é enviado ao bucket <b>{{ AVATAR_BUCKET }}</b> e a URL é atualizada automaticamente.
                </small>
              </div>

              <!-- URL direta -->
              <FloatLabel variant="on">
                <InputText
                  id="prof_avatar_url"
                  v-model="form.avatar_url"
                  class="w-full"
                  @input="onAvatarUrlChange"
                />
                <label for="prof_avatar_url">Avatar URL</label>
              </FloatLabel>
              <small class="prof-hint -mt-2">Cole uma URL pública de imagem. Se vazio, usamos suas iniciais.</small>
            </div>
          </div>
        </div>

        <!-- ── 03 APARÊNCIA ───────────────────────────────── -->
        <div
          id="layout"
          class="prof-card scroll-mt-20"
          style="--c:#A78BFA;--c-dim:rgba(167,139,250,0.08);--c-border:rgba(167,139,250,0.2)"
        >
          <div class="prof-card__num">04</div>
          <div class="prof-card__shine" />

          <div class="prof-card__head">
            <div class="prof-card__icon"><i class="pi pi-palette" /></div>
            <span class="prof-card__tag">Aparência</span>
          </div>

          <div class="prof-card__title">Tema e visual</div>
          <div class="prof-card__subtitle">Personalize cores, preset de componentes e modo do menu.</div>

          <div class="prof-card__sep" />

          <div class="grid grid-cols-12 gap-4">

            <!-- Primary -->
            <div class="col-span-12 md:col-span-6">
              <div class="prof-palette-box">
                <div class="prof-palette-box__head">
                  <div>
                    <div class="prof-palette-box__label">Cor principal</div>
                    <div class="prof-palette-box__sub">Tom dominante da interface.</div>
                  </div>
                  <i class="pi pi-palette opacity-40 text-sm" />
                </div>
                <div class="prof-palette-box__swatches">
                  <button
                    v-for="pc of primaryColors"
                    :key="pc.name"
                    type="button"
                    :title="pc.name"
                    class="prof-swatch"
                    :class="{ 'prof-swatch--active': layoutConfig.primary === pc.name }"
                    :style="{ backgroundColor: pc.name === 'noir' ? 'var(--text-color)' : pc.palette['500'] }"
                    @click="updateColors('primary', pc)"
                  />
                </div>
              </div>
            </div>

            <!-- Surface -->
            <div class="col-span-12 md:col-span-6">
              <div class="prof-palette-box">
                <div class="prof-palette-box__head">
                  <div>
                    <div class="prof-palette-box__label">Surface</div>
                    <div class="prof-palette-box__sub">Base de fundo e superfícies.</div>
                  </div>
                  <i class="pi pi-circle-fill opacity-40 text-sm" />
                </div>
                <div class="prof-palette-box__swatches">
                  <button
                    v-for="sf of surfaces"
                    :key="sf.name"
                    type="button"
                    :title="sf.name"
                    class="prof-swatch"
                    :class="{
                      'prof-swatch--active': layoutConfig.surface
                        ? layoutConfig.surface === sf.name
                        : (isDarkNow() ? sf.name === 'zinc' : sf.name === 'slate')
                    }"
                    :style="{ backgroundColor: sf.palette['500'] }"
                    @click="updateColors('surface', sf)"
                  />
                </div>
              </div>
            </div>

            <!-- Preset -->
            <div class="col-span-12 md:col-span-4">
              <div class="prof-ctrl-box">
                <div class="prof-ctrl-box__head">
                  <div>
                    <div class="prof-palette-box__label">Preset</div>
                    <div class="prof-palette-box__sub">Aura · Lara · Nora</div>
                  </div>
                  <i class="pi pi-sparkles opacity-40 text-sm" />
                </div>
                <SelectButton v-model="presetModel" :options="presetOptions" :allowEmpty="false" />
              </div>
            </div>

            <!-- Menu Mode: só relevante no Layout Clássico -->
            <div v-if="layoutConfig.variant === 'classic'" class="col-span-12 md:col-span-4">
              <div class="prof-ctrl-box">
                <div class="prof-ctrl-box__head">
                  <div>
                    <div class="prof-palette-box__label">Menu</div>
                    <div class="prof-palette-box__sub">Static ou Overlay</div>
                  </div>
                  <i class="pi pi-bars opacity-40 text-sm" />
                </div>
                <SelectButton
                  v-model="menuModeModel"
                  :options="menuModeOptions"
                  :allowEmpty="false"
                  optionLabel="label"
                  optionValue="value"
                />
              </div>
            </div>

            <!-- Theme Mode -->
            <div class="col-span-12 md:col-span-4">
              <div class="prof-ctrl-box">
                <div class="prof-ctrl-box__head">
                  <div>
                    <div class="prof-palette-box__label">Tema</div>
                    <div class="prof-palette-box__sub">Claro ou escuro</div>
                  </div>
                  <i class="pi pi-moon opacity-40 text-sm" />
                </div>
                <SelectButton
                  v-model="themeModeModel"
                  :options="themeModeOptions"
                  :allowEmpty="false"
                  optionLabel="label"
                  optionValue="value"
                />
              </div>
            </div>

          </div>
        </div>

        <!-- ── 04 PREFERÊNCIAS ────────────────────────────── -->
        <div
          id="preferencias"
          class="prof-card scroll-mt-20"
          style="--c:#FB923C;--c-dim:rgba(251,146,60,0.08);--c-border:rgba(251,146,60,0.2)"
        >
          <div class="prof-card__num">05</div>
          <div class="prof-card__shine" />

          <div class="prof-card__head">
            <div class="prof-card__icon"><i class="pi pi-sliders-h" /></div>
            <span class="prof-card__tag">Preferências</span>
          </div>

          <div class="prof-card__title">Notificações</div>
          <div class="prof-card__subtitle">Escolha quais comunicações deseja receber.</div>

          <div class="prof-card__sep" />

          <div class="flex flex-col gap-3">
            <label class="prof-toggle">
              <Checkbox v-model="form.notify_system_email" binary @change="markDirty" />
              <div>
                <div class="prof-toggle__label">E-mails do sistema</div>
                <div class="prof-toggle__sub">Confirmações, alertas importantes e faturas.</div>
              </div>
            </label>

            <label class="prof-toggle">
              <Checkbox v-model="form.notify_reminders" binary @change="markDirty" />
              <div>
                <div class="prof-toggle__label">Lembretes de sessão</div>
                <div class="prof-toggle__sub">Notificações antes das consultas agendadas.</div>
              </div>
            </label>

            <label class="prof-toggle">
              <Checkbox v-model="form.notify_news" binary @change="markDirty" />
              <div>
                <div class="prof-toggle__label">Novidades da plataforma</div>
                <div class="prof-toggle__sub">Updates, novas funcionalidades e comunicados.</div>
              </div>
            </label>
          </div>
        </div>

        <!-- ── 06 LAYOUT ─────────────────────────────────── -->
        <div
          id="layout-variant"
          class="prof-card scroll-mt-20"
          style="--c:#22D3EE;--c-dim:rgba(34,211,238,0.08);--c-border:rgba(34,211,238,0.2)"
        >
          <div class="prof-card__num">06</div>
          <div class="prof-card__shine" />

          <div class="prof-card__head">
            <div class="prof-card__icon"><i class="pi pi-th-large" /></div>
            <span class="prof-card__tag">Layout</span>
          </div>

          <div class="prof-card__title">Estilo de navegação</div>
          <div class="prof-card__subtitle">Escolha como a interface principal é organizada.</div>

          <div class="prof-card__sep" />

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

            <!-- Layout 1: Clássico -->
            <button
              class="lv-card"
              :class="{ 'lv-card--active': layoutConfig.variant === 'classic' }"
              @click="setVariant('classic'); markDirty()"
            >
              <div class="lv-card__preview lv-card__preview--classic">
                <div class="lv-p__sidebar" />
                <div class="lv-p__main">
                  <div class="lv-p__bar" />
                  <div class="lv-p__line" />
                  <div class="lv-p__line lv-p__line--sm" />
                </div>
              </div>
              <div class="lv-card__foot">
                <div class="lv-card__radio">
                  <div v-if="layoutConfig.variant === 'classic'" class="lv-card__dot" />
                </div>
                <div>
                  <div class="lv-card__name">Clássico</div>
                  <div class="lv-card__sub">Sidebar lateral com menu completo</div>
                </div>
              </div>
            </button>

            <!-- Layout 2: Rail -->
            <button
              class="lv-card"
              :class="{ 'lv-card--active': layoutConfig.variant === 'rail' }"
              @click="setVariant('rail'); markDirty()"
            >
              <div class="lv-card__preview lv-card__preview--rail">
                <div class="lv-p__rail" />
                <div class="lv-p__panel" />
                <div class="lv-p__main">
                  <div class="lv-p__bar" />
                  <div class="lv-p__line" />
                  <div class="lv-p__line lv-p__line--sm" />
                </div>
              </div>
              <div class="lv-card__foot">
                <div class="lv-card__radio">
                  <div v-if="layoutConfig.variant === 'rail'" class="lv-card__dot" />
                </div>
                <div>
                  <div class="lv-card__name">Rail</div>
                  <div class="lv-card__sub">Mini rail + painel expansível, full-width</div>
                </div>
              </div>
            </button>

          </div>

          <div class="mt-4 rounded-xl border border-[var(--surface-border)] bg-[var(--surface-ground)] px-4 py-3 flex items-start gap-3">
            <i class="pi pi-info-circle text-[var(--text-color-secondary)] text-sm mt-0.5 flex-shrink-0" />
            <p class="text-xs text-[var(--text-color-secondary)] leading-relaxed">
              O layout Rail exibe ícones no canto esquerdo. Ao clicar em um ícone, o painel lateral expande com os itens de navegação. Disponível apenas no desktop.
            </p>
          </div>
        </div>

        <!-- ── 07 SEGURANÇA ───────────────────────────────── -->
        <div
          id="seguranca"
          class="prof-card scroll-mt-20"
          style="--c:#F87171;--c-dim:rgba(248,113,113,0.08);--c-border:rgba(248,113,113,0.2)"
        >
          <div class="prof-card__num">07</div>
          <div class="prof-card__shine" />

          <div class="prof-card__head">
            <div class="prof-card__icon"><i class="pi pi-shield" /></div>
            <span class="prof-card__tag">Segurança</span>
          </div>

          <div class="prof-card__title">Acesso e senha</div>
          <div class="prof-card__subtitle">Mantenha sua conta protegida com uma senha forte.</div>

          <div class="prof-card__sep" />

          <div class="flex flex-col sm:flex-row gap-3">
            <Button
              label="Trocar senha agora"
              icon="pi pi-key"
              severity="secondary"
              outlined
              @click="openPasswordDialog"
            />
            <Button
              label="Abrir página de segurança"
              icon="pi pi-shield"
              severity="secondary"
              outlined
              @click="router.push('/account/security')"
            />
          </div>

          <div class="mt-4 rounded-xl border border-[var(--surface-border)] bg-[var(--surface-ground)] px-4 py-3 flex items-start gap-3">
            <i class="pi pi-info-circle text-[var(--text-color-secondary)] text-sm mt-0.5 flex-shrink-0" />
            <p class="text-xs text-[var(--text-color-secondary)] leading-relaxed">
              Na página de segurança você pode trocar a senha diretamente (com a atual) ou solicitar um link por e-mail para redefinição.
            </p>
          </div>
        </div>

      </div>
    </div>

    <!-- Dialog: Trocar senha -->
    <Dialog
      v-model:visible="openPassword"
      modal
      header="Redefinir senha"
      :draggable="false"
      :style="{ width: '28rem', maxWidth: '92vw' }"
    >
      <div class="space-y-4">
        <p class="text-sm text-[var(--text-color-secondary)]">
          Enviaremos um link de redefinição de senha para o seu e-mail.
        </p>

        <FloatLabel variant="on">
          <InputText id="dlg_email" :modelValue="userEmail" class="w-full" disabled />
          <label for="dlg_email">E-mail</label>
        </FloatLabel>

        <div
          v-if="passwordSent"
          class="rounded-xl border border-emerald-500/20 bg-emerald-500/5 px-4 py-3 flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400"
        >
          <i class="pi pi-check" />
          Link enviado! Verifique sua caixa de entrada (e pasta de spam).
        </div>
      </div>

      <template #footer>
        <Button label="Fechar" icon="pi pi-times" text @click="openPassword = false" />
        <Button label="Enviar link" icon="pi pi-envelope" :loading="sendingPassword" @click="sendPasswordReset" />
      </template>
    </Dialog>

    <ConfirmDialog />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast'
import { useConfirm } from 'primevue/useconfirm'

import { applyThemeEngine } from '@/theme/theme.options'
import { useLayout as _useLayout } from '@/layout/composables/layout'
const { setVariant } = _useLayout()

import Textarea from 'primevue/textarea'
import InputMask from 'primevue/inputmask'
import Checkbox from 'primevue/checkbox'
import Select from 'primevue/select'

import { supabase } from '@/lib/supabase/client'
import { useLayout } from '@/layout/composables/layout'

const router = useRouter()
const toast = useToast()
const confirm = useConfirm()

/** trava para não marcar dirty durante o load */
const silentApplying = ref(true)

/** Storage bucket do avatar */
const AVATAR_BUCKET = 'avatars'

/* ----------------------------
   Estado geral
----------------------------- */
const saving = ref(false)
const dirty = ref(false)

const openPassword = ref(false)
const sendingPassword = ref(false)
const passwordSent = ref(false)

const userEmail = ref('')
const userId = ref('')

const fileInput = ref(null)

const ui = reactive({
  avatarPreview: '',
  avatarFile: null,
  avatarFilePreviewUrl: ''
})

// Perfil
const form = reactive({
  full_name: '',
  nickname: '',
  work_description: '',
  work_description_other: '',
  avatar_url: '',
  bio: '',
  phone: '',

  site_url: '',
  social_instagram: '',
  social_youtube: '',
  social_facebook: '',
  social_x: '',

  language: 'pt-BR',
  timezone: 'America/Sao_Paulo',

  notify_system_email: true,
  notify_reminders: true,
  notify_news: false
})

const customSocials = ref([])

function addCustomSocial () {
  customSocials.value.push({ name: '', url: '' })
  markDirty()
}

function removeCustomSocial (idx) {
  customSocials.value.splice(idx, 1)
  markDirty()
}

const workDescriptionOptions = [
  { label: 'Psicólogo(a) Clínico(a)',            value: 'psicologo_clinico' },
  { label: 'Psicanalista',                       value: 'psicanalista' },
  { label: 'Psiquiatra',                         value: 'psiquiatra' },
  { label: 'Psicoterapeuta',                     value: 'psicoterapeuta' },
  { label: 'Neuropsicólogo(a)',                  value: 'neuropsicologo' },
  { label: 'Psicólogo(a) Organizacional',        value: 'psicologo_organizacional' },
  { label: 'Psicólogo(a) Escolar / Educacional', value: 'psicologo_escolar' },
  { label: 'Psicólogo(a) Hospitalar',            value: 'psicologo_hospitalar' },
  { label: 'Psicólogo(a) Jurídico(a)',           value: 'psicologo_juridico' },
  { label: 'Coach / Mentor(a)',                  value: 'coach_mentor' },
  { label: 'Terapeuta Holístico(a)',             value: 'terapeuta_holistico' },
  { label: 'Outro',                              value: 'outro' },
]

const sections = [
  { id: 'conta',          label: 'Conta',               icon: 'pi pi-user' },
  { id: 'redes-sociais',  label: 'Sites e Redes',        icon: 'pi pi-share-alt' },
  { id: 'avatar',         label: 'Avatar',               icon: 'pi pi-image' },
  { id: 'layout',         label: 'Aparência',            icon: 'pi pi-palette' },
  { id: 'preferencias',   label: 'Preferências',         icon: 'pi pi-sliders-h' },
  { id: 'layout-variant', label: 'Layout',               icon: 'pi pi-th-large' },
  { id: 'seguranca',      label: 'Segurança',            icon: 'pi pi-shield' },
]

const activeSection = ref('conta')

const initials = computed(() => {
  const name = form.full_name || userEmail.value || ''
  const parts = String(name).trim().split(/\s+/).filter(Boolean)
  const a = parts[0]?.[0] || 'U'
  const b = parts.length > 1 ? parts[parts.length - 1][0] : ''
  return (a + b).toUpperCase()
})

function markDirty () {
  dirty.value = true
}

/* ----------------------------
   Cores e preset
----------------------------- */
const primaryColors = [
  { name: 'noir',    palette: { 500: 'currentColor' } },
  { name: 'emerald', palette: { 500: '#10b981' } },
  { name: 'green',   palette: { 500: '#22c55e' } },
  { name: 'lime',    palette: { 500: '#84cc16' } },
  { name: 'orange',  palette: { 500: '#f97316' } },
  { name: 'amber',   palette: { 500: '#f59e0b' } },
  { name: 'yellow',  palette: { 500: '#eab308' } },
  { name: 'teal',    palette: { 500: '#14b8a6' } },
  { name: 'cyan',    palette: { 500: '#06b6d4' } },
  { name: 'sky',     palette: { 500: '#0ea5e9' } },
  { name: 'blue',    palette: { 500: '#3b82f6' } },
  { name: 'indigo',  palette: { 500: '#6366f1' } },
  { name: 'violet',  palette: { 500: '#8b5cf6' } },
  { name: 'purple',  palette: { 500: '#a855f7' } },
  { name: 'fuchsia', palette: { 500: '#d946ef' } },
  { name: 'pink',    palette: { 500: '#ec4899' } },
  { name: 'rose',    palette: { 500: '#f43f5e' } }
]

const surfaces = [
  { name: 'slate',   palette: { 500: '#64748b' } },
  { name: 'gray',    palette: { 500: '#6b7280' } },
  { name: 'zinc',    palette: { 500: '#71717a' } },
  { name: 'neutral', palette: { 500: '#737373' } },
  { name: 'stone',   palette: { 500: '#78716c' } }
]

const presetOptions = ['Aura', 'Lara', 'Nora']

/* ----------------------------
   Navegação (sidebar)
----------------------------- */
// ── Hero menu (mobile < 1200px) ──────────────────────────
const heroMenuRef    = ref(null)
const heroEl         = ref(null)
const heroSentinelRef = ref(null)
const heroStuck      = ref(false)

const heroMenuItems = computed(() => [
  { label: 'Voltar',            icon: 'pi pi-arrow-left', command: () => router.back() },
  { label: 'Salvar alterações', icon: 'pi pi-check',      command: () => saveAll(), disabled: !dirty.value },
  { separator: true },
  {
    label: 'Menu desta sessão',
    items: sections.map(s => ({ label: s.label, icon: s.icon, command: () => scrollTo(s.id) }))
  }
])

let disconnectStickyObserver = null

function scrollTo (id) {
  activeSection.value = id
  const el = document.getElementById(id)
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

function observeSections () {
  const ids = sections.map(s => s.id)
  const els = ids.map(id => document.getElementById(id)).filter(Boolean)

  const io = new IntersectionObserver(
    entries => {
      const visible = entries
        .filter(e => e.isIntersecting)
        .sort((a, b) => (b.intersectionRatio || 0) - (a.intersectionRatio || 0))[0]
      if (visible?.target?.id) activeSection.value = visible.target.id
    },
    { root: null, threshold: [0.2, 0.35, 0.5], rootMargin: '-15% 0px -70% 0px' }
  )

  els.forEach(el => io.observe(el))
  return () => io.disconnect()
}

let disconnectObserver = null

/* ----------------------------
   Avatar: URL
----------------------------- */
function onAvatarUrlChange () {
  ui.avatarPreview = String(form.avatar_url || '').trim()
  markDirty()
}

function removeAvatar () {
  form.avatar_url = ''
  ui.avatarPreview = ''
  clearAvatarFile()
  markDirty()
}

/* ----------------------------
   Avatar: upload arquivo
----------------------------- */
function clearAvatarFile () {
  ui.avatarFile = null
  if (ui.avatarFilePreviewUrl) {
    try { URL.revokeObjectURL(ui.avatarFilePreviewUrl) } catch {}
  }
  ui.avatarFilePreviewUrl = ''
  if (fileInput.value) fileInput.value.value = ''
}

function onAvatarFileSelected (ev) {
  const file = ev?.target?.files?.[0]
  if (!file) return

  if (!file.type?.startsWith('image/')) {
    toast.add({ severity: 'warn', summary: 'Arquivo inválido', detail: 'Escolha uma imagem (PNG/JPG/WebP).', life: 3500 })
    clearAvatarFile()
    return
  }

  if (file.size > 5 * 1024 * 1024) {
    toast.add({ severity: 'warn', summary: 'Arquivo grande', detail: 'Máximo recomendado: 5MB.', life: 3500 })
    clearAvatarFile()
    return
  }

  ui.avatarFile = file

  if (ui.avatarFilePreviewUrl) {
    try { URL.revokeObjectURL(ui.avatarFilePreviewUrl) } catch {}
  }
  ui.avatarFilePreviewUrl = URL.createObjectURL(file)
  ui.avatarPreview = ui.avatarFilePreviewUrl

  markDirty()
}

function applyFilePreviewOnly () {
  if (!ui.avatarFilePreviewUrl) return
  ui.avatarPreview = ui.avatarFilePreviewUrl
  markDirty()
}

function extFromMime (mime) {
  if (!mime) return 'png'
  if (mime.includes('jpeg')) return 'jpg'
  if (mime.includes('png')) return 'png'
  if (mime.includes('webp')) return 'webp'
  return 'png'
}

async function uploadAvatarIfNeeded () {
  if (!ui.avatarFile) return null
  if (!userId.value) throw new Error('Sessão inválida para upload.')

  const file = ui.avatarFile
  const ext = extFromMime(file.type)
  const path = `${userId.value}/avatar-${Date.now()}.${ext}`

  const { error: upErr } = await supabase.storage
    .from(AVATAR_BUCKET)
    .upload(path, file, { upsert: true, contentType: file.type })

  if (upErr) throw upErr

  const { data } = supabase.storage.from(AVATAR_BUCKET).getPublicUrl(path)
  const url = data?.publicUrl
  if (!url) throw new Error('Upload ok, mas não consegui obter a URL pública.')

  return url
}

/* ----------------------------
   Aparência (SEM duplicar engine)
----------------------------- */
const { layoutConfig, layoutState, toggleDarkMode, changeMenuMode } = useLayout()

function isDarkNow () {
  return document.documentElement.classList.contains('app-dark')
}

function setDarkMode (shouldBeDark) {
  if (shouldBeDark !== isDarkNow()) toggleDarkMode()
}

const presetModel = computed({
  get: () => layoutConfig.preset,
  set: (val) => {
    if (!val || val === layoutConfig.preset) return
    layoutConfig.preset = val
    applyThemeEngine(layoutConfig)
    if (!silentApplying.value) markDirty()
  }
})

const menuModeOptions = [
  { label: 'Static', value: 'static' },
  { label: 'Overlay', value: 'overlay' }
]

const menuModeModel = computed({
  get: () => layoutConfig.menuMode,
  set: (val) => {
    if (!val || val === layoutConfig.menuMode) return
    layoutConfig.menuMode = val
    // Não chama changeMenuMode() no Rail — ela reseta estados do sidebar
    if (layoutConfig.variant !== 'rail') {
      try { changeMenuMode?.(val) } catch {
        try { changeMenuMode?.({ value: val }) } catch {}
      }
    }
    if (!silentApplying.value) markDirty()
  }
})

const themeModeOptions = [
  { label: 'Claro', value: 'light' },
  { label: 'Escuro', value: 'dark' }
]

const themeModeModel = computed({
  get: () => (isDarkNow() ? 'dark' : 'light'),
  set: async (val) => {
    if (!val) return
    setDarkMode(val === 'dark')
    await nextTick()
    if (!silentApplying.value) markDirty()
  }
})

function updateColors (type, item) {
  if (type === 'primary') {
    layoutConfig.primary = item.name
    applyThemeEngine(layoutConfig)
    if (!silentApplying.value) markDirty()
    return
  }
  if (type === 'surface') {
    layoutConfig.surface = item.name
    applyThemeEngine(layoutConfig)
    if (!silentApplying.value) markDirty()
  }
}

/* ----------------------------
   DB: carregar/aplicar settings
----------------------------- */
function safeEq (a, b) {
  return String(a || '').trim() === String(b || '').trim()
}

async function loadUserSettings (uid) {
  const { data: settings, error } = await supabase
    .from('user_settings')
    .select('theme_mode, preset, primary_color, surface_color, menu_mode, layout_variant')
    .eq('user_id', uid)
    .maybeSingle()

  if (error) {
    const msg = String(error.message || '')
    const tolerant =
      /does not exist/i.test(msg) ||
      /relation .* does not exist/i.test(msg) ||
      /permission denied/i.test(msg) ||
      /violates row-level security/i.test(msg)
    if (!tolerant) throw error
    return null
  }

  if (!settings) return null

  if (settings.theme_mode) setDarkMode(settings.theme_mode === 'dark')

  if (settings.preset && !safeEq(settings.preset, layoutConfig.preset)) layoutConfig.preset = settings.preset
  if (settings.primary_color && !safeEq(settings.primary_color, layoutConfig.primary)) layoutConfig.primary = settings.primary_color
  if (settings.surface_color && !safeEq(settings.surface_color, layoutConfig.surface)) layoutConfig.surface = settings.surface_color
  if (settings.menu_mode && !safeEq(settings.menu_mode, layoutConfig.menuMode)) {
    layoutConfig.menuMode = settings.menu_mode
    // Não chama changeMenuMode() — ela reseta staticMenuInactive e outros estados,
    // fazendo a sidebar desaparecer ao entrar na página.
  }

  // Variant NÃO é re-aplicada aqui: bootstrapUserSettings cuida disso no arranque.
  // Re-aplicar no loadUserSettings causava regressão (dado stale do banco sobrescrevia
  // o variant ativo). A UI lê layoutConfig.variant diretamente para exibir a seleção.

  applyThemeEngine(layoutConfig)

  return settings
}

/* ----------------------------
   Load / Save (perfil)
----------------------------- */
async function ensureProfileExists (uid) {
  const { data: prof, error: selErr } = await supabase
    .from('profiles')
    .select('id, role')
    .eq('id', uid)
    .maybeSingle()

  if (selErr) throw selErr
  if (prof?.id) return prof

  const { data: created, error: insErr } = await supabase
    .from('profiles')
    .insert({ id: uid, role: 'portal_user' })
    .select('id, role')
    .single()

  if (insErr) throw insErr
  return created
}

async function loadProfile () {
  silentApplying.value = true

  const { data: u, error: uErr } = await supabase.auth.getUser()
  if (uErr) throw uErr
  const user = u?.user
  if (!user) throw new Error('Você precisa estar logado.')

  userId.value = user.id
  userEmail.value = user.email || ''

  await ensureProfileExists(user.id)

  const meta = user.user_metadata || {}
  form.full_name = meta.full_name || ''
  form.avatar_url = meta.avatar_url || ''
  ui.avatarPreview = form.avatar_url

  const { data: prof, error: pErr } = await supabase
    .from('profiles')
    .select('full_name, avatar_url, phone, bio, nickname, work_description, work_description_other, site_url, social_instagram, social_youtube, social_facebook, social_x, social_custom, language, timezone, notify_system_email, notify_reminders, notify_news')
    .eq('id', user.id)
    .maybeSingle()

  if (!pErr && prof) {
    form.full_name = prof.full_name ?? form.full_name
    form.avatar_url = prof.avatar_url ?? form.avatar_url
    form.phone = prof.phone ?? ''
    form.bio = prof.bio ?? ''
    form.nickname = prof.nickname ?? ''
    form.work_description = prof.work_description ?? ''
    form.work_description_other = prof.work_description_other ?? ''
    form.site_url = prof.site_url ?? ''
    form.social_instagram = prof.social_instagram ?? ''
    form.social_youtube = prof.social_youtube ?? ''
    form.social_facebook = prof.social_facebook ?? ''
    form.social_x = prof.social_x ?? ''

    if (Array.isArray(prof.social_custom)) {
      customSocials.value = prof.social_custom
    }

    form.language = prof.language ?? form.language
    form.timezone = prof.timezone ?? form.timezone

    if (typeof prof.notify_system_email === 'boolean') form.notify_system_email = prof.notify_system_email
    if (typeof prof.notify_reminders === 'boolean') form.notify_reminders = prof.notify_reminders
    if (typeof prof.notify_news === 'boolean') form.notify_news = prof.notify_news

    ui.avatarPreview = form.avatar_url
  }

  await loadUserSettings(user.id)

  silentApplying.value = false
  dirty.value = false
}

async function saveAll () {
  saving.value = true
  try {
    if (ui.avatarFile) {
      try {
        const uploadedUrl = await uploadAvatarIfNeeded()
        if (uploadedUrl) {
          form.avatar_url = uploadedUrl
          ui.avatarPreview = uploadedUrl
        }
      } catch (e) {
        toast.add({
          severity: 'warn',
          summary: 'Avatar não subiu',
          detail: `Não consegui enviar o arquivo (bucket "${AVATAR_BUCKET}"). Você pode usar Avatar URL. (${e?.message || 'erro'})`,
          life: 6500
        })
      }
    }

    const metaPayload = {
      full_name: String(form.full_name || '').trim(),
      avatar_url: String(form.avatar_url || '').trim() || null
    }

    const { error: upErr } = await supabase.auth.updateUser({ data: metaPayload })
    if (upErr) throw upErr

    await ensureProfileExists(userId.value)

    const profilePayload = {
      full_name: metaPayload.full_name,
      avatar_url: metaPayload.avatar_url,
      phone: String(form.phone || '').trim() || null,
      bio: String(form.bio || '').trim() || null,
      nickname: String(form.nickname || '').trim() || null,
      work_description: String(form.work_description || '').trim() || null,
      work_description_other: form.work_description === 'outro' ? (String(form.work_description_other || '').trim() || null) : null,
      site_url: String(form.site_url || '').trim() || null,
      social_instagram: String(form.social_instagram || '').trim() || null,
      social_youtube: String(form.social_youtube || '').trim() || null,
      social_facebook: String(form.social_facebook || '').trim() || null,
      social_x: String(form.social_x || '').trim() || null,
      social_custom: customSocials.value.filter(s => s.name || s.url),

      language: form.language || 'pt-BR',
      timezone: form.timezone || 'America/Sao_Paulo',

      notify_system_email: !!form.notify_system_email,
      notify_reminders: !!form.notify_reminders,
      notify_news: !!form.notify_news
    }

    const { data: updatedProfile, error: pErr2 } = await supabase
      .from('profiles')
      .update(profilePayload)
      .eq('id', userId.value)
      .select('id, role, full_name, avatar_url, phone, bio, nickname, work_description, work_description_other, site_url, social_instagram, social_youtube, social_facebook, social_x, social_custom, language, timezone, notify_system_email, notify_reminders, notify_news, updated_at')
      .single()

    if (pErr2) {
      const msg = String(pErr2.message || '')
      const tolerant =
        /does not exist/i.test(msg) ||
        /column .* does not exist/i.test(msg) ||
        /relation .* does not exist/i.test(msg) ||
        /permission denied/i.test(msg) ||
        /violates row-level security/i.test(msg)
      if (!tolerant) throw pErr2
    }

    if (!updatedProfile) {
      throw new Error('Perfil não encontrado para atualização (profiles).')
    }

    const settingsPayload = {
      user_id: userId.value,
      theme_mode: isDarkNow() ? 'dark' : 'light',
      preset: layoutConfig.preset || 'Aura',
      primary_color: layoutConfig.primary || 'noir',
      surface_color: layoutConfig.surface || 'slate',
      menu_mode: layoutConfig.menuMode || 'static',
      layout_variant: layoutConfig.variant || 'rail',
      updated_at: new Date().toISOString()
    }

    const { error: sErr } = await supabase
      .from('user_settings')
      .upsert(settingsPayload, { onConflict: 'user_id' })

    if (sErr) {
      const msg = String(sErr.message || '')
      const tolerant =
        /does not exist/i.test(msg) ||
        /relation .* does not exist/i.test(msg) ||
        /permission denied/i.test(msg) ||
        /violates row-level security/i.test(msg)
      if (!tolerant) throw sErr
    }

    clearAvatarFile()
    dirty.value = false
    layoutState._variantDirty = false
    toast.add({ severity: 'success', summary: 'Salvo', detail: 'Seu perfil foi atualizado.', life: 2500 })
  } catch (e) {
    toast.add({ severity: 'error', summary: 'Erro ao salvar', detail: e?.message || 'Não consegui salvar.', life: 6000 })
  } finally {
    saving.value = false
  }
}

/* ----------------------------
   Segurança: reset + signout
----------------------------- */
function openPasswordDialog () {
  passwordSent.value = false
  openPassword.value = true
}

async function sendPasswordReset () {
  if (!userEmail.value) return
  sendingPassword.value = true
  passwordSent.value = false
  try {
    const redirectTo = `${window.location.origin}/auth/reset-password`
    const { error } = await supabase.auth.resetPasswordForEmail(userEmail.value, { redirectTo })
    if (error) throw error
    passwordSent.value = true
  } catch (e) {
    toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao enviar e-mail.', life: 5000 })
  } finally {
    sendingPassword.value = false
  }
}

function confirmSignOut () {
  confirm.require({
    header: 'Sair',
    message: 'Deseja sair da sua conta neste dispositivo?',
    icon: 'pi pi-exclamation-triangle',
    acceptLabel: 'Sair',
    rejectLabel: 'Cancelar',
    acceptClass: 'p-button-danger',
    accept: async () => {
      try {
        await supabase.auth.signOut()
      } finally {
        router.push('/auth/login')
      }
    }
  })
}

/* ----------------------------
   Lifecycle
----------------------------- */
onMounted(async () => {
  try {
    await loadProfile()
    disconnectObserver = observeSections()
  } catch (e) {
    toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Não consegui carregar o perfil.', life: 6000 })
  }

  // Sticky detection: sentinel sai da área visível (top 56px = topbar) → hero grudou
  const sentinel = heroSentinelRef.value
  if (sentinel) {
    const io = new IntersectionObserver(
      ([entry]) => { heroStuck.value = !entry.isIntersecting },
      { rootMargin: `${document.querySelector('.l2-main') ? '0px' : '-56px'} 0px 0px 0px` }
    )
    io.observe(sentinel)
    disconnectStickyObserver = () => io.disconnect()
  }
})

onBeforeUnmount(() => {
  try { disconnectObserver?.() } catch {}
  try { disconnectStickyObserver?.() } catch {}
  clearAvatarFile()
})
</script>

<style scoped>
/* ─── Tokens ───────────────────────────────────────────── */
.prof-root {
  padding: 1rem;
}

/* ─── Hero ──────────────────────────────────────────────── */
.prof-hero-sentinel { height: 1px; }

.prof-hero {
  position: sticky;
  top: var(--layout-sticky-top, 56px);
  z-index: 20;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  padding: 1.5rem;
}
.prof-hero--stuck {
  margin-left: 0; margin-right: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.prof-hero__blobs {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.prof-hero__blob {
  position: absolute; border-radius: 50%; filter: blur(70px);
}
.prof-hero__blob--1 { width: 20rem; height: 20rem; top: -5rem; right: -4rem; background: rgba(99,102,241,0.14); }
.prof-hero__blob--2 { width: 22rem; height: 22rem; top: 1rem; left: -5rem; background: rgba(52,211,153,0.1); }
.prof-hero__blob--3 { width: 16rem; height: 16rem; bottom: -3rem; right: 5rem; background: rgba(217,70,239,0.09); }
.prof-hero__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}

/* Hero avatar */
.prof-hero__av-wrap { position: relative; flex-shrink: 0; }
.prof-hero__av-img,
.prof-hero__av-init {
  width: 4rem; height: 4rem; border-radius: 1.125rem;
  border: 2px solid var(--surface-border);
  display: block;
}
.prof-hero__av-img { object-fit: cover; }
.prof-hero__av-init {
  display: grid; place-items: center;
  background: var(--surface-ground);
  font-size: 1.3rem; font-weight: 800;
  color: var(--text-color);
}
.prof-hero__online {
  position: absolute; bottom: -3px; right: -3px;
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: #34d399; border: 2.5px solid var(--surface-card);
}

.prof-hero__info { flex: 1; min-width: 0; }
.prof-hero__name {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-color); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prof-hero__sub {
  font-size: 0.78rem; color: var(--text-color-secondary); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prof-hero__email {
  font-size: 0.78rem; color: var(--text-color-secondary); margin-top: 3px;
}

/* ─── Sidebar ───────────────────────────────────────────── */
.prof-sidebar {
  border-radius: 1.75rem;
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.prof-sb__user {
  display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.25rem;
}
.prof-sb__av-wrap { position: relative; flex-shrink: 0; }
.prof-sb__av-img,
.prof-sb__av-init {
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  border: 1px solid var(--surface-border);
  display: block;
}
.prof-sb__av-img { object-fit: cover; }
.prof-sb__av-init {
  display: grid; place-items: center;
  background: var(--surface-ground);
  font-size: 0.875rem; font-weight: 700; color: var(--text-color);
}
.prof-sb__dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: #34d399; border: 2px solid var(--surface-card);
}
.prof-sb__name {
  font-size: 0.85rem; font-weight: 600; color: var(--text-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prof-sb__email {
  font-size: 0.68rem; color: var(--text-color-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sidebar nav */
.prof-sb__nav { display: flex; flex-direction: column; gap: 2px; }
.prof-sb__link {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem; border-radius: 0.75rem;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-color-secondary);
  border: 1px solid transparent;
  background: transparent; cursor: pointer; text-align: left;
  transition: all 0.15s; width: 100%;
}
.prof-sb__link:hover {
  color: var(--text-color);
  background: var(--surface-ground);
  border-color: var(--surface-border);
}
.prof-sb__link--active {
  color: var(--text-color);
  background: var(--surface-ground);
  border-color: var(--surface-border);
}
.prof-sb__link-icon { font-size: 0.75rem; opacity: 0.65; flex-shrink: 0; }

.prof-sb__divider {
  height: 1px; background: var(--surface-border); margin: 0.125rem 0;
}

/* Sidebar actions */
.prof-sb__actions { display: flex; flex-direction: column; gap: 2px; }
.prof-sb__action {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem; border-radius: 0.75rem;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-color-secondary);
  border: none; background: transparent; cursor: pointer; text-align: left;
  transition: all 0.15s; width: 100%;
}
.prof-sb__action:hover {
  color: var(--text-color); background: var(--surface-ground);
}
.prof-sb__action--danger:hover {
  color: #f87171; background: rgba(248,113,113,0.06);
}
.prof-sb__tip {
  font-size: 0.67rem; color: var(--text-color-secondary);
  line-height: 1.5; padding-top: 0.25rem;
}

/* ─── Content Cards ─────────────────────────────────────── */
.prof-card {
  position: relative; overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  padding: 1.5rem;
  animation: prof-fadeUp 0.4s ease both;
  transition: border-color 0.22s ease;
}
.prof-card:hover { border-color: var(--c-border); }
.prof-card:hover .prof-card__shine { opacity: 1; }
.prof-card:hover .prof-card__num   { opacity: 0.055; }

/* Decorative number */
.prof-card__num {
  position: absolute; top: 0.875rem; right: 1.25rem;
  font-size: 4.5rem; font-weight: 900; letter-spacing: -0.06em; line-height: 1;
  color: var(--text-color); opacity: 0.022;
  pointer-events: none; user-select: none;
  transition: opacity 0.22s ease;
}

/* Shine */
.prof-card__shine {
  position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  background: radial-gradient(ellipse at 20% 0%,
    color-mix(in srgb, var(--c) 9%, transparent),
    transparent 52%
  );
}

/* Card header */
.prof-card__head {
  display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem;
}
.prof-card__icon {
  width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  background: var(--c-dim); border: 1px solid var(--c-border); color: var(--c);
}
.prof-card__tag {
  font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--c); opacity: 0.75;
}
.prof-card__title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-color); margin-bottom: 0.25rem;
}
.prof-card__subtitle {
  font-size: 0.77rem; color: var(--text-color-secondary); line-height: 1.5;
}
.prof-card__sep {
  height: 1px; background: var(--surface-border); margin: 1.25rem 0;
}

/* Hint */
.prof-hint {
  display: block; font-size: 0.7rem;
  color: var(--text-color-secondary); margin-top: 0.375rem; line-height: 1.4;
}

/* ─── Avatar preview ────────────────────────────────────── */
.prof-av-preview {
  width: 5.5rem; height: 5.5rem; border-radius: 1.375rem;
  border: 2px solid var(--surface-border);
  background: var(--surface-ground);
  display: grid; place-items: center; overflow: hidden;
}
.prof-av-preview__img { width: 100%; height: 100%; object-fit: cover; }
.prof-av-preview__init {
  font-size: 1.75rem; font-weight: 800; color: var(--text-color);
}

/* ─── Upload zone ───────────────────────────────────────── */
.prof-upload-zone {
  border-radius: 1rem;
  border: 1px dashed var(--surface-border);
  background: var(--surface-ground);
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.prof-upload-zone__label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600; color: var(--text-color-secondary);
}
.prof-file-input {
  font-size: 0.75rem; flex: 1; color: var(--text-color-secondary);
}

/* ─── Palette & Control boxes ───────────────────────────── */
.prof-palette-box,
.prof-ctrl-box {
  border-radius: 1rem;
  border: 1px solid var(--surface-border);
  background: var(--surface-ground);
  padding: 1rem;
  height: 100%;
}
.prof-palette-box__head,
.prof-ctrl-box__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 0.875rem;
}
.prof-palette-box__label { font-size: 0.83rem; font-weight: 600; color: var(--text-color); }
.prof-palette-box__sub   { font-size: 0.69rem; color: var(--text-color-secondary); margin-top: 2px; }
.prof-palette-box__swatches { display: flex; gap: 0.375rem; flex-wrap: wrap; }

.prof-swatch {
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  outline: none; outline-offset: 2px;
  transition: transform 0.15s;
}
.prof-swatch:hover { transform: scale(1.2); }
.prof-swatch--active {
  outline: 2px solid var(--primary-color);
  transform: scale(1.1);
}

/* ─── Preference toggles ────────────────────────────────── */
.prof-toggle {
  display: flex; align-items: flex-start; gap: 0.875rem;
  padding: 0.875rem 1rem; border-radius: 1rem;
  border: 1px solid var(--surface-border);
  background: var(--surface-ground);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.prof-toggle:hover {
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  background: color-mix(in srgb, var(--primary-color) 3%, var(--surface-ground));
}
.prof-toggle__label { font-size: 0.85rem; font-weight: 600; color: var(--text-color); }
.prof-toggle__sub   { font-size: 0.72rem; color: var(--text-color-secondary); margin-top: 2px; }

/* ─── Layout variant picker ─────────────────────────────── */
.lv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 1rem;
  border: 2px solid var(--surface-border);
  background: var(--surface-ground);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s;
  overflow: hidden;
}
.lv-card:hover {
  border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
}
.lv-card--active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* Preview area */
.lv-card__preview {
  height: 90px;
  display: flex;
  background: var(--surface-card);
  border-bottom: 1px solid var(--surface-border);
  overflow: hidden;
  border-radius: 0;
  gap: 0;
}
.lv-card__preview--classic { padding: 10px; gap: 6px; }
.lv-card__preview--rail    { padding: 10px; gap: 4px; }

/* Sidebar mockup */
.lv-p__sidebar {
  width: 38px;
  border-radius: 5px;
  background: var(--surface-border);
  flex-shrink: 0;
}
/* Rail mockup */
.lv-p__rail {
  width: 14px;
  border-radius: 4px;
  background: var(--surface-border);
  flex-shrink: 0;
}
/* Panel mockup */
.lv-p__panel {
  width: 28px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-border) 60%, transparent);
  flex-shrink: 0;
}
/* Main content mockup */
.lv-p__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}
.lv-p__bar {
  height: 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.lv-p__line {
  height: 7px;
  border-radius: 3px;
  background: var(--surface-border);
}
.lv-p__line--sm { width: 65%; }

/* Footer */
.lv-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.lv-card__radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--surface-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.lv-card--active .lv-card__radio {
  border-color: var(--primary-color);
}
.lv-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color);
}
.lv-card__name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-color);
}
.lv-card__sub {
  font-size: 0.68rem;
  color: var(--text-color-secondary);
  margin-top: 1px;
}

/* ─── Animation ─────────────────────────────────────────── */
@keyframes prof-fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Social addons ─────────────────────────────────────── */
.social-addon {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; flex-shrink: 0;
  font-size: 0.95rem;
}
.social-addon--site      { color: var(--text-color-secondary); }
.social-addon--instagram { color: #E1306C; }
.social-addon--youtube   { color: #FF0000; }
.social-addon--facebook  { color: #1877F2; }
.social-addon--x         { color: var(--text-color); }

/* FloatLabel com inputgroup: label offset pelo addon */
.social-float-label {
  left: 2.85rem !important;
}

/* Fix FloatLabel wrapping inputgroup */
.p-floatlabel:has(.p-inputgroup) { display: block; }
.p-floatlabel .p-inputgroup { width: 100%; }
.p-floatlabel .p-inputgroup .p-inputtext {
  border-radius: 0 var(--p-inputtext-border-radius, 8px) var(--p-inputtext-border-radius, 8px) 0 !important;
}

/* ─── Transition "outro" ────────────────────────────────── */
.prof-slide-enter-active,
.prof-slide-leave-active {
  transition: opacity 0.2s ease, max-height 0.25s ease, margin 0.2s ease;
  max-height: 6rem; overflow: hidden;
}
.prof-slide-enter-from,
.prof-slide-leave-to {
  opacity: 0; max-height: 0; margin: 0;
}
</style>