<script lang="ts">
  import { onMount } from 'svelte';
  import { createEventDispatcher } from 'svelte';
  import dayjs from 'dayjs';
  import * as XLSX from 'xlsx';
  
  import Pagination from '../components/Pagination.svelte';
  import PriceForm from './PriceForm.svelte';
  
  let data: any[] = [];
  let loading = false;
  let error: string | null = null;
  
  // Pagination
  let currentPage = 1;
  let totalItems = 0;
  let pageSize = 10;
  
  // Sorting
  let sortField = 'effective_date';
  let sortDirection = 'desc';
  
  // Filtering
  let filters = {
    provider: '',
    region: '',
    node_type: '',
    is_valid: 'true'
  };
  
  // 筛选选项
  let providerOptions: string[] = [];
  let regionOptions: { code: string; display: string }[] = [];
  let nodeTypeOptions: string[] = [];
  
  // 存储所有数据用于筛选
  let allPriceData: any[] = [];
  
  // Form
  let showForm = false;
  let formData: any = null;
  let isEdit = false;
  
  // Delete
  let showDeletePrompt = false;
  let itemToDelete: any = null;
  
  // Batch operations
  let selectedItems: number[] = [];
  let showBatchUpdatePrompt = false;
  let batchIsValid: boolean = false;
  
  // Dispatch
  const dispatch = createEventDispatcher();
  
  onMount(async () => {
    await updateFilterOptions();
    await loadData();
  });
  
  async function loadData() {
    loading = true;
    error = null;
    
    try {
      const queryParams = new URLSearchParams();
      
      // Pagination
      queryParams.append('page', currentPage.toString());
      queryParams.append('page_size', pageSize.toString());
      
      // Sorting
      queryParams.append('sort_by', sortField);
      queryParams.append('sort_direction', sortDirection);
      
      // Filtering - 改进处理"All Status"的方式
      Object.entries(filters).forEach(([key, value]) => {
        if (key === 'is_valid') {
          // 如果选择了"All Status"（值为空字符串），确保API真正返回所有状态的记录
          if (value !== '') {
            queryParams.append(key, value);
          } else {
            // 添加特殊参数，表示要获取所有状态的数据
            queryParams.append('include_all_status', 'true');
          }
        } else if (value !== '') {
          // 其他过滤参数照常处理
          queryParams.append(key, value);
        }
      });
      
      console.log("加载数据，查询参数:", queryParams.toString());
      const response = await fetch(`/api/pricing/dedicated-node?${queryParams.toString()}`);
      
      if (!response.ok) {
        throw new Error('Failed to load data');
      }
      
      const json = await response.json();
      data = json.items || [];
      totalItems = json.total || 0;
      console.log(`加载了 ${data.length} 条数据，共 ${totalItems} 条`);
    } catch (err) {
      if (err instanceof Error) {
        error = err.message;
      } else {
        error = 'An unknown error occurred';
      }
      data = [];
      totalItems = 0;
    } finally {
      loading = false;
    }
  }
  
  // 更新筛选选项
  async function updateFilterOptions() {
    try {
      // 从API获取所有可能的选项值 - 不加is_valid参数，获取所有状态的记录
      console.log("更新筛选选项...");
      const response = await fetch('/api/pricing/dedicated-node?page=1&page_size=1000&include_all_status=true');
      
      if (!response.ok) {
        throw new Error('Failed to load filter options');
      }
      
      const json = await response.json();
      allPriceData = json.items || [];
      console.log(`获取了 ${allPriceData.length} 条记录用于筛选选项`);
      
      // 获取所有唯一的provider值
      const providers = new Set<string>();
      
      allPriceData.forEach((item: any) => {
        if (item.provider) providers.add(item.provider);
      });
      
      providerOptions = Array.from(providers).sort();
      
      // 初始化区域选项，基于当前选中的provider
      updateRegionOptions();
      // 初始化节点类型选项
      updateNodeTypeOptions();
    } catch (error) {
      console.error('Error loading filter options:', error);
    }
  }
  
  // 根据选中的provider更新region选项
  function updateRegionOptions() {
    const regions = new Map<string, string>();
    
    // 不过滤is_valid状态，显示所有地区选项
    allPriceData
      .filter((item: any) => !filters.provider || item.provider === filters.provider)
      .forEach((item: any) => {
        if (item.region) {
          const regionDisplay = `${item.region} (${item.region_name || ''})`;
          regions.set(item.region, regionDisplay);
        }
      });
    
    regionOptions = Array.from(regions.entries())
      .map(([code, display]) => ({ code, display }))
      .sort((a, b) => a.display.localeCompare(b.display)); // 按照区域名称排序
    
    console.log(`更新了区域选项，共 ${regionOptions.length} 个选项`);
  }
  
  // 更新节点类型选项
  function updateNodeTypeOptions() {
    const nodeTypes = new Set<string>();
    
    allPriceData
      .filter((item: any) => 
        (!filters.provider || item.provider === filters.provider) && 
        (!filters.region || item.region === filters.region)
      )
      .forEach((item: any) => {
        if (item.node_type) nodeTypes.add(item.node_type);
      });
    
    nodeTypeOptions = Array.from(nodeTypes).sort();
  }
  
  function handlePageChange(event: CustomEvent<{ page: number }>) {
    currentPage = event.detail.page;
    loadData();
  }
  
  function handlePageSizeChange(event: Event) {
    const target = event.target as HTMLSelectElement;
    pageSize = parseInt(target.value);
    currentPage = 1; // 重置到第一页
    loadData();
  }
  
  function handleSort(field: string) {
    if (field === sortField) {
      sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
    } else {
      sortField = field;
      sortDirection = 'asc';
    }
    currentPage = 1;
    loadData();
  }
  
  function handleFilterChange(event: Event, field: string) {
    const target = event.target as HTMLInputElement;
    filters = { ...filters, [field]: target.value };
    
    // 当provider改变时，更新region选项
    if (field === 'provider') {
      // 清空region选择
      filters = { ...filters, region: '' };
      updateRegionOptions();
      updateNodeTypeOptions();
    }
    
    // 当region改变时，更新node_type选项
    if (field === 'region') {
      updateNodeTypeOptions();
    }
    
    currentPage = 1;
    loadData();
  }
  
  function handleAdd() {
    formData = null;
    isEdit = false;
    showForm = true;
  }
  
  function handleEdit(item: any) {
    formData = { ...item };
    isEdit = true;
    showForm = true;
  }
  
  function handleDelete(item: any) {
    itemToDelete = item;
    showDeletePrompt = true;
  }
  
  function handleFormCancel() {
    showForm = false;
  }
  
  // 处理选择/取消选择单个项目
  function handleSelectItem(id: number) {
    if (selectedItems.includes(id)) {
      selectedItems = selectedItems.filter(item => item !== id);
    } else {
      selectedItems = [...selectedItems, id];
    }
  }
  
  // 处理全选/取消全选
  function handleSelectAll(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.checked) {
      selectedItems = data.map(item => item.id);
    } else {
      selectedItems = [];
    }
  }
  
  // 打开批量更新确认对话框
  function handleBatchUpdate(isValid: boolean) {
    if (selectedItems.length === 0) {
      alert('Please select records first');
      return;
    }
    batchIsValid = isValid;
    showBatchUpdatePrompt = true;
  }
  
  // 确认批量更新
  async function confirmBatchUpdate() {
    if (selectedItems.length === 0) return;
    
    loading = true;
    let success = 0;
    let failed = 0;
    
    try {
      for (const id of selectedItems) {
        try {
          const response = await fetch(`/api/pricing/dedicated-node/${id}`, {
            method: 'PATCH',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ is_valid: batchIsValid })
          });
          
          if (response.ok) {
            success++;
          } else {
            failed++;
          }
        } catch (e) {
          failed++;
          console.error(`Error updating item ${id}:`, e);
        }
      }
      
      // 重新加载数据
      await loadData();
      
      // 清空选择
      selectedItems = [];
      showBatchUpdatePrompt = false;
      
      alert(`Successfully updated ${success} records. ${failed} records failed.`);
    } catch (err) {
      if (err instanceof Error) {
        error = err.message;
      } else {
        error = 'An unknown error occurred during batch update';
      }
    } finally {
      loading = false;
    }
  }
  
  // 取消批量更新
  function cancelBatchUpdate() {
    showBatchUpdatePrompt = false;
  }
  
  async function handleFormSubmit(event: CustomEvent<any>) {
    const submitData = event.detail;
    loading = true;
    
    try {
      const url = isEdit 
        ? `/api/pricing/dedicated-node/${submitData.id}` 
        : '/api/pricing/dedicated-node';
      
      const method = isEdit ? 'PUT' : 'POST';
      
      const response = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(submitData)
      });
      
      if (!response.ok) {
        throw new Error('Failed to save data');
      }
      
      showForm = false;
      await loadData();
    } catch (err) {
      if (err instanceof Error) {
        error = err.message;
      } else {
        error = 'An unknown error occurred';
      }
    } finally {
      loading = false;
    }
  }
  
  async function confirmDelete() {
    if (!itemToDelete) return;
    
    loading = true;
    error = null; // 清除之前的错误信息
    
    try {
      // 使用DELETE方法删除记录
      console.log(`正在删除记录，ID: ${itemToDelete.id}`);
      
      const response = await fetch(`/api/pricing/dedicated-node/${itemToDelete.id}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json'
        },
        // 增加凭证，确保授权正确
        credentials: 'include'
      });
      
      // 尝试获取响应内容
      let responseText = '';
      try {
        responseText = await response.text();
        console.log(`删除响应，ID ${itemToDelete.id}:`, response.status, responseText);
      } catch (e) {
        console.error('读取响应文本出错:', e);
      }
      
      if (!response.ok) {
        throw new Error(`删除记录失败 (${response.status}): ${responseText || '未知错误'}`);
      }
      
      const deletedItemId = itemToDelete.id;
      showDeletePrompt = false;
      itemToDelete = null;
      
      // 增加一个小延迟，让后端有时间处理
      await new Promise(resolve => setTimeout(resolve, 500));
      
      // 强制重新加载数据
      filters = { ...filters }; // 创建新对象触发更新
      currentPage = 1; // 回到第一页
      await loadData();
      
      // 显示成功消息
      alert(`记录 #${deletedItemId} 已成功删除`);
    } catch (err) {
      console.error('删除错误详情:', err);
      if (err instanceof Error) {
        error = err.message;
      } else {
        error = '删除过程中发生未知错误';
      }
      // 显示错误消息
      alert(`删除记录失败: ${error}`);
    } finally {
      loading = false;
    }
  }
  
  function cancelDelete() {
    showDeletePrompt = false;
    itemToDelete = null;
  }
  
  function formatDate(dateString: string): string {
    try {
      return dayjs(dateString).format('YYYY-MM-DD');
    } catch (e) {
      return dateString;
    }
  }
  
  function formatCurrency(value: number, currency: string = 'usd'): string {
    const formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency.toUpperCase(),
      minimumFractionDigits: 4,
      maximumFractionDigits: 6
    });
    
    return formatter.format(value);
  }
  
  function exportCSV() {
    if (!data || data.length === 0) return;
    
    // 准备导出数据
    const exportData = data.map(item => {
      const formattedItem = { ...item };
      
      // 格式化日期
      if (formattedItem.effective_date) {
        formattedItem.effective_date = formatDate(formattedItem.effective_date);
      }
      
      // 格式化布尔值
      if (formattedItem.is_valid !== undefined) {
        formattedItem.is_valid = formattedItem.is_valid ? 1 : 0;
      }
      
      return formattedItem;
    });
    
    // Format data for CSV
    const replacer = (key: string, value: any) => value === null ? '' : value;
    const header = Object.keys(exportData[0]);
    
    const csv = [
      header.join(','),
      ...exportData.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
    ].join('\r\n');
    
    // Create download
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.setAttribute('hidden', '');
    a.setAttribute('href', url);
    a.setAttribute('download', `dedicated-node-pricing-${new Date().getTime()}.csv`);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  
  // 处理Excel导入
  async function handleExcelImport(event: Event) {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    if (!file) return;
    
    loading = true;
    
    try {
      const data = await readExcelFile(file);
      if (!data || data.length === 0) {
        throw new Error('No valid data found in Excel file');
      }
      
      // 处理导入的数据
      const result = await importPriceData(data);
      
      // 更新筛选选项
      await updateFilterOptions();
      
      // 重新加载数据
      await loadData();
      
      // 清空文件输入框
      input.value = '';
      
      alert(`Successfully imported ${result.success} records. ${result.failed} records failed.`);
    } catch (err) {
      if (err instanceof Error) {
        error = err.message;
      } else {
        error = 'An unknown error occurred during import';
      }
    } finally {
      loading = false;
    }
  }
  
  // 读取Excel文件
  function readExcelFile(file: File): Promise<any[]> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      
      reader.onload = (e) => {
        try {
          const data = e.target?.result;
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const json = XLSX.utils.sheet_to_json(worksheet);
          resolve(json);
        } catch (err) {
          reject(err);
        }
      };
      
      reader.onerror = (err) => {
        reject(err);
      };
      
      reader.readAsArrayBuffer(file);
    });
  }
  
  // 导入价格数据
  async function importPriceData(data: any[]): Promise<{ success: number, failed: number }> {
    let success = 0;
    let failed = 0;
    
    // 准备数据
    const formattedData = data.map(item => {
      // 确保必要字段格式正确
      const formattedItem: any = {
        ...item,
        is_valid: item.is_valid === 1 || item.is_valid === true || item.is_valid === 'true',
        unit: 'hour'
      };
      
      // 确保所有数字字段是数字类型
      ['computer_price', 'storage_price', 'iops_price'].forEach(field => {
        if (formattedItem[field] !== undefined) {
          formattedItem[field] = Number(formattedItem[field]);
        }
      });
      
      // 确保effective_date是日期格式
      if (formattedItem.effective_date) {
        try {
          // 处理常见的日期格式
          let dateValue = formattedItem.effective_date;
          
          // 处理Excel中的日期格式 "yyyy/m/d" 或 "yyyy-m-d"
          if (typeof dateValue === 'string') {
            // 尝试匹配 yyyy/m/d 或 yyyy-m-d 格式
            const dateMatch = dateValue.match(/^(\d{4})[\/\-](\d{1,2})[\/\-](\d{1,2})$/);
            if (dateMatch) {
              const [_, year, month, day] = dateMatch;
              // 构建标准格式的日期字符串 (YYYY-MM-DD)
              dateValue = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
            }
          }
          
          formattedItem.effective_date = new Date(dateValue);
          
          // 验证日期是否有效 (不是 1970-01-01)
          if (formattedItem.effective_date.getFullYear() <= 1970) {
            console.error('Invalid date detected:', dateValue);
            // 设置为当前日期作为后备
            formattedItem.effective_date = new Date();
          }
        } catch (e) {
          console.error('Date parsing error:', e, formattedItem.effective_date);
          // 设置为当前日期作为后备
          formattedItem.effective_date = new Date();
        }
      }
      
      return formattedItem;
    });
    
    // 批量导入
    for (const item of formattedData) {
      try {
        const response = await fetch('/api/pricing/dedicated-node', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(item)
        });
        
        if (response.ok) {
          success++;
        } else {
          failed++;
        }
      } catch (e) {
        failed++;
        console.error('Error importing item:', e);
      }
    }
    
    return { success, failed };
  }
