<script>
  import { onMount } from 'svelte';
  import Modal from '$lib/components/Modal.svelte';
  import { ORDER_STATUS, ORDER_PRIORITY } from '$lib/api/orders.js';
  import { fetchPatients } from '$lib/api/patients.js';
  import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
  import { User, FlaskConical, Building2, Hash, FileText, AlertCircle, Plus, X, Search, Beaker } from 'lucide-svelte';

  /** @type {{ 
   *   open: boolean,
   *   order: Object | null,
   *   loading: boolean,
   *   onSave: () => void,
   *   onCancel: () => void
   * }} */
  let { 
    open = $bindable(false),
    order = null,
    loading = false,
    onSave,
    onCancel
  } = $props();

  // Form state
  let formData = $state({
    OrderID: '',
    InternalPID: '',
    PatVisitID: '',
    SiteID: 1,
    PlacerID: '',
    Priority: 'R',
    ReqApp: '',
    Comment: '',
    Tests: []
  });

  let formLoading = $state(false);
  let formError = $state('');
  let patientSearchQuery = $state('');
  let patientSearchResults = $state([]);
  let showPatientSearch = $state(false);
  let selectedPatient = $state(null);
  let testInput = $state({ TestSiteID: '' });

  // Reset form when modal opens
  $effect(() => {
    if (open) {
      if (order) {
        // Edit mode - populate form
        formData = {
          OrderID: order.OrderID || '',
          InternalPID: order.InternalPID || '',
          PatVisitID: order.PatVisitID || '',
          SiteID: order.SiteID || 1,
          PlacerID: order.PlacerID || '',
          Priority: order.Priority || 'R',
          ReqApp: order.ReqApp || '',
          Comment: order.Comment || '',
          Tests: order.Tests ? [...order.Tests] : []
        };
        selectedPatient = {
          InternalPID: order.InternalPID,
          PatientID: order.PatientID,
          FullName: order.PatientName
        };
      } else {
        // Create mode - reset form
        formData = {
          OrderID: '',
          InternalPID: '',
          PatVisitID: '',
          SiteID: 1,
          PlacerID: '',
          Priority: 'R',
          ReqApp: '',
          Comment: '',
          Tests: []
        };
        selectedPatient = null;
        patientSearchQuery = '';
        patientSearchResults = [];
      }
      formError = '';
      showPatientSearch = false;
    }
  });

  async function searchPatients() {
    if (!patientSearchQuery.trim()) return;
    
    formLoading = true;
    try {
      const response = await fetchPatients({ 
        Name: patientSearchQuery.trim(),
        perPage: 10 
      });
      patientSearchResults = response.data || [];
      showPatientSearch = true;
    } catch (err) {
      toastError('Failed to search patients');
      patientSearchResults = [];
    } finally {
      formLoading = false;
    }
  }

  function selectPatient(patient) {
    selectedPatient = patient;
    formData.InternalPID = patient.InternalPID;
    showPatientSearch = false;
    patientSearchQuery = '';
    patientSearchResults = [];
  }

  function addTest() {
    const testSiteId = parseInt(testInput.TestSiteID);
    if (!testSiteId || isNaN(testSiteId)) {
      formError = 'Please enter a valid Test Site ID';
      return;
    }
    
    // Check for duplicates
    if (formData.Tests.some(t => t.TestSiteID === testSiteId)) {
      formError = 'Test already added';
      return;
    }
    
    formData.Tests = [...formData.Tests, { TestSiteID: testSiteId }];
    testInput.TestSiteID = '';
    formError = '';
  }

  function removeTest(index) {
    formData.Tests = formData.Tests.filter((_, i) => i !== index);
  }

  function validateForm() {
    formError = '';
    
    if (!formData.InternalPID) {
      formError = 'Please select a patient';
      return false;
    }
    
    if (formData.Tests.length === 0) {
      formError = 'Please add at least one test';
      return false;
    }
    
    return true;
  }

  async function handleSubmit() {
    if (!validateForm()) return;
    
    formLoading = true;
    try {
      // Prepare data for API
      const submitData = {
        ...formData,
        InternalPID: parseInt(formData.InternalPID),
        SiteID: parseInt(formData.SiteID) || 1
      };
      
      if (formData.PatVisitID) {
        submitData.PatVisitID = parseInt(formData.PatVisitID);
      }
      
      onSave(submitData);
    } catch (err) {
      formError = err.message || 'Failed to save order';
    } finally {
      formLoading = false;
    }
  }

  function handleClose() {
    onCancel();
  }

  const priorityOptions = Object.values(ORDER_PRIORITY);
</script>

<Modal 
  bind:open 
  title={order ? 'Edit Order' : 'Create Order'} 
  size="xl"
  onClose={handleClose}
