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

definePageMeta({
  title: "Admin: User Preferences & System Settings",
  middleware: ["auth"],
  requiresAuth: true,
});

const currentTab = ref('categories'); // categories, channels, frequencies, globalQuietHours, userAudit, bulkOps

// --- Admin: Notification Categories ---
const adminNotificationCategories = ref([
  { id: 'cat_promo', name: 'Promotions & Offers', description: 'Updates on new promotions, discounts, etc.', defaultSubscribed: true, isActive: true },
  { id: 'cat_alerts', name: 'Critical Alerts', description: 'Important security or account issue alerts.', defaultSubscribed: true, isActive: true },
  { id: 'cat_updates', name: 'Product Updates', description: 'New features, improvements, system maintenance.', defaultSubscribed: true, isActive: true },
  { id: 'cat_newsletter', name: 'Newsletter', description: 'Regular news and tips.', defaultSubscribed: false, isActive: true },
  { id: 'cat_surveys', name: 'Feedback Surveys', description: 'Occasional surveys to improve our service.', defaultSubscribed: false, isActive: false },
]);
const showCategoryModal = ref(false);
const editingCategory = ref(null);
const categoryForm = ref({ id: null, name: '', description: '', defaultSubscribed: false, isActive: true });

function openAddCategoryModal() {
  editingCategory.value = null;
  categoryForm.value = { id: `cat_${Date.now().toString().slice(-4)}`, name: '', description: '', defaultSubscribed: false, isActive: true };
  showCategoryModal.value = true;
}
function openEditCategoryModal(category) {
  editingCategory.value = { ...category };
  categoryForm.value = { ...category };
  showCategoryModal.value = true;
}
function saveCategory() {
  if (editingCategory.value && editingCategory.value.id) {
    const index = adminNotificationCategories.value.findIndex(c => c.id === editingCategory.value.id);
    if (index !== -1) {
      adminNotificationCategories.value[index] = { ...categoryForm.value };
    }
  } else {
    adminNotificationCategories.value.push({ ...categoryForm.value, id: categoryForm.value.id || `cat_${Date.now().toString().slice(-4)}` });
  }
  showCategoryModal.value = false;
}
function toggleCategoryStatus(category) {
  category.isActive = !category.isActive;
}

// --- Admin: Channels ---
const adminChannels = ref([
  { id: 'email', name: 'Email', isEnabled: true, defaultFrequencyCap: 'No Limit', supportedMessageTypes: ['cat_promo', 'cat_alerts', 'cat_updates', 'cat_newsletter'] },
  { id: 'sms', name: 'SMS', isEnabled: true, defaultFrequencyCap: '5 per day', supportedMessageTypes: ['cat_alerts'] },
  { id: 'push', name: 'Push Notifications', isEnabled: false, defaultFrequencyCap: '10 per day', supportedMessageTypes: ['cat_alerts', 'cat_updates'] },
]);

// --- Admin: Frequencies ---
const adminFrequencies = ref([
  { id: 'freq_immediate', label: 'Immediate', value: 'immediate', isUserSelectable: true, isDefault: true },
  { id: 'freq_hourly', label: 'Hourly Digest', value: 'hourly', isUserSelectable: true, isDefault: false },
  { id: 'freq_daily', label: 'Daily Digest', value: 'daily', isUserSelectable: true, isDefault: false },
  { id: 'freq_weekly', label: 'Weekly Digest', value: 'weekly', isUserSelectable: true, isDefault: false }, // Made user selectable for demo
  { id: 'freq_monthly', label: 'Monthly Summary', value: 'monthly', isUserSelectable: false, isDefault: false },
]);
const showFrequencyModal = ref(false);
const editingFrequency = ref(null);
const frequencyForm = ref({ id: null, label: '', value: '', isUserSelectable: true, isDefault: false });

function openAddFrequencyModal() {
  editingFrequency.value = null;
  frequencyForm.value = { id: `freq_${Date.now().toString().slice(-4)}`, label: '', value: '', isUserSelectable: true, isDefault: false };
  showFrequencyModal.value = true;
}
function openEditFrequencyModal(freq) {
  editingFrequency.value = { ...freq };
  frequencyForm.value = { ...freq };
  showFrequencyModal.value = true;
}
function saveFrequency() {
  if (editingFrequency.value && editingFrequency.value.id) {
    const index = adminFrequencies.value.findIndex(f => f.id === editingFrequency.value.id);
    if (index !== -1) {
      adminFrequencies.value[index] = { ...frequencyForm.value };
    }
  } else {
    adminFrequencies.value.push({ ...frequencyForm.value, id: frequencyForm.value.id || `freq_${Date.now().toString().slice(-4)}` });
  }
  showFrequencyModal.value = false;
}
function deleteFrequency(freqId) {
  if (confirm(`Are you sure you want to delete frequency option with ID: ${freqId}?`)) {
    adminFrequencies.value = adminFrequencies.value.filter(f => f.id !== freqId);
  }
}

