<template>
  <div class="page-container">
    <div v-if="isAuthenticated && user" class="dashboard-content">
      
      <h1>Ваши цели на сегодня</h1>
      <p class="text-color-light">Цели обновляются раз в сутки. Получаемые бонусы усиливаются, если посещать сайт ежедневно.</p>
      
      <div class="streak-section">
        <div class="streak-card" :class="{ 'active-streak': user.dailyStreak === 1 }">
          <h2>x1</h2>
          <p>Базовые</p>
        </div>
        <div class="streak-card" :class="{ 'active-streak': user.dailyStreak === 2 }">
          <h2>x2</h2>
          <p>Двойные</p>
        </div>
        <div class="streak-card" :class="{ 'active-streak': user.dailyStreak >= 3 }">
          <h2>x3</h2>
          <p>Тройные</p>
        </div>
      </div>
      
      <div class="habits-section">
        <h2>Привычки</h2>
        <div v-if="habitsPending">Loading habits...</div>
        <div v-else-if="habitsError">Could not load habits.</div>
        <div v-else-if="habits && habits.length > 0">
          <div v-for="habit in habits" :key="habit.id" class="habit-card">
            <div class="habit-header">
              <div class="habit-details">
                <h3>{{ habit.name }}</h3>
                <p class="habit-schedule">{{ getScheduleText(habit) }}</p>
              </div>
              <div class="habit-action">
                <div v-if="isScheduledForToday(habit)">
                  <span v-if="isCompleted(habit, today)" class="completed-text">Выполнено!</span>
                  <button v-else @click="completeHabit(habit.id, $event)" :disabled="isSubmittingHabit" class="btn btn-primary btn-sm">
                    Выполнить
                  </button>
                </div>
              </div>
            </div>

            <div class="history-grid">
              <div v-for="day in last14Days" :key="day.toISOString()" class="day-cell" :class="getCellClasses(habit, day)">
                <span class="day-label">{{ formatDayLabel(day) }}</span>
              </div>
            </div>

            <div v-if="explodingHabitId === habit.id" class="confetti-container">
              <div v-for="i in 15" :key="i" class="confetti-particle"></div>
            </div>
          </div>
        </div>
        <div v-else>
            <p>У вас еще нет привычек. Перейдите на страницу <NuxtLink to="/habits">Мои привычки</NuxtLink>, чтобы создать их.</p>
        </div>
      </div>

    </div>
    <div v-else class="welcome-content">
      <h1>Добро пожаловать в SmurfHabits!</h1>
      <p class="text-color-light">Отслеживайте свои привычки и развивайте свою деревню.</p>
      <div class="auth-buttons">
        <NuxtLink to="/login" class="btn btn-primary">Войти</NuxtLink>
        <NuxtLink to="/register" class="btn btn-secondary">Зарегистрироваться</NuxtLink>
      </div>
    </div>
  </div>
</template>

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

const { user, isAuthenticated, updateUser } = useAuth();
const api = useApi();

// --- Habits Data ---
const { data: habits, pending: habitsPending, error: habitsError, refresh: refreshHabits } = await useFetch('/api/habits', {
    lazy: true,
    server: false,
});

// --- Date Logic & Helpers ---
const today = new Date();
const todayNormalized = new Date();
todayNormalized.setHours(0, 0, 0, 0);

const last14Days = computed(() => {
  const dates = [];
  const today = new Date();
  const todayDay = today.getDay(); // 0 for Sunday, 1 for Monday, etc.
  
  // Adjust so that Monday is 1 and Sunday is 7
  const dayOfWeek = todayDay === 0 ? 7 : todayDay;
  
  // Calculate days to subtract to get to the Monday of LAST week
  // (dayOfWeek - 1) gets us to this week's Monday. +7 gets us to last week's Monday.
  const daysToSubtract = (dayOfWeek - 1) + 7;
  
  const startDate = new Date();
  startDate.setDate(today.getDate() - daysToSubtract);

  for (let i = 0; i < 14; i++) {
    const date = new Date(startDate);
    date.setDate(startDate.getDate() + i);
    dates.push(date);
  }
  return dates;
});

