<script setup>
import { ref, onMounted } from 'vue';

const userName = ref('Загрузка...');
const currentHour = ref(new Date().getHours());
const upcomingBookings = ref([]);
const recentStudios = ref([]);

onMounted(() => {
  const token = localStorage.getItem('jwt_token');
  
  if (token) {
    try {
      const payloadBase64 = token.split('.')[1];
      const binaryString = atob(payloadBase64);
      const bytes = new Uint8Array(binaryString.length);
      for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      const decodedText = new TextDecoder().decode(bytes);
      const decodedPayload = JSON.parse(decodedText);
      userName.value = decodedPayload.firstName || 'Пользователь';
    } catch (e) {
      console.error('Ошибка при расшифровке токена:', e);
      userName.value = 'Гость';
    }
  } else {
    userName.value = 'Гость';
  }

  // Загружаем недавние студии из localStorage
  try {
    const recent = localStorage.getItem('recent_studios');
    if (recent) {
      recentStudios.value = JSON.parse(recent).slice(0, 5);
    }
  } catch (e) {
    console.error('Ошибка загрузки недавних студий:', e);
  }
});

const getTimeOfDay = () => {
  if (currentHour.value < 12) return 'доброе утро';
  if (currentHour.value < 18) return 'добрый день';
  return 'добрый вечер';
};
</script>

<template>
  <div class="tab-content">
    <!-- Hero Header -->
    <header class="home-header">
      <div class="header-content">
        <h1 class="greeting">
          <svg v-if="currentHour < 12" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="greeting-emoji">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
          </svg>
          <svg v-else-if="currentHour < 18" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="greeting-emoji">
            <circle cx="12" cy="12" r="5"></circle>
            <line x1="12" y1="1" x2="12" y2="3"></line>
            <line x1="12" y1="21" x2="12" y2="23"></line>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
            <line x1="1" y1="12" x2="3" y2="12"></line>
            <line x1="21" y1="12" x2="23" y2="12"></line>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
          </svg>
          <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="greeting-emoji">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
          </svg>
          Добрый {{ getTimeOfDay() }}, <span class="user-name">{{ userName }}</span>!
        </h1>
        <p class="subtitle">Найди идеальное пространство для своего проекта</p>
      </div>
    </header>

    <!-- Hero Banner -->
    <div class="hero-banner">
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <div class="hero-badge">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="18 8 18 3 6 3 6 8"></polyline>
            <polyline points="18 14 18 21 6 21 6 14"></polyline>
            <path d="M6 8h12a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"></path>
          </svg>
          СПЕЦПРЕДЛОЖЕНИЕ
        </div>
        <h2 class="hero-title">Скидка 20% на первое бронирование</h2>
        <p class="hero-description">Используй код <strong>ADEL20</strong> при оформлении бронирования</p>
        <button class="hero-btn">Посмотреть студии</button>
      </div>
      <div class="hero-decoration"></div>
    </div>

    <!-- Quick Stats -->
    <div class="stats-grid">
      <div class="stat-card">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="stat-icon">
          <path d="M4 19V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"></path>
          <path d="M9 3v4"></path>
          <path d="M15 3v4"></path>
          <line x1="9" y1="12" x2="15" y2="12"></line>
          <line x1="9" y1="16" x2="15" y2="16"></line>
        </svg>
        <div class="stat-info">
          <div class="stat-number">250+</div>
          <div class="stat-label">Студий в каталоге</div>
        </div>
      </div>
      <div class="stat-card">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="stat-icon">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <div class="stat-info">
          <div class="stat-number">4.9★</div>
          <div class="stat-label">Средняя оценка</div>
        </div>
      </div>
      <div class="stat-card">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stat-icon">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
        <div class="stat-info">
          <div class="stat-number">5K+</div>
          <div class="stat-label">Довольных клиентов</div>
        </div>
      </div>
    </div>

    <!-- Popular Categories -->
    <section class="content-section">
      <h2 class="section-title">Популярные категории</h2>
      <div class="category-chips">
        <div class="chip">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
            <circle cx="12" cy="13" r="4"></circle>
          </svg>
          Фотосессия
        </div>
        <div class="chip">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="23 7 16 12 23 17 23 7"></polygon>
            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
          </svg>
          Видеосъемка
        </div>
        <div class="chip">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="1"></circle>
            <path d="M12 5v14"></path>
            <path d="M5 12h14"></path>
          </svg>
          Подкаст
        </div>
        <div class="chip">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M12 6l2 4h4l-3 3 1 4-4-3-4 3 1-4-3-3h4z" fill="currentColor"></path>
          </svg>
          События
        </div>
      </div>
    </section>

    <!-- Call to Action -->
    <section class="cta-section">
      <div class="cta-card">
        <h3>Начни с каталога</h3>
        <p>Просмотри все доступные студии и выбери подходящую</p>
        <button class="cta-button primary">Открыть каталог →</button>
      </div>
    </section>
  </div>
