<script>
  import { Plus, Trash2, Hash, Edit2, X, ChevronDown, ChevronUp } from 'lucide-svelte';
  import { valueSets } from '$lib/stores/valuesets.js';
  import { onMount } from 'svelte';

  let { formData = $bindable(), isDirty = $bindable(false) } = $props();

  let isEditing = $state(false);
  let editingIndex = $state(null);
  let validationError = $state('');
  let showAdvanced = $state(false);
  let specimenTypes = $state([]);

  let thresholdData = $state({
    NumRefType: 'REF',
    Low: '',
    High: '',
    Sex: '0',
    AgeStart: '',
    AgeEnd: '',
    AgeUnit: 'years',
    LowSign: 'GE',
    HighSign: 'LE',
    SpcType: '',
    Display: 0,
    Flag: '',
    Interpretation: '',
    Notes: ''
  });

  const numRefTypeOptions = [
    { value: 'REF', label: 'Reference' },
    { value: 'CRTC', label: 'Critical' },
    { value: 'VAL', label: 'Validation' },
    { value: 'RERUN', label: 'Rerun' }
  ];

  const sexOptions = [
    { value: '0', label: 'All' },
    { value: '1', label: 'Female' },
    { value: '2', label: 'Male' }
  ];

  const signOptions = [
    { value: 'EQ', label: '=' },
    { value: 'LT', label: '<' },
    { value: 'LE', label: '≤' },
    { value: 'GT', label: '>' },
    { value: 'GE', label: '≥' }
  ];

  const ageUnits = [
    { value: 'days', label: 'Days' },
    { value: 'weeks', label: 'Weeks' },
    { value: 'months', label: 'Months' },
    { value: 'years', label: 'Years' }
  ];

  onMount(async () => {
    try {
      const items = await valueSets.load('specimen_type');
      specimenTypes = items.map(item => ({
        value: item.value || '',
        label: item.label || ''
      }));
    } catch (err) {
      console.error('Failed to load specimen types:', err);
    }
  });

  function handleFieldChange() {
    isDirty = true;
    validationError = '';
  }

  function convertAgeToDays(value, unit) {
    if (!value && value !== 0) return null;
    const num = parseInt(value);
    switch (unit) {
      case 'days': return num;
      case 'weeks': return num * 7;
      case 'months': return num * 30;
      case 'years': return num * 365;
      default: return num;
    }
  }

  function convertDaysToUnit(days, unit) {
    if (days === null || days === undefined) return '';
    switch (unit) {
      case 'days': return days;
      case 'weeks': return Math.floor(days / 7);
      case 'months': return Math.floor(days / 30);
      case 'years': return Math.floor(days / 365);
      default: return days;
    }
  }

  function resetForm() {
    thresholdData = {
      NumRefType: 'REF',
      Low: '',
      High: '',
      Sex: '0',
      AgeStart: '',
      AgeEnd: '',
      AgeUnit: 'years',
      LowSign: 'GE',
      HighSign: 'LE',
      SpcType: '',
      Display: 0,
      Flag: '',
      Interpretation: '',
      Notes: ''
    };
    validationError = '';
    isEditing = false;
    editingIndex = null;
    showAdvanced = false;
  }

  function validateThreshold() {
    if (!thresholdData.Low && !thresholdData.High) {
      return { valid: false, error: 'Please enter at least one threshold value' };
    }

    const low = thresholdData.Low !== '' ? parseFloat(thresholdData.Low) : null;
    const high = thresholdData.High !== '' ? parseFloat(thresholdData.High) : null;

    if (low !== null && high !== null && low >= high) {
      return { valid: false, error: 'Low threshold must be less than high threshold' };
    }

    if (thresholdData.AgeStart !== '' || thresholdData.AgeEnd !== '') {
      const ageStart = thresholdData.AgeStart !== '' ? parseInt(thresholdData.AgeStart) : null;
      const ageEnd = thresholdData.AgeEnd !== '' ? parseInt(thresholdData.AgeEnd) : null;

      if (ageStart !== null && ageEnd !== null && ageStart >= ageEnd) {
        return { valid: false, error: 'Age start must be less than age end' };
      }
    }

    return { valid: true };
  }

  function saveThreshold() {
    const validation = validateThreshold();
    if (!validation.valid) {
      validationError = validation.error;
      return;
    }

    const newRef = {
      NumRefType: thresholdData.NumRefType,
      RangeType: 'THOLD',
      Sex: thresholdData.Sex,
      AgeStart: convertAgeToDays(thresholdData.AgeStart, thresholdData.AgeUnit) || 0,
      AgeEnd: convertAgeToDays(thresholdData.AgeEnd, thresholdData.AgeUnit) || 54750,
      Low: thresholdData.Low !== '' ? parseFloat(thresholdData.Low) : null,
      High: thresholdData.High !== '' ? parseFloat(thresholdData.High) : null,
      LowSign: thresholdData.LowSign,
      HighSign: thresholdData.HighSign,
      SpcType: thresholdData.SpcType || null,
      Display: thresholdData.Display,
      Flag: thresholdData.Flag || null,
      Interpretation: thresholdData.Interpretation || null,
      Notes: thresholdData.Notes || null
    };

    if (isEditing && editingIndex !== null) {
      const updated = formData.refnum?.map((r, i) => i === editingIndex ? newRef : r) || [];
      formData.refnum = updated;
    } else {
      formData.refnum = [...(formData.refnum || []), newRef];
    }

    resetForm();
    handleFieldChange();
  }

  function editThreshold(index) {
    const ref = formData.refnum[index];
    thresholdData = {
      NumRefType: ref.NumRefType || 'REF',
      Low: ref.Low !== null ? String(ref.Low) : '',
      High: ref.High !== null ? String(ref.High) : '',
      Sex: ref.Sex || '0',
      AgeStart: convertDaysToUnit(ref.AgeStart, 'years'),
      AgeEnd: convertDaysToUnit(ref.AgeEnd, 'years'),
      AgeUnit: 'years',
      LowSign: ref.LowSign || 'GE',
      HighSign: ref.HighSign || 'LE',
      SpcType: ref.SpcType || '',
      Display: ref.Display === 1 || ref.Display === '1' || ref.Display === true ? 1 : 0,
      Flag: ref.Flag || '',
      Interpretation: ref.Interpretation || '',
      Notes: ref.Notes || ''
    };
    isEditing = true;
    editingIndex = index;
    validationError = '';
    showAdvanced = true;
  }

  function removeThreshold(index) {
    const newThresholds = formData.refnum?.filter((_, i) => i !== index) || [];
    formData.refnum = newThresholds;
    if (isEditing && editingIndex === index) {
      resetForm();
    } else if (isEditing && editingIndex > index) {
      editingIndex--;
    }
    handleFieldChange();
  }

  function getSexLabel(sex) {
    return sexOptions.find(s => s.value === sex)?.label || sex;
  }

  function getNumRefTypeLabel(numRefType) {
    return numRefTypeOptions.find(opt => opt.value === numRefType)?.label || numRefType;
  }

  function getSignLabel(sign) {
    return signOptions.find(s => s.value === sign)?.label || sign;
  }

  function getAgeDisplay(ageDays) {
    if (ageDays === null || ageDays === undefined) return '';
    if (ageDays < 30) return `${ageDays}d`;
    if (ageDays < 365) return `${Math.floor(ageDays / 30)}mo`;
    return `${Math.floor(ageDays / 365)}y`;
  }

  function getAgeUnitSuffix() {
    const unit = thresholdData.AgeUnit;
    if (unit === 'days') return 'D';
    if (unit === 'weeks') return 'W';
    if (unit === 'months') return 'M';
    if (unit === 'years') return 'Y';
    return 'Y';
  }

  function getDisplayLabel(value) {
    return value === 1 || value === '1' || value === true ? 'Y' : 'N';
  }

  export function validateAll() {
    const seen = new Set();
    for (const range of formData.refnum || []) {
      const key = `${range.NumRefType}-${range.Sex}-${range.AgeStart}-${range.AgeEnd}`;
      if (seen.has(key)) {
        return false;
      }
      seen.add(key);
    }
    return true;
  }
