<script>
  import { onMount } from 'svelte';
  import { fetchTests, createTest, updateTest } from '$lib/api/tests.js';
  import { fetchDisciplines, fetchDepartments } from '$lib/api/organization.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 SelectDropdown from '$lib/components/SelectDropdown.svelte';
  import { Plus, Edit2, ArrowLeft, Filter } from 'lucide-svelte';

  let loading = $state(false);
  let tests = $state([]);
  let disciplines = $state([]);
  let departments = $state([]);
  let modalOpen = $state(false);
  let modalMode = $state('create');
  let saving = $state(false);
  
  // Filter states
  let selectedType = $state('');
  let searchQuery = $state('');
  
  let formData = $state({
    TestSiteID: null,
    TestSiteCode: '',
    TestSiteName: '',
    TestType: 'TEST',
    DisciplineID: null,
    DepartmentID: null,
    SeqScr: '0',
    SeqRpt: '0',
    VisibleScr: '1',
    VisibleRpt: '1'
  });

  const testTypeLabels = {
    TEST: 'Test',
    PARAM: 'Param',
    CALC: 'Calc',
    GROUP: 'Panel',
    TITLE: 'Title'
  };

  const testTypeBadges = {
    TEST: 'badge-primary',
    PARAM: 'badge-secondary',
    CALC: 'badge-accent',
    GROUP: 'badge-info',
    TITLE: 'badge-ghost'
  };

  const columns = [
    { key: 'TestSiteCode', label: 'Code', class: 'font-medium' },
    { key: 'TestSiteName', label: 'Name' },
    { key: 'TestType', label: 'Type', class: 'w-32' },
    { key: 'DisciplineName', label: 'Discipline' },
    { key: 'DepartmentName', label: 'Department' },
    { key: 'SeqScr', label: 'Seq', class: 'w-16 text-center' },
    { key: 'actions', label: 'Actions', class: 'w-24 text-center' },
  ];

  onMount(async () => {
    await Promise.all([
      loadTests(),
      loadDisciplines(),
      loadDepartments()
    ]);
  });

  async function loadTests() {
    loading = true;
    try {
      const params = {};
      if (selectedType) params.TestType = selectedType;
      if (searchQuery) params.TestSiteName = searchQuery;
      
      const response = await fetchTests(params);
      tests = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      toastError(err.message || 'Failed to load tests');
      tests = [];
    } finally {
      loading = false;
    }
  }

  async function loadDisciplines() {
    try {
      const response = await fetchDisciplines();
      disciplines = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      disciplines = [];
    }
  }

  async function loadDepartments() {
    try {
      const response = await fetchDepartments();
      departments = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      departments = [];
    }
  }

  function openCreateModal() {
    modalMode = 'create';
    formData = {
      TestSiteID: null,
      TestSiteCode: '',
      TestSiteName: '',
      TestType: 'TEST',
      DisciplineID: null,
      DepartmentID: null,
      SeqScr: '0',
      SeqRpt: '0',
      VisibleScr: '1',
      VisibleRpt: '1'
    };
    modalOpen = true;
  }

  function openEditModal(row) {
    modalMode = 'edit';
    formData = {
      TestSiteID: row.TestSiteID,
      TestSiteCode: row.TestSiteCode,
      TestSiteName: row.TestSiteName,
      TestType: row.TestType,
      DisciplineID: row.DisciplineID,
      DepartmentID: row.DepartmentID,
      SeqScr: row.SeqScr || '0',
      SeqRpt: row.SeqRpt || '0',
      VisibleScr: row.VisibleScr || '1',
      VisibleRpt: row.VisibleRpt || '1'
    };
    modalOpen = true;
  }

  async function handleSave() {
    saving = true;
    try {
      if (modalMode === 'create') {
        await createTest(formData);
        toastSuccess('Test created successfully');
      } else {
        await updateTest(formData);
        toastSuccess('Test updated successfully');
      }
      modalOpen = false;
      await loadTests();
    } catch (err) {
      toastError(err.message || 'Failed to save test');
    } finally {
      saving = false;
    }
  }

  function handleFilter() {
    loadTests();
  }

  function handleSearchKeydown(event) {
    if (event.key === 'Enter') {
      loadTests();
    }
  }

  const disciplineOptions = $derived(
    disciplines.map(d => ({ value: d.DisciplineID, label: d.DisciplineName }))
  );

  const departmentOptions = $derived(
    departments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName }))
  );

  const filteredDepartments = $derived(
    formData.DisciplineID
      ? departments.filter(d => d.DisciplineID === formData.DisciplineID)
      : departments
  );

  const filteredDepartmentOptions = $derived(
    filteredDepartments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName }))
  );
</script>

