<script>
  import { PlusCircle, Calculator, X, ChevronDown, ChevronUp, Beaker } from 'lucide-svelte';
  import { refTypeOptions, createNumRef } from '../referenceRange.js';
  import { fetchValueSetByKey } from '$lib/api/valuesets.js';
  import { onMount } from 'svelte';

  /**
   * @typedef {Object} Props
   * @property {Array} refnum - Numeric reference ranges array
   * @property {(refnum: Array) => void} onupdateRefnum - Update handler
   */

  /** @type {Props} */
  let {
    refnum = [],
    onupdateRefnum = () => {}
  } = $props();

  let showAdvanced = $state({});
  let specimenTypeOptions = $state([]);

  onMount(async () => {
    try {
      const response = await fetchValueSetByKey('specimen_type');
      specimenTypeOptions = response.data?.items?.map(item => ({
        value: item.itemCode,
        label: item.itemValue
      })) || [];
    } catch (err) {
      console.error('Failed to load specimen types:', err);
    }
  });

  function addRefRange() {
    const newRef = createNumRef();
    newRef.Sex = '0';
    newRef.Flag = 'N';
    onupdateRefnum([...refnum, newRef]);
  }

  function removeRefRange(index) {
    onupdateRefnum(refnum.filter((_, i) => i !== index));
    delete showAdvanced[index];
  }

  function toggleAdvanced(index) {
    showAdvanced[index] = !showAdvanced[index];
  }

  function hasAdvancedData(ref) {
    return ref.Interpretation || ref.SpcType || ref.Criteria || 
           ref.Sex !== '0' || ref.Flag !== 'N' ||
           (ref.AgeStart !== 0 || ref.AgeEnd !== 120);
  }
</script>

