<template>
  <div class="p-6">
    <!-- Empty state -->
    <div v-if="isEmpty" class="flex flex-col items-center justify-center py-16">
      <Clock class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
      <p class="text-sm text-text-secondary mt-4">Start tracking your time</p>
      <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Your dashboard will come alive with stats, charts, and recent activity once you start logging hours.</p>
      <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors">
        Go to Timer
      </router-link>
    </div>

    <!-- Main content -->
    <template v-else>
      <!-- Greeting header -->
      <div class="mb-8">
        <p class="text-lg text-text-secondary">{{ greeting }}</p>
        <p class="text-xs text-text-tertiary mt-1">{{ formattedDate }}</p>
      </div>

      <!-- Stats row — 4 columns -->
      <div class="grid grid-cols-4 gap-6 mb-8">
        <div>
          <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Today</p>
          <p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ formatDuration(todayStats.totalSeconds) }}</p>
        </div>
        <div>
          <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">This Week</p>
          <p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ formatDuration(weekStats.totalSeconds) }}</p>
        </div>
        <div>
          <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">This Month</p>
          <p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ formatDuration(monthStats.totalSeconds) }}</p>
        </div>
        <div>
          <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Active Projects</p>
          <p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ activeProjectsCount }}</p>
        </div>
      </div>

      <!-- Weekly chart -->
      <div class="mb-8">
        <h2 class="text-[1rem] font-medium text-text-primary mb-4">Weekly Hours</h2>
        <div class="h-48">
          <Bar v-if="chartData" :data="chartData" :options="chartOptions" />
        </div>
      </div>

      <!-- Recent entries -->
      <div>
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-[1rem] font-medium text-text-primary">Recent Entries</h2>
          <router-link to="/entries" class="text-xs text-text-tertiary hover:text-text-secondary transition-colors">View all</router-link>
        </div>

        <div v-if="recentEntries.length > 0">
          <div
            v-for="entry in recentEntries"
            :key="entry.id"
            class="flex items-center justify-between py-3 border-b border-border-subtle last:border-0"
          >
            <div class="flex items-center gap-3">
              <div
                class="w-2 h-2 rounded-full shrink-0"
                :style="{ backgroundColor: getProjectColor(entry.project_id) }"
              />
              <span class="text-[0.75rem] text-text-primary">{{ getProjectName(entry.project_id) }}</span>
            </div>
            <span class="text-[0.75rem] font-mono text-text-secondary">{{ formatDuration(entry.duration) }}</span>
          </div>
        </div>

        <p v-else class="text-[0.75rem] text-text-tertiary py-8">
          No entries yet. Start tracking your time.
        </p>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { Bar } from 'vue-chartjs'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Clock } from 'lucide-vue-next'
import { useEntriesStore } from '../stores/entries'
import { useProjectsStore } from '../stores/projects'
import type { TimeEntry } from '../stores/entries'

// Register Chart.js components
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

const entriesStore = useEntriesStore()
const projectsStore = useProjectsStore()

const todayStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
const weekStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
const monthStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
const recentEntries = ref<TimeEntry[]>([])

// Greeting based on time of day
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 12) return 'Good morning'
  if (hour < 18) return 'Good afternoon'
  return 'Good evening'
})

// Formatted date
const formattedDate = computed(() => {
  return new Date().toLocaleDateString('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

// Empty state check
const isEmpty = computed(() => {
  return recentEntries.value.length === 0 && weekStats.value.totalSeconds === 0
})

// Get start of current week (Monday)
function getWeekStart(): string {
  const now = new Date()
  const day = now.getDay()
  const diff = now.getDate() - day + (day === 0 ? -6 : 1)
  const monday = new Date(now.setDate(diff))
  return monday.toISOString().split('T')[0]
}

// Get start of current month
function getMonthStart(): string {
  const now = new Date()
  return new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0]
}

// Get today's date
function getToday(): string {
  return new Date().toISOString().split('T')[0]
}

// Format duration from seconds to readable format
function formatDuration(seconds: number): string {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  if (hours > 0) {
    return `${hours}h ${minutes}m`
  }
  return `${minutes}m`
}

// Get project name by ID
function getProjectName(projectId: number): string {
  const project = projectsStore.projects.find(p => p.id === projectId)
  return project?.name || 'Unknown Project'
}

// Get project color by ID
function getProjectColor(projectId: number): string {
  const project = projectsStore.projects.find(p => p.id === projectId)
  return project?.color || '#6B7280'
}

// Active projects count (non-archived)
const activeProjectsCount = computed(() => {
  return projectsStore.projects.filter(p => !p.archived).length
})

// Chart data for weekly hours
const chartData = computed(() => {
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  const weekStart = getWeekStart()
  const today = getToday()
  const todayIndex = new Date().getDay()
  const todayArrayIndex = todayIndex === 0 ? 6 : todayIndex - 1

  // Initialize hours for each day
  const hoursPerDay = [0, 0, 0, 0, 0, 0, 0]

  // Sum up hours from entries for this week
  recentEntries.value.forEach(entry => {
    const entryDate = new Date(entry.start_time).toISOString().split('T')[0]
    if (entryDate >= weekStart && entryDate <= today) {
      const dayIndex = new Date(entry.start_time).getDay()
      const index = dayIndex === 0 ? 6 : dayIndex - 1
      hoursPerDay[index] += entry.duration / 3600
    }
  })

  // Color today's bar lighter amber
  const colors = hoursPerDay.map((_, i) => i === todayArrayIndex ? '#FBBF24' : '#D97706')

  return {
    labels: days,
    datasets: [
      {
        label: 'Hours',
        data: hoursPerDay,
        backgroundColor: colors,
        borderRadius: 2
      }
    ]
  }
})

// Chart options
const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      callbacks: {
        label: (context: { raw: unknown }) => {
          const hours = context.raw as number
          return `${hours.toFixed(1)} hours`
        }
      }
    }
  },
  scales: {
    y: {
      beginAtZero: true,
      grid: {
        color: '#2E2E2A'
      },
      ticks: {
        color: '#5A5A54'
      }
    },
    x: {
      grid: {
        display: false
      },
      ticks: {
        color: '#5A5A54'
      }
    }
  }
}

// Load data on mount
onMounted(async () => {
  await projectsStore.fetchProjects()
  await entriesStore.fetchEntries()

  try {
    todayStats.value = await invoke('get_reports', {
      startDate: getToday(),
      endDate: getToday()
    })
  } catch (error) {
    console.error('Failed to fetch today stats:', error)
  }

  try {
    weekStats.value = await invoke('get_reports', {
      startDate: getWeekStart(),
      endDate: getToday()
    })
  } catch (error) {
    console.error('Failed to fetch week stats:', error)
  }

  try {
    monthStats.value = await invoke('get_reports', {
      startDate: getMonthStart(),
      endDate: getToday()
    })
  } catch (error) {
    console.error('Failed to fetch month stats:', error)
  }

  recentEntries.value = entriesStore.entries.slice(0, 5)
})
</script>
