<template>
  <v-container fluid>
    <!-- Header -->
    <v-row class="mb-4">
      <v-col>
        <h1 class="text-h4 font-weight-bold mb-4">
          <v-icon left>mdi-account-multiple</v-icon>
          Welcome Back, {{ firstName }}
        </h1>
        <p class="text-body-1 mb-4">
          Manage MonacoUSA association members and their information.
        </p>
      </v-col>
    </v-row>

    <!-- Search and Filter Controls -->
    <v-row class="mb-4">
      <v-col cols="12" md="2">
        <v-text-field
          v-model="searchTerm"
          label="Search members..."
          prepend-inner-icon="mdi-magnify"
          variant="outlined"
          clearable
          @input="debouncedSearch"
        />
      </v-col>
      
      <v-col cols="12" md="2">
        <v-select
          v-model="activeFilter"
          :items="activeFilterOptions"
          label="Member Status"
          variant="outlined"
          clearable
          prepend-inner-icon="mdi-account-check"
        />
      </v-col>
      
      
      <v-col cols="12" md="2">
        <v-select
          v-model="duesFilter"
          :items="duesFilterOptions"
          label="Dues Status"
          variant="outlined"
          clearable
          prepend-inner-icon="mdi-cash"
        />
      </v-col>
      
      <v-col cols="12" md="2">
        <v-select
          v-model="sortOption"
          :items="sortOptions"
          label="Sort By"
          variant="outlined"
          prepend-inner-icon="mdi-sort"
        />
      </v-col>
      
      <v-col cols="12" md="2">
        <v-btn
          color="primary"
          block
          size="large"
          @click="showAddDialog = true"
          :disabled="!canCreateMembers"
        >
          <v-icon start>mdi-plus</v-icon>
          Add Member
        </v-btn>
      </v-col>
    </v-row>

    <!-- Member Statistics -->
    <v-row class="mb-6">
      <v-col cols="12" md="3">
        <v-card elevation="2">
          <v-card-text>
            <div class="text-h6 text-primary font-weight-bold">{{ totalMembers }}</div>
            <div class="text-body-2 text-medium-emphasis">Total Members</div>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="3">
        <v-card elevation="2">
          <v-card-text>
            <div class="text-h6 text-success font-weight-bold">{{ activeMembers }}</div>
            <div class="text-body-2 text-medium-emphasis">Active Members</div>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="3">
        <v-card elevation="2">
          <v-card-text>
            <div class="text-h6 text-success font-weight-bold">{{ paidDuesMembers }}</div>
            <div class="text-body-2 text-medium-emphasis">Paid Dues</div>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="3">
        <v-card elevation="2">
          <v-card-text>
            <div class="text-h6 font-weight-bold">{{ uniqueNationalities }}</div>
            <div class="text-body-2 text-medium-emphasis">Countries</div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- Loading State -->
    <v-row v-if="loading" justify="center" class="my-12">
      <v-col cols="auto" class="text-center">
        <v-progress-circular indeterminate color="primary" size="64" />
        <p class="mt-4 text-h6">Loading members...</p>
      </v-col>
    </v-row>

    <!-- Error State -->
    <v-alert
      v-else-if="error"
      type="error"
      variant="tonal"
      class="mb-4"
      closable
      @click:close="error = ''"
    >
      <template #title>Failed to load members</template>
      {{ error }}
      <template #append>
        <v-btn color="error" variant="text" @click="loadMembers">
          Try Again
        </v-btn>
      </template>
    </v-alert>

    <!-- Members Grid -->
    <v-row v-else>
      <v-col
        v-for="member in filteredMembers"
        :key="member.Id"
        cols="12"
        sm="6"
        md="4"
        lg="3"
      >
        <MemberCard
          :member="member"
          @edit="editMember"
          @delete="confirmDeleteMember"
          @view="viewMember"
          :can-edit="canEditMembers"
          :can-delete="canDeleteMembers"
        />
      </v-col>
      
      <!-- No Results State -->
      <v-col v-if="filteredMembers.length === 0 && !loading && !error" cols="12" class="text-center">
        <v-card elevation="0" class="pa-8">
          <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-account-search</v-icon>
          <h3 class="text-h5 mb-2">No members found</h3>
          <p class="text-body-1 mb-4">
            {{ searchTerm
              ? 'Try adjusting your filters to find members.' 
              : 'No members have been added yet.' }}
          </p>
          <v-btn 
            v-if="canCreateMembers && !searchTerm"
            color="primary" 
            @click="showAddDialog = true"
          >
            <v-icon start>mdi-plus</v-icon>
            Add First Member
          </v-btn>
        </v-card>
      </v-col>
    </v-row>

    <!-- Add Member Dialog -->
    <AddMemberDialog
      v-model="showAddDialog"
      @member-created="handleMemberCreated"
    />

    <!-- Edit Member Dialog -->
    <EditMemberDialog
      v-model="showEditDialog"
      :member="selectedMember"
      @member-updated="handleMemberUpdated"
    />

    <!-- View Member Dialog -->
    <ViewMemberDialog
      v-model="showViewDialog"
      :member="selectedMember"
    />

    <!-- Delete Confirmation Dialog -->
    <v-dialog v-model="showDeleteDialog" max-width="400">
      <v-card>
        <v-card-title class="text-h6">
          <v-icon color="error" class="mr-2">mdi-delete-alert</v-icon>
          Confirm Delete
        </v-card-title>
        <v-card-text>
          Are you sure you want to delete <strong>{{ selectedMember?.FullName }}</strong>?
          <br><br>
          <v-alert type="warning" variant="tonal" class="mt-2">
            This action cannot be undone.
          </v-alert>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn @click="showDeleteDialog = false" variant="text">
            Cancel
          </v-btn>
          <v-btn 
            color="error" 
            @click="deleteMember"
            :loading="deleteLoading"
          >
            <v-icon start>mdi-delete</v-icon>
            Delete
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Success Snackbar -->
    <v-snackbar
      v-model="showSuccess"
      :timeout="4000"
      color="success"
      location="top"
    >
      {{ successMessage }}
      <template #actions>
        <v-btn variant="text" @click="showSuccess = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

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

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

