<template>
  <div>
    <!-- Header -->
    <div class="mb-6">
      <div class="d-flex justify-space-between align-center">
        <div>
          <h1 class="text-h4 font-weight-bold mb-2">Member Management</h1>
          <p class="text-body-1 text-medium-emphasis">Manage and oversee all MonacoUSA members</p>
        </div>
        <div class="d-flex gap-2">
          <v-btn
            variant="outlined"
            color="error"
            prepend-icon="mdi-download"
            @click="exportMembers"
          >
            Export
          </v-btn>
          <v-btn
            color="error"
            variant="flat"
            prepend-icon="mdi-account-plus"
            @click="showAddMemberDialog = true"
          >
            Add Member
          </v-btn>
        </div>
      </div>
    </div>

    <!-- Statistics Cards -->
    <v-row class="mb-6">
      <v-col cols="12" sm="6" md="3">
        <v-card elevation="1">
          <v-card-text>
            <div class="d-flex justify-space-between align-center">
              <div>
                <p class="text-caption text-medium-emphasis mb-1">Total Members</p>
                <p class="text-h5 font-weight-bold">{{ stats.total }}</p>
              </div>
              <v-icon size="40" color="primary">mdi-account-group</v-icon>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" sm="6" md="3">
        <v-card elevation="1">
          <v-card-text>
            <div class="d-flex justify-space-between align-center">
              <div>
                <p class="text-caption text-medium-emphasis mb-1">Active Members</p>
                <p class="text-h5 font-weight-bold text-success">{{ stats.active }}</p>
              </div>
              <v-icon size="40" color="success">mdi-check-circle</v-icon>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" sm="6" md="3">
        <v-card elevation="1">
          <v-card-text>
            <div class="d-flex justify-space-between align-center">
              <div>
                <p class="text-caption text-medium-emphasis mb-1">Pending Dues</p>
                <p class="text-h5 font-weight-bold text-warning">{{ stats.pendingDues }}</p>
              </div>
              <v-icon size="40" color="warning">mdi-clock-alert</v-icon>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" sm="6" md="3">
        <v-card elevation="1">
          <v-card-text>
            <div class="d-flex justify-space-between align-center">
              <div>
                <p class="text-caption text-medium-emphasis mb-1">New This Month</p>
                <p class="text-h5 font-weight-bold text-info">{{ stats.newThisMonth }}</p>
              </div>
              <v-icon size="40" color="info">mdi-account-plus</v-icon>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- Filters and Search -->
    <v-card class="mb-6" elevation="1">
      <v-card-text>
        <v-row align="center">
          <v-col cols="12" md="4">
            <v-text-field
              v-model="searchQuery"
              prepend-inner-icon="mdi-magnify"
              label="Search members"
              variant="outlined"
              density="compact"
              clearable
              hide-details
            />
          </v-col>
          <v-col cols="12" md="2">
            <v-select
              v-model="filterStatus"
              :items="statusOptions"
              label="Status"
              variant="outlined"
              density="compact"
              clearable
              hide-details
            />
          </v-col>
          <v-col cols="12" md="2">
            <v-select
              v-model="filterDues"
              :items="duesOptions"
              label="Dues Status"
              variant="outlined"
              density="compact"
              clearable
              hide-details
            />
          </v-col>
          <v-col cols="12" md="2">
            <v-select
              v-model="filterType"
              :items="memberTypeOptions"
              label="Member Type"
              variant="outlined"
              density="compact"
              clearable
              hide-details
            />
          </v-col>
          <v-col cols="12" md="2">
            <v-btn
              variant="outlined"
              color="error"
              block
              @click="resetFilters"
            >
              Reset
            </v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <!-- Members Table -->
    <v-card elevation="1">
      <v-data-table
        :headers="headers"
        :items="filteredMembers"
        :search="searchQuery"
        :items-per-page="10"
        class="elevation-0"
      >
        <!-- Member Name with Avatar -->
        <template v-slot:item.name="{ item }">
          <div class="d-flex align-center py-2">
            <ProfileAvatar
              :member-id="item.memberId"
              :first-name="item.firstName"
              :last-name="item.lastName"
              size="small"
              :show-badge="false"
              class="mr-3"
            />
            <div>
              <div class="font-weight-medium">{{ item.firstName }} {{ item.lastName }}</div>
              <div class="text-caption text-medium-emphasis">{{ item.memberId }}</div>
            </div>
          </div>
        </template>

        <!-- Email -->
        <template v-slot:item.email="{ item }">
          <div class="text-body-2">{{ item.email }}</div>
        </template>

        <!-- Nationality -->
        <template v-slot:item.nationality="{ item }">
          <MultipleCountryFlags
            :nationality="item.nationality"
            :show-name="false"
            size="small"
            fallback-text="-"
          />
        </template>

        <!-- Status -->
        <template v-slot:item.status="{ item }">
          <v-chip
            :color="item.status === 'Active' ? 'success' : 'grey'"
            size="small"
            variant="tonal"
          >
            {{ item.status }}
          </v-chip>
        </template>

        <!-- Dues Status -->
        <template v-slot:item.duesStatus="{ item }">
          <v-chip
            :color="getDuesColor(item.duesStatus)"
            size="small"
            variant="outlined"
          >
            {{ item.duesStatus }}
          </v-chip>
        </template>

        <!-- Member Type -->
        <template v-slot:item.memberType="{ item }">
          <v-chip
            size="small"
            variant="flat"
            :color="getMemberTypeColor(item.memberType)"
          >
            {{ item.memberType }}
          </v-chip>
        </template>

        <!-- Join Date -->
        <template v-slot:item.joinDate="{ item }">
          <span class="text-body-2">{{ formatDate(item.joinDate) }}</span>
        </template>

        <!-- Actions -->
        <template v-slot:item.actions="{ item }">
          <div class="d-flex gap-1">
            <v-btn
              icon
              variant="text"
              size="small"
              @click="viewMember(item)"
            >
              <v-icon size="small">mdi-eye</v-icon>
              <v-tooltip activator="parent" location="top">View Details</v-tooltip>
            </v-btn>
            <v-btn
              icon
              variant="text"
              size="small"
              @click="editMember(item)"
            >
              <v-icon size="small">mdi-pencil</v-icon>
              <v-tooltip activator="parent" location="top">Edit Member</v-tooltip>
            </v-btn>
            <v-btn
              icon
              variant="text"
              size="small"
              @click="sendEmail(item)"
            >
              <v-icon size="small">mdi-email</v-icon>
              <v-tooltip activator="parent" location="top">Send Email</v-tooltip>
            </v-btn>
            <v-menu>
              <template v-slot:activator="{ props }">
                <v-btn
                  icon
                  variant="text"
                  size="small"
                  v-bind="props"
                >
                  <v-icon size="small">mdi-dots-vertical</v-icon>
                </v-btn>
              </template>
              <v-list density="compact">
                <v-list-item @click="sendDuesReminder(item)">
                  <v-list-item-title>Send Dues Reminder</v-list-item-title>
                </v-list-item>
                <v-list-item @click="viewPaymentHistory(item)">
                  <v-list-item-title>Payment History</v-list-item-title>
                </v-list-item>
                <v-list-item @click="toggleStatus(item)">
                  <v-list-item-title>
                    {{ item.status === 'Active' ? 'Deactivate' : 'Activate' }}
                  </v-list-item-title>
                </v-list-item>
                <v-divider />
                <v-list-item @click="deleteMember(item)" class="text-error">
                  <v-list-item-title>Delete Member</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </div>
        </template>
      </v-data-table>
    </v-card>

    <!-- Add Member Dialog -->
    <v-dialog v-model="showAddMemberDialog" max-width="600">
      <v-card>
        <v-card-title>Add New Member</v-card-title>
        <v-card-text>
          <v-form v-model="addMemberFormValid">
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="newMember.firstName"
                  label="First Name"
                  variant="outlined"
                  :rules="[v => !!v || 'Required']"
                  required
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="newMember.lastName"
                  label="Last Name"
                  variant="outlined"
                  :rules="[v => !!v || 'Required']"
                  required
                />
              </v-col>
              <v-col cols="12">
                <v-text-field
                  v-model="newMember.email"
                  label="Email"
                  type="email"
                  variant="outlined"
                  :rules="[
                    v => !!v || 'Required',
                    v => /.+@.+/.test(v) || 'Invalid email'
                  ]"
                  required
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="newMember.phone"
                  label="Phone"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-select
                  v-model="newMember.nationality"
                  label="Nationality (can select multiple)"
                  :items="nationalityOptions"
                  variant="outlined"
                  multiple
                  chips
                  closable-chips
                  hint="Select all applicable nationalities"
                  persistent-hint
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-select
                  v-model="newMember.memberType"
                  label="Member Type"
                  :items="['Regular', 'Premium', 'Honorary']"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="newMember.joinDate"
                  label="Join Date"
                  type="date"
                  variant="outlined"
                />
              </v-col>
            </v-row>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="showAddMemberDialog = false">Cancel</v-btn>
          <v-btn
            color="error"
            variant="flat"
            :disabled="!addMemberFormValid"
            @click="addMember"
          >
            Add Member
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'board',
  middleware: 'board'
});

