<template>
  <v-card 
    :class="[
      'dues-action-card',
      status === 'overdue' ? 'dues-action-card--overdue' : 'dues-action-card--upcoming'
    ]"
    elevation="2"
  >
    <!-- Status Badge -->
    <div class="status-badge">
      <v-chip
        :color="statusColor"
        size="small"
        variant="flat"
      >
        <v-icon start size="12">{{ statusIcon }}</v-icon>
        {{ statusText }}
      </v-chip>
    </div>

    <v-card-text class="pa-4">
      <!-- Member Info Header -->
      <div class="d-flex align-center mb-3">
        <v-avatar
          :color="avatarColor"
          size="40"
          class="mr-3"
        >
          <span class="text-white font-weight-bold">
            {{ memberInitials }}
          </span>
        </v-avatar>
        
        <div class="flex-grow-1">
          <h4 class="text-subtitle-1 font-weight-bold mb-1">
            {{ member.FullName || `${member.first_name} ${member.last_name}` }}
          </h4>
          <div class="d-flex align-center">
            <v-chip size="x-small" color="grey" variant="text" class="pa-0 mr-2">
              ID: {{ member.member_id || `MUSA-${member.Id}` }}
            </v-chip>
            <CountryFlag
              v-if="member.nationality"
              :country-code="member.nationality.split(',')[0]"
              :show-name="false"
              size="small"
            />
          </div>
        </div>
      </div>

      <!-- Dues Information -->
      <div class="dues-info mb-3">
        <div v-if="status === 'overdue'">
          <!-- Overdue Information -->
          <div class="d-flex justify-space-between align-center mb-2">
            <span class="text-body-2 text-medium-emphasis">
              <v-icon size="14" class="mr-1">mdi-clock-alert</v-icon>
              Days Overdue
            </span>
            <span class="text-body-2 font-weight-bold text-error">
              {{ calculateDisplayOverdueDays(member) }} days
            </span>
          </div>
          
          <div v-if="member.overdueReason" class="overdue-reason">
            <span class="text-caption text-error">
              <v-icon size="12" class="mr-1">mdi-information</v-icon>
              {{ member.overdueReason }}
            </span>
          </div>
          
          <div v-if="member.membership_date_paid" class="d-flex justify-space-between align-center mt-2">
            <span class="text-body-2 text-medium-emphasis">
              <v-icon size="14" class="mr-1">mdi-calendar-check</v-icon>
              Last Payment
            </span>
            <span class="text-body-2">
              {{ formatDate(member.membership_date_paid) }}
            </span>
          </div>
        </div>

        <div v-else>
          <!-- Upcoming Information -->
          <div class="d-flex justify-space-between align-center mb-2">
            <span class="text-body-2 text-medium-emphasis">
              <v-icon size="14" class="mr-1">mdi-calendar</v-icon>
              Due Date
            </span>
            <span class="text-body-2 font-weight-bold text-warning">
              {{ formatDate(member.nextDueDate || member.payment_due_date || '') }}
            </span>
          </div>
          
          <div class="d-flex justify-space-between align-center">
            <span class="text-body-2 text-medium-emphasis">
              <v-icon size="14" class="mr-1">mdi-clock</v-icon>
              Days Until Due
            </span>
            <span class="text-body-2 font-weight-bold text-warning">
              {{ member.daysUntilDue || 0 }} days
            </span>
          </div>
        </div>
      </div>

      <!-- Contact Info -->
      <div class="contact-info mb-3">
        <div v-if="member.email" class="d-flex align-center mb-1">
          <v-icon size="14" class="mr-2 text-medium-emphasis">mdi-email</v-icon>
          <span class="text-body-2 text-truncate">{{ member.email }}</span>
        </div>
        <div v-if="member.phone" class="d-flex align-center">
          <v-icon size="14" class="mr-2 text-medium-emphasis">mdi-phone</v-icon>
          <span class="text-body-2">{{ member.FormattedPhone || member.phone }}</span>
        </div>
      </div>
    </v-card-text>

    <!-- Action Buttons -->
    <v-card-actions class="pa-4 pt-0">
      <v-btn
        color="success"
        variant="elevated"
        size="small"
        :loading="loading"
        @click="showPaymentDateDialog = true"
        block
      >
        <v-icon start size="16">mdi-check-circle</v-icon>
        Mark as Paid
      </v-btn>
    </v-card-actions>

    <!-- Payment Date Selection Dialog -->
    <v-dialog v-model="showPaymentDateDialog" max-width="400">
      <v-card>
        <v-card-title class="text-h6 pa-4">
          <v-icon left color="success">mdi-calendar-check</v-icon>
          Mark Dues as Paid
        </v-card-title>
        
        <v-card-text class="pa-4">
          <div class="mb-4">
            <h4 class="text-subtitle-1 mb-2">
              {{ member.FullName || `${member.first_name} ${member.last_name}` }}
            </h4>
            <p class="text-body-2 text-medium-emphasis">
              Select the date when the dues payment was received:
            </p>
          </div>
          
          <div class="date-picker-wrapper">
            <label class="date-picker-label">Payment Date</label>
            <VueDatePicker
              v-model="selectedPaymentModel"
              :timezone="{ 
                timezone: 'Europe/Monaco',
                emitTimezone: 'UTC'
              }"
              :format="'dd/MM/yyyy (Monaco)'"
              :max-date="new Date()"
              placeholder="Select payment date"
              :enable-time-picker="false"
              auto-apply
              :clearable="false"
              :required="true"
              @update:model-value="handleDateUpdate"
            />
            <div class="text-caption text-medium-emphasis mt-1">
              Select the date when the payment was received
            </div>
          </div>
          
          <v-alert 
            v-if="selectedPaymentDate && isDateInFuture" 
            type="warning" 
            variant="tonal" 
            class="mt-2"
            density="compact"
          >
            <v-icon start>mdi-information</v-icon>
            Future dates are not allowed. Please select today or an earlier date.
          </v-alert>
        </v-card-text>
        
        <v-card-actions class="pa-4 pt-0">
          <v-spacer />
          <v-btn 
            color="grey" 
            variant="text" 
            @click="cancelPaymentDialog"
          >
            Cancel
          </v-btn>
          <v-btn 
            color="success" 
            variant="elevated"
            :disabled="!selectedPaymentDate || isDateInFuture"
            :loading="loading"
            @click="confirmMarkAsPaid"
          >
            <v-icon start>mdi-check-circle</v-icon>
            Confirm Payment
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Quick Actions -->
    <v-card-actions class="pa-4 pt-0">
      <v-btn
        variant="text"
        size="small"
        @click="$emit('view-member', member)"
      >
        <v-icon start size="16">mdi-account</v-icon>
        View Details
      </v-btn>
      
      <v-spacer />
      
      <v-btn
        variant="text"
        size="small"
        :href="`mailto:${member.email}?subject=MonacoUSA Membership Dues Reminder`"
        target="_blank"
        v-if="member.email"
      >
        <v-icon start size="16">mdi-email</v-icon>
        Email
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script setup lang="ts">
import type { Member } from '~/utils/types';