const formatDayLabel = (date) => {
    // Use Intl for robust localization. 'янв' needs a specific format.
    const formatted = new Intl.DateTimeFormat('ru-RU', { day: 'numeric', month: 'short' }).format(date);
    // The format might include a " г.", remove it.
    return formatted.replace(' г.', '');
};

const isSameDay = (d1, d2) => {
    d1 = new Date(d1);
    d2 = new Date(d2);
    return d1.getFullYear() === d2.getFullYear() &&
           d1.getMonth() === d2.getMonth() &&
           d1.getDate() === d2.getDate();
};

const isCompleted = (habit, date) => {
  if (!habit || !habit.completions) return false;
  return habit.completions.some(c => isSameDay(c.date, date));
};

const getCellClasses = (habit, day) => {
    const classes = {};
    const dayNormalized = new Date(day);
    dayNormalized.setHours(0, 0, 0, 0);

    const habitCreatedAt = new Date(habit.createdAt);
    habitCreatedAt.setHours(0, 0, 0, 0);

    if (dayNormalized > todayNormalized) {
        classes['future-day'] = true;
    }

    if (isSameDay(dayNormalized, todayNormalized)) {
        classes['today-highlight'] = true;
    }

    const dayOfWeek = (dayNormalized.getDay() === 0) ? 6 : dayNormalized.getDay() - 1; // Mon=0, Sun=6
    const isScheduled = habit.daysOfWeek.includes(dayOfWeek);
    if (isScheduled) {
        classes['scheduled-day'] = true;
    }

    if (isCompleted(habit, dayNormalized)) {
        classes['completed'] = true;
        return classes;
    }

    if (dayNormalized < todayNormalized && isScheduled && dayNormalized >= habitCreatedAt) {
        classes['missed-day'] = true;
    }

    return classes;
};

const isScheduledForToday = (habit) => {
    const todayDay = today.getDay(); // Sunday is 0
    const appDayOfWeek = (todayDay === 0) ? 6 : todayDay - 1;
    return habit.daysOfWeek.includes(appDayOfWeek);
}

const getScheduleText = (habit) => {
    if (habit.daysOfWeek.length === 7) {
        return 'каждый день';
    }
    const dayMap = { 0: 'Пн', 1: 'Вт', 2: 'Ср', 3: 'Чт', 4: 'Пт', 5: 'Сб', 6: 'Вс' };
    return habit.daysOfWeek.sort().map(dayIndex => dayMap[dayIndex]).join(', ');
};

// --- Actions & UI State ---
const isSubmittingHabit = ref(false);
const explodingHabitId = ref(null);

const completeHabit = async (habitId, event) => {
    if (event) {
        event.preventDefault();
    }
    if (isSubmittingHabit.value) return;
    isSubmittingHabit.value = true;

    try {
        const response = await api(`/api/habits/${habitId}/complete`, { method: 'POST' });
        if (updateUser && response) {
            updateUser({
                coins: response.updatedCoins,
                exp: response.updatedExp,
            });
        }

        const habit = habits.value.find(h => h.id === habitId);
        if (habit) {
            habit.completions.push({
                id: Math.random(),
                habitId: habitId,
                date: new Date().toISOString(),
            });
        }
        
        explodingHabitId.value = habitId;
        setTimeout(() => {
            explodingHabitId.value = null;
        }, 1000);

    } catch (err) {
        alert(err.data?.message || 'Failed to complete habit.');
    } finally {
        isSubmittingHabit.value = false;
    }
};
</script>

<style scoped>
/* Scoped styles are kept for component-specific adjustments and animations */
.dashboard-content, .welcome-content {
  text-align: center;
}

