<script lang="ts">
  import { useQuery, useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
  import { format } from "date-fns";
  import { ptBR } from "date-fns/locale";

  interface Props {
    conversaId: Id<"conversas">;
    onClose: () => void;
  }

  let { conversaId, onClose }: Props = $props();

  const client = useConvexClient();
  const mensagensAgendadas = useQuery(api.chat.obterMensagensAgendadas, { conversaId });

  let mensagem = $state("");
  let data = $state("");
  let hora = $state("");
  let loading = $state(false);
  
  // Rastrear mudanças nas mensagens agendadas
  $effect(() => {
    console.log("📅 [ScheduleModal] Mensagens agendadas atualizadas:", mensagensAgendadas?.data);
  });

  // Definir data/hora mínima (agora)
  const now = new Date();
  const minDate = format(now, "yyyy-MM-dd");
  const minTime = format(now, "HH:mm");

  function getPreviewText(): string {
    if (!data || !hora) return "";
    
    try {
      const dataHora = new Date(`${data}T${hora}`);
      return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
    } catch {
      return "";
    }
  }

  async function handleAgendar() {
    if (!mensagem.trim() || !data || !hora) {
      alert("Preencha todos os campos");
      return;
    }

    try {
      loading = true;
      const dataHora = new Date(`${data}T${hora}`);
      
      // Validar data futura
      if (dataHora.getTime() <= Date.now()) {
        alert("A data e hora devem ser futuras");
        return;
      }

      await client.mutation(api.chat.agendarMensagem, {
        conversaId,
        conteudo: mensagem.trim(),
        agendadaPara: dataHora.getTime(),
      });

      mensagem = "";
      data = "";
      hora = "";
      
      // Dar tempo para o Convex processar e recarregar a lista
      setTimeout(() => {
        alert("Mensagem agendada com sucesso!");
      }, 500);
    } catch (error) {
      console.error("Erro ao agendar mensagem:", error);
      alert("Erro ao agendar mensagem");
    } finally {
      loading = false;
    }
  }

  async function handleCancelar(mensagemId: string) {
    if (!confirm("Deseja cancelar esta mensagem agendada?")) return;

    try {
      await client.mutation(api.chat.cancelarMensagemAgendada, { mensagemId: mensagemId as any });
    } catch (error) {
      console.error("Erro ao cancelar mensagem:", error);
      alert("Erro ao cancelar mensagem");
    }
  }

  function formatarDataHora(timestamp: number): string {
    try {
      return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
    } catch {
      return "Data inválida";
    }
  }
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
  class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" 
  onclick={onClose}
  onkeydown={(e) => e.key === 'Escape' && onClose()}
>
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    class="bg-base-100 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col m-4"
    onclick={(e) => e.stopPropagation()}
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-title"
    tabindex="-1"
  >
    <!-- Header ULTRA MODERNO -->
    <div class="flex items-center justify-between px-6 py-5 relative overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);">
      <!-- Efeitos de fundo -->
      <div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
      
      <h2 id="modal-title" class="text-xl font-bold flex items-center gap-3 text-white relative z-10">
        <!-- Ícone moderno de relógio -->
        <div class="relative flex items-center justify-center w-10 h-10 rounded-xl" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5"
          >
            <circle cx="12" cy="12" r="10"/>
            <polyline points="12 6 12 12 16 14"/>
          </svg>
        </div>
        <span style="text-shadow: 0 2px 8px rgba(0,0,0,0.3);">Agendar Mensagem</span>
      </h2>
      
      <!-- Botão fechar moderno -->
      <button
        type="button"
        class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden z-10"
        style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
        onclick={onClose}
        aria-label="Fechar"
      >
        <div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/30 transition-colors duration-300"></div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="w-5 h-5 text-white relative z-10 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
          style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
        >
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-y-auto p-6 space-y-6">
      <!-- Formulário de Agendamento -->
      <div class="card bg-base-200">
        <div class="card-body">
          <h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
          
          <div class="form-control">
            <label class="label" for="mensagem-input">
              <span class="label-text">Mensagem</span>
            </label>
            <textarea
              id="mensagem-input"
              class="textarea textarea-bordered h-24"
              placeholder="Digite a mensagem..."
              bind:value={mensagem}
              maxlength="500"
              aria-describedby="char-count"
            ></textarea>
            <div class="label">
              <span id="char-count" class="label-text-alt">{mensagem.length}/500</span>
            </div>
          </div>

          <div class="grid md:grid-cols-2 gap-4">
            <div class="form-control">
              <label class="label" for="data-input">
                <span class="label-text">Data</span>
              </label>
              <input
                id="data-input"
                type="date"
                class="input input-bordered"
                bind:value={data}
                min={minDate}
              />
            </div>

            <div class="form-control">
              <label class="label" for="hora-input">
                <span class="label-text">Hora</span>
              </label>
              <input
                id="hora-input"
                type="time"
                class="input input-bordered"
                bind:value={hora}
                min={data === minDate ? minTime : undefined}
              />
            </div>
          </div>

          {#if getPreviewText()}
            <div class="alert alert-info">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                />
              </svg>
              <span>{getPreviewText()}</span>
            </div>
          {/if}

          <div class="card-actions justify-end">
            <!-- Botão AGENDAR ultra moderno -->
            <button
              type="button"
              class="relative px-6 py-3 rounded-xl font-bold text-white overflow-hidden transition-all duration-300 group disabled:opacity-50 disabled:cursor-not-allowed"
              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
              onclick={handleAgendar}
              disabled={loading || !mensagem.trim() || !data || !hora}
            >
              <!-- Efeito de brilho no hover -->
              <div class="absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors duration-300"></div>
              
              <div class="relative z-10 flex items-center gap-2">
                {#if loading}
                  <span class="loading loading-spinner loading-sm"></span>
                  <span>Agendando...</span>
                {:else}
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="w-5 h-5 group-hover:scale-110 transition-transform"
                  >
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                  </svg>
                  <span class="group-hover:scale-105 transition-transform">Agendar</span>
                {/if}
              </div>
            </button>
          </div>
        </div>
      </div>

      <!-- Lista de Mensagens Agendadas -->
      <div class="card bg-base-200">
        <div class="card-body">
          <h3 class="card-title text-lg">Mensagens Agendadas</h3>
          
          {#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
            <div class="space-y-3">
              {#each mensagensAgendadas.data as msg (msg._id)}
                <div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg">
                  <div class="flex-shrink-0 mt-1">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor"
                      class="w-5 h-5 text-primary"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                      />
                    </svg>
                  </div>
                  
                  <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-base-content/80">
                      {formatarDataHora(msg.agendadaPara || 0)}
                    </p>
                    <p class="text-sm text-base-content mt-1 line-clamp-2">
                      {msg.conteudo}
                    </p>
                  </div>

                  <!-- Botão cancelar moderno -->
                  <button
                    type="button"
                    class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
                    style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
                    onclick={() => handleCancelar(msg._id)}
                    aria-label="Cancelar"
                  >
                    <div class="absolute inset-0 bg-error/0 group-hover:bg-error/20 transition-colors duration-300"></div>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="w-5 h-5 text-error relative z-10 group-hover:scale-110 transition-transform"
                    >
                      <polyline points="3 6 5 6 21 6"/>
                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                      <line x1="10" y1="11" x2="10" y2="17"/>
                      <line x1="14" y1="11" x2="14" y2="17"/>
                    </svg>
                  </button>
                </div>
              {/each}
            </div>
          {:else if !mensagensAgendadas?.data}
            <div class="flex items-center justify-center py-8">
              <span class="loading loading-spinner loading-lg"></span>
            </div>
          {:else}
            <div class="text-center py-8 text-base-content/50">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-12 h-12 mx-auto mb-2 opacity-50"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                />
              </svg>
              <p class="text-sm">Nenhuma mensagem agendada</p>
            </div>
          {/if}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Efeito shimmer para o header */
  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
</style>