// State
const searchQuery = ref('');
const filterStatus = ref(null);
const filterDues = ref(null);
const filterType = ref(null);
const showAddMemberDialog = ref(false);
const addMemberFormValid = ref(true);

// Statistics
const stats = ref({
  total: 156,
  active: 142,
  pendingDues: 23,
  newThisMonth: 8
});

// Filter options
const statusOptions = ['Active', 'Inactive'];
const duesOptions = ['Paid', 'Pending', 'Overdue'];
const memberTypeOptions = ['Regular', 'Premium', 'Honorary', 'Board', 'Admin'];
// Country options with codes for multiple selection
const nationalityOptions = [
  { title: 'United States', value: 'US' },
  { title: 'Monaco', value: 'MC' },
  { title: 'France', value: 'FR' },
  { title: 'Italy', value: 'IT' },
  { title: 'United Kingdom', value: 'GB' },
  { title: 'Germany', value: 'DE' },
  { title: 'Spain', value: 'ES' },
  { title: 'Sweden', value: 'SE' },
  { title: 'Norway', value: 'NO' },
  { title: 'Denmark', value: 'DK' },
  { title: 'Canada', value: 'CA' },
  { title: 'Australia', value: 'AU' },
  { title: 'Japan', value: 'JP' },
  { title: 'China', value: 'CN' },
  { title: 'India', value: 'IN' },
  { title: 'Brazil', value: 'BR' },
  { title: 'Mexico', value: 'MX' },
  { title: 'Russia', value: 'RU' },
  { title: 'South Africa', value: 'ZA' },
  { title: 'Other', value: 'XX' }
];

