<div x-data="ticketsAdmin()" x-init="init()" class="p-6">

  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-xl font-bold text-slate-800">Tickets de soporte</h1>
      <p class="text-sm text-slate-500 mt-0.5">Todos los tickets abiertos por clientes del portal y correo</p>
    </div>
    <div class="flex items-center gap-2">
      <template x-for="s in estados" :key="s.val">
        <button @click="filtro=s.val; load()"
          :class="filtro===s.val ? 'text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'"
          :style="filtro===s.val ? 'background:#8eb02f' : ''"
          class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
          x-text="s.label">
        </button>
      </template>
    </div>
  </div>

  <!-- Loading -->
  <div x-show="loading" class="text-center py-12 text-slate-400 text-sm">Cargando tickets...</div>

  <!-- Empty -->
  <div x-show="!loading && tickets.length===0" class="text-center py-12 text-slate-400 text-sm">
    No hay tickets con este filtro.
  </div>

  <!-- Lista -->
  <div x-show="!loading" class="space-y-3">
    <template x-for="t in tickets" :key="t.ID">
      <div :id="'ticket-' + t.ID" class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
        <!-- Cabecera del ticket -->
        <div class="p-4 flex items-start gap-4 cursor-pointer" @click="t._open = !t._open">
          <div class="mt-0.5 w-2.5 h-2.5 rounded-full flex-shrink-0" :class="dotClass(t.estado)"></div>
          <div class="flex-1 min-w-0">
            <div class="flex flex-wrap items-center gap-2 mb-1">
              <span class="badge" :class="ticketBadge(t.estado)" x-text="t.estado"></span>
              <span class="badge" :class="prioridadBadge(t.prioridad)" x-text="t.prioridad"></span>
              <span x-show="t.origen==='email'" class="badge badge-default text-xs">📧 Email</span>
              <span x-show="t.origen==='portal'" class="badge badge-default text-xs">🌐 Portal</span>
            </div>
            <h3 class="font-semibold text-sm text-slate-800 truncate" x-text="t.titulo"></h3>
            <p class="text-xs text-slate-500 mt-0.5">
              <span x-text="t.autor_nombre"></span>
              <span x-show="t.email_from" class="text-slate-400">&lt;<span x-text="t.email_from"></span>&gt;</span>
              <span class="mx-1">&middot;</span>
              <span x-text="formatDate(t.CreatedAt)"></span>
              <span x-show="t.mensajes && t.mensajes.length" class="ml-2 text-slate-400">
                💬 <span x-text="t.mensajes ? t.mensajes.length : 0"></span>
              </span>
              <span x-show="t.asignado" class="ml-2 text-slate-400">
                👤 <span x-text="t.asignado.name"></span>
              </span>
            </p>
          </div>
          <!-- Acciones -->
          <div class="flex items-center gap-2 flex-shrink-0" @click.stop>
            <select @change="cambiarEstado(t, $event.target.value)"
              class="text-xs border border-slate-200 rounded-lg px-2 py-1.5 outline-none bg-white text-slate-700">
              <option value="abierto"      :selected="t.estado==='abierto'">Abierto</option>
              <option value="en_progreso"  :selected="t.estado==='en_progreso'">En progreso</option>
              <option value="resuelto"     :selected="t.estado==='resuelto'">Resuelto</option>
              <option value="cerrado"      :selected="t.estado==='cerrado'">Cerrado</option>
            </select>
            <!-- Asignar -->
            <select @change="asignar(t, $event.target.value)"
              class="text-xs border border-slate-200 rounded-lg px-2 py-1.5 outline-none bg-white text-slate-700">
              <option value="">Sin asignar</option>
              <template x-for="a in admins" :key="a.id">
                <option :value="a.id" :selected="t.asignado_a===a.id" x-text="a.name"></option>
              </template>
            </select>
          </div>
        </div>

        <!-- Detalle expandido -->
        <div x-show="t._open" class="border-t border-slate-100 px-4 pb-4">
          <p class="text-sm text-slate-600 py-3 border-b border-slate-100" x-text="t.descripcion"></p>

          <!-- Mensajes -->
          <template x-if="t.mensajes && t.mensajes.length">
            <div class="space-y-2 mt-3">
              <template x-for="m in t.mensajes" :key="m.ID">
                <div class="flex gap-2" :class="m.es_admin ? 'justify-end' : ''">
                  <div :class="m.es_admin ? 'bg-primary/10' : 'bg-slate-100'"
                    class="rounded-xl px-3 py-2 text-sm max-w-sm text-slate-700">
                    <div class="text-xs font-semibold mb-1"
                      :style="m.es_admin ? 'color:#8eb02f' : 'color:#64748b'"
                      x-text="m.autor_nombre"></div>
                    <span x-text="m.contenido"></span>
                    <div class="text-xs text-slate-400 mt-1" x-text="formatDate(m.CreatedAt)"></div>
                  </div>
                </div>
              </template>
            </div>
          </template>

          <!-- Responder -->
          <div class="mt-3 flex gap-2">
            <input x-model="t._reply" type="text" placeholder="Escribir respuesta..."
              class="flex-1 border border-slate-200 rounded-xl px-3 py-2 text-sm outline-none"
              @keydown.enter.prevent="responder(t)"
              onfocus="this.style.borderColor='#8eb02f'" onblur="this.style.borderColor='#e2e8f0'">
            <button @click="responder(t)"
              class="px-4 py-2 rounded-xl text-white text-sm font-medium transition-colors"
              style="background:#8eb02f"
              onmouseover="this.style.background='#6d8c24'" onmouseout="this.style.background='#8eb02f'">
              Responder
            </button>
          </div>
        </div>
      </div>
    </template>
  </div>

  <!-- Paginación simple -->
  <div x-show="!loading && tickets.length > 0" class="mt-4 text-xs text-slate-400 text-center">
    Mostrando <span x-text="tickets.length"></span> tickets
  </div>
