<script>
  import { onMount } from 'svelte';
  import {
    fetchTestMaps,
    fetchTestMap,
    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,
  } from 'lucide-svelte';

  let loading = $state(false);
  let testMapHeaders = $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);
  let modalLoading = $state(false);

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

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

  async function loadTestMaps() {
    loading = true;
    try {
      const response = await fetchTestMaps();
      testMapHeaders = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      toastError(err.message || 'Failed to load test mappings');
      testMapHeaders = [];
    } 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;
  }

  async function openEditGroupModal(group) {
    modalLoading = true;
    modalMode = 'edit';
    
    try {
      // Use TestMapID directly from the grouped data (now returned by API)
      modalGroupData = {
        ...group,
        TestMapID: parseInt(group.TestMapID) || null,
        mappings: [], // Will be populated by modal
      };
      modalData = null;
      modalOpen = true;
    } catch (err) {
      toastError(err.message || 'Failed to load test mapping details');
      modalGroupData = group;
      modalData = null;
      modalOpen = true;
    } finally {
      modalLoading = false;
    }
  }

  function handleModalSave() {
    loadTestMaps();
  }

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

  async function handleDelete() {
    deleting = true;
    try {
      if (deleteGroupMode && deleteItem) {
        /**
         * API LIMITATION: TestMap delete requires TestMapID
         * 
         * The current API list endpoint does not return TestMapID in the grouped
         * response. This is a known limitation. To implement group deletion,
         * the API needs to either:
         * 1. Return TestMapID in the list response, OR
         * 2. Provide a delete endpoint that accepts HostID/ClientID pair
         * 
         * Current workaround: Users must delete individual mappings through
         * the edit modal instead of group deletion.
         */
        const errorMessage = 'Delete functionality requires TestMapID which is not available in the list view. ' +
          'This is an API limitation - the list endpoint does not return TestMapID for grouped items. ' +
          'Please use the edit modal to delete individual mappings, or contact your administrator.';
        
        console.warn('[TestMap Delete] API Limitation:', {
          reason: 'TestMapID not available in grouped list response',
          attemptedItem: deleteItem,
          suggestion: 'Delete individual mappings through edit modal',
          requires: 'API enhancement to return TestMapID or provide delete by host/client endpoint'
        });
        
        toastError(errorMessage);
      } else if (deleteItem?.TestMapID) {
        // Delete single mapping (fallback when TestMapID is available)
        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;
    }
  }
</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>

  <!-- Data Table -->
  <div class="bg-base-100 rounded-lg shadow border border-base-200">
    {#if !loading && testMapHeaders.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">
          No test mappings found
        </h3>
        <p class="text-sm text-gray-500 text-center max-w-md mb-6">
          Test mappings connect tests between host systems (like HIS) and client systems. Add your first mapping to get started.
        </p>
        <button class="btn btn-primary" onclick={openCreateModal}>
          <Plus class="w-4 h-4 mr-2" />
          Add Mapping
        </button>
      </div>
    {:else}
      <DataTable
        {columns}
        data={testMapHeaders}
        {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">
                {#if row.HostType}
                  {row.HostType} - {row.HostName || row.HostID || '-'}
                {:else}
                  {row.HostName || row.HostID || '-'}
                {/if}
              </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">
                {#if row.ClientType}
                  {row.ClientType} - {row.ClientName || row.ClientID || '-'}
                {:else}
                  {row.ClientName || row.ClientID || '-'}
                {/if}
              </div>
            </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 test mapping group"
              >
                <Edit2 class="w-4 h-4" />
              </button>
              <button
                class="btn btn-sm btn-ghost text-error"
                onclick={() => confirmDeleteGroup(row)}
                title="Delete test mapping group"
              >
                <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}
  loading={modalLoading}
  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 this test mapping 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?.HostName || deleteItem?.HostID}</strong>
      </p>
      <p class="text-sm">
        <span class="text-gray-500">Client:</span>
        <strong class="text-base-content">{deleteItem?.ClientName || 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>