</script>

<div class="space-y-5">
  <h2 class="text-lg font-semibold text-gray-800">Threshold References</h2>

  <!-- Form Section -->
  <div class="bg-base-100 border border-base-300 rounded-lg p-3">
    {#if validationError}
      <div class="alert alert-error alert-sm mb-2">
        <span>{validationError}</span>
      </div>
    {/if}

    <!-- Main Fields -->
    <div class="grid grid-cols-[0.9fr_0.8fr_0.9fr_0.9fr_0.6fr_0.9fr_0.9fr_auto] gap-2 items-end">
      <!-- NumRefType -->
      <div class="flex flex-col">
        <label class="text-xs text-gray-600 mb-0.5">Type</label>
        <select class="select select-sm select-bordered w-full" bind:value={thresholdData.NumRefType}>
          {#each numRefTypeOptions as opt (opt.value)}
            <option value={opt.value}>{opt.label}</option>
          {/each}
        </select>
      </div>

      <!-- Sex -->
      <div class="flex flex-col">
        <label class="text-xs text-gray-600 mb-0.5">Sex</label>
        <select class="select select-sm select-bordered w-full" bind:value={thresholdData.Sex}>
          {#each sexOptions as opt (opt.value)}
            <option value={opt.value}>{opt.label}</option>
          {/each}
        </select>
      </div>

      <!-- Age From with Suffix -->
      <div class="flex flex-col">
        <label class="text-xs text-gray-600 mb-0.5">From</label>
        <label class="input input-sm input-bordered flex items-center gap-1 w-full">
          <input
            type="number"
            class="grow bg-transparent outline-none"
            bind:value={thresholdData.AgeStart}
            min="0"
            placeholder="0"
          />
          <span class="text-xs text-gray-500">{getAgeUnitSuffix()}</span>
        </label>
      </div>

      <!-- Age To with Suffix -->
      <div class="flex flex-col">
        <label class="text-xs text-gray-600 mb-0.5">To</label>
        <label class="input input-sm input-bordered flex items-center gap-1 w-full">
          <input
            type="number"
            class="grow bg-transparent outline-none"
            bind:value={thresholdData.AgeEnd}
            min="0"
            placeholder="150"
          />
          <span class="text-xs text-gray-500">{getAgeUnitSuffix()}</span>
        </label>
      </div>

      <!-- Age Unit -->
      <div class="flex flex-col">
        <label class="text-xs text-gray-600 mb-0.5">Unit</label>
        <select class="select select-sm select-bordered w-full" bind:value={thresholdData.AgeUnit}>
          {#each ageUnits as opt (opt.value)}
            <option value={opt.value}>{opt.label}</option>
          {/each}
        </select>
      </div>

      <!-- Low Value with Sign -->
      <div class="flex flex-col">
        <label class="text-xs text-gray-600 mb-0.5">Low</label>
        <div class="flex gap-1">
          <select class="select select-sm select-bordered w-12" bind:value={thresholdData.LowSign}>
            {#each signOptions as opt (opt.value)}
              <option value={opt.value}>{opt.label}</option>
            {/each}
          </select>
          <input
            type="number"
            step="0.01"
            class="input input-sm input-bordered flex-1"
            bind:value={thresholdData.Low}
          />
        </div>
      </div>

      <!-- High Value with Sign -->
      <div class="flex flex-col">
        <label class="text-xs text-gray-600 mb-0.5">High</label>
        <div class="flex gap-1">
          <select class="select select-sm select-bordered w-12" bind:value={thresholdData.HighSign}>
            {#each signOptions as opt (opt.value)}
              <option value={opt.value}>{opt.label}</option>
            {/each}
          </select>
          <input
            type="number"
            step="0.01"
            class="input input-sm input-bordered flex-1"
            bind:value={thresholdData.High}
          />
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="flex items-end justify-center">
        <div class="flex gap-1">
          {#if isEditing}
            <button class="btn btn-sm btn-ghost" onclick={resetForm}>
              <X class="w-4 h-4" />
            </button>
          {/if}
          <button class="btn btn-sm btn-primary" onclick={saveThreshold}>
            <Plus class="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>

    <!-- Toggle Advanced -->
    <div class="mt-2 pt-2 border-t border-base-200">
      <button 
        class="btn btn-xs btn-ghost text-gray-500 flex items-center gap-1" 
        onclick={() => showAdvanced = !showAdvanced}
      >
        {#if showAdvanced}
          <ChevronUp class="w-3 h-3" />
          <span>Hide Advanced</span>
        {:else}
          <ChevronDown class="w-3 h-3" />
          <span>Show Advanced</span>
        {/if}
      </button>
    </div>

    <!-- Advanced Fields (Hidden by default) -->
    {#if showAdvanced}
      <div class="mt-3 pt-3 border-t border-base-200 space-y-2">
        <!-- Row 1: Specimen, Flag, Display, Interpretation -->
        <div class="grid grid-cols-4 gap-2">
          <!-- SpcType -->
          <div class="flex flex-col">
            <label class="text-xs text-gray-600 mb-0.5">Specimen</label>
            <select class="select select-sm select-bordered w-full" bind:value={thresholdData.SpcType}>
              <option value="">Select...</option>
              {#each specimenTypes as opt (opt.value)}
                <option value={opt.value}>{opt.label}</option>
              {/each}
            </select>
          </div>

          <!-- Flag -->
          <div class="flex flex-col">
            <label class="text-xs text-gray-600 mb-0.5">Flag</label>
            <input
              type="text"
              class="input input-sm input-bordered w-full"
              bind:value={thresholdData.Flag}
              placeholder="H, L, N"
              maxlength="10"
            />
          </div>

          <!-- Display (Y/N Select) -->
          <div class="flex flex-col">
            <label class="text-xs text-gray-600 mb-0.5">Display</label>
            <select class="select select-sm select-bordered w-full" bind:value={thresholdData.Display}>
              <option value={1}>Y</option>
              <option value={0}>N</option>
            </select>
          </div>

          <!-- Interpretation -->
          <div class="flex flex-col">
            <label class="text-xs text-gray-600 mb-0.5">Interpretation</label>
            <input
              type="text"
              class="input input-sm input-bordered w-full"
              bind:value={thresholdData.Interpretation}
              placeholder="Interpretation..."
            />
          </div>
        </div>

        <!-- Row 2: Notes -->
        <div>
          <label class="text-xs text-gray-600 mb-0.5">Notes</label>
          <textarea
            class="textarea textarea-sm textarea-bordered w-full"
            bind:value={thresholdData.Notes}
            placeholder="Additional notes..."
            rows="2"
          ></textarea>
        </div>
      </div>
    {/if}
  </div>

  <!-- List Section - Bottom -->
  <div class="space-y-3">
    <h3 class="text-sm font-medium text-gray-600 uppercase tracking-wide">
      Current Thresholds ({formData.refnum?.length || 0})
    </h3>
    
    {#if !formData.refnum || formData.refnum.length === 0}
      <div class="text-center py-8 bg-base-200 rounded-lg">
        <Hash class="w-12 h-12 mx-auto text-gray-400 mb-2" />
        <p class="text-sm text-gray-500">No threshold references defined</p>
        <p class="text-xs text-gray-400">Add threshold references using the form above</p>
      </div>
    {:else}
      <div class="overflow-x-auto border border-base-200 rounded-lg">
        <table class="table table-sm table-compact">
          <thead>
            <tr class="bg-base-200">
              <th class="w-16">Type</th>
              <th class="w-24">Threshold</th>
              <th class="w-16">Sex</th>
              <th class="w-24">Age</th>
              <th class="w-20">Specimen</th>
              <th class="w-16">Flag</th>
              <th class="w-12">Disp</th>
              <th class="w-24 text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            {#each formData.refnum as ref, idx (idx)}
              <tr class="hover:bg-base-100">
                <td class="text-xs">{getNumRefTypeLabel(ref.NumRefType)}</td>
                <td class="font-mono text-sm">
                  {#if ref.LowSign}
                    {getSignLabel(ref.LowSign)} 
                  {/if}
                  {ref.Low !== null && ref.Low !== '' ? ref.Low : '—'} 
                  - 
                  {#if ref.HighSign}
                    {getSignLabel(ref.HighSign)} 
                  {/if}
                  {ref.High !== null && ref.High !== '' ? ref.High : '—'}
                </td>
                <td>{getSexLabel(ref.Sex)}</td>
                <td class="text-sm">{getAgeDisplay(ref.AgeStart)}-{getAgeDisplay(ref.AgeEnd)}</td>
                <td class="text-sm">{ref.SpcType || '—'}</td>
                <td class="text-sm">{ref.Flag || '—'}</td>
                <td class="text-sm">{getDisplayLabel(ref.Display)}</td>
                <td>
                  <div class="flex justify-center gap-1">
                    <button
                      class="btn btn-ghost btn-xs"
                      onclick={() => editThreshold(idx)}
                      title="Edit Threshold"
                    >
                      <Edit2 class="w-3 h-3" />
                    </button>
                    <button
                      class="btn btn-ghost btn-xs text-error"
                      onclick={() => removeThreshold(idx)}
                      title="Remove Threshold"
                    >
                      <Trash2 class="w-3 h-3" />
                    </button>
                  </div>
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      </div>
    {/if}
  </div>
</div>