>
  <div class="space-y-4">
    <!-- Error Alert -->
    {#if formError}
      <div class="alert alert-error alert-sm">
        <AlertCircle class="w-4 h-4" />
        <span class="text-sm">{formError}</span>
      </div>
    {/if}

    <!-- Two Column Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      
      <!-- LEFT COLUMN: Order Information -->
      <div class="space-y-4">
        
        <!-- Patient Card -->
        <div class="bg-base-200 rounded-lg p-4">
          <h4 class="text-sm font-semibold mb-3 flex items-center gap-2 text-gray-700">
            <User class="w-4 h-4" />
            Patient <span class="text-error">*</span>
          </h4>
          
          {#if selectedPatient}
            <div class="bg-base-100 rounded-lg p-3 border border-base-300">
              <div class="flex items-center justify-between">
                <div>
                  <p class="font-semibold text-sm">{selectedPatient.FullName || selectedPatient.PatientID}</p>
                  <p class="text-xs text-gray-500">ID: {selectedPatient.PatientID}</p>
                  <p class="text-xs text-gray-500">Internal PID: {selectedPatient.InternalPID}</p>
                </div>
                {#if !order}
                  <button 
                    class="btn btn-ghost btn-xs btn-square"
                    onclick={() => { selectedPatient = null; formData.InternalPID = ''; }}
                  >
                    <X class="w-4 h-4" />
                  </button>
                {/if}
              </div>
            </div>
          {:else}
            <div class="space-y-2">
              <div class="flex gap-2">
                <div class="input input-sm input-bordered flex items-center gap-2 flex-1 focus-within:input-primary">
                  <Search class="w-4 h-4 text-gray-400" />
                  <input
                    type="text"
                    class="grow bg-transparent outline-none"
                    placeholder="Search patient by name..."
                    bind:value={patientSearchQuery}
                    onkeydown={(e) => e.key === 'Enter' && searchPatients()}
                  />
                </div>
                <button 
                  class="btn btn-primary btn-sm"
                  onclick={searchPatients}
                  disabled={formLoading || !patientSearchQuery.trim()}
                >
                  {#if formLoading}
                    <span class="loading loading-spinner loading-sm"></span>
                  {:else}
                    <Search class="w-4 h-4" />
                  {/if}
                </button>
              </div>
              
              {#if showPatientSearch && patientSearchResults.length > 0}
                <div class="border border-base-300 rounded-lg max-h-40 overflow-auto bg-base-100">
                  {#each patientSearchResults as patient (patient.InternalPID)}
                    <button
                      class="w-full text-left p-2 hover:bg-base-200 border-b border-base-200 last:border-b-0"
                      onclick={() => selectPatient(patient)}
                    >
                      <p class="text-sm font-medium">{patient.FullName || patient.PatientID}</p>
                      <p class="text-xs text-gray-500">ID: {patient.PatientID}</p>
                    </button>
                  {/each}
                </div>
              {:else if showPatientSearch}
                <p class="text-sm text-gray-500">No patients found</p>
              {/if}
            </div>
          {/if}
        </div>

        <!-- Order Details Card -->
        <div class="bg-base-200 rounded-lg p-4">
          <h4 class="text-sm font-semibold mb-3 flex items-center gap-2 text-gray-700">
            <FileText class="w-4 h-4" />
            Order Details
          </h4>
          
          <div class="space-y-3">
            <!-- Priority & Site ID -->
            <div class="grid grid-cols-2 gap-3">
              <div class="form-control">
                <label class="label py-0.5" for="orderPriority">
                  <span class="label-text text-xs text-gray-500">Priority</span>
                </label>
                <select
                  id="orderPriority"
                  class="select select-sm select-bordered w-full focus:select-primary"
                  bind:value={formData.Priority}
                >
                  {#each priorityOptions as priority (priority.code)}
                    <option value={priority.code}>{priority.label}</option>
                  {/each}
                </select>
              </div>

              <div class="form-control">
                <label class="label py-0.5" for="orderSiteId">
                  <span class="label-text text-xs text-gray-500">Site ID</span>
                </label>
                <input
                  id="orderSiteId"
                  type="number"
                  class="input input-sm input-bordered w-full focus:input-primary"
                  bind:value={formData.SiteID}
                />
              </div>
            </div>

            <!-- Visit ID & Placer ID -->
            <div class="grid grid-cols-2 gap-3">
              <div class="form-control">
                <label class="label py-0.5" for="orderVisitId">
                  <span class="label-text text-xs text-gray-500">Visit ID</span>
                </label>
                <div class="input input-sm input-bordered flex items-center gap-2 focus-within:input-primary">
                  <Hash class="w-3.5 h-3.5 text-gray-400" />
                  <input
                    id="orderVisitId"
                    type="number"
                    class="grow bg-transparent outline-none"
                    bind:value={formData.PatVisitID}
                    placeholder="Optional"
                  />
                </div>
              </div>

              <div class="form-control">
                <label class="label py-0.5" for="orderPlacerId">
                  <span class="label-text text-xs text-gray-500">Placer ID</span>
                </label>
                <input
                  id="orderPlacerId"
                  type="text"
                  class="input input-sm input-bordered w-full focus:input-primary"
                  bind:value={formData.PlacerID}
                  placeholder="Optional"
                />
              </div>
            </div>

            <!-- Requesting App -->
            <div class="form-control">
              <label class="label py-0.5" for="orderReqApp">
                <span class="label-text text-xs text-gray-500">Requesting Application</span>
              </label>
              <div class="input input-sm input-bordered flex items-center gap-2 focus-within:input-primary">
                <Building2 class="w-3.5 h-3.5 text-gray-400" />
                <input
                  id="orderReqApp"
                  type="text"
                  class="grow bg-transparent outline-none"
                  bind:value={formData.ReqApp}
                  placeholder="Optional"
                />
              </div>
            </div>

            <!-- Comment -->
            <div class="form-control">
              <label class="label py-0.5" for="orderComment">
                <span class="label-text text-xs text-gray-500">Comment</span>
              </label>
              <textarea
                id="orderComment"
                class="textarea textarea-bordered textarea-sm w-full focus:textarea-primary"
                bind:value={formData.Comment}
                rows="2"
                placeholder="Optional comments..."
              ></textarea>
            </div>
          </div>
        </div>
      </div>

      <!-- RIGHT COLUMN: Tests -->
      <div class="bg-base-200 rounded-lg p-4 flex flex-col">
        <h4 class="text-sm font-semibold mb-3 flex items-center gap-2 text-gray-700">
          <Beaker class="w-4 h-4" />
          Tests <span class="text-error">*</span>
          {#if formData.Tests.length > 0}
            <span class="badge badge-sm badge-primary ml-auto">{formData.Tests.length}</span>
          {/if}
        </h4>
        
        <!-- Add Test Input -->
        <div class="flex gap-2 mb-3">
          <div class="input input-sm input-bordered flex items-center gap-2 flex-1 bg-base-100 focus-within:input-primary">
            <FlaskConical class="w-4 h-4 text-gray-400" />
            <input
              type="number"
              class="grow bg-transparent outline-none"
              placeholder="Enter Test Site ID"
              bind:value={testInput.TestSiteID}
              onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), addTest())}
            />
          </div>
          <button 
            class="btn btn-primary btn-sm"
            onclick={addTest}
          >
            <Plus class="w-4 h-4" />
          </button>
        </div>

        <!-- Tests List -->
        <div class="flex-1 min-h-[200px] max-h-[400px] overflow-auto">
          {#if formData.Tests.length > 0}
            <div class="space-y-2">
              {#each formData.Tests as test, index (test.TestSiteID)}
                <div class="flex items-center justify-between p-3 bg-base-100 rounded-lg border border-base-300">
                  <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                      <span class="text-xs font-semibold text-primary">{index + 1}</span>
                    </div>
                    <div>
                      <p class="font-medium text-sm">Test Site ID</p>
                      <p class="text-lg font-bold text-primary">{test.TestSiteID}</p>
                    </div>
                  </div>
                  <button 
                    class="btn btn-ghost btn-sm btn-square text-error hover:bg-error/10"
                    onclick={() => removeTest(index)}
                  >
                    <X class="w-4 h-4" />
                  </button>
                </div>
              {/each}
            </div>
          {:else}
            <div class="flex flex-col items-center justify-center h-full text-gray-400 py-8">
              <Beaker class="w-12 h-12 mb-2 opacity-50" />
              <p class="text-sm">No tests added yet</p>
              <p class="text-xs mt-1">Enter a Test Site ID and click Add</p>
            </div>
          {/if}
        </div>
      </div>
    </div>
  </div>

  {#snippet footer()}
    <button 
      class="btn btn-ghost btn-sm" 
      onclick={handleClose}
      disabled={formLoading}
    >
      Cancel
    </button>
    <button 
      class="btn btn-primary btn-sm" 
      onclick={handleSubmit}
      disabled={formLoading || !selectedPatient}
    >
      {#if formLoading}
        <span class="loading loading-spinner loading-sm mr-1"></span>
      {/if}
      {order ? 'Update Order' : 'Create Order'}
    </button>
  {/snippet}
</Modal>