// --- Admin: Global Quiet Hours ---
const adminGlobalQuietHours = ref({
  enabled: false,
  startTime: '22:00',
  endTime: '07:00',
  allowUserOverride: true,
});

// --- Admin: User Preference Audit ---
const userAuditSearchQuery = ref('');
const searchedUser = ref(null); // Will hold structure like: { id: 'user123', name: 'John Doe', preferences: { defaultChannel: 'email', subscriptions: { 'cat_promo': { subscribed: true, channel: 'email', frequency: 'weekly' } }, quietHours: { enabled: false, startTime: '22:00', endTime: '07:00'} } }
const isSearchingUser = ref(false);
const userPreferencesForm = ref(null); // For editing the searched user's prefs

// Mock user data - in a real app, this would come from an API
const mockUsers = [
  {
    id: 'user001',
    name: 'Alice Wonderland',
    email: 'alice@example.com',
    preferences: {
      defaultPreferredChannel: 'email',
      subscriptions: {
        'cat_promo': { subscribed: true, channel: 'email', frequency: 'freq_weekly' },
        'cat_alerts': { subscribed: true, channel: 'sms', frequency: 'freq_immediate' },
        'cat_updates': { subscribed: false, channel: 'email', frequency: 'freq_daily' },
        'cat_newsletter': { subscribed: true, channel: 'email', frequency: 'freq_monthly' }
      },
      quietHours: { enabled: false, startTime: '22:00', endTime: '08:00' }
    }
  },
  {
    id: 'user002',
    name: 'Bob The Builder',
    email: 'bob@example.com',
    preferences: {
      defaultPreferredChannel: 'sms',
      subscriptions: {
        'cat_promo': { subscribed: false, channel: 'email', frequency: 'freq_weekly' },
        'cat_alerts': { subscribed: true, channel: 'sms', frequency: 'freq_immediate' },
        'cat_updates': { subscribed: true, channel: 'push', frequency: 'freq_daily' }, // Assuming push is a configured channel id
        'cat_newsletter': { subscribed: false, channel: 'email', frequency: 'freq_monthly' }
      },
      quietHours: { enabled: true, startTime: '23:00', endTime: '07:30' }
    }
  }
];

function handleUserSearch() {
  if (!userAuditSearchQuery.value.trim()) {
    searchedUser.value = null;
    userPreferencesForm.value = null;
    return;
  }
  isSearchingUser.value = true;
  setTimeout(() => { // Simulate API call
    const found = mockUsers.find(u => u.id.includes(userAuditSearchQuery.value.trim()) || u.name.toLowerCase().includes(userAuditSearchQuery.value.trim().toLowerCase()) || u.email.toLowerCase().includes(userAuditSearchQuery.value.trim().toLowerCase()));
    if (found) {
      searchedUser.value = JSON.parse(JSON.stringify(found)); // Deep copy
      // Initialize form data by ensuring all admin-defined categories are present
      const prefsCopy = JSON.parse(JSON.stringify(found.preferences));
      adminNotificationCategories.value.forEach(adminCat => {
        if (!prefsCopy.subscriptions[adminCat.id]) {
          prefsCopy.subscriptions[adminCat.id] = { subscribed: false, channel: found.preferences.defaultPreferredChannel, frequency: adminFrequencies.value.find(f=>f.isDefault)?.id || adminFrequencies.value[0]?.id };
        }
      });
      userPreferencesForm.value = prefsCopy;
    } else {
      searchedUser.value = null;
      userPreferencesForm.value = null;
      alert('User not found.');
    }
    isSearchingUser.value = false;
  }, 1000);
}

