<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="User Profile">
  <title>{{ $t('user.profile') }}</title>
  <style>
    body {
      background-color: var(--bg-color);
      display: flex;
      justify-content: center;
      padding-top: var(--spacing-xl);
      padding-bottom: var(--spacing-xl);
      box-sizing: border-box;
      min-height: 100vh;
    }

    .profile-container {
      width: 100%;
      max-width: 800px;
      padding: var(--spacing-xl);
      background: var(--bg-color-secondary);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xl);
      height: fit-content;
    }

    .section-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-xs);
      border-bottom: 1px solid var(--border-color);
    }

    .avatar-section {
      display: flex;
      align-items: center;
      gap: var(--spacing-lg);
    }

    .avatar-wrapper {
      position: relative;
      cursor: pointer;
    }

    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: var(--color-primary-text);
      font-weight: bold;
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .avatar-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .avatar-wrapper:hover .avatar-overlay {
      opacity: 1;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-md);
    }

    .form-full {
      grid-column: 1 / -1;
    }

    .oauth-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }

    .oauth-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-sm);
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
    }

    .oauth-info {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
    }

    .oauth-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background: var(--bg-color-secondary);
      border-radius: 50%;
    }

    .danger-zone {
      margin-top: var(--spacing-lg);
      padding-top: var(--spacing-lg);
      border-top: 1px solid var(--border-color);
    }
  </style>
</head>

<body>
  <div class="profile-container">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h2 style="margin: 0;">{{ $t('user.profile') }}</h2>
      <v-btn color="danger" variant="outline" size="sm" :click="handleLogout">
        {{ $t('auth.logout') }}
      </v-btn>
    </div>

    <!-- Basic Info -->
    <div>
      <div class="section-title">{{ $t('user.info') || 'Basic Information' }}</div>
      <div class="avatar-section">
        <div class="avatar-wrapper" @click="triggerAvatarUpload">
          <div class="avatar">
            <img v-if="user.avatar" :src="user.avatar" alt="Avatar">
            <span v-else>{{ user.nickname ? user.nickname.charAt(0).toUpperCase() : (user.username ?
              user.username.charAt(0).toUpperCase() : 'U') }}</span>
          </div>
          <div class="avatar-overlay">
            <i class="fas fa-edit"></i>
          </div>
        </div>
        <div style="flex: 1;">
          <div style="font-weight: bold; font-size: 1.2rem;">{{ user.nickname || user.username }}</div>
          <div style="color: var(--color-text-light); font-size: 0.9rem;">{{ $t('common.id') }}: {{ user.id }}</div>
        </div>
      </div>

      <form style="margin-top: var(--spacing-lg);" @submit.prevent="updateProfile">
        <div class="form-grid">
          <v-input label="Username" :label="$t('user.username')" v:value="user.username" disabled></v-input>
          <v-input label="Nickname" :label="$t('user.nickname')" v:value="user.nickname"></v-input>
          <v-input label="Email" :label="$t('user.email')" type="email" v:value="user.email"></v-input>
          <v-input label="Phone" :label="$t('user.phone')" type="tel" v:value="user.phone"></v-input>
          <v-input class="form-full" label="Avatar URL" :label="$t('user.avatar_url')" v:value="user.avatar"></v-input>
        </div>
        <div style="margin-top: var(--spacing-md); display: flex; justify-content: flex-end;">
          <v-btn type="submit" color="primary" :loading="loading">
            {{ $t('common.save') }}
          </v-btn>
        </div>
      </form>
    </div>

    <!-- Security -->
    <div>
      <div class="section-title">{{ $t('auth.security') || 'Security' }}</div>
      <form @submit.prevent="changePassword">
        <div class="form-grid">
          <v-input class="form-full" :label="$t('auth.old_password')" type="password"
            v:value="passwordForm.old_password"></v-input>
          <v-input class="form-full" :label="$t('auth.new_password')" type="password"
            v:value="passwordForm.new_password"></v-input>
        </div>
        <div style="margin-top: var(--spacing-md); display: flex; justify-content: flex-end;">
          <v-btn type="submit" variant="outline" :loading="pwdLoading"
            :disabled="!passwordForm.new_password || !passwordForm.old_password">
            {{ $t('auth.change_password') || 'Update Password' }}
          </v-btn>
        </div>
      </form>
    </div>

    <!-- Linked Accounts -->
    <div>
      <div class="section-title">{{ $t('auth.linked_accounts') || 'Linked Accounts' }}</div>
      <div class="oauth-list">
        <div class="oauth-item" v-for="provider in providers">
          <div class="oauth-info">
            <div class="oauth-icon">
              <i class="fab" :class="'fa-' + provider.code"></i>
            </div>
            <div>
              <div style="font-weight: 500;">{{ provider.name }}</div>
              <div style="font-size: 0.8rem; color: var(--color-text-light);" v-if="isBound(provider.code)">
                {{ getBindInfo(provider.code) }}
              </div>
              <div style="font-size: 0.8rem; color: var(--color-text-light);" v-else>
                {{ $t('auth.not_linked') }}
              </div>
            </div>
          </div>
          <div>
            <v-btn v-if="isBound(provider.code)" size="sm" variant="outline" color="danger"
              :click="() => unbind(provider.code)">
              {{ $t('common.unbind') }}
            </v-btn>
            <v-btn v-else size="sm" variant="outline" :click="() => bind(provider.code)">
              {{ $t('common.bind') }}
            </v-btn>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