<div class="p-6">
  <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-3xl font-bold text-gray-800">Test Definitions</h1>
      <p class="text-gray-600">Manage laboratory tests and panels</p>
    </div>
    <button class="btn btn-primary" onclick={openCreateModal}>
      <Plus class="w-4 h-4 mr-2" />
      Add Test
    </button>
  </div>

  <!-- Filters -->
  <div class="bg-base-100 rounded-lg shadow border border-base-200 p-4 mb-4">
    <div class="flex flex-col sm:flex-row gap-4">
      <div class="flex-1">
        <input
          type="text"
          placeholder="Search by code or name..."
          class="input input-bordered w-full"
          bind:value={searchQuery}
          onkeydown={handleSearchKeydown}
        />
      </div>
      <div class="w-full sm:w-48">
        <select
          class="select select-bordered w-full"
          bind:value={selectedType}
          onchange={handleFilter}
        >
          <option value="">All Types</option>
          <option value="TEST">Technical Test</option>
          <option value="PARAM">Parameter</option>
          <option value="CALC">Calculated</option>
          <option value="GROUP">Panel/Profile</option>
          <option value="TITLE">Section Header</option>
        </select>
      </div>
      <button class="btn btn-outline" onclick={handleFilter}>
        <Filter class="w-4 h-4 mr-2" />
        Filter
      </button>
    </div>
  </div>

  <div class="bg-base-100 rounded-lg shadow border border-base-200">
    <DataTable
      {columns}
      data={tests.map(t => ({
        ...t,
        DisciplineName: disciplines.find(d => d.DisciplineID === t.DisciplineID)?.DisciplineName || '-',
        DepartmentName: departments.find(d => d.DepartmentID === t.DepartmentID)?.DepartmentName || '-'
      }))}
      {loading}
      emptyMessage="No tests found"
      hover={true}
      bordered={false}
    >
      {#snippet cell({ column, row, value })}
        {#if column.key === 'TestType'}
          <span class="badge {testTypeBadges[value] || 'badge-ghost'}">
            {testTypeLabels[value] || value}
          </span>
        {:else if column.key === 'actions'}
          <div class="flex justify-center gap-2">
            <button class="btn btn-sm btn-ghost" onclick={() => openEditModal(row)}>
              <Edit2 class="w-4 h-4" />
            </button>
          </div>
        {:else}
          {value || '-'}
        {/if}
      {/snippet}
    </DataTable>
  </div>
</div>

<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Test' : 'Edit Test'} size="lg">
  <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSave(); }}>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label" for="testCode">
          <span class="label-text font-medium">Test Code</span>
          <span class="label-text-alt text-error">*</span>
        </label>
        <input
          id="testCode"
          type="text"
          class="input input-bordered w-full"
          bind:value={formData.TestSiteCode}
          placeholder="e.g., GLU"
          required
        />
      </div>
      <div class="form-control">
        <label class="label" for="testName">
          <span class="label-text font-medium">Test Name</span>
          <span class="label-text-alt text-error">*</span>
        </label>
        <input
          id="testName"
          type="text"
          class="input input-bordered w-full"
          bind:value={formData.TestSiteName}
          placeholder="e.g., Glucose"
          required
        />
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label" for="testType">
          <span class="label-text font-medium">Test Type</span>
          <span class="label-text-alt text-error">*</span>
        </label>
        <select
          id="testType"
          class="select select-bordered w-full"
          bind:value={formData.TestType}
          required
        >
          <option value="TEST">Technical Test</option>
          <option value="PARAM">Parameter</option>
          <option value="CALC">Calculated</option>
          <option value="GROUP">Panel/Profile</option>
          <option value="TITLE">Section Header</option>
        </select>
      </div>
      <div class="form-control">
        <label class="label" for="seqScr">
          <span class="label-text font-medium">Screen Sequence</span>
        </label>
        <input
          id="seqScr"
          type="number"
          class="input input-bordered w-full"
          bind:value={formData.SeqScr}
          placeholder="0"
        />
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <SelectDropdown
        label="Discipline"
        name="discipline"
        bind:value={formData.DisciplineID}
        options={disciplineOptions}
        placeholder="Select discipline..."
      />
      <SelectDropdown
        label="Department"
        name="department"
        bind:value={formData.DepartmentID}
        options={filteredDepartmentOptions}
        placeholder="Select department..."
      />
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label" for="seqRpt">
          <span class="label-text font-medium">Report Sequence</span>
        </label>
        <input
          id="seqRpt"
          type="number"
          class="input input-bordered w-full"
          bind:value={formData.SeqRpt}
          placeholder="0"
        />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text font-medium">Visibility</span>
        </label>
        <div class="flex gap-4 mt-2">
          <label class="label cursor-pointer gap-2">
            <input type="checkbox" class="checkbox" bind:checked={formData.VisibleScr} value="1" />
            <span class="label-text">Screen</span>
          </label>
          <label class="label cursor-pointer gap-2">
            <input type="checkbox" class="checkbox" bind:checked={formData.VisibleRpt} value="1" />
            <span class="label-text">Report</span>
          </label>
        </div>
      </div>
    </div>
  </form>
  {#snippet footer()}
    <button class="btn btn-ghost" onclick={() => (modalOpen = false)} type="button">Cancel</button>
    <button class="btn btn-primary" onclick={handleSave} disabled={saving} type="button">
      {#if saving}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {saving ? 'Saving...' : 'Save'}
    </button>
  {/snippet}
</Modal>
