<script>
  import Modal from '$lib/components/Modal.svelte';

  let {
    open = $bindable(false),
    mode = 'create',
    formData = $bindable({
      EID: null,
      IEID: '',
      InstrumentID: '',
      InstrumentName: '',
      DepartmentID: null,
      WorkstationID: null,
      Enable: 1,
      EquipmentRole: '',
    }),
    departments = [],
    saving = false,
    onSave,
    onCancel,
  } = $props();

  function handleSubmit(e) {
    e.preventDefault();
    onSave?.();
  }

  function handleCancel() {
    onCancel?.();
  }
</script>

<Modal bind:open title={mode === 'create' ? 'Add Equipment' : 'Edit Equipment'} size="lg">
  <form class="space-y-4" onsubmit={handleSubmit}>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label" for="ieid">
          <span class="label-text text-sm font-medium">IEID</span>
          <span class="label-text-alt text-xs text-error">*</span>
        </label>
        <input
          id="ieid"
          type="text"
          class="input input-sm input-bordered w-full"
          bind:value={formData.IEID}
          placeholder="e.g., EQUIP001"
          required
        />
        <span class="label-text-alt text-xs text-gray-500">Internal Equipment ID</span>
      </div>
      <div class="form-control">
        <label class="label" for="department">
          <span class="label-text text-sm font-medium">Department</span>
          <span class="label-text-alt text-xs text-error">*</span>
        </label>
        <select
          id="department"
          class="select select-sm select-bordered w-full"
          bind:value={formData.DepartmentID}
          required
        >
          <option value={null}>Select Department</option>
          {#each departments as dept (dept.DepartmentID)}
            <option value={dept.DepartmentID}>{dept.DepartmentName}</option>
          {/each}
        </select>
        <span class="label-text-alt text-xs text-gray-500">Required department assignment</span>
      </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label" for="instrumentId">
          <span class="label-text text-sm font-medium">Instrument ID</span>
        </label>
        <input
          id="instrumentId"
          type="text"
          class="input input-sm input-bordered w-full"
          bind:value={formData.InstrumentID}
          placeholder="e.g., INSTR001"
        />
        <span class="label-text-alt text-xs text-gray-500">Optional instrument identifier</span>
      </div>
      <div class="form-control">
        <label class="label" for="instrumentName">
          <span class="label-text text-sm font-medium">Instrument Name</span>
        </label>
        <input
          id="instrumentName"
          type="text"
          class="input input-sm input-bordered w-full"
          bind:value={formData.InstrumentName}
          placeholder="e.g., Chemistry Analyzer"
        />
        <span class="label-text-alt text-xs text-gray-500">Display name for this equipment</span>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="form-control">
        <label class="label" for="equipmentRole">
          <span class="label-text text-sm font-medium">Equipment Role</span>
          <span class="label-text-alt text-xs text-error">*</span>
        </label>
        <input
          id="equipmentRole"
          type="text"
          class="input input-sm input-bordered w-full"
          bind:value={formData.EquipmentRole}
          placeholder="e.g., A"
          maxlength="1"
          required
        />
        <span class="label-text-alt text-xs text-gray-500">Single character role code</span>
      </div>
      <div class="form-control">
        <label class="label" for="workstation">
          <span class="label-text text-sm font-medium">Workstation ID</span>
        </label>
        <input
          id="workstation"
          type="number"
          class="input input-sm input-bordered w-full"
          bind:value={formData.WorkstationID}
          placeholder="e.g., 1"
        />
        <span class="label-text-alt text-xs text-gray-500">Optional workstation reference</span>
      </div>
      <div class="form-control">
        <label class="label" for="enable">
          <span class="label-text text-sm font-medium">Status</span>
        </label>
        <select
          id="enable"
          class="select select-sm select-bordered w-full"
          bind:value={formData.Enable}
        >
          <option value={1}>Active</option>
          <option value={0}>Inactive</option>
        </select>
        <span class="label-text-alt text-xs text-gray-500">Equipment active status</span>
      </div>
    </div>
  </form>
  {#snippet footer()}
    <button class="btn btn-ghost" onclick={handleCancel} type="button" disabled={saving}>Cancel</button>
    <button class="btn btn-primary" onclick={handleSubmit} disabled={saving} type="button">
      {#if saving}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {saving ? 'Saving...' : 'Save'}
    </button>
  {/snippet}
</Modal>