// Table headers
const headers = [
  { title: 'Member', key: 'name', sortable: true },
  { title: 'Email', key: 'email', sortable: true },
  { title: 'Nationality', key: 'nationality', sortable: true },
  { title: 'Status', key: 'status', sortable: true },
  { title: 'Dues', key: 'duesStatus', sortable: true },
  { title: 'Type', key: 'memberType', sortable: true },
  { title: 'Joined', key: 'joinDate', sortable: true },
  { title: 'Actions', key: 'actions', sortable: false, align: 'center' }
];

// Real members data from API
const members = ref([]);
const loading = ref(false);

// New member form
const newMember = ref({
  firstName: '',
  lastName: '',
  email: '',
  phone: '',
  nationality: [] as string[], // Array for multiple nationalities
  memberType: 'Regular',
  joinDate: new Date().toISOString().split('T')[0]
});

// Computed
const filteredMembers = computed(() => {
  let filtered = members.value;
  
  if (filterStatus.value) {
    filtered = filtered.filter(m => m.status === filterStatus.value);
  }
  
  if (filterDues.value) {
    filtered = filtered.filter(m => m.duesStatus === filterDues.value);
  }
  
  if (filterType.value) {
    filtered = filtered.filter(m => m.memberType === filterType.value);
  }
  
  return filtered;
});

