<template>
  <div class="doctor-dashboard">
    <!-- Welcome Alert -->
    <div class="welcome-alert">
      <i class="fas fa-check-circle"></i>
      <span class="alert-text">Welcome back, Admin User (System)!</span>
    </div>

    <!-- Action Buttons -->
    <div class="action-buttons">
      <button class="btn btn-primary">
        <i class="fas fa-plus"></i>
        New Appointment
      </button>
      <button class="btn btn-secondary">
        <i class="fas fa-user-plus"></i>
        Add Patient
      </button>
    </div>

    <!-- Stats Cards -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-card-header">
          <span class="stat-card-title">Total Today</span>
          <div class="stat-icon blue">
            <i class="fas fa-calendar-day"></i>
          </div>
        </div>
        <div class="stat-value">31</div>
      </div>

      <div class="stat-card">
        <div class="stat-card-header">
          <span class="stat-card-title">Old Patients</span>
          <div class="stat-icon yellow">
            <i class="fas fa-user-clock"></i>
          </div>
        </div>
        <div class="stat-value">22</div>
      </div>

      <div class="stat-card">
        <div class="stat-card-header">
          <span class="stat-card-title">New Patients</span>
          <div class="stat-icon green">
            <i class="fas fa-user-plus"></i>
          </div>
        </div>
        <div class="stat-value">4</div>
      </div>

      <div class="stat-card">
        <div class="stat-card-header">
          <span class="stat-card-title">Follow-up</span>
          <div class="stat-icon purple">
            <i class="fas fa-redo-alt"></i>
          </div>
        </div>
        <div class="stat-value">0</div>
      </div>

      <div class="stat-card">
        <div class="stat-card-header">
          <span class="stat-card-title">Reports</span>
          <div class="stat-icon pink">
            <i class="fas fa-chart-bar"></i>
          </div>
        </div>
        <div class="stat-value">5</div>
      </div>

      <div class="stat-card">
        <div class="stat-card-header">
          <span class="stat-card-title">Pending</span>
          <div class="stat-icon orange">
            <i class="fas fa-hourglass-half"></i>
          </div>
        </div>
        <div class="stat-value">0</div>
      </div>
    </div>

    <!-- Date Info -->
    <div class="date-info">
      <i class="fas fa-calendar"></i>
      <span class="date-info-text">
        Showing data for: August 23, 2025 
        <span style="color: #3b82f6; cursor: pointer;">(Click on calendar dates to view different days)</span>
      </span>
    </div>

    <!-- Main Grid Layout -->
    <div class="main-grid">
      <!-- Calendar Section -->
      <div class="calendar-card">
        <div class="calendar-header">
          <div class="calendar-nav">
            <button @click="previousMonth">
              <i class="fas fa-chevron-left"></i>
            </button>
            <span class="calendar-month">August 2025</span>
            <button @click="nextMonth">
              <i class="fas fa-chevron-right"></i>
            </button>
          </div>
        </div>
        
        <div class="calendar-grid">
          <!-- Calendar Day Headers -->
          <div class="calendar-day-header">Sun</div>
          <div class="calendar-day-header">Mon</div>
          <div class="calendar-day-header">Tue</div>
          <div class="calendar-day-header">Wed</div>
          <div class="calendar-day-header">Thu</div>
          <div class="calendar-day-header">Fri</div>
          <div class="calendar-day-header">Sat</div>
          
          <!-- Calendar Days -->
          <div 
            v-for="day in calendarDays" 
            :key="day.date"
            class="calendar-day"
            :class="{
              'today': day.isToday,
              'has-appointment': day.hasAppointment
            }"
            @click="selectDate(day)"
          >
            {{ day.day }}
          </div>
        </div>
      </div>

      <!-- Upcoming Appointments -->
      <div class="appointments-card">
        <div class="appointments-header">
          <h3 class="appointments-title">Upcoming Today</h3>
        </div>
        
        <div class="appointments-list">
          <div class="appointment-item">
            <div class="appointment-time">12:15 AM</div>
            <div class="appointment-details">
              <div class="appointment-patient">Selina</div>
              <div class="appointment-type">Old</div>
            </div>
            <div class="appointment-status completed">Completed</div>
          </div>

          <div class="appointment-item">
            <div class="appointment-time">12:30 AM</div>
            <div class="appointment-details">
              <div class="appointment-patient">Firoza Begum</div>
              <div class="appointment-type">Old</div>
            </div>
            <div class="appointment-status completed">Completed</div>
          </div>

          <div class="appointment-item">
            <div class="appointment-time">12:45 AM</div>
            <div class="appointment-details">
              <div class="appointment-patient">Yousuff</div>
              <div class="appointment-type">Old</div>
            </div>
            <div class="appointment-status consulted">Consulted</div>
          </div>

          <div class="appointment-item">
            <div class="appointment-time">1:00 AM</div>
            <div class="appointment-details">
              <div class="appointment-patient">Yousuff</div>
              <div class="appointment-type">Old</div>
            </div>
            <div class="appointment-status consulted">Consulted</div>
          </div>

          <div class="appointment-item">
            <div class="appointment-time">5:30 PM</div>
            <div class="appointment-details">
              <div class="appointment-patient">Aminul Islam</div>
              <div class="appointment-type">New</div>
            </div>
            <div class="appointment-status completed">Completed</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

// Calendar state
const currentDate = ref(new Date(2025, 7, 23)) // August 23, 2025
const selectedDate = ref(23)

// Generate calendar days for August 2025
const calendarDays = computed(() => {
  const year = 2025
  const month = 7 // August (0-indexed)
  const firstDay = new Date(year, month, 1).getDay()
  const daysInMonth = new Date(year, month + 1, 0).getDate()
  
  const days = []
  
  // Add empty cells for days before the first day of the month
  for (let i = 0; i < firstDay; i++) {
    days.push({ day: '', date: null, isToday: false, hasAppointment: false })
  }
  
  // Add days of the month
  for (let day = 1; day <= daysInMonth; day++) {
    const isToday = day === 23 // August 23, 2025
    const hasAppointment = [2, 5, 11, 12, 13, 15, 19, 20, 25, 26, 27].includes(day)
    
    days.push({
      day,
      date: `${year}-${month + 1}-${day}`,
      isToday,
      hasAppointment
    })
  }
  
  return days
})

// Methods
const previousMonth = () => {
  // Calendar navigation logic
  console.log('Previous month')
}

const nextMonth = () => {
  // Calendar navigation logic
  console.log('Next month')
}

const selectDate = (day) => {
  if (day.date) {
    selectedDate.value = day.day
    console.log('Selected date:', day.date)
  }
}
</script>

<style scoped>
/* Component-specific styles are in the main CSS file */
</style>