// Extended member type for dues management
interface DuesMember {
  Id: string;
  first_name: string;
  last_name: string;
  email: string;
  phone: string;
  nationality?: string;
  member_id?: string;
  FullName?: string;
  FormattedPhone?: string;
  overdueDays?: number;
  overdueReason?: string;
  daysUntilDue?: number;
  nextDueDate?: string;
  membership_date_paid?: string;
  payment_due_date?: string;
  current_year_dues_paid?: string;
}

interface Props {
  member: DuesMember;
  status: 'overdue' | 'upcoming';
  loading?: boolean;
}

interface Emits {
  (e: 'mark-paid', member: Member): void;
  (e: 'view-member', member: DuesMember): void;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
});

const emit = defineEmits<Emits>();

// Reactive state for payment date dialog
const showPaymentDateDialog = ref(false);
const selectedPaymentDate = ref('');
const selectedPaymentModel = ref<Date | null>(null);

// Initialize with today's date when dialog opens
watch(showPaymentDateDialog, (isOpen) => {
  if (isOpen) {
    const today = new Date();
    selectedPaymentModel.value = today;
    selectedPaymentDate.value = todayDate.value;
  }
});

// Date picker handler
const handleDateUpdate = (date: Date | null) => {
  if (date) {
    selectedPaymentDate.value = date.toISOString().split('T')[0];
  }
};

// Computed properties
const memberInitials = computed(() => {
  const firstName = props.member.first_name || '';
  const lastName = props.member.last_name || '';
  return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
});

const todayDate = computed(() => {
  return new Date().toISOString().split('T')[0]; // YYYY-MM-DD format
});

const isDateInFuture = computed(() => {
  if (!selectedPaymentDate.value) return false;
  
  const selectedDate = new Date(selectedPaymentDate.value);
  const today = new Date();
  today.setHours(0, 0, 0, 0); // Reset time to start of day
  selectedDate.setHours(0, 0, 0, 0); // Reset time to start of day
  
  return selectedDate > today;
});

const avatarColor = computed(() => {
  const colors = ['red', 'blue', 'green', 'orange', 'purple', 'teal', 'indigo', 'pink'];
  const idNumber = parseInt(props.member.Id) || 0;
  return colors[idNumber % colors.length];
});

const statusColor = computed(() => {
  return props.status === 'overdue' ? 'error' : 'warning';
});

const statusIcon = computed(() => {
  return props.status === 'overdue' ? 'mdi-alert-circle' : 'mdi-clock-alert';
});