// Auth and permissions
const { firstName, isBoard, isAdmin } = useAuth();
const canCreateMembers = computed(() => isBoard.value || isAdmin.value);
const canEditMembers = computed(() => isBoard.value || isAdmin.value);
const canDeleteMembers = computed(() => isAdmin.value);

// Reactive data
const members = ref<Member[]>([]);
const loading = ref(true);
const error = ref('');

// Search and filtering
const searchTerm = ref('');
const activeFilter = ref('');
const duesFilter = ref('');
const sortOption = ref('name-asc');

// Dialogs
const showAddDialog = ref(false);
const showEditDialog = ref(false);
const showViewDialog = ref(false);
const showDeleteDialog = ref(false);
const selectedMember = ref<Member | null>(null);
const deleteLoading = ref(false);

// Success handling
const showSuccess = ref(false);
const successMessage = ref('');

// Filter options
const activeFilterOptions = [
  { title: 'Active Members', value: 'active' },
  { title: 'Inactive Members', value: 'inactive' }
];

const membershipLevelOptions = [
  { title: 'Regular Member', value: 'regular' },
  { title: 'Board Member', value: 'board' },
  { title: 'Honorary Member', value: 'honorary' }, 
  { title: 'New Member', value: 'new' },
  { title: 'Delinquent Member', value: 'delinquent' }
];

const duesFilterOptions = [
  { title: 'Dues Paid', value: 'paid' },
  { title: 'Dues Outstanding', value: 'unpaid' }
];

// Sort options
const sortOptions = [
  { title: 'Name (A-Z)', value: 'name-asc' },
  { title: 'Name (Z-A)', value: 'name-desc' },
  { title: 'Nationality (A-Z)', value: 'nationality-asc' },
  { title: 'Nationality (Z-A)', value: 'nationality-desc' }
];

// Computed properties
const filteredMembers = computed(() => {
  let filtered = [...members.value];

  // Search filter
  if (searchTerm.value) {
    const search = searchTerm.value.toLowerCase();
    filtered = filtered.filter(member =>
      member.FullName?.toLowerCase().includes(search) ||
      member.email?.toLowerCase().includes(search) ||
      member.phone?.includes(search)
    );
  }

  // Active/Inactive filter
  if (activeFilter.value) {
    if (activeFilter.value === 'active') {
      filtered = filtered.filter(member => member.membership_status === 'Active');
    } else if (activeFilter.value === 'inactive') {
      filtered = filtered.filter(member => member.membership_status !== 'Active');
    }
  }


  // Dues filter
  if (duesFilter.value) {
    if (duesFilter.value === 'paid') {
      filtered = filtered.filter(member => member.current_year_dues_paid === 'true');
    } else if (duesFilter.value === 'unpaid') {
      filtered = filtered.filter(member => member.current_year_dues_paid !== 'true');
    }
  }

  // Sorting
  if (sortOption.value) {
    filtered.sort((a, b) => {
      switch (sortOption.value) {
        case 'name-asc':
          return (a.FullName || '').localeCompare(b.FullName || '');
        case 'name-desc':
          return (b.FullName || '').localeCompare(a.FullName || '');
        case 'nationality-asc':
          return (a.nationality || '').localeCompare(b.nationality || '');
        case 'nationality-desc':
          return (b.nationality || '').localeCompare(a.nationality || '');
        default:
          return 0;
      }
    });
  }

  return filtered;
});

