clqms-fe1/src/routes/(app)/master-data/testmap/+page.svelte

<script>
  import { onMount } from 'svelte';
  import {
    fetchTestMaps,
    deleteTestMap,
  } from '$lib/api/testmap.js';
  import { fetchContainers } from '$lib/api/containers.js';
  import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
  import DataTable from '$lib/components/DataTable.svelte';
  import Modal from '$lib/components/Modal.svelte';
  import TestMapModal from './TestMapModal.svelte';
  import {
    Plus,
    Edit2,
    Trash2,
    ArrowLeft,
    Link,
    Server,
    Monitor,
    Filter,
    X,
  } from 'lucide-svelte';

  let loading = $state(false);
  let testMaps = $state([]);
  let containers = $state([]);
  let modalOpen = $state(false);
  let modalMode = $state('create');
  let modalData = $state(null);
  let modalGroupData = $state(null);
  let deleting = $state(false);
  let deleteConfirmOpen = $state(false);
  let deleteItem = $state(null);
  let deleteGroupMode = $state(false);

  // Filter states
  let filterHostType = $state('');
  let filterHostID = $state('');
  let filterClientType = $state('');
  let filterClientID = $state('');

  // System types for dropdowns
  const SYSTEM_TYPES = ['HIS', 'SITE', 'WST', 'INST'];

  // Derived unique values for ID dropdowns
  let uniqueHostIDs = $derived([...new Set(testMaps.map(m => m.HostID).filter(Boolean))].sort());
  let uniqueClientIDs = $derived([...new Set(testMaps.map(m => m.ClientID).filter(Boolean))].sort());

  const columns = [
    { key: 'HostInfo', label: 'Host System', class: 'w-48' },
    { key: 'ClientInfo', label: 'Client System', class: 'w-48' },
    { key: 'TestCount', label: 'Tests', class: 'w-24 text-center' },
    { key: 'actions', label: 'Actions', class: 'w-32 text-center' },
  ];

  // Group test mappings by HostType/HostID/ClientType/ClientID
  let groupedTestMaps = $derived(() => {
    const groups = new Map();

    testMaps.forEach((mapping) => {
      const key = `${mapping.HostType || ''}|${mapping.HostID || ''}|${mapping.ClientType || ''}|${mapping.ClientID || ''}`;

      if (!groups.has(key)) {
        groups.set(key, {
          key,
          HostType: mapping.HostType || '',
          HostID: mapping.HostID || '',
          ClientType: mapping.ClientType || '',
          ClientID: mapping.ClientID || '',
          mappings: [],
        });
      }

      const group = groups.get(key);
      group.mappings.push(mapping);
    });

    return Array.from(groups.values());
  });

  // Derived filtered grouped test maps
  let filteredGroupedTestMaps = $derived(
    groupedTestMaps().filter((group) => {
      const matchesHostType =
        !filterHostType || group.HostType === filterHostType;
      const matchesHostID =
        !filterHostID || group.HostID === filterHostID;
      const matchesClientType =
        !filterClientType || group.ClientType === filterClientType;
      const matchesClientID =
        !filterClientID || group.ClientID === filterClientID;

      return matchesHostType && matchesHostID && matchesClientType && matchesClientID;
    })
  );

  onMount(async () => {
    await Promise.all([loadTestMaps(), loadContainers()]);
  });

  async function loadTestMaps() {
    loading = true;
    try {
      const response = await fetchTestMaps();
      testMaps = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      toastError(err.message || 'Failed to load test mappings');
      testMaps = [];
    } finally {
      loading = false;
    }
  }

  async function loadContainers() {
    try {
      const response = await fetchContainers();
      containers = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      console.error('Failed to load containers:', err);
      containers = [];
    }
  }

  function openCreateModal() {
    modalMode = 'create';
    modalData = null;
    modalGroupData = null;
    modalOpen = true;
  }

  function openEditGroupModal(group) {
    modalMode = 'edit';
    modalGroupData = group;
    // Pass the first mapping as initial data, modal will handle the rest
    modalData = group.mappings[0] || null;
    modalOpen = true;
  }

  function handleModalSave() {
    loadTestMaps();
  }

  function confirmDeleteGroup(group) {
    deleteItem = group;
    deleteGroupMode = true;
    deleteConfirmOpen = true;
  }

  async function handleDelete() {
    deleting = true;
    try {
      if (deleteGroupMode && deleteItem) {
        // Delete all mappings in the group
        const deletePromises = deleteItem.mappings.map((mapping) =>
          deleteTestMap(mapping.TestMapID)
        );
        await Promise.all(deletePromises);
        toastSuccess(`Deleted ${deleteItem.mappings.length} test mapping(s) successfully`);
      } else if (deleteItem?.TestMapID) {
        // Delete single mapping (fallback)
        await deleteTestMap(deleteItem.TestMapID);
        toastSuccess('Test mapping deleted successfully');
      }
      deleteConfirmOpen = false;
      deleteItem = null;
      deleteGroupMode = false;
      await loadTestMaps();
    } catch (err) {
      toastError(err.message || 'Failed to delete test mapping(s)');
    } finally {
      deleting = false;
    }
  }

  function clearFilters() {
    filterHostType = '';
    filterHostID = '';
    filterClientType = '';
    filterClientID = '';
  }
