<template>
  <v-container>
    <!-- Dues Payment Banner -->
    <DuesPaymentBanner />
    
    <!-- Welcome Header -->
    <v-row class="mb-6">
      <v-col>
        <h1 class="text-h3 font-weight-bold" style="color: #a31515;">
          Welcome Back, {{ firstName }}!
        </h1>
        <p class="text-h6 text-medium-emphasis">
          MonacoUSA Member Portal
        </p>
      </v-col>
    </v-row>

    <!-- Quick Actions -->
    <v-row class="mb-6">
      <v-col cols="12" md="4">
        <v-card class="pa-4 text-center" elevation="2" hover>
          <v-icon size="48" color="primary" class="mb-2">mdi-account</v-icon>
          <h3 class="mb-2">My Profile</h3>
          <p class="text-body-2 mb-4">View and update your information</p>
          <v-btn 
            color="primary" 
            variant="outlined"
            style="border-color: #a31515; color: #a31515;"
            @click="navigateToProfile"
          >
            View Profile
          </v-btn>
        </v-card>
      </v-col>
      
      <v-col cols="12" md="4">
        <v-card class="pa-4 text-center" elevation="2" hover>
          <v-icon size="48" color="primary" class="mb-2">mdi-calendar</v-icon>
          <h3 class="mb-2">Events</h3>
          <p class="text-body-2 mb-4">View upcoming association events</p>
          <v-btn 
            color="primary" 
            variant="outlined"
            style="border-color: #a31515; color: #a31515;"
            @click="navigateToEvents"
          >
            View Events
          </v-btn>
        </v-card>
      </v-col>
      
      <v-col cols="12" md="4">
        <v-card class="pa-4 text-center" elevation="2" hover>
          <v-icon size="48" color="primary" class="mb-2">mdi-file-document</v-icon>
          <h3 class="mb-2">Resources</h3>
          <p class="text-body-2 mb-4">Access member resources</p>
          <v-btn 
            color="primary" 
            variant="outlined"
            style="border-color: #a31515; color: #a31515;"
            @click="navigateToResources"
          >
            View Resources
          </v-btn>
        </v-card>
      </v-col>
    </v-row>

    <!-- Recent Activity Section -->
    <v-row class="mb-6">
      <v-col cols="12">
        <v-card elevation="2">
          <v-card-title class="pa-4" style="background-color: #f5f5f5;">
            <v-icon class="mr-2" color="primary">mdi-clock-outline</v-icon>
            Recent Activity
          </v-card-title>
          <v-card-text class="pa-4">
            <v-list>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Welcome to MonacoUSA Portal!</v-list-item-title>
                  <v-list-item-subtitle>
                    You've successfully logged in to your member dashboard.
                  </v-list-item-subtitle>
                </v-list-item-content>
                <v-list-item-action>
                  <v-chip color="success" size="small">New</v-chip>
                </v-list-item-action>
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- Member Information -->
    <v-row>
      <v-col cols="12" md="6">
        <v-card elevation="2">
          <v-card-title class="pa-4" style="background-color: #f5f5f5;">
            <v-icon class="mr-2" color="primary">mdi-information-outline</v-icon>
            Member Information
          </v-card-title>
          <v-card-text class="pa-4">
            <v-skeleton-loader v-if="pending" type="list-item-three-line"></v-skeleton-loader>
            <div v-else-if="error" class="text-error text-center pa-4">
              <v-icon size="48" class="mb-2">mdi-alert-circle</v-icon>
              <div>Failed to load member information</div>
            </div>
            <v-list v-else>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Member ID</v-list-item-title>
                  <v-list-item-subtitle>
                    <v-chip color="primary" size="small" variant="outlined">
                      {{ memberInfo?.memberId || 'Not assigned' }}
                    </v-chip>
                  </v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Name</v-list-item-title>
                  <v-list-item-subtitle>{{ memberInfo?.fullName || 'Not provided' }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Email</v-list-item-title>
                  <v-list-item-subtitle>{{ memberInfo?.email || 'Not provided' }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Phone</v-list-item-title>
                  <v-list-item-subtitle>{{ memberInfo?.phone || 'Not provided' }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Nationality</v-list-item-title>
                  <v-list-item-subtitle>{{ memberInfo?.nationality || 'Not provided' }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Member Since</v-list-item-title>
                  <v-list-item-subtitle>{{ memberInfo?.memberSince || 'Not provided' }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Dues Status</v-list-item-title>
                  <v-list-item-subtitle>
                    <v-chip 
                      :color="memberInfo?.duesStatus === 'Paid' ? 'success' : 'warning'" 
                      size="small"
                    >
                      {{ memberInfo?.duesStatus || 'Unknown' }}
                    </v-chip>
                  </v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Last Payment</v-list-item-title>
                  <v-list-item-subtitle>{{ memberInfo?.lastPayment || 'No payment recorded' }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Member Type</v-list-item-title>
                  <v-list-item-subtitle>
                    <v-chip color="primary" size="small">{{ userTier.toUpperCase() }}</v-chip>
                  </v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-col>
      
      <v-col cols="12" md="6">
        <v-card elevation="2">
          <v-card-title class="pa-4" style="background-color: #f5f5f5;">
            <v-icon class="mr-2" color="primary">mdi-help-circle-outline</v-icon>
            Need Help?
          </v-card-title>
          <v-card-text class="pa-4">
            <p class="mb-4">
              If you need assistance or have questions about your membership, 
              please don't hesitate to contact our support team.
            </p>
            <v-btn 
              color="primary" 
              variant="outlined"
              style="border-color: #a31515; color: #a31515;"
              @click="contactSupport"
            >
              <v-icon start>mdi-email</v-icon>
              Contact Support
            </v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

definePageMeta({
  layout: 'dashboard',
  middleware: 'auth'
});

const { firstName, user, userTier } = useAuth();

// Fetch complete member data
const { data: memberData, pending, error } = await useFetch<{ success: boolean; member: Member }>('/api/auth/session', {
  server: false
});

const member = computed(() => memberData.value?.member);

// Format member information for display
const memberInfo = computed(() => {
  if (!member.value) return null;
  
  return {
    memberId: member.value.member_id || 'Not assigned',
    fullName: member.value.FullName || `${member.value.first_name || ''} ${member.value.last_name || ''}`.trim(),
    email: member.value.email || 'Not provided',
    phone: member.value.FormattedPhone || member.value.phone || 'Not provided',
    nationality: member.value.nationality || 'Not provided',
    memberSince: member.value.member_since ? new Date(member.value.member_since).toLocaleDateString() : 'Not provided',
    duesStatus: member.value.current_year_dues_paid === 'true' ? 'Paid' : 'Outstanding',
    membershipStatus: member.value.membership_status || 'Active',
    lastPayment: member.value.membership_date_paid ? new Date(member.value.membership_date_paid).toLocaleDateString() : 'No payment recorded',
    dueDate: member.value.payment_due_date ? new Date(member.value.payment_due_date).toLocaleDateString() : 'N/A'
  };
});

// Navigation methods (placeholder implementations)
const navigateToProfile = () => {
  navigateTo('/dashboard/profile');
};

const navigateToEvents = () => {
  // TODO: Implement events navigation
  console.log('Navigate to events');
};

const navigateToResources = () => {
  // TODO: Implement resources navigation
  console.log('Navigate to resources');
};

const contactSupport = () => {
  const subject = encodeURIComponent('MonacoUSA Portal Support Request');
  const body = encodeURIComponent(`Hello,

I need assistance with:

[Please describe your issue]

Member ID: ${memberInfo.value?.memberId || 'Not provided'}
Name: ${memberInfo.value?.fullName || 'Not provided'}
Email: ${memberInfo.value?.email || 'Not provided'}

Thank you!`);
  
  window.open(`mailto:support@monacousa.org?subject=${subject}&body=${body}`, '_self');
};
</script>

<style scoped>
.v-card {
  border-radius: 12px !important;
}

.v-card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease-in-out;
}

.v-btn {
  text-transform: none !important;
}

.v-icon {
  color: #a31515 !important;
}

h3 {
  color: #333;
  font-weight: 600;
}

.text-body-2 {
  color: #666;
}
</style>
