clqms-fe1/src/routes/(app)/rules/+page.svelte

<script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { fetchRules, deleteRule } from '$lib/api/rules.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 TestSiteSearch from '$lib/components/rules/TestSiteSearch.svelte';
  import { Plus, Search, Trash2, Edit2, ArrowLeft, Loader2, Filter, FileText } from 'lucide-svelte';

  let loading = $state(false);
  let rules = $state([]);
  let searchName = $state('');
  let searchDebounceTimer = $state(null);

  let filterEventCode = $state('ORDER_CREATED');
  let filterActive = $state('ALL');
  let filterScopeType = $state('ALL');
  let filterTestSite = $state(null);

  let deleteConfirmOpen = $state(false);
  let deleteItem = $state(null);
  let deleting = $state(false);

  const columns = [
    { key: 'Name', label: 'Name', class: 'font-medium min-w-[220px]' },
    { key: 'EventCode', label: 'EventCode', class: 'w-36' },
    { key: 'ScopeType', label: 'Scope', class: 'w-36' },
    { key: 'TestSiteID', label: 'TestSiteID', class: 'w-28' },
    { key: 'Priority', label: 'Priority', class: 'w-24 text-center' },
    { key: 'Active', label: 'Active', class: 'w-24 text-center' },
    { key: 'actions', label: 'Actions', class: 'w-24 text-center' },
  ];

  function normalizeRulesListResponse(response) {
    if (Array.isArray(response?.data?.data)) return response.data.data;
    if (Array.isArray(response?.data)) return response.data;
    if (Array.isArray(response?.data?.rules)) return response.data.rules;
    return [];
  }

  function getParams() {
    const params = {};

    if (filterEventCode) params.EventCode = filterEventCode;
    if (filterActive !== 'ALL') params.Active = filterActive;
    if (filterScopeType !== 'ALL') params.ScopeType = filterScopeType;
    if (filterTestSite?.TestSiteID) params.TestSiteID = filterTestSite.TestSiteID;

    const s = searchName.trim();
    if (s) params.search = s;

    return params;
  }

  async function loadRules() {
    loading = true;
    try {
      const response = await fetchRules(getParams());
      rules = normalizeRulesListResponse(response);
    } catch (err) {
      toastError(err?.message || 'Failed to load rules');
      rules = [];
    } finally {
      loading = false;
    }
  }

  function handleSearch() {
    if (searchDebounceTimer) {
      clearTimeout(searchDebounceTimer);
    }
    searchDebounceTimer = setTimeout(() => {
      loadRules();
    }, 300);
  }

  onMount(loadRules);

  function confirmDelete(row) {
    deleteItem = row;
    deleteConfirmOpen = true;
  }

  async function handleDelete() {
    if (!deleteItem?.RuleID) return;
    deleting = true;
    try {
      await deleteRule(deleteItem.RuleID);
      toastSuccess('Rule deleted successfully');
      deleteConfirmOpen = false;
      await loadRules();
    } catch (err) {
      toastError(err?.message || 'Failed to delete rule');
    } finally {
      deleting = false;
    }
  }

  function isActive(v) {
    return v === 1 || v === '1' || v === true;
  }
</script>

<div class="p-4">
  <div class="flex items-center gap-4 mb-6">
    <a href="/dashboard" 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 flex items-center gap-2">
        <FileText class="w-5 h-5 text-gray-500" />
        Rules
      </h1>
      <p class="text-sm text-gray-600">Manage rules and actions for ORDER_CREATED</p>
    </div>
    <a class="btn btn-primary" href="/rules/new">
      <Plus class="w-4 h-4 mr-2" />
      New Rule
    </a>
  </div>

  <div class="bg-base-100 rounded-lg shadow border border-base-200 p-4 mb-4">
    <div class="flex items-center gap-2 mb-3 text-sm font-semibold text-gray-700">
      <Filter class="w-4 h-4" />
      Filters
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-5 gap-3">
      <div>
        <div class="text-xs font-semibold text-gray-600">EventCode</div>
        <select class="select select-sm select-bordered w-full" bind:value={filterEventCode} disabled={true}>
          <option value="ORDER_CREATED">ORDER_CREATED</option>
        </select>
      </div>
      <div>
        <div class="text-xs font-semibold text-gray-600">Active</div>
        <select class="select select-sm select-bordered w-full" bind:value={filterActive} onchange={loadRules}>
          <option value="ALL">All</option>
          <option value="1">Active</option>
          <option value="0">Inactive</option>
        </select>
      </div>
      <div>
        <div class="text-xs font-semibold text-gray-600">ScopeType</div>
        <select class="select select-sm select-bordered w-full" bind:value={filterScopeType} onchange={loadRules}>
          <option value="ALL">All</option>
          <option value="GLOBAL">GLOBAL</option>
          <option value="TESTSITE">TESTSITE</option>
        </select>
      </div>
      <div>
        <div class="text-xs font-semibold text-gray-600">TestSite</div>
        <TestSiteSearch bind:value={filterTestSite} placeholder="Optional" onSelect={loadRules} />
      </div>
      <div>
        <div class="text-xs font-semibold text-gray-600">Rule Name</div>
        <div class="flex gap-2">
          <label class="input input-sm input-bordered flex items-center gap-2 w-full focus-within:input-primary">
            <Search class="w-4 h-4 text-gray-400" />
            <input
              type="text"
              class="grow bg-transparent outline-none"
              placeholder="Search..."
              bind:value={searchName}
              oninput={handleSearch}
              onkeydown={(e) => e.key === 'Enter' && loadRules()}
            />
          </label>
          <button class="btn btn-sm btn-primary" onclick={loadRules} disabled={loading} type="button">
            {#if loading}
              <Loader2 class="w-4 h-4 animate-spin" />
            {:else}
              <Search class="w-4 h-4" />
            {/if}
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="bg-base-100 rounded-lg shadow border border-base-200">
    <DataTable
      {columns}
      data={rules}
      loading={loading}
      emptyMessage="No rules found"
      hover={true}
      bordered={false}
    >
      {#snippet cell({ column, row, value })}
        {#if column.key === 'ScopeType'}
          <span class="badge badge-ghost badge-sm">{row.ScopeType || '-'}</span>
        {:else if column.key === 'Active'}
          <div class="flex justify-center">
            <span class="badge badge-sm {isActive(row.Active) ? 'badge-success' : 'badge-ghost'}">
              {isActive(row.Active) ? 'Yes' : 'No'}
            </span>
          </div>
        {:else if column.key === 'Priority'}
          <div class="text-center">{value ?? 0}</div>
        {:else if column.key === 'actions'}
          <div class="flex justify-center gap-2">
            <button
              class="btn btn-sm btn-ghost"
              onclick={() => goto(`/rules/${row.RuleID}`)}
              title="Edit rule"
              type="button"
            >
              <Edit2 class="w-4 h-4" />
            </button>
            <button
              class="btn btn-sm btn-ghost text-error"
              onclick={() => confirmDelete(row)}
              title="Delete rule"
              type="button"
            >
              <Trash2 class="w-4 h-4" />
            </button>
          </div>
        {:else}
          {value || '-'}
        {/if}
      {/snippet}
    </DataTable>
  </div>
</div>

<Modal bind:open={deleteConfirmOpen} title="Confirm Delete" size="sm">
  <div class="py-2">
    <p class="text-base-content/80">
      Are you sure you want to delete <strong class="text-base-content">{deleteItem?.Name}</strong>?
    </p>
    <p class="text-sm text-gray-500 mt-1">RuleID: {deleteItem?.RuleID}</p>
    <p class="text-sm text-error mt-3">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>