function saveUserPreferences() {
  if (!searchedUser.value || !userPreferencesForm.value) return;
  // In a real app, send userPreferencesForm.value to the backend to save.
  // For this mock, update the mockUsers array or searchedUser directly.
  const userIndex = mockUsers.findIndex(u => u.id === searchedUser.value.id);
  if (userIndex !== -1) {
    mockUsers[userIndex].preferences = JSON.parse(JSON.stringify(userPreferencesForm.value));
  }
  searchedUser.value.preferences = JSON.parse(JSON.stringify(userPreferencesForm.value)); // Update current view
  alert(`Preferences for ${searchedUser.value.name} saved (mock).`);
}

function cancelUserEdit() {
  if (searchedUser.value) {
    // Re-initialize form from original searchedUser data if needed, or just clear
     const prefsCopy = JSON.parse(JSON.stringify(searchedUser.value.preferences));
      adminNotificationCategories.value.forEach(adminCat => {
        if (!prefsCopy.subscriptions[adminCat.id]) {
          prefsCopy.subscriptions[adminCat.id] = { subscribed: false, channel: searchedUser.value.preferences.defaultPreferredChannel, frequency: adminFrequencies.value.find(f=>f.isDefault)?.id || adminFrequencies.value[0]?.id };
        }
      });
    userPreferencesForm.value = prefsCopy;
  } else {
    userPreferencesForm.value = null;
  }
}


// --- Admin: Bulk Operations ---
const handleAdminImport = () => {
  alert('Admin bulk import initiated (not implemented).');
};
const handleAdminExport = () => {
  alert('Admin bulk export initiated (not implemented).');
};

const tabs = [
  { key: 'categories', label: 'Notification Categories' },
  { key: 'channels', label: 'Channels & Governance' },
  { key: 'frequencies', label: 'Frequency Options' },
  { key: 'globalQuietHours', label: 'Global Quiet Hours' },
  { key: 'userAudit', label: 'User Preference Audit' },
  { key: 'bulkOps', label: 'Bulk Operations' },
];

const getChannelName = (channelId) => {
    const channel = adminChannels.value.find(c => c.id === channelId);
    return channel ? channel.name : channelId;
};

const getFrequencyLabel = (frequencyId) => {
    const freq = adminFrequencies.value.find(f => f.id === frequencyId);
    return freq ? freq.label : frequencyId;
};

</script>

