Mi Perfil

Gestiona tu información personal y configuración empresarial

{#if activeTab === 'personal'}

Información Personal

Actualiza tu información básica

Nombre * {#if profileErrors.firstName}

{profileErrors.firstName}

{/if}

Apellido * {#if profileErrors.lastName}

{profileErrors.lastName}

{/if}

Correo Electrónico

El correo electrónico no puede ser modificado. Contacta al administrador si necesitas cambiarlo.

{/if} {#if activeTab === 'general'}

Información Empresarial

Datos generales de tu empresa

Información General

Razón Social

Nombre Comercial

Clave de Cliente

Tipo de Cliente

RFC {#if businessProfileErrors.rfc}

{businessProfileErrors.rfc}

{/if}

ID Fiscal (Otros países)

Ubicación

País

Estado

Ciudad

Dirección

Número Exterior

Número Interior

Código Postal {#if businessProfileErrors.postal_code}

{businessProfileErrors.postal_code}

{/if}

Colonia

Representantes

Encargado/Representante

Representante Legal

Configuración

Moneda Preferida

Nacionalidad

Notas Adicionales

</div>
              </div>

<div class="mt-4 space-y-3">
                <label class="flex items-center space-x-2">
                  <input
                    type="checkbox"
                    class="form-checkbox"
                    bind:checked={businessProfile.send_to_billing}
                  />
                  <span class="text-sm text-gray-700">Enviar a Facturación</span>
                </label>

<label class="flex items-center space-x-2">
                  <input
                    type="checkbox"
                    class="form-checkbox"
                    bind:checked={businessProfile.is_prospect}
                  />
                  <span class="text-sm text-gray-700">Es Prospecto</span>
                </label>
              </div>
            </div>

<div class="flex justify-end pt-6">
              <button
                type="submit"
                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-8 py-2 rounded-md font-medium transition-colors"
                disabled={isSavingBusinessProfile}
              >
                {#if isSavingBusinessProfile}
                  <div class="flex items-center space-x-2">
                    <div class="spinner w-4 h-4" />
                    <span>Guardando...</span>
                  </div>
                {:else}
                  Guardar Perfil Empresarial
                {/if}
              </button>
            </div>
          </form>
        </div>
      </div>
    {/if}

{#if activeTab === 'contact'}
      <div class="card">
        <div class="card-header">
          <h2 class="text-xl font-semibold text-gray-900">Información de Contacto</h2>
          <p class="text-gray-600 mt-1">Datos de contacto y comunicación</p>
        </div>

<div class="card-content">
          <form on:submit|preventDefault={handleBusinessProfileSave} class="space-y-6">
            <div class="bg-white p-4 rounded-lg border border-gray-200">
              <h3 class="font-medium text-gray-900 mb-4">Teléfonos</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="form-label">Teléfono Principal</label>
                  <input
                    type="tel"
                    class="form-input"
                    bind:value={businessProfile.main_phone}
                    placeholder="+52 656 123 4567"
                  />
                </div>

<div>
                  <label class="form-label">Teléfono Secundario</label>
                  <input
                    type="tel"
                    class="form-input"
                    bind:value={businessProfile.secondary_phone}
                    placeholder="+52 656 123 4568"
                  />
                </div>

<div>
                  <label class="form-label">Teléfono Directo</label>
                  <input
                    type="tel"
                    class="form-input"
                    bind:value={businessProfile.direct_phone}
                    placeholder="+52 656 123 4569"
                  />
                </div>

<div>
                  <label class="form-label">Extensión</label>
                  <input
                    type="text"
                    class="form-input"
                    bind:value={businessProfile.phone_extension}
                    placeholder="101"
                    maxlength="10"
                  />
                </div>

<div class="bg-white p-4 rounded-lg border border-gray-200">
              <h3 class="font-medium text-gray-900 mb-4">Correos Electrónicos</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="form-label">Email Principal</label>
                  <input
                    type="email"
                    class="form-input {businessProfileErrors.main_email ? 'border-red-300' : ''}"
                    bind:value={businessProfile.main_email}
                    placeholder="contacto@empresa.com"
                  />
                  {#if businessProfileErrors.main_email}
                    <p class="form-error">{businessProfileErrors.main_email}</p>
                  {/if}
                </div>

<div>
                  <label class="form-label">Email de Facturación</label>
                  <input
                    type="email"
                    class="form-input {businessProfileErrors.billing_email ? 'border-red-300' : ''}"
                    bind:value={businessProfile.billing_email}
                    placeholder="facturacion@empresa.com"
                  />
                  {#if businessProfileErrors.billing_email}
                    <p class="form-error">{businessProfileErrors.billing_email}</p>
                  {/if}
                </div>
              </div>
            </div>

<div class="bg-white p-4 rounded-lg border border-gray-200">
              <h3 class="font-medium text-gray-900 mb-4">Web y Horarios</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="form-label">Página Web</label>
                  <input
                    type="url"
                    class="form-input"
                    bind:value={businessProfile.website}
                    placeholder="https://www.empresa.com"
                  />
                </div>

<div>
                  <label class="form-label">Horario de Atención</label>
                  <input
                    type="text"
                    class="form-input"
                    bind:value={businessProfile.business_hours}
                    placeholder="Lun-Vie 9:00-18:00"
                  />
                </div>

<div class="md:col-span-2">
                  <label class="form-label">Medio de Publicidad</label>
                  <input
                    type="text"
                    class="form-input"
                    bind:value={businessProfile.advertising_medium}
                    placeholder="¿Cómo nos conoció?"
                  />
                </div>
              </div>
            </div>

<div class="flex justify-end pt-6">
              <button
                type="submit"
                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-8 py-2 rounded-md font-medium transition-colors"
                disabled={isSavingBusinessProfile}
              >
                {#if isSavingBusinessProfile}
                  <div class="flex items-center space-x-2">
                    <div class="spinner w-4 h-4" />
                    <span>Guardando...</span>
                  </div>
                {:else}
                  Guardar Información de Contacto
                {/if}
              </button>
            </div>
          </form>
        </div>
      </div>
    {/if}

{#if activeTab === 'security'}
      <div class="card">
        <div class="card-header">
          <h2 class="text-xl font-semibold text-gray-900">Configuración de Seguridad</h2>
          <p class="text-gray-600 mt-1">Gestiona tu contraseña y configuración de seguridad</p>
        </div>

<div class="card-content space-y-6">
          <div class="border border-gray-200 rounded-lg overflow-hidden">
            <div class="flex items-center justify-between p-4 bg-gray-50">
              <div>
                <h3 class="font-medium text-gray-900">Autenticación de dos factores (2FA)</h3>
                <p class="text-sm text-gray-600 mt-0.5">
                  {$auth.user?.is_two_factor_enabled
                    ? 'Tu cuenta está protegida con autenticación de dos factores'
                    : 'Añade una capa extra de seguridad a tu cuenta'}
                </p>
              </div>
              <div class="flex items-center gap-3">
                {#if $auth.user?.is_two_factor_enabled}
                  <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Habilitado
                  </span>
                  <button
                    type="button"
                    class="text-sm text-red-600 hover:text-red-800 font-medium"
                    on:click={() => { show2faDisable = !show2faDisable; disableTotpCode = ''; }}
                    disabled={is2faLoading}
                  >Deshabilitar</button>
                {:else}
                  <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    Deshabilitado
                  </span>
                  <button
                    type="button"
                    class="text-sm bg-blue-600 text-white px-3 py-1.5 rounded font-medium hover:bg-blue-700 disabled:opacity-50"
                    on:click={setup2fa}
                    disabled={is2faLoading}
                  >
                    {is2faLoading ? 'Cargando...' : 'Habilitar 2FA'}
                  </button>
                {/if}
              </div>
            </div>

{#if show2faSetup && qrUri}
              <div class="p-5 border-t border-gray-200 space-y-4">
                <p class="text-sm font-medium text-gray-700">1. Escanea este código QR en Google Authenticator, Authy o cualquier app TOTP:</p>
                <div class="flex justify-center bg-white p-4 border border-gray-200 rounded">
                  <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data={encodeURIComponent(qrUri)}" alt="Código QR 2FA" class="w-44 h-44" />
                </div>
                <p class="text-sm font-medium text-gray-700 mt-3">2. Ingresa el código de 6 dígitos para confirmar:</p>
                <div class="flex gap-3">
                  <input
                    type="text"
                    class="form-input w-40 text-center tracking-widest font-mono text-lg"
                    placeholder="000000"
                    maxlength="6"
                    bind:value={totpSetupCode}
                  />
                  <button
                    type="button"
                    class="bg-green-600 text-white px-4 py-2 rounded font-medium hover:bg-green-700 disabled:opacity-50"
                    on:click={enable2fa}
                    disabled={is2faLoading}
                  >
                    {is2faLoading ? 'Verificando...' : 'Confirmar y activar'}
                  </button>
                  <button
                    type="button"
                    class="text-gray-500 hover:text-gray-700 text-sm font-medium"
                    on:click={() => { show2faSetup = false; }}
                  >Cancelar</button>
                </div>
              </div>
            {/if}

{#if showBackupCodes && backupCodes.length > 0}
              <div class="p-5 border-t border-green-200 bg-green-50">
                <h4 class="font-medium text-green-900 mb-2">✅ 2FA activado — Guarda tus códigos de respaldo</h4>
                <p class="text-sm text-green-700 mb-3">Estos códigos son de un solo uso. Guárdalos en un lugar seguro.</p>
                <div class="grid grid-cols-2 gap-2 font-mono text-sm">
                  {#each backupCodes as code}
                    <span class="bg-white border border-green-200 px-3 py-1.5 rounded text-center">{code}</span>
                  {/each}
                </div>
                <button
                  type="button"
                  class="mt-4 text-sm text-green-700 underline"
                  on:click={() => { showBackupCodes = false; backupCodes = []; }}
                >He guardado mis códigos</button>
              </div>
            {/if}

{#if show2faDisable}
              <div class="p-5 border-t border-red-200 bg-red-50">
                <p class="text-sm font-medium text-red-800 mb-3">Ingresa el código de tu app autenticadora para deshabilitar 2FA:</p>
                <div class="flex gap-3">
                  <input
                    type="text"
                    class="form-input w-40 text-center tracking-widest font-mono text-lg border-red-300"
                    placeholder="000000"
                    maxlength="6"
                    bind:value={disableTotpCode}
                  />
                  <button
                    type="button"
                    class="bg-red-600 text-white px-4 py-2 rounded font-medium hover:bg-red-700 disabled:opacity-50"
                    on:click={disable2fa}
                    disabled={is2faLoading}
                  >
                    {is2faLoading ? 'Verificando...' : 'Confirmar y deshabilitar'}
                  </button>
                  <button
                    type="button"
                    class="text-gray-500 hover:text-gray-700 text-sm"
                    on:click={() => { show2faDisable = false; }}
                  >Cancelar</button>
                </div>
              </div>
            {/if}
          </div>

<form on:submit|preventDefault={handlePasswordChange} class="space-y-6">
            <h3 class="text-lg font-medium text-gray-900">Cambiar Contraseña</h3>

<div>
              <label for="current-password" class="form-label">
                Contraseña Actual <span class="text-red-500">*</span>
              </label>
              <input
                id="current-password"
                type="password"
                class="form-input {passwordErrors.currentPassword ? 'border-red-300' : ''}"
                bind:value={currentPassword}
                disabled={isChangingPassword}
              />
              {#if passwordErrors.currentPassword}
                <p class="form-error">{passwordErrors.currentPassword}</p>
              {/if}
            </div>

<div>
              <label for="new-password" class="form-label">
                Nueva Contraseña <span class="text-red-500">*</span>
              </label>
              <input
                id="new-password"
                type="password"
                class="form-input {passwordErrors.newPassword ? 'border-red-300' : ''}"
                bind:value={newPassword}
                disabled={isChangingPassword}
              />
              {#if passwordErrors.newPassword}
                <p class="form-error">{passwordErrors.newPassword}</p>
              {/if}
            </div>

<div>
              <label for="confirm-password" class="form-label">
                Confirmar Nueva Contraseña <span class="text-red-500">*</span>
              </label>
              <input
                id="confirm-password"
                type="password"
                class="form-input {passwordErrors.confirmPassword ? 'border-red-300' : ''}"
                bind:value={confirmPassword}
                disabled={isChangingPassword}
              />
              {#if passwordErrors.confirmPassword}
                <p class="form-error">{passwordErrors.confirmPassword}</p>
              {/if}
            </div>

<div class="flex justify-end">
              <button
                type="submit"
                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors"
                disabled={isChangingPassword}
              >
                {#if isChangingPassword}
                  <div class="flex items-center space-x-2">
                    <div class="spinner w-4 h-4" />
                    <span>Cambiando...</span>
                  </div>
                {:else}
                  Cambiar Contraseña
                {/if}
              </button>
            </div>
          </form>
        </div>
      </div>
    {/if}

{#if activeTab === 'account'}
      <div class="card">
        <div class="card-header">
          <h2 class="text-xl font-semibold text-gray-900">Información de la Cuenta</h2>
          <p class="text-gray-600 mt-1">Detalles sobre tu cuenta y organización</p>
        </div>

<div class="card-content">
          <dl class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <dt class="text-sm font-medium text-gray-500">ID de Usuario</dt>
              <dd class="text-sm text-gray-900 font-mono mt-1">
                #{$auth.user?.id.substring(0, 8)}
              </dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Rol</dt>
              <dd class="text-sm text-gray-900 mt-1">
                {$auth.user?.role === 'CLIENT_ADMIN'
                  ? 'Administrador de Cliente'
                  : 'Usuario de Cliente'}
              </dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Estado de la Cuenta</dt>
              <dd class="text-sm mt-1">
                {#if $auth.user?.is_active}
                  <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
                  >
                    Activa
                  </span>
                {:else}
                  <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"
                  >
                    Inactiva
                  </span>
                {/if}
              </dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Miembro desde</dt>
              <dd class="text-sm text-gray-900 mt-1">
                {$auth.user?.created_at
                  ? new Date($auth.user.created_at).toLocaleDateString('es-ES', {
                      day: '2-digit',
                      month: 'long',
                      year: 'numeric'
                    })
                  : 'N/A'}
              </dd>
            </div>
          </dl>
        </div>
      </div>
    {/if}
  </div>
</div>

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.form-checkbox {
    border-radius: 0.25rem;
    border-color: #d1d5db;
    color: #2563eb;
  }

.form-checkbox:focus {
    ring-color: #3b82f6;
    border-color: #3b82f6;
  }
</style>