<script>
  import { Microscope, Variable, Calculator, Box, Layers } from 'lucide-svelte';
  import Modal from '$lib/components/Modal.svelte';

  let { open = $bindable(false), onselect = null } = $props();

  const testTypes = [
    { value: 'TEST', label: 'Test', description: 'Single Test', icon: Microscope, color: '#0066CC', bgColor: '#E6F2FF' },
    { value: 'PARAM', label: 'Parameter', description: 'Test Parameter', icon: Variable, color: '#3399FF', bgColor: '#F0F8FF' },
    { value: 'CALC', label: 'Calculated', description: 'Formula-based Test', icon: Calculator, color: '#9933CC', bgColor: '#F5E6FF' },
    { value: 'GROUP', label: 'Panel', description: 'Test Group/Panel', icon: Box, color: '#00AA44', bgColor: '#E6F9EE' },
    { value: 'TITLE', label: 'Header', description: 'Section Header', icon: Layers, color: '#666666', bgColor: '#F5F5F5' }
  ];

  function handleSelect(type) {
    if (onselect) {
      onselect(type.value);
    }
    open = false;
  }

  function handleClose() {
    open = false;
  }
</script>

<Modal bind:open size="md" title="Select Test Type">
  <div class="py-4">
    <p class="text-sm text-gray-600 mb-6">
      Choose the type of test you want to create. This determines the available options and configuration.
    </p>

    <div class="grid grid-cols-1 gap-3">
      {#each testTypes as type}
        {@const IconComponent = type.icon}
        <button
          class="flex items-center gap-4 p-4 rounded-lg border-2 transition-all duration-200 text-left hover:shadow-md"
          style="background-color: {type.bgColor}; border-color: {type.color};"
          onclick={() => handleSelect(type)}
        >
          <div
            class="flex items-center justify-center w-12 h-12 rounded-lg"
            style="background-color: {type.color};"
          >
            <IconComponent class="w-6 h-6 text-white" />
          </div>
          <div class="flex-1">
            <div class="font-semibold text-base" style="color: {type.color};">
              {type.label}
            </div>
            <div class="text-sm text-gray-600">
              {type.description}
            </div>
          </div>
          <div class="text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </div>
        </button>
      {/each}
    </div>
  </div>

  {#snippet footer()}
    <button class="btn btn-ghost" onclick={handleClose} type="button">Cancel</button>
  {/snippet}
</Modal>