</div>

<script>
function ticketsAdmin() {
  return {
    tickets: [],
    admins: [],
    loading: true,
    filtro: 'todos',
    estados: [
      { val: 'todos',      label: 'Todos' },
      { val: 'abierto',    label: 'Abiertos' },
      { val: 'en_progreso',label: 'En progreso' },
      { val: 'resuelto',   label: 'Resueltos' },
      { val: 'cerrado',    label: 'Cerrados' },
    ],

    async init() {
      await this.cargarAdmins();
      const params = new URLSearchParams(window.location.search);
      if (params.get('ticket')) this.filtro = 'todos';
      await this.load();
      this.openTicketFromQuery();
    },

    async cargarAdmins() {
      try {
        const r = await axios.get('/app/tickets/admins');
        this.admins = r.data || [];
      } catch {}
    },

    async load() {
      this.loading = true;
      try {
        const r = await axios.get(`/app/tickets/data?estado=${this.filtro}`);
        this.tickets = (r.data || []).map(t => ({ ...t, _open: false, _reply: '' }));
      } finally {
        this.loading = false;
      }
    },

    openTicketFromQuery() {
      const ticketId = new URLSearchParams(window.location.search).get('ticket');
      if (!ticketId) return;
      const t = this.tickets.find(x => String(x.ID) === String(ticketId));
      if (!t) return;
      t._open = true;
      this.$nextTick(() => {
        const el = document.getElementById('ticket-' + t.ID);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      });
    },

    async cambiarEstado(t, estado) {
      await axios.put(`/app/tickets/${t.ID}/estado`, { estado });
      t.estado = estado;
    },

    async asignar(t, userId) {
      if (!userId) {
        await axios.put(`/app/tickets/${t.ID}/asignar`, { asignado_id: 0 });
        t.asignado_a = null;
        t.asignado = null;
      } else {
        const id = parseInt(userId);
        await axios.put(`/app/tickets/${t.ID}/asignar`, { asignado_id: id });
        t.asignado_a = id;
        const a = this.admins.find(x => x.id === id);
        t.asignado = a ? { name: a.name } : null;
      }
    },

    async responder(t) {
      const contenido = (t._reply || '').trim();
      if (!contenido) return;
      await axios.post(`/app/tickets/${t.ID}/mensaje`, { contenido });
      if (!t.mensajes) t.mensajes = [];
      t.mensajes.push({ ID: Date.now(), contenido, es_admin: true, autor_nombre: 'Admin', CreatedAt: new Date().toISOString() });
      t._reply = '';
      t._open = true;
    },

    dotClass(e) {
      return { 'bg-yellow-400': e==='abierto', 'bg-blue-400': e==='en_progreso', 'bg-green-400': e==='resuelto', 'bg-slate-300': e==='cerrado' };
    },
    ticketBadge(e) {
      return { 'badge-warning': e==='abierto', 'badge-info': e==='en_progreso', 'badge-success': e==='resuelto', 'badge-default': e==='cerrado' };
    },
    prioridadBadge(p) {
      return { 'badge-danger': p==='urgente', 'badge-warning': p==='alta', 'badge-info': p==='media', 'badge-default': p==='baja' };
    },
    formatDate(d) {
      if (!d) return '';
      return new Date(d).toLocaleString('es-CO', { dateStyle: 'short', timeStyle: 'short' });
    },
  };
}
</script>
