<template>
  <div class="profile-page">
    <div class="container container-large">
      <div class="page-header">
        <h1 class="page-title">Профиль пользователя</h1>
        <p class="page-subtitle">Информация о вашем аккаунте</p>
      </div>

      <div class="profile-layout">
        <!-- Основная информация -->
        <div class="profile-main">
          <div class="card">
            <div class="card-header">
              <h2 class="card-title">Основная информация</h2>
            </div>
            <div class="card-body">
              <div class="user-info">
                <div class="user-avatar-section">
                  <div class="user-avatar">
                    <span class="avatar-text">ИИ</span>
                  </div>
                  <div class="user-details">
                    <div class="user-name">Иван Иванов</div>
                    <div class="user-email">user@example.com</div>
                  </div>
                </div>
                
                <div class="user-stats">
                  <div class="stat-item">
                    <div class="stat-number">5</div>
                    <div class="stat-label">Объектов</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-number">12</div>
                    <div class="stat-label">Отзывов</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Быстрые действия -->
          <div class="card">
            <div class="card-header">
              <h2 class="card-title">Быстрые действия</h2>
            </div>
            <div class="card-body">
              <div class="actions-grid">
                <NuxtLink to="/objects/my-objects" class="btn btn-outline action-btn">
                  📝 Мои объекты
                </NuxtLink>
                <NuxtLink to="/objects/create" class="btn btn-primary action-btn">
                  ➕ Добавить объект
                </NuxtLink>
                <NuxtLink to="/objects" class="btn btn-outline action-btn">
                  🔍 Все объекты
                </NuxtLink>
                <NuxtLink to="/" class="btn btn-outline action-btn">
                  🏠 Главная
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>

        <!-- Боковая панель -->
        <div class="profile-sidebar">
          <!-- Статус -->
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Статус аккаунта</h3>
            </div>
            <div class="card-body">
              <div class="status-item">
                <span class="status-icon">✅</span>
                <span class="status-text">Активен</span>
              </div>
              <p class="status-note">Демо-режим</p>
            </div>
          </div>

          <!-- Навигация -->
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Навигация</h3>
            </div>
            <div class="card-body">
              <div class="nav-links">
                <NuxtLink to="/objects" class="nav-link-block">
                  🔍 Все объекты
                </NuxtLink>
                <NuxtLink to="/objects/my-objects" class="nav-link-block">
                  📝 Мои объекты
                </NuxtLink>
                <NuxtLink to="/objects/create" class="nav-link-block">
                  ➕ Добавить объект
                </NuxtLink>
                <NuxtLink to="/auth/login" class="nav-link-block">
                  🔑 Войти
                </NuxtLink>
                <NuxtLink to="/auth/register" class="nav-link-block">
                  📝 Регистрация
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// Страница профиля доступна всем в демо-режиме
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background: var(--bg-secondary);
  padding: 2rem 0;
}

.container-large {
  max-width: 1200px;
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 1.125rem;
}

.profile-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.profile-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.user-avatar-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  width: 4rem;
  height: 4rem;
  background: var(--primary-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-text {
  color: var(--primary-600);
  font-weight: bold;
  font-size: 1.25rem;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 1.25rem;
  font-weight: 600;
}

.user-email {
  color: var(--text-secondary);
}

.user-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-600);
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.action-btn {
  display: flex;
  justify-content: center;
  width: 100%;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.status-icon {
  font-size: 1.125rem;
}

.status-text {
  font-weight: 500;
  color: var(--success-600);
}

.status-note {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-link-block {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
  font-weight: 500;
}

.nav-link-block:hover {
  color: var(--primary-600);
  background: var(--primary-50);
}

@media (max-width: 968px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .user-avatar-section {
    flex-direction: column;
    text-align: center;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
}
</style>