</template>

<style scoped>
.home-header { 
  margin-bottom: 32px;
  padding: 8px 0;
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.greeting { 
  font-size: 28px; 
  font-weight: 700; 
  color: var(--text-primary); 
  line-height: 1.2;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.greeting-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  flex-shrink: 0;
}

.user-name {
  color: var(--primary-color);
  font-weight: 700;
}

.subtitle { 
  color: var(--text-secondary); 
  font-size: 15px; 
  line-height: 1.4;
}

/* Hero Banner */
.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 32px 24px;
  margin: 24px 0;
  background: linear-gradient(135deg, #10A37F 0%, #0B7C60 100%);
  color: white;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 12px 32px rgba(16, 163, 127, 0.25);
}

.hero-overlay {
  position: absolute;
  top: -50%;
  right: -30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.hero-decoration {
  position: absolute;
  bottom: -50%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.hero-badge svg {
  flex-shrink: 0;
  color: white;
}

.hero-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
}

.hero-description {
  font-size: 14px;
  opacity: 0.95;
  line-height: 1.5;
  margin-bottom: 18px;
  font-weight: 500;
}

.hero-btn {
  display: inline-block;
  padding: 12px 24px;
  background: white;
  color: var(--primary-color);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.hero-btn:active {
  transform: translateY(0);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 28px 0;
}

.stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.stat-icon {
  flex-shrink: 0;
  color: var(--primary-color);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Sections */
.content-section {
  margin: 32px 0;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  cursor: default;
}

.chip svg {
  flex-shrink: 0;
  color: var(--text-secondary);
  width: 18px;
  height: 18px;
}

.chip:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
  color: var(--primary-color);
}

.chip:hover svg {
  color: var(--primary-color);
}

/* CTA Section */
.cta-section {
  margin-top: 32px;
  margin-bottom: 20px;
}

.cta-card {
  background: var(--bg-primary);
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.cta-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.cta-card p {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 14px;
}

.cta-button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta-button.primary {
  background: var(--primary-color);
  color: white;
}

.cta-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(16, 163, 127, 0.2);
}

.cta-button.primary:active {
  transform: translateY(0);
}

/* Планшет и ПК */
@media (min-width: 768px) {
  .greeting { 
    font-size: 32px;
  }

  .hero-banner {
    padding: 40px 48px;
    min-height: 240px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-description {
    font-size: 15px;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .stat-card {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .stat-icon {
    font-size: 32px;
  }

  .stat-number {
    font-size: 20px;
  }

  .stat-label {
    font-size: 13px;
  }

  .category-chips {
    gap: 10px;
  }

  .chip {
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* Большие экраны */
@media (min-width: 1024px) {
  .greeting { 
    font-size: 40px;
  }

  .hero-banner {
    padding: 48px 56px;
    min-height: 280px;
  }

  .hero-title {
    font-size: 32px;
  }

  .stats-grid {
    gap: 20px;
  }

  .stat-card {
    padding: 24px;
    flex-direction: row;
  }

  .stat-icon {
    font-size: 40px;
  }

  .stat-number {
    font-size: 22px;
  }
}
</style>