import {
  fetchTicket, fetchComments, fetchHistory, createComment, logTime,
  formatDateTime, formatMinutes, getHistoryIcon
} from './ticket-shared.js';

document.addEventListener('DOMContentLoaded', async () => {
  const ticketId = new URLSearchParams(window.location.search).get('id');
  if (!ticketId) return window.location.href = '../admin.html';

  const statusSelect = document.getElementById('status-select');
  const priorityInput = document.getElementById('priority-text');
  const categorySelect = document.getElementById('category-select');
  const commentForm = document.getElementById('comment-form');
  const titleText = document.getElementById('ticket-title-text');
  const titleInput = document.getElementById('ticket-title-input');
  const descText = document.getElementById('ticket-description-text');
  const descInput = document.getElementById('ticket-description-input');
  const commentAuthorInput = document.getElementById('comment-author');
  const totalTimeDisplay = document.getElementById('total-time');
  const timeForm = document.getElementById('time-booking-form');

  let webhookConfig = null;

  // Fetch Webhook Configuration
  async function loadWebhookConfig() {
    try {
      const response = await fetch('/api/webhooks');
      if (response.ok) {
        webhookConfig = await response.json();
        console.log('Webhook configuration loaded:', webhookConfig.configured);
      } else {
        console.warn('Failed to load webhook configuration');
        webhookConfig = { admin: null, user: null, configured: { admin: false, user: false } };
      }
    } catch (error) {
      console.error('Error loading webhook configuration:', error);
      webhookConfig = { admin: null, user: null, configured: { admin: false, user: false } };
    }
  }

  // Send Webhook Notification
  async function sendWebhook(message) {
    if (!webhookConfig?.user) {
      console.log('User webhook not configured, skipping notification');
      return;
    }

    try {
      const res = await fetch(webhookConfig.user, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: message })
      });

      if (!res.ok) {
        console.error('User webhook failed:', res.statusText);
      }
    } catch (err) {
      console.error('Error sending user webhook:', err);
    }
  }

  let originalStatus = '', originalPriority = '', originalTitle = '', originalDesc = '', originalCategory = '';

  async function loadPage() {
    loadWebhookConfig().then(() => {
      loadTicketDetails();
      loadComments();
      loadHistory();
    });
  }

  async function loadTicketDetails() {
    const ticket = await fetchTicket(ticketId);
    if (!ticket) return alert('Ticket not found');

    titleText.textContent = ticket.title;
    descText.textContent = ticket.description;
    priorityInput.value = ticket.priority;
    statusSelect.value = ticket.status;
    categorySelect.value = ticket.category || '';

    document.getElementById('ticket-id-val').textContent = ticket.id;
    document.getElementById('ticket-requester').textContent = ticket.requester;
    document.getElementById('ticket-created').textContent = formatDateTime(ticket.created_at);
    document.getElementById('ticket-updated').textContent = formatDateTime(ticket.updated_at);
    const totalMins = typeof ticket.total_time === 'number' ? ticket.total_time : 0;
    totalTimeDisplay.textContent = formatMinutes(totalMins);


    statusSelect.className = 'form-control status-' + (ticket.status || '').toLowerCase().replace(/\s+/g, '-');

    originalStatus = ticket.status;
    originalPriority = ticket.priority;
    originalTitle = ticket.title;
    originalDesc = ticket.description;
    originalCategory = ticket.category || '';
  }

  async function updateTicket({ status, priority, title, description, category, actor = 'Admin' }) {
  try {
    const ticket = await fetchTicket(ticketId); // Fetch ticket to get the requester
    const requester = ticket.requester || ''; // Ensure requester is included in the update request

    const res = await fetch(`/api/tickets/${ticketId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status, priority, title, description, category, actor, requester }) // Add requester
    });

    if (!res.ok) throw new Error('Failed to update');
    alert('Ticket updated successfully');

    if (status !== originalStatus) {
      await sendWebhook(`Ticket #${ticketId} status changed from "${originalStatus}" to "${status}"`);
      originalStatus = status;
    }

    if (priority !== originalPriority) {
      await sendWebhook(`Ticket #${ticketId} priority changed from "${originalPriority}" to "${priority}"`);
      originalPriority = priority;
    }

    if (title !== originalTitle) {
      await sendWebhook(`Ticket #${ticketId} title changed by ${actor}`);
      originalTitle = title;
    }

    if (description !== originalDesc) {
      await sendWebhook(`Ticket #${ticketId} description changed by ${actor}`);
      originalDesc = description;
    }

    if (category !== originalCategory) {
      await sendWebhook(`Ticket #${ticketId} category changed from "${originalCategory}" to "${category}"`);
      originalCategory = category;
    }

    titleText.textContent = title;
    descText.textContent = description;

    await loadPage();
  } catch (err) {
    console.error('Update failed:', err);
    alert('Error updating ticket');
  }
  }


  document.getElementById('update-ticket-btn').addEventListener('click', async () => {
    const isEditingTitle = titleInput.style.display === 'block';
    const isEditingDesc = descInput.style.display === 'block';

    const newTitle = isEditingTitle ? titleInput.value.trim() : titleText.textContent;
    const newDesc = isEditingDesc ? descInput.value.trim() : descText.textContent;
    const newStatus = statusSelect.value;
    const newPriority = priorityInput.value;
    const newCategory = categorySelect.value;

    const confirmed = confirm('Möchten Sie die Änderungen wirklich speichern?');
    if (!confirmed) return;

    await updateTicket({ status: newStatus, priority: newPriority, title: newTitle, description: newDesc, category: newCategory });

    titleInput.style.display = 'none';
    titleText.style.display = 'block';
    descInput.style.display = 'none';
    descText.style.display = 'block';
  });

  document.getElementById('close-ticket-btn').addEventListener('click', async () => {
    const confirmed = confirm('Möchtest du das Ticket wirklich schließen?');
    if (!confirmed) return;

    const newStatus = 'Closed';
    const newPriority = priorityInput.value;
    const newTitle = titleText.textContent;
    const newDesc = descText.textContent;
    const newCategory = categorySelect.value;

    await updateTicket({ status: newStatus, priority: newPriority, title: newTitle, description: newDesc, category: newCategory });
  });

  titleText.addEventListener('dblclick', () => {
    titleInput.value = titleText.textContent;
    titleText.style.display = 'none';
    titleInput.style.display = 'block';
    titleInput.focus();
  });

  descText.addEventListener('dblclick', () => {
    descInput.value = descText.textContent;
    descText.style.display = 'none';
    descInput.style.display = 'block';
    descInput.focus();
  });

  const savedAuthor = localStorage.getItem('commentAuthor');
  if (savedAuthor) commentAuthorInput.value = savedAuthor;

  async function loadComments() {
    const comments = await fetchComments(ticketId);
    const container = document.getElementById('comments-container');
    container.innerHTML = comments.map(comment => {
      const role = comment.role || 'user';
      const isAdmin = role === 'admin';
      const avatarUrl = isAdmin ? '/assets/admin.jpg' : '/assets/user.jpg';

      return `
      <div class="comment ${isAdmin ? 'comment-admin' : ''}">
        <img class="comment-avatar" src="${avatarUrl}" alt="${isAdmin ? 'Admin' : 'User'} Avatar">
        <div class="comment-content">
          <div class="comment-header">
            <span class="comment-author">${comment.author}</span>
            ${isAdmin ? '<span class="comment-role-badge">Admin</span>' : ''}
            <span class="comment-date">${formatDateTime(comment.date)}</span>
          </div>
          <div class="comment-text">${comment.content}</div>
        </div>
      </div>`;
    }).join('');
  }

  async function loadHistory() {
    const history = await fetchHistory(ticketId);
    const container = document.getElementById('history-container');
    container.innerHTML = history.map(h => `
      <div class="history-item">
        <div class="history-icon"><i class="fas fa-${getHistoryIcon(h.action)}"></i></div>
        <div class="history-content">
          <div class="history-action">${h.action}</div>
          <div class="history-details">${h.message || ''}</div>
          <div class="history-meta">
            <span>By ${h.author || h.actor || 'unknown'}</span>
            <span>${formatDateTime(h.date || h.timestamp)}</span>
          </div>
        </div>
      </div>`).join('');
  }

  commentForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const author = commentAuthorInput.value.trim();
    if (!author) return alert('Bitte gib deinen Namen ein');
    const content = document.getElementById('comment-content').value.trim();
    if (!content) return alert('Comment required');

    const role = 'admin';
    const timestamp = new Date().toISOString();

    try {
      await createComment(ticketId, { author, role, content, timestamp });
      await sendWebhook(`New comment added by ${author} (${role}): "${content}" on ticket #${ticketId}`);
      localStorage.setItem('commentAuthor', author);

      document.getElementById('comment-content').value = '';
      await loadComments();
      await loadHistory();
    } catch (err) {
      console.error('Failed to add comment:', err);
      alert('Failed to add comment');
    }
  });

  timeForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const minutes = parseInt(document.getElementById('time-minutes').value);
    const comment = document.getElementById('time-comment').value.trim();
    const actor = commentAuthorInput.value || 'Admin';

    if (isNaN(minutes) || minutes <= 0) return alert('Gültige Zeit in Minuten eingeben');

    try {
      // Save the time log
      await logTime(ticketId, { minutes, comment, author: actor });

      // Also add it as a comment
      const timeComment = `⏱ Zeit gebucht: ${formatMinutes(minutes)}${comment ? ` – ${comment}` : ''}`;
      await createComment(ticketId, {
        author: actor,
        role: 'admin',
        content: timeComment,
        timestamp: new Date().toISOString()
      });

      // Webhook notification
      await sendWebhook(`Time booked: ${formatMinutes(minutes)} by ${actor} on ticket #${ticketId}${comment ? ` – "${comment}"` : ''}`);

      // Clear inputs and reload
      document.getElementById('time-minutes').value = '';
      document.getElementById('time-comment').value = '';
      await loadPage();
    } catch (err) {
      console.error('Fehler beim Speichern der Zeit:', err);
      alert('Fehler beim Speichern');
    }
  });

  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const tab = btn.dataset.tab;
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
      document.getElementById(`${tab}-tab`).classList.add('active');
    });
  });

  await loadPage();
});