<template>
  <div>
    <LayoutsBreadcrumb />
    <rs-card>
      <template #header>
        <div class="text-xl font-semibold text-gray-900">
          Admin: User Preferences & System Settings
        </div>
      </template>
      <template #body>
        <div class="p-4 md:p-6">
          <!-- Tab Navigation -->
          <div class="mb-6 border-b border-gray-200">
            <nav class="-mb-px flex space-x-4 overflow-x-auto" aria-label="Tabs">
              <button
                v-for="tab in tabs"
                :key="tab.key"
                @click="currentTab = tab.key; searchedUser = null; userPreferencesForm = null; userAuditSearchQuery = ''"
                :class="[
                  currentTab === tab.key
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
                  'whitespace-nowrap py-4 px-3 border-b-2 font-medium text-sm transition-colors duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50'
                ]"
                :aria-current="currentTab === tab.key ? 'page' : undefined"
              >
                {{ tab.label }}
              </button>
            </nav>
          </div>

          <!-- Tab Content -->
          <div :key="currentTab">
            <!-- == Section: Notification Categories (Admin CRUD) == -->
            <section v-if="currentTab === 'categories'" aria-labelledby="categories-heading">
              <div class="flex justify-between items-center mb-4">
                <div>
                  <h2 id="categories-heading" class="text-lg font-semibold text-gray-800">Manage Notification Categories</h2>
                  <p class="text-sm text-gray-600">Define categories users can subscribe to. Inactive categories are hidden from users.</p>
                </div>
                <button @click="openAddCategoryModal" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                  Add New Category
                </button>
              </div>
              <div class="overflow-x-auto shadow border-b border-gray-200 sm:rounded-lg">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead class="bg-gray-50">
                    <tr>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default Subscribed</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr v-for="category in adminNotificationCategories" :key="category.id">
                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ category.name }}</td>
                      <td class="px-6 py-4 whitespace-normal text-sm text-gray-500 max-w-xs truncate" :title="category.description">{{ category.description }}</td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ category.defaultSubscribed ? 'Yes' : 'No' }}</td>
                      <td class="px-6 py-4 whitespace-nowrap">
                        <span :class="['px-2 inline-flex text-xs leading-5 font-semibold rounded-full', category.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800']">
                          {{ category.isActive ? 'Active' : 'Inactive' }}
                        </span>
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                        <button @click="openEditCategoryModal(category)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
                        <button @click="toggleCategoryStatus(category)" :class="[category.isActive ? 'text-red-600 hover:text-red-900' : 'text-green-600 hover:text-green-900']">
                          {{ category.isActive ? 'Deactivate' : 'Activate' }}
                        </button>
                      </td>
                    </tr>
                    <tr v-if="adminNotificationCategories.length === 0">
                        <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">No categories defined yet.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            <!-- == Section: Channels & Governance (Admin) == -->
            <section v-if="currentTab === 'channels'" aria-labelledby="channels-heading">
              <h2 id="channels-heading" class="text-lg font-semibold text-gray-800 mb-3">Manage Channels & Governance</h2>
              <p class="text-sm text-gray-600 mb-4">Enable/disable communication channels and set global rules.</p>
              <div class="space-y-6">
                <div v-for="channel in adminChannels" :key="channel.id" class="p-4 border rounded-lg shadow-sm">
                  <div class="flex items-center justify-between">
                    <h3 class="text-md font-medium text-gray-900">{{ channel.name }}</h3>
                    <label :for="`channel-enabled-${channel.id}`" class="flex items-center cursor-pointer">
                      <span class="mr-2 text-sm text-gray-700">{{ channel.isEnabled ? 'Enabled' : 'Disabled' }}</span>
                      <div class="relative">
                        <input type="checkbox" :id="`channel-enabled-${channel.id}`" class="sr-only peer" v-model="channel.isEnabled">
                        <div class="w-10 h-4 bg-gray-300 rounded-full shadow-inner peer-checked:bg-blue-500 transition-colors"></div>
                        <div class="absolute left-0 top-[-4px] w-6 h-6 bg-white border-2 border-gray-300 rounded-full shadow transform peer-checked:translate-x-full peer-checked:border-blue-500 transition-transform"></div>
                      </div>
                    </label>
                  </div>
                  <div v-if="channel.isEnabled" class="mt-4 pt-4 border-t">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label :for="`channel-cap-${channel.id}`" class="block text-sm font-medium text-gray-700">Default Frequency Cap</label>
                            <input type="text" :id="`channel-cap-${channel.id}`" v-model="channel.defaultFrequencyCap" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="e.g., 5 per day">
                        </div>
                        <div>
                            <label :for="`channel-types-${channel.id}`" class="block text-sm font-medium text-gray-700">Supported Message Types (Category IDs)</label>
                            <input type="text" :id="`channel-types-${channel.id}`" :value="channel.supportedMessageTypes.join(', ')" @change="channel.supportedMessageTypes = $event.target.value.split(',').map(s => s.trim()).filter(Boolean)" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="e.g., cat_alerts, cat_updates">
                            <p class="text-xs text-gray-500 mt-1">Comma-separated category IDs that can use this channel.</p>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- == Section: Frequency Options (Admin) == -->
            <section v-if="currentTab === 'frequencies'" aria-labelledby="frequencies-heading">
                 <div class="flex justify-between items-center mb-4">
                    <div>
                        <h2 id="frequencies-heading" class="text-lg font-semibold text-gray-800">Manage Frequency Options</h2>
                        <p class="text-sm text-gray-600">Define frequency choices available to users or for system defaults.</p>
                    </div>
                    <button @click="openAddFrequencyModal" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Add New Frequency
                    </button>
                </div>
                <div class="overflow-x-auto shadow border-b border-gray-200 sm:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Label</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value (System ID)</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User Selectable</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default for New Users</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr v-for="freq in adminFrequencies" :key="freq.id">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ freq.label }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ freq.value }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ freq.isUserSelectable ? 'Yes' : 'No' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ freq.isDefault ? 'Yes' : 'No' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                                    <button @click="openEditFrequencyModal(freq)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
                                    <button @click="deleteFrequency(freq.id)" class="text-red-600 hover:text-red-900">Delete</button>
                                </td>
                            </tr>
                            <tr v-if="adminFrequencies.length === 0">
                                <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">No frequency options defined yet.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- == Section: Global Quiet Hours (Admin) == -->
            <section v-if="currentTab === 'globalQuietHours'" aria-labelledby="globalqh-heading">
              <h2 id="globalqh-heading" class="text-lg font-semibold text-gray-800 mb-3">Configure Global Quiet Hours</h2>
              <p class="text-sm text-gray-600 mb-4">Set system-wide default "Do Not Disturb" periods. These can potentially be overridden by users if allowed.</p>
              <div class="space-y-4 max-w-lg p-4 border rounded-lg shadow-sm">
                <div class="flex items-center">
                  <input id="admin-qh-enabled" type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500" v-model="adminGlobalQuietHours.enabled">
                  <label for="admin-qh-enabled" class="ml-3 block text-sm font-medium text-gray-700 cursor-pointer">Enable Global Quiet Hours</label>
                </div>
                <div v-if="adminGlobalQuietHours.enabled" class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-3 mt-3">
                  <div>
                    <label for="admin-qh-start" class="block text-sm font-medium text-gray-700 mb-1">Start Time:</label>
                    <input type="time" id="admin-qh-start" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" v-model="adminGlobalQuietHours.startTime">
                  </div>
                  <div>
                    <label for="admin-qh-end" class="block text-sm font-medium text-gray-700 mb-1">End Time:</label>
                    <input type="time" id="admin-qh-end" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" v-model="adminGlobalQuietHours.endTime">
                  </div>
                  <div class="sm:col-span-2 flex items-center">
                    <input id="admin-qh-override" type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500" v-model="adminGlobalQuietHours.allowUserOverride">
                    <label for="admin-qh-override" class="ml-3 block text-sm font-medium text-gray-700 cursor-pointer">Allow users to override global quiet hours</label>
                  </div>
                </div>
                 <button @click="alert('Save Global Quiet Hours clicked (mock)')" class="mt-4 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Save Global Quiet Hours</button>
              </div>
            </section>

            <!-- == Section: User Preference Audit (Admin) == -->
            <section v-if="currentTab === 'userAudit'" aria-labelledby="useraudit-heading">
                <h2 id="useraudit-heading" class="text-lg font-semibold text-gray-800 mb-3">User Preference Audit & Management</h2>
                <p class="text-sm text-gray-600 mb-4">Search for a user by ID, name, or email to view or modify their notification preferences.</p>
                
                <div class="flex space-x-3 mb-6 max-w-xl">
                    <input type="text" v-model="userAuditSearchQuery" placeholder="Enter User ID, Name, or Email" class="form-input flex-grow block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <button @click="handleUserSearch" :disabled="isSearchingUser || !userAuditSearchQuery.trim()" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50">
                        {{ isSearchingUser ? 'Searching...' : 'Search User' }}
                    </button>
                </div>

                <div v-if="isSearchingUser" class="text-center py-6">
                    <p class="text-gray-500">Loading user data...</p> <!-- Add a spinner later -->
                </div>
                
                <div v-if="!isSearchingUser && searchedUser && userPreferencesForm" class="mt-6 p-6 border rounded-lg shadow-lg">
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Editing Preferences for: <span class="font-normal">{{ searchedUser.name }} ({{ searchedUser.id }})</span></h3>
                    <p class="text-sm text-gray-500 mb-6">Email: {{ searchedUser.email }}</p>

                    <form @submit.prevent="saveUserPreferences">
                        <div class="space-y-8">
                             <!-- Default Preferred Channel for User -->
                            <div>
                                <label for="userDefaultChannel" class="block text-sm font-medium text-gray-700 mb-1">User's Default Notification Channel</label>
                                <select id="userDefaultChannel" v-model="userPreferencesForm.defaultPreferredChannel" class="form-select mt-1 block w-full md:w-1/2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    <option v-for="channel in adminChannels.filter(c => c.isEnabled)" :key="channel.id" :value="channel.id">{{ channel.name }}</option>
                                    <option value="none">None (Mute All)</option>
                                </select>
                            </div>

                            <!-- User Subscriptions to Categories -->
                            <div>
                                <h4 class="text-md font-semibold text-gray-700 mb-3">Category Subscriptions & Overrides</h4>
                                <div class="space-y-6">
                                    <div v-for="adminCat in adminNotificationCategories.filter(ac => ac.isActive)" :key="adminCat.id" class="p-4 border rounded-md bg-gray-50">
                                        <div class="flex items-start justify-between mb-3">
                                            <div>
                                                <h5 class="font-medium text-gray-800">{{ adminCat.name }}</h5>
                                                <p class="text-xs text-gray-500">{{ adminCat.description }}</p>
                                            </div>
                                            <input :id="`user-cat-sub-${adminCat.id}`" type="checkbox" v-model="userPreferencesForm.subscriptions[adminCat.id].subscribed" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500 cursor-pointer">
                                        </div>
                                        
                                        <div v-if="userPreferencesForm.subscriptions[adminCat.id].subscribed" class="mt-3 pt-3 border-t grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
                                            <div>
                                                <label :for="`user-cat-channel-${adminCat.id}`" class="block text-xs font-medium text-gray-600 mb-0.5">Channel Override:</label>
                                                <select :id="`user-cat-channel-${adminCat.id}`" v-model="userPreferencesForm.subscriptions[adminCat.id].channel" class="form-select mt-0.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-xs">
                                                    <option v-for="channel in adminChannels.filter(c => c.isEnabled && c.supportedMessageTypes.includes(adminCat.id))" :key="channel.id" :value="channel.id">{{ channel.name }}</option>
                                                    <option :value="userPreferencesForm.defaultPreferredChannel">(User Default: {{ getChannelName(userPreferencesForm.defaultPreferredChannel) }})</option>
                                                    <option value="none">None (Mute This Category)</option>
                                                </select>
                                            </div>
                                            <div>
                                                <label :for="`user-cat-freq-${adminCat.id}`" class="block text-xs font-medium text-gray-600 mb-0.5">Frequency Override:</label>
                                                <select :id="`user-cat-freq-${adminCat.id}`" v-model="userPreferencesForm.subscriptions[adminCat.id].frequency" class="form-select mt-0.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-xs">
                                                    <option v-for="freq in adminFrequencies.filter(f => f.isUserSelectable)" :key="freq.id" :value="freq.id">{{ freq.label }}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- User Quiet Hours -->
                            <div>
                                <h4 class="text-md font-semibold text-gray-700 mb-3">User Quiet Hours Override</h4>
                                <div class="space-y-3 p-4 border rounded-md bg-gray-50 max-w-md">
                                    <div class="flex items-center">
                                        <input id="user-qh-enabled" type="checkbox" v-model="userPreferencesForm.quietHours.enabled" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
                                        <label for="user-qh-enabled" class="ml-3 block text-sm font-medium text-gray-700 cursor-pointer">Enable Quiet Hours for this User</label>
                                    </div>
                                    <div v-if="userPreferencesForm.quietHours.enabled" class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 mt-2">
                                        <div>
                                            <label for="user-qh-start" class="block text-xs font-medium text-gray-600 mb-0.5">Start Time:</label>
                                            <input type="time" id="user-qh-start" v-model="userPreferencesForm.quietHours.startTime" class="form-input mt-0.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                        </div>
                                        <div>
                                            <label for="user-qh-end" class="block text-xs font-medium text-gray-600 mb-0.5">End Time:</label>
                                            <input type="time" id="user-qh-end" v-model="userPreferencesForm.quietHours.endTime" class="form-input mt-0.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Save/Cancel User Prefs -->
                            <div class="mt-8 pt-5 border-t">
                                <div class="flex justify-end space-x-3">
                                    <button type="button" @click="cancelUserEdit" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                        Reset / Cancel Edit
                                    </button>
                                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                        Save Changes for {{ searchedUser.name }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div v-if="!isSearchingUser && !searchedUser && userAuditSearchQuery" class="text-center py-6">
                     <p class="text-gray-500">No user found matching "{{ userAuditSearchQuery }}". Try a different search term.</p>
                </div>
                 <div v-if="!isSearchingUser && !searchedUser && !userAuditSearchQuery" class="text-center py-6">
                     <p class="text-gray-500">Enter a user ID, name, or email to search.</p>
                </div>
            </section>

            
            <section v-if="currentTab === 'bulkOps'" aria-labelledby="bulkops-heading">
              <h2 id="bulkops-heading" class="text-lg font-semibold text-gray-800 mb-3">Bulk User Preference Operations</h2>
              <p class="text-sm text-gray-600 mb-4">Import or export user preference data for backup, migration, or system-wide updates.</p>
              <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3 mt-4">
                <button @click="handleAdminImport" class="w-full sm:w-auto px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition ease-in-out duration-150">
                  Import User Preferences (Bulk)
                </button>
                <button @click="handleAdminExport" class="w-full sm:w-auto px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition ease-in-out duration-150">
                  Export User Preferences (Bulk)
                </button>
              </div>
            </section>
            
          </div>
        </div>
      </template>
    </rs-card>

    <!-- Modal for Add/Edit Notification Category -->
    <div v-if="showCategoryModal" class="fixed inset-0 z-50 overflow-y-auto bg-gray-600 bg-opacity-75 flex items-center justify-center p-4">
      <div class="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-auto my-8 max-h-[90vh] overflow-y-auto">
        <form @submit.prevent="saveCategory" class="p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
            {{ editingCategory ? 'Edit' : 'Add New' }} Notification Category
          </h3>
          <div class="space-y-4">
            <div>
              <label for="catName" class="block text-sm font-medium text-gray-700">Category Name</label>
              <input type="text" v-model="categoryForm.name" id="catName" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>
            <div>
              <label for="catDesc" class="block text-sm font-medium text-gray-700">Description</label>
              <textarea v-model="categoryForm.description" id="catDesc" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
            </div>
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input id="catDefaultSubscribed" v-model="categoryForm.defaultSubscribed" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
              </div>
              <div class="ml-3 text-sm">
                <label for="catDefaultSubscribed" class="font-medium text-gray-700">Default Subscribed</label>
                <p class="text-gray-500">Users will be subscribed to this category by default.</p>
              </div>
            </div>
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input id="catIsActive" v-model="categoryForm.isActive" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
              </div>
              <div class="ml-3 text-sm">
                <label for="catIsActive" class="font-medium text-gray-700">Active</label>
                <p class="text-gray-500">Inactive categories are not visible or configurable by users.</p>
              </div>
            </div>
          </div>
          <div class="mt-6 flex justify-end space-x-3 sticky bottom-0 bg-white py-4 px-6 -mx-6 -mb-6 border-t border-gray-200 rounded-b-lg">
            <button type="button" @click="showCategoryModal = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Cancel
            </button>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
              {{ editingCategory ? 'Save Changes' : 'Create Category' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Modal for Add/Edit Frequency Option -->
    <div v-if="showFrequencyModal" class="fixed inset-0 z-50 overflow-y-auto bg-gray-600 bg-opacity-75 flex items-center justify-center p-4">
      <div class="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-auto my-8 max-h-[90vh] overflow-y-auto">
        <form @submit.prevent="saveFrequency" class="p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
            {{ editingFrequency ? 'Edit' : 'Add New' }} Frequency Option
          </h3>
          <div class="space-y-4">
            <div>
              <label for="freqLabel" class="block text-sm font-medium text-gray-700">Label (User-facing)</label>
              <input type="text" v-model="frequencyForm.label" id="freqLabel" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>
            <div>
              <label for="freqValue" class="block text-sm font-medium text-gray-700">Value (System ID)</label>
              <input type="text" v-model="frequencyForm.value" id="freqValue" required :disabled="editingFrequency !== null" placeholder="e.g., immediate, daily_digest" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm disabled:bg-gray-100">
              <p v-if="editingFrequency" class="text-xs text-gray-500 mt-1">System value cannot be changed after creation.</p>
            </div>
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input id="freqUserSelectable" v-model="frequencyForm.isUserSelectable" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
              </div>
              <div class="ml-3 text-sm">
                <label for="freqUserSelectable" class="font-medium text-gray-700">User Selectable</label>
                <p class="text-gray-500">Can users choose this frequency option for their preferences?</p>
              </div>
            </div>
             <div class="flex items-start">
              <div class="flex items-center h-5">
                <input id="freqIsDefault" v-model="frequencyForm.isDefault" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
              </div>
              <div class="ml-3 text-sm">
                <label for="freqIsDefault" class="font-medium text-gray-700">Default for New Users</label>
                <p class="text-gray-500">Is this a default frequency for new users or new subscriptions?</p>
              </div>
            </div>
          </div>
          <div class="mt-6 flex justify-end space-x-3 sticky bottom-0 bg-white py-4 px-6 -mx-6 -mb-6 border-t border-gray-200 rounded-b-lg">
            <button type="button" @click="showFrequencyModal = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Cancel
            </button>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
              {{ editingFrequency ? 'Save Changes' : 'Create Frequency' }}
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>
</template>

<style scoped>
/* Using Tailwind utility classes. */
/* Ensure @tailwindcss/forms plugin is installed for nice form styling. */
.form-checkbox:focus, .form-input:focus, .form-select:focus, .form-textarea:focus {
    /* You might want to ensure focus rings are consistent if not using the plugin */
    /* Example: ring-2 ring-offset-2 ring-indigo-500 */
}
</style> 