<script lang="ts">
  import { onMount } from 'svelte';
  import { api } from '$lib/utils/api';
  import { toast } from '$lib/stores/toast';
  import Modal from '$lib/components/Modal.svelte';
  import Icon from '$lib/components/Icon.svelte';

  let tenants = [];
  let isLoading = false;
  let showModal = false;
  let editingTenant = null;

  let formData = {
    name: '',
    slug: '',
    domain: '',
    is_active: true
  };

  async function loadTenants() {
    isLoading = true;
    try {
      tenants = await api.get('/tenants/');
    } catch (e) {
      toast.error('Error cargando clientes');
    } finally {
      isLoading = false;
    }
  }

  function openCreateModal() {
    editingTenant = null;
    formData = { name: '', slug: '', domain: '', is_active: true };
    showModal = true;
  }

  function openEditModal(tenant) {
    editingTenant = tenant;
    formData = { ...tenant };
    showModal = true;
  }

  async function handleSubmit() {
    try {
      if (editingTenant) {
        // Asegurarse de enviar el campo "status" correctamente
        const updatedData = { ...formData, status: formData.is_active ? 'active' : 'inactive' };
        await api.put(`/tenants/${editingTenant.id}`, updatedData);
        toast.success(`Cliente ${formData.is_active ? 'activado' : 'desactivado'} correctamente`);
      } else {
        // Asegurarse de enviar el campo "status" al crear un cliente
        const newData = { ...formData, status: formData.is_active ? 'active' : 'inactive' };
        await api.post('/tenants/', newData);
        toast.success('Cliente creado correctamente');
      }
      showModal = false;
      loadTenants();
    } catch (e) {
      toast.error(e.message || 'Error guardando cliente');
    }
  }

  onMount(loadTenants);
</script>

<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
  <div class="sm:flex sm:items-center">
    <div class="sm:flex-auto">
      <h1 class="text-xl font-semibold text-gray-900">Clientes</h1>
      <p class="mt-2 text-sm text-gray-700">Lista de todas las organizaciones/clientes registrados en el sistema.</p>
    </div>
    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
      <button
        type="button"
        on:click={openCreateModal}
        class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 sm:w-auto"
      >
        Nuevo Cliente
      </button>
    </div>
  </div>

  <div class="mt-8 flex flex-col">
    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
          <table class="min-w-full divide-y divide-gray-300">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Nombre</th>
                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Slug</th>
                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Dominio</th>
                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Estado</th>
                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                  <span class="sr-only">Acciones</span>
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 bg-white">
              {#if isLoading}
                 <tr><td colspan="5" class="text-center py-4">Cargando...</td></tr>
              {:else if tenants.length === 0}
                 <tr><td colspan="5" class="text-center py-4">No hay clientes registrados</td></tr>
              {:else}
                {#each tenants as tenant}
                  <tr>
                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{tenant.name}</td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{tenant.slug}</td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{tenant.domain || '-'}</td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                      <span class:bg-green-100={tenant.is_active} class:text-green-800={tenant.is_active} class:bg-red-100={!tenant.is_active} class:text-red-800={!tenant.is_active} class="inline-flex rounded-full px-2 text-xs font-semibold leading-5">
                        {tenant.is_active ? 'Activo' : 'Inactivo'}
                      </span>
                    </td>
                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                      <button on:click={() => openEditModal(tenant)} class="text-indigo-600 hover:text-indigo-900">Editar</button>
                    </td>
                  </tr>
                {/each}
              {/if}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<Modal open={showModal} title={editingTenant ? 'Editar Cliente' : 'Nuevo Cliente'} on:close={() => showModal = false}>
  <form on:submit|preventDefault={handleSubmit} class="space-y-4">
    <div>
      <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
      <input type="text" id="name" bind:value={formData.name} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
    </div>
    
    <div>
      <label for="slug" class="block text-sm font-medium text-gray-700">Slug (Identificador)</label>
      <input type="text" id="slug" bind:value={formData.slug} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
      <p class="text-xs text-gray-500 mt-1">Usado en URLs y subdominios.</p>
    </div>

    <div>
      <label for="domain" class="block text-sm font-medium text-gray-700">Dominio Personalizado</label>
      <input type="text" id="domain" bind:value={formData.domain} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
    </div>

    <div class="flex items-center">
      <input type="checkbox" id="is_active" bind:checked={formData.is_active} class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
      <label for="is_active" class="ml-2 block text-sm text-gray-900">Activo</label>
    </div>

    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
      <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm">
        Guardar
      </button>
      <button type="button" on:click={() => showModal = false} class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
        Cancelar
      </button>
      {#if editingTenant}
        <button type="button" on:click={async () => { await api.delete(`/tenants/${editingTenant.id}`); toast.success('Cliente eliminado'); showModal = false; loadTenants(); }} class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:col-start-1 sm:text-sm">
          Eliminar
        </button>
      {/if}
    </div>
  </form>
</Modal>