const totalMembers = computed(() => members.value.length);
const activeMembers = computed(() => {
  // Temporary debug logging
  console.log('Members data for active count:');
  members.value.forEach((m, i) => {
    if (i < 5) { // Only log first 5 to avoid spam
      console.log(`${m.FullName}: status="${m.membership_status}", type=${typeof m.membership_status}`);
    }
  });
  
  const activeCount = members.value.filter(m => m.membership_status === 'Active').length;
  console.log(`Active members count: ${activeCount} out of ${members.value.length} total`);
  return activeCount;
});
const paidDuesMembers = computed(() => 
  members.value.filter(m => m.current_year_dues_paid === 'true').length
);
const uniqueNationalities = computed(() => {
  const nationalities = new Set(members.value.map(m => m.nationality).filter(Boolean));
  return nationalities.size;
});

// Methods
const loadMembers = async () => {
  loading.value = true;
  error.value = '';

  try {
    const response = await $fetch<{ success: boolean; data: { list: Member[] } }>('/api/members');
    
    if (response.success) {
      members.value = response.data.list || [];
      
      // DIAGNOSTIC: Log what we received from API
      console.log('[member-list] Received response from API:', response);
      console.log('[member-list] Members count:', members.value.length);
      if (members.value.length > 0) {
        const sampleMember = members.value[0];
        console.log('[member-list] DIAGNOSTIC - Sample member from API:', JSON.stringify(sampleMember, null, 2));
        console.log('[member-list] DIAGNOSTIC - Sample member fields:', Object.keys(sampleMember));
        console.log('[member-list] DIAGNOSTIC - Sample FullName:', `"${sampleMember.FullName}"`);
        console.log('[member-list] DIAGNOSTIC - Sample first_name:', `"${sampleMember.first_name}"`);
        console.log('[member-list] DIAGNOSTIC - Sample last_name:', `"${sampleMember.last_name}"`);
      }
    } else {
      throw new Error('Failed to load members');
    }
  } catch (err: any) {
    console.error('Error loading members:', err);
    error.value = err.message || 'Failed to load members. Please try again.';
  } finally {
    loading.value = false;
  }
};

// Simple debounce function
const debouncedSearch = (() => {
  let timeout: NodeJS.Timeout;
  return () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      // Search happens automatically via computed
    }, 300);
  };
})();

const filterMembers = () => {
  // Filtering happens automatically via computed
};

const viewMember = (member: Member) => {
  selectedMember.value = member;
  showViewDialog.value = true;
};

const editMember = (member: Member) => {
  selectedMember.value = member;
  showEditDialog.value = true;
};

const confirmDeleteMember = (member: Member) => {
  selectedMember.value = member;
  showDeleteDialog.value = true;
};

const deleteMember = async () => {
  if (!selectedMember.value) return;

  deleteLoading.value = true;
  
  try {
    const response = await $fetch<{ success: boolean; message?: string }>(`/api/members/${selectedMember.value.Id}`, {
      method: 'DELETE'
    });

    if (response.success) {
      // Remove from local array
      const index = members.value.findIndex(m => m.Id === selectedMember.value?.Id);
      if (index !== -1) {
        members.value.splice(index, 1);
      }
      
      showSuccess.value = true;
      successMessage.value = `${selectedMember.value.FullName} has been deleted successfully.`;
      showDeleteDialog.value = false;
      selectedMember.value = null;
    }
  } catch (err: any) {
    console.error('Error deleting member:', err);
    error.value = err.message || 'Failed to delete member. Please try again.';
  } finally {
    deleteLoading.value = false;
  }
};

const handleMemberCreated = (newMember: Member) => {
  members.value.unshift(newMember);
  showSuccess.value = true;
  successMessage.value = `${newMember.FullName} has been added successfully.`;
};

const handleMemberUpdated = (updatedMember: Member) => {
  const index = members.value.findIndex(m => m.Id === updatedMember.Id);
  if (index !== -1) {
    members.value[index] = updatedMember;
  }
  showSuccess.value = true;
  successMessage.value = `${updatedMember.FullName} has been updated successfully.`;
};

// Load members on mount
onMounted(() => {
  loadMembers();
});
</script>

<style scoped>
.v-card {
  border-radius: 12px !important;
  transition: all 0.3s ease;
}

.v-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.member-grid {
  min-height: 400px;
}

.text-primary {
  color: #a31515 !important;
}
</style>