<script setup>
  user = $mod.$auth.user || {};
  loading = false;
  pwdLoading = false;
  passwordForm = {old_password: '', new_password: ''};

  // Bindings
  providers = [];
  bindings = [];

  // Fetch fresh data
  loadUser = async () => {
    try {
      user = await $mod.$auth.fetchUser();
    } catch (e) {
      console.error(e);
    }
  };

  loadBindings = async () => {
    try {
      // Get enabled providers
      const res = await fetch('/api/auth/login-methods');
      if (res.status !== 200) {
        const err = await res.json();
        throw new Error(err.message);
      }
      const providersData = await res.json();
      providers = providersData.methods.filter(p => p.type !== 'password' && p.type !== 'code' && p.type !== 'email_code' && p.type !== 'phone_code').map(p => ({
        code: p.type,
        name: p.name
      }));

      // Get current bindings
      const resBind = await fetch('/api/auth/me/bindings');
      if (resBind.status !== 200) {
        const err = await resBind.json();
        throw new Error(err.message);
      }
      bindings = await resBind.json();
    } catch (e) {
      console.error(e);
    }
  };

  updateProfile = async () => {
    loading = true;
    try {
      const res = await fetch('/api/auth/me', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
        nickname: user.nickname,
        email: user.email,
        phone: user.phone,
        avatar: user.avatar
      }) });
      if (res.status !== 200) {
        const err = await res.json();
        throw new Error(err.message);
      }
      $message.success($t('common.save_success'));
      await loadUser();
    } catch (e) {
      $message.error(e.message);
    } finally {
      loading = false;
    }
  };

  changePassword = async () => {
    if (!passwordForm.new_password || !passwordForm.old_password) return;
    pwdLoading = true;
    try {
      const res = await fetch('/api/auth/me/change-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
        old_password: passwordForm.old_password,
        new_password: passwordForm.new_password
      }) });
      if (res.status !== 200) {
        const err = await res.json();
        throw new Error(err.message);
      }
      $message.success($t('auth.password_changed'));
      passwordForm.old_password = '';
      passwordForm.new_password = '';
    } catch (e) {
      $message.error(e.message);
    } finally {
      pwdLoading = false;
    }
  };

  handleLogout = async () => {
    await $mod.$auth.logout('/login');
  };

  // OAuth Helpers
  isBound = (code) => {
    return bindings.some(b => b.provider === code);
  };

  getBindInfo = (code) => {
    const b = bindings.find(b => b.provider === code);
    return b ? (b.provider_name || b.email || $t('auth.linked')) : '';
  };

  bind = async (provider) => {
    try {
      const params = new URLSearchParams({ provider, redirect: redirect || '', bind_mode: true });
      const res = await fetch('/api/auth/authorize/thirdparty?' + params);
      if (res.status !== 200) {
        const err = await res.json();
        throw new Error(err.message);
      }
      const data = await res.json();
      if (data.auth_url) {
        window.location.href = data.auth_url;
      }
    } catch (e) {
      $message.error(e.message);
    }
  };

  unbind = async (provider) => {
    try {
      await $message.confirm($t('auth.unbind_confirm'));
      const res = await fetch(`/api/auth/me/bindings/${provider}`, { method: 'DELETE' });
      if (res.status !== 200) {
        const err = await res.json();
        throw new Error(err.message);
      }
      $message.success($t('common.success'));
      loadBindings();
    } catch (e) {
      if (e !== 'cancel') $message.error(e.message);
    }
  };

  triggerAvatarUpload = async () => {
    try {
      const url = await $message.prompt($t('user.avatar_url'), user.avatar || '');
      if (url) {
        user.avatar = url;
      }
    } catch (e) {
      // Cancelled
    }
  };

</script>
<script>
  $data.loadUser();
  $data.loadBindings();
</script>

</html>