</script>

<div class="p-4">
  <div class="flex items-center gap-4 mb-6">
    <a href="/master-data" class="btn btn-ghost btn-circle">
      <ArrowLeft class="w-5 h-5" />
    </a>
    <div class="flex-1">
      <h1 class="text-xl font-bold text-gray-800">Test Mapping</h1>
      <p class="text-sm text-gray-600">
        Manage test mappings between host and client systems
      </p>
    </div>
    <button class="btn btn-primary" onclick={openCreateModal}>
      <Plus class="w-4 h-4 mr-2" />
      Add Mapping
    </button>
  </div>

  <!-- Filters -->
  <div class="bg-base-100 rounded-lg shadow border border-base-200 p-4 mb-4">
    <div class="flex items-center justify-between mb-3">
      <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
        <Filter class="w-4 h-4" />
        Filters
      </h3>
      <button class="btn btn-sm btn-ghost" onclick={clearFilters}>
        <X class="w-3 h-3 mr-1" />
        Clear
      </button>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Host Filters -->
      <div class="space-y-3">
        <h4 class="text-xs font-medium text-gray-500 uppercase flex items-center gap-2">
          <Server class="w-3 h-3" />
          Host
        </h4>
        <div class="grid grid-cols-2 gap-3">
          <select
            class="select select-sm select-bordered w-full"
            bind:value={filterHostType}
          >
            <option value="">All Types</option>
            {#each SYSTEM_TYPES as type}
              <option value={type}>{type}</option>
            {/each}
          </select>
          <select
            class="select select-sm select-bordered w-full"
            bind:value={filterHostID}
          >
            <option value="">All IDs</option>
            {#each uniqueHostIDs as id}
              <option value={id}>{id}</option>
            {/each}
          </select>
        </div>
      </div>
      <!-- Client Filters -->
      <div class="space-y-3">
        <h4 class="text-xs font-medium text-gray-500 uppercase flex items-center gap-2">
          <Monitor class="w-3 h-3" />
          Client
        </h4>
        <div class="grid grid-cols-2 gap-3">
          <select
            class="select select-sm select-bordered w-full"
            bind:value={filterClientType}
          >
            <option value="">All Types</option>
            {#each SYSTEM_TYPES as type}
              <option value={type}>{type}</option>
            {/each}
          </select>
          <select
            class="select select-sm select-bordered w-full"
            bind:value={filterClientID}
          >
            <option value="">All IDs</option>
            {#each uniqueClientIDs as id}
              <option value={id}>{id}</option>
            {/each}
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Data Table -->
  <div class="bg-base-100 rounded-lg shadow border border-base-200">
    {#if !loading && filteredGroupedTestMaps.length === 0}
      <!-- Empty State -->
      <div class="flex flex-col items-center justify-center py-16 px-4">
        <div class="bg-base-200 rounded-full p-6 mb-4">
          <Link class="w-12 h-12 text-gray-400" />
        </div>
        <h3 class="text-base font-semibold text-gray-700 mb-2">
          {#if filterHostType || filterHostID || filterClientType || filterClientID}
            No mappings match your filters
          {:else}
            No test mappings found
          {/if}
        </h3>
        <p class="text-xs text-gray-500 text-center max-w-md mb-6">
          {#if filterHostType || filterHostID || filterClientType || filterClientID}
            Try adjusting your filter criteria or clear the filters to see all mappings.
          {:else}
            Test mappings connect tests between host systems (like HIS) and client systems. Add your first mapping to get started.
          {/if}
        </p>
        {#if filterHostType || filterHostID || filterClientType || filterClientID}
          <button class="btn btn-outline" onclick={clearFilters}>
            Clear Filters
          </button>
        {:else}
          <button class="btn btn-primary" onclick={openCreateModal}>
            <Plus class="w-4 h-4 mr-2" />
            Add Mapping
          </button>
        {/if}
      </div>
    {:else}
      <DataTable
        {columns}
        data={filteredGroupedTestMaps}
        {loading}
        emptyMessage="No test mappings found"
        hover={true}
        bordered={false}
      >
        {#snippet cell({ column, row, value })}
          {#if column.key === 'HostInfo'}
            <div class="flex items-center gap-2">
              <Server class="w-4 h-4 text-primary flex-shrink-0" />
              <div class="font-medium text-sm">
                {row.HostType || '-'} - {row.HostID || '-'}
              </div>
            </div>
          {:else if column.key === 'ClientInfo'}
            <div class="flex items-center gap-2">
              <Monitor class="w-4 h-4 text-secondary flex-shrink-0" />
              <div class="font-medium text-sm">
                {row.ClientType || '-'} - {row.ClientID || '-'}
              </div>
            </div>
          {:else if column.key === 'TestCount'}
            <div class="flex justify-center">
              <span class="badge badge-primary badge-sm">
                {row.mappings.length}
              </span>
            </div>
          {:else if column.key === 'actions'}
            <div class="flex justify-center gap-1">
              <button
                class="btn btn-sm btn-ghost"
                onclick={() => openEditGroupModal(row)}
                title="Edit all {row.mappings.length} test mapping(s)"
              >
                <Edit2 class="w-4 h-4" />
              </button>
              <button
                class="btn btn-sm btn-ghost text-error"
                onclick={() => confirmDeleteGroup(row)}
                title="Delete all {row.mappings.length} test mapping(s)"
              >
                <Trash2 class="w-4 h-4" />
              </button>
            </div>
          {:else}
            {value || '-'}
          {/if}
        {/snippet}
      </DataTable>
    {/if}
  </div>
</div>

<!-- Test Mapping Modal -->
<TestMapModal
  bind:open={modalOpen}
  mode={modalMode}
  initialData={modalData}
  groupData={modalGroupData}
  {containers}
  onSave={handleModalSave}
/>

<!-- Delete Confirmation Modal -->
<Modal bind:open={deleteConfirmOpen} title={deleteGroupMode ? 'Confirm Delete Group' : 'Confirm Delete Mapping'} size="sm">
  <div class="py-2">
    <p class="text-base-content/80">
      {#if deleteGroupMode}
        Are you sure you want to delete all {deleteItem?.mappings?.length || 0} test mapping(s) in this group?
      {:else}
        Are you sure you want to delete this test mapping?
      {/if}
    </p>
    <div class="bg-base-200 rounded-lg p-3 mt-3 space-y-1">
      <p class="text-sm">
        <span class="text-gray-500">Host:</span>
        <strong class="text-base-content">{deleteItem?.HostType} / {deleteItem?.HostID}</strong>
      </p>
      <p class="text-sm">
        <span class="text-gray-500">Client:</span>
        <strong class="text-base-content">{deleteItem?.ClientType} / {deleteItem?.ClientID}</strong>
      </p>

    </div>
    <p class="text-sm text-error mt-3 flex items-center gap-2">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
        />
      </svg>
      This action cannot be undone.
    </p>
  </div>
  {#snippet footer()}
    <button class="btn btn-ghost" onclick={() => (deleteConfirmOpen = false)} type="button" disabled={deleting}>
      Cancel
    </button>
    <button class="btn btn-error" onclick={handleDelete} disabled={deleting} type="button">
      {#if deleting}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {deleting ? 'Deleting...' : 'Delete'}
    </button>
  {/snippet}
</Modal>