</script>

<div class="space-y-4">
  <!-- Error message (if any) -->
  {#if error}
    <div class="p-4 mb-4 bg-red-100 border border-red-400 text-red-700 rounded">
      <p>{error}</p>
    </div>
  {/if}
  
  <!-- Filters and Actions -->
  <div class="flex flex-wrap justify-between items-center mb-4">
    <div class="flex flex-wrap gap-2">
      <select
        value={filters.provider}
        on:change={(e) => handleFilterChange(e, 'provider')}
        class="px-3 py-2 border border-gryl-300 rounded-md text-sm"
      >
        <option value="">All Providers</option>
        {#each providerOptions as provider}
          <option value={provider}>{provider}</option>
        {/each}
      </select>
      
      <select
        value={filters.region}
        on:change={(e) => handleFilterChange(e, 'region')}
        class="px-3 py-2 border border-gryl-300 rounded-md text-sm"
      >
        <option value="">All Regions</option>
        {#each regionOptions as region}
          <option value={region.code}>{region.display}</option>
        {/each}
      </select>
      
      <select
        value={filters.node_type}
        on:change={(e) => handleFilterChange(e, 'node_type')}
        class="px-3 py-2 border border-gryl-300 rounded-md text-sm"
      >
        <option value="">All Node Types</option>
        {#each nodeTypeOptions as nodeType}
          <option value={nodeType}>{nodeType}</option>
        {/each}
      </select>
      
      <select
        value={filters.is_valid}
        on:change={(e) => handleFilterChange(e, 'is_valid')}
        class="px-3 py-2 border border-gryl-300 rounded-md text-sm"
      >
        <option value="">All Status</option>
        <option value="true">Valid</option>
        <option value="false">Invalid</option>
      </select>
    </div>
    
    <div class="flex space-x-2">
      <button 
        on:click={handleAdd}
        class="px-4 py-2 bg-prm-600 text-white rounded-md hover:bg-prm-700 transition-colors"
      >
        Add New
      </button>
      
      <label class="px-4 py-2 bg-prm-600 text-white rounded-md hover:bg-prm-700 transition-colors cursor-pointer">
        Import Excel
        <input 
          type="file" 
          accept=".xlsx,.xls" 
          on:change={handleExcelImport} 
          class="hidden"
        />
      </label>
      
      <button 
        on:click={exportCSV}
        disabled={data.length === 0}
        class="px-4 py-2 bg-gry-200 text-gry-700 rounded-md hover:bg-gry-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Export CSV
      </button>
    </div>
  </div>
  
  <!-- Batch operations -->
  {#if selectedItems.length > 0}
    <div class="mb-4 p-2 bg-blue-50 border border-blue-200 rounded-md flex justify-between items-center">
      <div class="text-blue-700">
        Selected {selectedItems.length} records
      </div>
      <div class="flex space-x-2">
        <button 
          on:click={() => handleBatchUpdate(true)}
          class="px-3 py-1 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors text-sm"
        >
          Batch Valid
        </button>
        <button 
          on:click={() => handleBatchUpdate(false)}
          class="px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors text-sm"
        >
          Batch Invalid
        </button>
        <button 
          on:click={() => selectedItems = []}
          class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors text-sm"
        >
          Cancel Selection
        </button>
      </div>
    </div>
  {/if}
  
  <!-- Data Table -->
  {#if loading}
    <div class="flex justify-center items-center h-60">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-prm-600"></div>
    </div>
  {:else if data.length === 0}
    <div class="bg-white p-8 rounded-md shadow text-center">
      <p class="text-gry-500">No data available. Add your first price record.</p>
    </div>
  {:else}
    <div class="overflow-x-auto">
      <table class="min-w-full bg-white border border-gryl-200 rounded-lg">
        <thead>
          <tr class="bg-gryl-100">
            <th class="px-2 py-3 text-center">
              <input 
                type="checkbox" 
                on:change={handleSelectAll}
                checked={selectedItems.length === data.length && data.length > 0}
                class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
              />
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">ID</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">Provider</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">Region</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">Node Type</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">Size</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">Compute Price ($/hour)</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">Storage Price ($/hour)</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">IOPS Price ($/hour)</th>
            <th
              scope="col" 
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
              on:click={() => handleSort('effective_date')}
            >
              Effective Date
              {#if sortField === 'effective_date'}
                <span class="ml-1">{sortDirection === 'asc' ? '↑' : '↓'}</span>
              {/if}
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gry-500 uppercase tracking-wider">Status</th>
            <th class="px-6 py-3 text-right text-xs font-medium text-gry-500 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gryl-200">
          {#each data as item (item.id)}
            <tr class="hover:bg-gryl-50">
              <td class="px-2 py-4 text-center">
                <input 
                  type="checkbox" 
                  on:change={() => handleSelectItem(item.id)}
                  checked={selectedItems.includes(item.id)}
                  class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
                />
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gry-900">{item.id}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gry-900">{item.provider}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gry-900">{item.region} ({item.region_name})</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gry-900">{item.node_type}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gry-900">{item.node_size}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gry-900">{formatCurrency(item.computer_price)}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gry-900">{formatCurrency(item.storage_price)}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gry-900">{formatCurrency(item.iops_price)}</td>
              <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                {formatDate(item.effective_date)}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${item.is_valid ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                  {item.is_valid ? 'Valid' : 'Invalid'}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <button
                  on:click={() => handleEdit(item)}
                  class="text-indigo-600 hover:text-indigo-900 mr-2"
                >
                  Edit
                </button>
                <button
                  on:click={() => handleDelete(item)}
                  class="text-red-600 hover:text-red-900"
                >
                  Delete
                </button>
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
    
    <!-- Pagination -->
    <div class="mt-4 flex justify-between items-center">
      <div class="flex items-center gap-2">
        <span class="text-sm text-gray-600">Items per page:</span>
        <select
          value={pageSize.toString()}
          on:change={handlePageSizeChange}
          class="px-3 py-2 border border-gryl-300 rounded-md text-sm"
        >
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
        </select>
      </div>
      <Pagination
        currentPage={currentPage}
        totalItems={totalItems}
        pageSize={pageSize}
        on:pageChange={handlePageChange}
      />
    </div>
  {/if}
</div>

<!-- Add/Edit Modal -->
{#if showForm}
  <div class="fixed inset-0 bg-gry-900 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
      <PriceForm
        formType="dedicated-node"
        data={formData}
        {isEdit}
        on:submit={handleFormSubmit}
        on:cancel={handleFormCancel}
      />
    </div>
  </div>
{/if}

<!-- Delete Confirmation -->
{#if showDeletePrompt}
  <div class="fixed inset-0 bg-gry-900 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
      <h2 class="text-xl font-bold mb-4">Confirm Delete</h2>
      <p class="mb-6">Are you sure you want to delete this price record? This action cannot be undone.</p>
      
      <div class="flex justify-end space-x-2">
        <button
          on:click={cancelDelete}
          class="px-4 py-2 border border-gryl-300 rounded-md hover:bg-gryl-100"
        >
          Cancel
        </button>
        <button
          on:click={confirmDelete}
          class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
        >
          Delete
        </button>
      </div>
    </div>
  </div>
{/if}

<!-- Batch Update Confirmation -->
{#if showBatchUpdatePrompt}
  <div class="fixed inset-0 bg-gry-900 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
      <h2 class="text-xl font-bold mb-4">Confirm {batchIsValid ? 'Valid' : 'Invalid'}</h2>
      <p class="mb-6">Are you sure you want to set {selectedItems.length} selected records to {batchIsValid ? 'Valid' : 'Invalid'}?</p>
      
      <div class="flex justify-end space-x-2">
        <button
          on:click={cancelBatchUpdate}
          class="px-4 py-2 border border-gryl-300 rounded-md hover:bg-gryl-100"
        >
          Cancel
        </button>
        <button
          on:click={confirmBatchUpdate}
          class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
        >
          Confirm
        </button>
      </div>
    </div>
  </div>
{/if} 