{% extends "base.html" %}

{% block title %}Clientes | Sublimaciones Matiguan{% endblock %}

{% block content %}
<div class="space-y-6">
  <section class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div>
      <p class="text-sm font-medium uppercase tracking-[0.18em] text-blue-600">Clientes</p>
      <h3 class="mt-2 text-3xl font-bold tracking-tight text-slate-900">Gestión de clientes</h3>
    </div>
    <button type="button" onclick="openClientModal('create')" class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-600/20 transition hover:translate-y-[-1px]">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8h-16" />
      </svg>
      Nuevo cliente
    </button>
  </section>

  <section class="grid gap-4 md:grid-cols-3">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Total clientes</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">{{ clients|length }}</p>
      <p class="mt-2 text-sm text-emerald-600">Registrados en sistema</p>
    </article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Con email</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">{{ clients | selectattr('email') | list | length }}</p>
      <p class="mt-2 text-sm text-blue-600">Contactos activos</p>
    </article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Con teléfono</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">{{ clients | selectattr('phone') | list | length }}</p>
      <p class="mt-2 text-sm text-amber-600">Disponibles para contacto</p>
    </article>
  </section>

  <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="flex items-center justify-between border-b border-slate-200 pb-4">
      <h4 class="text-xl font-bold text-slate-900">Listado de clientes</h4>
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">{{ clients|length }} registros</span>
    </div>

    <div class="mt-4 space-y-3">
      <div class="grid grid-cols-4 gap-4 border-b border-slate-200 pb-3 text-sm font-semibold text-slate-500">
        <span>Cliente</span>
        <span>Email</span>
        <span>Teléfono</span>
        <span class="text-right">Acciones</span>
      </div>

      {% if clients %}
        {% for client in clients %}
        <div class="grid grid-cols-4 gap-4 py-3 text-sm text-slate-700 items-center">
          <span class="font-medium text-slate-900">{{ client.full_name or 'Sin nombre' }}</span>
          <span>{{ client.email or '—' }}</span>
          <span>{{ client.phone or '—' }}</span>
          <span class="text-right flex items-center justify-end gap-2">
            <button type="button" data-client-action="edit" data-client-id="{{ client.id }}" class="rounded-lg bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700 hover:bg-slate-200">Editar</button>
            <button type="button" data-client-action="delete" data-client-id="{{ client.id }}" class="rounded-lg bg-rose-100 px-2 py-1 text-xs font-medium text-rose-700 hover:bg-rose-200">Eliminar</button>
          </span>
        </div>
        {% endfor %}
      {% else %}
        <div class="rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500">
          No hay clientes registrados aún.
        </div>
      {% endif %}
    </div>
  </section>
</div>