<div class="space-y-2">
  <!-- Header -->
  <div class="flex justify-between items-center">
    <div class="flex items-center gap-2">
      <Calculator class="w-5 h-5 text-primary" />
      <h3 class="font-semibold">Numeric Reference Ranges</h3>
      {#if refnum?.length > 0}
        <span class="badge badge-sm badge-ghost">{refnum.length}</span>
      {/if}
    </div>
    <button type="button" class="btn btn-sm btn-primary" onclick={addRefRange}>
      <PlusCircle class="w-4 h-4 mr-1" />
      Add Range
    </button>
  </div>

  <!-- Empty State -->
  {#if refnum?.length === 0}
    <div class="text-center py-8 bg-base-200 rounded-lg border-2 border-dashed border-base-300">
      <Calculator class="w-12 h-12 mx-auto text-gray-400 mb-2" />
      <p class="text-gray-500">No numeric ranges defined</p>
      <button type="button" class="btn btn-sm btn-outline mt-2" onclick={addRefRange}>
        <PlusCircle class="w-4 h-4 mr-1" />
        Add First Range
      </button>
    </div>
  {/if}

  <!-- Range List - Table-like rows -->
  {#if refnum?.length > 0}
    <div class="border border-base-300 rounded-lg overflow-hidden">
      <!-- Table Header -->
      <div class="bg-base-200 px-4 py-3 grid grid-cols-12 gap-3 text-xs font-medium text-gray-600 border-b border-base-300">
        <div class="col-span-1">#</div>
        <div class="col-span-3">Type</div>
        <div class="col-span-3">Low</div>
        <div class="col-span-3">High</div>
        <div class="col-span-2"></div>
      </div>

      <!-- Table Rows -->
      {#each refnum || [] as ref, index (index)}
        <div class="border-b border-base-200 last:border-b-0">
          <!-- Main Row -->
          <div class="px-4 py-3 grid grid-cols-12 gap-3 items-center hover:bg-base-100">
            <!-- Row Number -->
            <div class="col-span-1 flex items-center gap-1">
              <span class="text-xs text-gray-500">{index + 1}</span>
            </div>

            <!-- Type Dropdown -->
            <div class="col-span-3">
              <select class="select select-sm select-bordered w-full" bind:value={ref.RefType}>
                {#each refTypeOptions as option (option.value)}
                  <option value={option.value}>{option.label}</option>
                {/each}
              </select>
            </div>

            <!-- Low Input -->
            <div class="col-span-3">
              <input 
                type="number" 
                step="0.01" 
                class="input input-sm input-bordered w-full text-right" 
                bind:value={ref.Low}
                placeholder="-"
              />
            </div>

            <!-- High Input -->
            <div class="col-span-3">
              <input 
                type="number" 
                step="0.01" 
                class="input input-sm input-bordered w-full text-right" 
                bind:value={ref.High}
                placeholder="-"
              />
            </div>

            <!-- More & Delete Buttons -->
            <div class="col-span-2 flex items-center justify-end gap-1">
              <button 
                type="button" 
                class="btn btn-xs btn-ghost btn-square relative"
                onclick={() => toggleAdvanced(index)}
                title={showAdvanced[index] ? 'Hide details' : 'Show details'}
              >
                {#if hasAdvancedData(ref)}
                  <span class="badge badge-xs badge-primary absolute -top-1 -right-1 w-2 h-2 p-0 min-w-0"></span>
                {/if}
                {#if showAdvanced[index]}
                  <ChevronUp class="w-4 h-4" />
                {:else}
                  <ChevronDown class="w-4 h-4" />
                {/if}
              </button>
              <button 
                type="button" 
                class="btn btn-xs btn-ghost text-error btn-square" 
                onclick={() => removeRefRange(index)}
                title="Remove"
              >
                <X class="w-4 h-4" />
              </button>
            </div>
          </div>

          <!-- Advanced Section (Expanded) -->
          {#if showAdvanced[index]}
            <div class="px-4 pb-4 pt-2 bg-base-100/50 border-t border-base-200">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Sex -->
                <div class="form-control">
                  <span class="label-text text-xs text-gray-500">Sex</span>
                  <select class="select select-sm select-bordered w-full" bind:value={ref.Sex}>
                    <option value="0">Any</option>
                    <option value="1">Female</option>
                    <option value="2">Male</option>
                  </select>
                </div>

                <!-- Age Range -->
                <div class="form-control">
                  <span class="label-text text-xs text-gray-500">Age Range</span>
                  <div class="flex items-center gap-2">
                    <input 
                      type="number" 
                      min="0" 
                      max="120" 
                      class="input input-sm input-bordered w-20 text-right" 
                      bind:value={ref.AgeStart}
                    />
                    <span class="text-gray-400">to</span>
                    <input 
                      type="number" 
                      min="0" 
                      max="120" 
                      class="input input-sm input-bordered w-20 text-right" 
                      bind:value={ref.AgeEnd}
                    />
                    <span class="text-xs text-gray-400">years</span>
                  </div>
                </div>

                <!-- Specimen -->
                <div class="form-control md:col-span-2">
                  <span class="label-text text-xs text-gray-500 flex items-center gap-1">
                    <Beaker class="w-3 h-3" />
                    Specimen Type
                  </span>
                  <select class="select select-sm select-bordered w-full" bind:value={ref.SpcType}>
                    <option value="">Any specimen</option>
                    {#each specimenTypeOptions as option (option.value)}
                      <option value={option.value}>{option.label}</option>
                    {/each}
                  </select>
                </div>

                <!-- Interpretation -->
                <div class="form-control md:col-span-2">
                  <span class="label-text text-xs text-gray-500">Interpretation</span>
                  <input 
                    type="text" 
                    class="input input-sm input-bordered w-full" 
                    bind:value={ref.Interpretation}
                    placeholder="e.g., Normal fasting glucose range"
                  />
                </div>

                <!-- Criteria -->
                <div class="form-control md:col-span-2">
                  <span class="label-text text-xs text-gray-500">Criteria</span>
                  <input 
                    type="text" 
                    class="input input-sm input-bordered w-full" 
                    bind:value={ref.Criteria}
                    placeholder="e.g., Fasting, Morning sample"
                  />
                </div>
              </div>
            </div>
          {/if}
        </div>
      {/each}
    </div>
  {/if}
</div>