.welcome-content {
  padding: 40px 0;
}

.streak-section {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 24px 0 32px 0;
}

.streak-card {
  background: #f8f9fa;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  width: 110px;
  transition: all 0.3s ease;
}

.streak-card h2 {
  margin: 0 0 5px 0;
  font-size: 2em;
  color: var(--text-color-light);
}

.streak-card p {
  margin: 0;
  font-size: 0.9em;
  color: var(--text-color-light);
}

.active-streak {
  border-color: var(--primary-color);
  background-color: #f0f5ff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

.active-streak h2 {
  color: var(--primary-color);
}

.active-streak p {
  color: var(--text-color);
  font-weight: 600;
}

.habits-section {
  margin: 40px 0;
}

.habit-card {
  background: var(--container-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
  margin: 24px auto;
  max-width: 800px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.habit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.habit-details {
  text-align: left;
}

.habit-details h3 {
  margin: 0;
  font-size: 1.3rem;
}

.habit-schedule {
  margin: 5px 0 0 0;
  font-size: 0.9em;
  color: var(--text-color-light);
}

.completed-text {
  font-weight: bold;
  color: #16a34a; /* A nice green */
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 20px 0;
}

.day-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8fafc;
  position: relative;
}

.day-cell.completed {
  background-color: #4ade80;
  color: white;
  border-color: #4ade80;
}

.day-cell.missed-day {
  background-color: #fee2e2;
}

.day-cell.scheduled-day {
  border-width: 2px;
  border-color: var(--primary-color);
}

.future-day .day-label {
  color: #cbd5e1;
}

.day-cell.today-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary-color);
}

.day-label {
    font-size: 0.85em;
}

.auth-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

/* Confetti Animation */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.confetti-particle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: confetti-fall 1s ease-out forwards;
}

@keyframes confetti-fall {
  from {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
  to {
    transform: translateY(-200px) translateX(var(--x-end)) rotate(360deg);
    opacity: 0;
  }
}

/* Particle Colors & random-ish trajectories */
.confetti-particle:nth-child(1) { background-color: #d88e8e; --x-end: -150px; animation-delay: 0s; }
.confetti-particle:nth-child(2) { background-color: #a3be8c; --x-end: 150px; animation-delay: 0.1s; }
.confetti-particle:nth-child(3) { background-color: #ebcb8b; --x-end: 100px; animation-delay: 0.05s; }
.confetti-particle:nth-child(4) { background-color: #81a1c1; --x-end: -100px; animation-delay: 0.2s; }
.confetti-particle:nth-child(5) { background-color: #b48ead; --x-end: 50px; animation-delay: 0.15s; }
.confetti-particle:nth-child(6) { background-color: #d88e8e; --x-end: -50px; animation-delay: 0.3s; }
.confetti-particle:nth-child(7) { background-color: #a3be8c; --x-end: -80px; animation-delay: 0.25s; }
.confetti-particle:nth-child(8) { background-color: #ebcb8b; --x-end: 80px; animation-delay: 0.4s; }
.confetti-particle:nth-child(9) { background-color: #81a1c1; --x-end: 120px; animation-delay: 0.35s; }
.confetti-particle:nth-child(10) { background-color: #b48ead; --x-end: -120px; animation-delay: 0.45s; }
.confetti-particle:nth-child(11) { background-color: #d88e8e; --x-end: -180px; animation-delay: 0.08s; }
.confetto-particle:nth-child(12) { background-color: #a3be8c; --x-end: 180px; animation-delay: 0.12s; }
.confetti-particle:nth-child(13) { background-color: #ebcb8b; --x-end: 40px; animation-delay: 0.18s; }
.confetti-particle:nth-child(14) { background-color: #81a1c1; --x-end: -40px; animation-delay: 0.22s; }
.confetti-particle:nth-child(15) { background-color: #b48ead; --x-end: 0px; animation-delay: 0.28s; }
</style>