const statusText = computed(() => {
  return props.status === 'overdue' ? 'Overdue' : 'Due Soon';
});

const daysDifference = computed(() => {
  if (!props.member.payment_due_date) return null;
  
  const today = new Date();
  const dueDate = new Date(props.member.payment_due_date);
  const diffTime = dueDate.getTime() - today.getTime();
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
  return diffDays;
});

// Methods
const calculateDisplayOverdueDays = (member: DuesMember): number => {
  // First try to use the pre-calculated overdue days from the API
  if (member.overdueDays !== undefined && member.overdueDays > 0) {
    return member.overdueDays;
  }
  
  // Fallback calculation if not provided
  const today = new Date();
  const DAYS_IN_YEAR = 365;
  
  // Check if payment is over 1 year old
  if (member.membership_date_paid) {
    try {
      const lastPaidDate = new Date(member.membership_date_paid);
      const oneYearFromPayment = new Date(lastPaidDate);
      oneYearFromPayment.setFullYear(oneYearFromPayment.getFullYear() + 1);
      
      if (today > oneYearFromPayment) {
        const daysSincePayment = Math.floor((today.getTime() - lastPaidDate.getTime()) / (1000 * 60 * 60 * 24));
        return Math.max(0, daysSincePayment - DAYS_IN_YEAR);
      }
    } catch {
      // Fall through to due date check
    }
  }
  
  // Check if past due date
  if (member.payment_due_date) {
    try {
      const dueDate = new Date(member.payment_due_date);
      if (today > dueDate) {
        return Math.floor((today.getTime() - dueDate.getTime()) / (1000 * 60 * 60 * 24));
      }
    } catch {
      // Invalid date
    }
  }
  
  return 0;
};

const formatDate = (dateString: string): string => {
  if (!dateString) return '';
  
  try {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  } catch {
    return dateString;
  }
};

const cancelPaymentDialog = () => {
  showPaymentDateDialog.value = false;
  selectedPaymentDate.value = '';
};

const confirmMarkAsPaid = async () => {
  if (!selectedPaymentDate.value || isDateInFuture.value) return;
  
  try {
    // Call the API with the selected payment date
    const response = await $fetch<{
      success: boolean;
      data: Member;
      message?: string;
    }>(`/api/members/${props.member.Id}/mark-dues-paid`, {
      method: 'post',
      body: {
        paymentDate: selectedPaymentDate.value
      }
    });

    if (response?.success && response.data) {
      // Emit the mark-paid event with the updated member data
      emit('mark-paid', response.data);
      
      // Close the dialog and reset
      showPaymentDateDialog.value = false;
      selectedPaymentDate.value = '';
    }
  } catch (error: any) {
    console.error('Error marking dues as paid:', error);
    // You could show an error message here if needed
  }
};
</script>

<style scoped>
.dues-action-card {
  border-radius: 12px !important;
  transition: all 0.3s ease;
  position: relative;
  height: 100%;
}

.dues-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dues-action-card--overdue {
  border-left: 4px solid rgb(var(--v-theme-error));
}

.dues-action-card--upcoming {
  border-left: 4px solid rgb(var(--v-theme-warning));
}

.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.dues-info {
  background: rgba(var(--v-theme-surface-variant), 0.1);
  border-radius: 8px;
  padding: 12px;
}

.contact-info {
  border-radius: 6px;
  padding: 8px;
  background: rgba(var(--v-theme-surface-variant), 0.05);
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

/* Date picker styling to match Vuetify */
.date-picker-wrapper {
  width: 100%;
}

.date-picker-label {
  font-size: 16px;
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.009375em;
  margin-bottom: 8px;
  display: block;
}

/* Style the Vue DatePicker to match Vuetify inputs */
:deep(.dp__input) {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 4px;
  padding: 16px 12px;
  padding-right: 48px; /* Make room for calendar icon */
  font-size: 16px;
  line-height: 1.5;
  background: rgb(var(--v-theme-surface));
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  min-height: 56px;
}

:deep(.dp__input:hover) {
  border-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}

:deep(.dp__input:focus) {
  border-color: rgb(var(--v-theme-primary));
  border-width: 2px;
  outline: none;
}

:deep(.dp__input_readonly) {
  cursor: pointer;
}

/* Style the date picker dropdown */
:deep(.dp__menu) {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: rgb(var(--v-theme-surface));
}

/* Primary color theming for the date picker */
:deep(.dp__primary_color) {
  background-color: rgb(var(--v-theme-primary));
}

:deep(.dp__primary_text) {
  color: rgb(var(--v-theme-primary));
}

:deep(.dp__active_date) {
  background-color: rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-on-primary));
}

:deep(.dp__today) {
  border: 1px solid rgb(var(--v-theme-primary));
}

/* Mobile responsive */
@media (max-width: 600px) {
  .dues-action-card {
    margin-bottom: 12px;
  }
}
</style>