// Methods
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  });
};

const getDuesColor = (status: string) => {
  const colors: Record<string, string> = {
    'Paid': 'success',
    'Pending': 'warning',
    'Overdue': 'error'
  };
  return colors[status] || 'grey';
};

const getMemberTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    'Regular': 'info',
    'Premium': 'purple',
    'Honorary': 'orange',
    'Board': 'error',
    'Admin': 'pink'
  };
  return colors[type] || 'grey';
};

const resetFilters = () => {
  searchQuery.value = '';
  filterStatus.value = null;
  filterDues.value = null;
  filterType.value = null;
};

const exportMembers = () => {
  console.log('Exporting members');
};

const viewMember = (member: any) => {
  console.log('Viewing member:', member);
};

const editMember = (member: any) => {
  console.log('Editing member:', member);
};

const sendEmail = (member: any) => {
  console.log('Sending email to:', member.email);
};

const sendDuesReminder = (member: any) => {
  console.log('Sending dues reminder to:', member.email);
};

const viewPaymentHistory = (member: any) => {
  console.log('Viewing payment history for:', member);
};

const toggleStatus = (member: any) => {
  member.status = member.status === 'Active' ? 'Inactive' : 'Active';
};

const deleteMember = (member: any) => {
  console.log('Deleting member:', member);
};

const addMember = () => {
  // Convert nationality array to comma-separated string for storage
  const memberData = {
    ...newMember.value,
    nationality: Array.isArray(newMember.value.nationality) 
      ? newMember.value.nationality.join(',') 
      : newMember.value.nationality
  };
  console.log('Adding new member:', memberData);
  showAddMemberDialog.value = false;
  // Reset form
  newMember.value = {
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    nationality: [],
    memberType: 'Regular',
    joinDate: new Date().toISOString().split('T')[0]
  };
};

// Load real members data from API
const loadMembers = async () => {
  loading.value = true;
  try {
    // Fetch members from API
    const response = await $fetch('/api/members');
    
    // Check for both possible response structures
    const membersList = response?.data?.list || response?.data?.members || response?.list || [];
    
    if (membersList && membersList.length > 0) {
      // Transform the data to match our interface
      members.value = membersList.map((member: any) => ({
        id: member.Id || member.id,
        memberId: member.member_id || `MUSA-${String(member.Id).padStart(4, '0')}`,
        firstName: member.first_name,
        lastName: member.last_name,
        // Add name field for sorting (last name, first name format for proper sorting)
        name: `${member.last_name || ''}, ${member.first_name || ''}`.trim(),
        email: member.email,
        phone: member.phone_number || member.phone || '',
        status: member.membership_status === 'Active' ? 'Active' : 'Inactive',
        duesStatus: member.dues_status || 'Unknown',
        memberType: member.membership_type || 'Regular',
        joinDate: member.member_since || member.created_at,
        nationality: member.nationality || member.country || ''
      }));
      
      // Sort by last name, then first name by default
      members.value.sort((a, b) => {
        const aLastName = (a.lastName || '').toLowerCase();
        const bLastName = (b.lastName || '').toLowerCase();
        const aFirstName = (a.firstName || '').toLowerCase();
        const bFirstName = (b.firstName || '').toLowerCase();
        
        // First compare by last name
        const lastNameCompare = aLastName.localeCompare(bLastName);
        if (lastNameCompare !== 0) return lastNameCompare;
        
        // If last names are the same, compare by first name
        return aFirstName.localeCompare(bFirstName);
      });
      
      console.log(`[board-members] Loaded ${members.value.length} members from API, sorted by last name`);
    } else {
      console.log('[board-members] No members found in response:', response);
      members.value = [];
    }
  } catch (error) {
    console.error('Error loading members:', error);
    // Keep empty array if load fails
    members.value = []
  } finally {
    loading.value = false;
  }
};

// Load data on mount
onMounted(async () => {
  await loadMembers();
});
</script>

<style scoped>
.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}
</style>