<div id="client-modal" class="fixed inset-0 z-50 hidden bg-slate-900/50 backdrop-blur-sm">
  <div class="flex min-h-full items-center justify-center p-4">
    <div class="w-full max-w-xl rounded-3xl bg-white p-6 shadow-2xl">
      <div class="flex items-center justify-between border-b border-slate-200 pb-4">
        <div>
          <p id="client-modal-kicker" class="text-xs font-semibold uppercase tracking-[0.18em] text-blue-600">Nuevo cliente</p>
          <h4 id="client-modal-title" class="mt-2 text-2xl font-bold text-slate-900">Registrar cliente</h4>
        </div>
        <button type="button" onclick="closeClientModal()" class="rounded-full bg-slate-100 p-2 text-slate-600 hover:bg-slate-200">✕</button>
      </div>

      <form id="client-form" class="mt-6 space-y-4">
        <input type="hidden" name="client_id" id="client_id" />

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Cédula</label>
          <input id="cedula" name="cedula" required inputmode="numeric" pattern="[0-9]*" maxlength="15" class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none ring-0 transition focus:border-blue-500 focus:bg-white" placeholder="Ej: 1712345678" />
          <p id="cedula-status" class="mt-1 text-xs text-slate-500">Escribe la cédula para buscar si el cliente ya existe.</p>
        </div>

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Nombre completo</label>
          <input id="full_name" name="full_name" required class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none ring-0 transition focus:border-blue-500 focus:bg-white" placeholder="Ej: Ana María Pérez" />
        </div>

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Teléfono</label>
          <input id="phone" name="phone" class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none ring-0 transition focus:border-blue-500 focus:bg-white" placeholder="Ej: +56 9 1234 5678" />
        </div>

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Correo electrónico</label>
          <input id="email" name="email" type="email" class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none ring-0 transition focus:border-blue-500 focus:bg-white" placeholder="cliente@correo.com" />
        </div>

        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Notas</label>
          <textarea id="notes" name="notes" rows="3" class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800 outline-none ring-0 transition focus:border-blue-500 focus:bg-white" placeholder="Observaciones del cliente"></textarea>
        </div>

        <div class="flex justify-end gap-3 pt-2">
          <button type="button" onclick="closeClientModal()" class="rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancelar</button>
          <button id="client-submit-btn" type="submit" class="rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-600/20 hover:translate-y-[-1px] disabled:cursor-not-allowed disabled:opacity-50">Guardar cliente</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  const clientModal = document.getElementById('client-modal');
  const clientForm = document.getElementById('client-form');
  const clientSubmitBtn = document.getElementById('client-submit-btn');
  const clientModalTitle = document.getElementById('client-modal-title');
  const clientModalKicker = document.getElementById('client-modal-kicker');
  const cedulaInput = document.getElementById('cedula');
  const cedulaStatus = document.getElementById('cedula-status');

  function setClientFieldsEnabled(enabled) {
    ['full_name', 'phone', 'email', 'notes'].forEach((fieldId) => {
      const field = document.getElementById(fieldId);
      if (field) {
        field.disabled = !enabled;
      }
    });

    if (clientSubmitBtn) {
      clientSubmitBtn.disabled = !enabled;
    }
  }

  function closeClientModal() {
    if (clientModal) clientModal.classList.add('hidden');
    if (clientForm) clientForm.reset();
    document.getElementById('client_id').value = '';
    if (cedulaStatus) {
      cedulaStatus.textContent = 'Escribe la cédula para buscar si el cliente ya existe.';
      cedulaStatus.className = 'mt-1 text-xs text-slate-500';
    }
    setClientFieldsEnabled(false);
  }

  async function checkCedulaExists() {
    const value = (cedulaInput?.value || '').trim();
    if (!/^[0-9]+$/.test(value)) {
      if (cedulaStatus) {
        cedulaStatus.textContent = 'La cédula solo debe contener números.';
        cedulaStatus.className = 'mt-1 text-xs text-rose-600';
      }
      setClientFieldsEnabled(false);
      return;
    }

    if (value.length < 5) {
      if (cedulaStatus) {
        cedulaStatus.textContent = 'Escribe la cédula completa para buscar.';
        cedulaStatus.className = 'mt-1 text-xs text-slate-500';
      }
      setClientFieldsEnabled(false);
      return;
    }

    try {
      const response = await fetch(`/clients/search/${encodeURIComponent(value)}`);
      if (response.ok) {
        const client = await response.json();
        if (cedulaStatus) {
          cedulaStatus.textContent = `Ya existe un cliente registrado con esa cédula: ${client.full_name || 'Sin nombre'}.`;
          cedulaStatus.className = 'mt-1 text-xs text-amber-600';
        }
        setClientFieldsEnabled(false);
        document.getElementById('full_name').value = client.full_name || '';
        document.getElementById('phone').value = client.phone || '';
        document.getElementById('email').value = client.email || '';
        document.getElementById('notes').value = client.notes || '';
        return;
      }

      if (response.status === 404) {
        if (cedulaStatus) {
          cedulaStatus.textContent = 'No existe ese cliente. Puedes completar los demás datos y guardar.';
          cedulaStatus.className = 'mt-1 text-xs text-emerald-600';
        }
        setClientFieldsEnabled(true);
        return;
      }

      throw new Error('No se pudo consultar la cédula.');
    } catch (error) {
      if (cedulaStatus) {
        cedulaStatus.textContent = error.message || 'No se pudo verificar la cédula.';
        cedulaStatus.className = 'mt-1 text-xs text-rose-600';
      }
      setClientFieldsEnabled(false);
    }
  }

  function openClientModal(mode, client = null) {
    if (!clientModal || !clientForm) return;

    if (mode === 'edit' && client) {
      clientModalKicker.textContent = 'Editar cliente';
      clientModalTitle.textContent = 'Actualizar cliente';
      clientSubmitBtn.textContent = 'Guardar cambios';
      document.getElementById('client_id').value = client.id;
      document.getElementById('cedula').value = client.cedula || '';
      document.getElementById('full_name').value = client.full_name || '';
      document.getElementById('phone').value = client.phone || '';
      document.getElementById('email').value = client.email || '';
      document.getElementById('notes').value = client.notes || '';
      cedulaStatus.textContent = 'Editando cliente existente.';
      cedulaStatus.className = 'mt-1 text-xs text-slate-500';
      setClientFieldsEnabled(true);
    } else {
      clientModalKicker.textContent = 'Nuevo cliente';
      clientModalTitle.textContent = 'Registrar cliente';
      clientSubmitBtn.textContent = 'Guardar cliente';
      clientForm.reset();
      document.getElementById('client_id').value = '';
      if (cedulaStatus) {
        cedulaStatus.textContent = 'Escribe la cédula para buscar si el cliente ya existe.';
        cedulaStatus.className = 'mt-1 text-xs text-slate-500';
      }
      setClientFieldsEnabled(false);
    }

    clientModal.classList.remove('hidden');
  }

  if (cedulaInput) {
    cedulaInput.addEventListener('input', function () {
      this.value = this.value.replace(/\D/g, '');
      if (this.value) {
        checkCedulaExists();
      } else {
        if (cedulaStatus) {
          cedulaStatus.textContent = 'Escribe la cédula para buscar si el cliente ya existe.';
          cedulaStatus.className = 'mt-1 text-xs text-slate-500';
        }
        setClientFieldsEnabled(false);
      }
    });
  }

  document.querySelectorAll('[data-client-action="edit"]').forEach((button) => {
    button.addEventListener('click', async () => {
      const clientId = button.dataset.clientId;
      try {
        const response = await fetch(`/clients/${clientId}`);
        if (!response.ok) throw new Error('No se pudo cargar el cliente.');
        const client = await response.json();
        openClientModal('edit', client);
      } catch (error) {
        alert(error.message || 'No se pudo abrir la edición del cliente.');
      }
    });
  });

  document.querySelectorAll('[data-client-action="delete"]').forEach((button) => {
    button.addEventListener('click', async () => {
      const clientId = button.dataset.clientId;
      const confirmed = window.confirm('¿Deseas eliminar este cliente?');
      if (!confirmed) return;

      try {
        const response = await fetch(`/clients/${clientId}`, { method: 'DELETE' });
        if (!response.ok) {
          const error = await response.json().catch(() => ({}));
          throw new Error(error.detail || 'No se pudo eliminar el cliente.');
        }
        showToast('success', 'Cliente eliminado');
        setTimeout(() => window.location.reload(), 700);
      } catch (error) {
        showToast('error', error.message || 'Ocurrió un error al eliminar el cliente.');
      }
    });
  });

  if (clientForm) {
    clientForm.addEventListener('submit', async function (event) {
      event.preventDefault();

      const formData = new FormData(clientForm);
      const payload = Object.fromEntries(formData.entries());
      const clientId = payload.client_id;
      delete payload.client_id;

      const isEdit = Boolean(clientId);
      const url = isEdit ? `/clients/${clientId}` : '/clients/';
      const method = isEdit ? 'PUT' : 'POST';

      try {
        const response = await fetch(url, {
          method,
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });

        if (!response.ok) {
          const error = await response.json().catch(() => ({}));
          throw new Error(error.detail || 'No se pudo guardar el cliente.');
        }

        closeClientModal();
        showToast('success', 'Cliente guardado correctamente');
        setTimeout(() => window.location.reload(), 700);
      } catch (error) {
        showToast('error', error.message || 'Ocurrió un error al guardar el cliente.');
      }
    });
  }

  // Toast container + helper (shared style with orders)
  const existingToastContainer = document.getElementById('toast-container');
  if (!existingToastContainer) {
    const tc = document.createElement('div');
    tc.id = 'toast-container';
    tc.className = 'fixed right-4 top-6 z-50 flex flex-col gap-3';
    document.body.appendChild(tc);
  }

  function showToast(type, message, duration = 4000) {
    const container = document.getElementById('toast-container');
    if (!container) return alert(message);
    const toast = document.createElement('div');
    toast.className = 'max-w-sm rounded-lg px-4 py-3 text-sm shadow-lg flex items-start gap-3';
    toast.style.opacity = '0';
    toast.style.transition = 'transform 0.12s ease, opacity 0.12s ease';
    toast.style.transform = 'translateY(-6px)';
    const colorMap = {
      success: 'bg-emerald-50 text-emerald-700',
      error: 'bg-rose-50 text-rose-700',
      info: 'bg-slate-50 text-slate-700'
    };
    toast.classList.add(...colorMap[type].split(' '));
    toast.innerHTML = `<div class="flex-1">${message}</div>`;
    container.appendChild(toast);
    requestAnimationFrame(() => {
      toast.style.opacity = '1';
      toast.style.transform = 'translateY(0)';
    });
    setTimeout(() => {
      toast.style.opacity = '0';
      toast.style.transform = 'translateY(-6px)';
      setTimeout(() => container.removeChild(toast), 160);
    }, duration);
  }
</script>
{% endblock %}