/**
 * Dashboard Management
 * Multi-tenant adapted dashboard with complete metrics
 */

let dashboardChart = null;
let dashboardInterval = null;

/**
 * Load complete dashboard
 */
async function loadDashboard() {
  try {
    await Promise.all([
      loadDashboardMetrics(),
      loadActiveUsers(),
      loadHourlyChart(),
      loadDashboardInvoices()
    ]);
    
    // Start auto-refresh
    startDashboardRefresh();
  } catch (error) {
    console.error('Error loading dashboard:', error);
    Notification.error('errors.loading_dashboard');
  }
}

/**
 * Load dashboard metrics (conversations and invoices)
 */
async function loadDashboardMetrics() {
  try {
    const response = await api.get('/dashboard');
    const data = response.data || {};
    
    // Debug: Log the data received
    console.log('📊 Dashboard metrics received:', data);

    // Update conversation metrics with animation
    animateNumber('todayMessages', data.todayMessages || 0);
    animateNumber('waitingConversations', data.waitingConversations || 0);
    animateNumber('inProgressConversations', data.inProgressConversations || 0);
    setBreakdown('todayMessagesBreakdown', data.todayMessagesWeb, data.todayMessagesCloud);
    setBreakdown('waitingConversationsBreakdown', data.waitingConversationsWeb, data.waitingConversationsCloud);
    setBreakdown('inProgressConversationsBreakdown', data.inProgressConversationsWeb, data.inProgressConversationsCloud);

    // Update invoice metrics with animation
    animateNumber('invoicesPending', data.invoicesPending || 0);
    animateNumber('invoicesAccepted', data.invoicesAccepted || 0);
    animateNumber('invoicesPaid', data.invoicesPaid || 0);
  } catch (error) {
    console.error('Error loading metrics:', error);
    // Set zeros on error
    ['todayMessages', 'waitingConversations', 'inProgressConversations', 
     'invoicesPending', 'invoicesAccepted', 'invoicesPaid'].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.textContent = '0';
    });
    ['todayMessagesBreakdown', 'waitingConversationsBreakdown', 'inProgressConversationsBreakdown'].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.textContent = 'Web: 0 · Cloud: 0';
    });
  }
}

function setBreakdown(elementId, webValue, cloudValue) {
  const el = document.getElementById(elementId);
  if (!el) return;
  const web = typeof webValue === 'number' ? webValue : 0;
  const cloud = typeof cloudValue === 'number' ? cloudValue : 0;
  el.textContent = `Web: ${web} · Cloud: ${cloud}`;
}

/**
 * Animate number change
 */
function animateNumber(elementId, targetValue) {
  const element = document.getElementById(elementId);
  if (!element) return;

  const currentValue = parseInt(element.textContent) || 0;
  const difference = targetValue - currentValue;
  const duration = 500; // ms
  const steps = 20;
  const stepValue = difference / steps;
  const stepDuration = duration / steps;

  let currentStep = 0;

  const interval = setInterval(() => {
    currentStep++;
    const newValue = Math.round(currentValue + (stepValue * currentStep));
    element.textContent = newValue;

    if (currentStep >= steps) {
      element.textContent = targetValue;
      clearInterval(interval);
    }
  }, stepDuration);
}

/**
 * Load active users list
 */
async function loadActiveUsers() {
  try {
    const response = await api.getUsers({ limit: 10, active: true });
    const users = response.data || [];

    const usersList = document.getElementById('dashboardUsersList');
    if (!usersList) return;

    if (users.length === 0) {
      usersList.innerHTML = `
        <div style="text-align: center; padding: 20px; color: #7f8c8d;">
          <p data-i18n="dashboard.no_users">${i18n.t('dashboard.no_users')}</p>
        </div>
      `;
      return;
    }

    usersList.innerHTML = users.map(user => {
      // Normalize active field (can be 'active', 'is_active', or boolean)
      const isActive = user.active === 1 || user.active === true || user.is_active === 1 || user.is_active === true;
      
      // Get role display name
      const roleKey = `users.role_${user.role}`;
      const roleDisplay = i18n.t(roleKey) !== roleKey ? i18n.t(roleKey) : user.role.charAt(0).toUpperCase() + user.role.slice(1);
      
      // Get user name safely
      const userName = user.name || user.username || 'Unknown';
      const userInitial = userName.charAt(0).toUpperCase();
      
      return `
        <div class="user-item">
          <div class="user-avatar" style="background: ${getAvatarColor(user.role)}">
            ${userInitial}
          </div>
          <div class="user-info">
            <div class="user-name">${escapeHtml(userName)}</div>
            <div class="user-role">${roleDisplay}</div>
          </div>
          <span class="badge badge-${isActive ? 'success' : 'secondary'}">
            ${isActive ? i18n.t('users.active') : i18n.t('users.inactive')}
          </span>
        </div>
      `;
    }).join('');
  } catch (error) {
    console.error('Error loading users:', error);
    const usersList = document.getElementById('dashboardUsersList');
    if (usersList) {
      usersList.innerHTML = `
        <div style="text-align: center; padding: 20px; color: #e74c3c;">
          <p>${i18n.t('errors.loading_users')}</p>
        </div>
      `;
    }
  }
}

/**
 * Get avatar color based on role
 */
function getAvatarColor(role) {
  const colors = {
    admin: '#3498db',
    operator: '#27ae60',
    viewer: '#95a5a6'
  };
  return colors[role] || '#3498db';
}

/**
 * Escape HTML to prevent XSS
 */
function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

/**
 * Load hourly messages chart
 */
async function loadHourlyChart() {
  try {
    const response = await api.get('/dashboard/hourly-messages');
    const data = response.data || [];

    const canvas = document.getElementById('hourlyChart');
    if (!canvas) return;

    const ctx = canvas.getContext('2d');

    // Destroy existing chart
    if (dashboardChart) {
      dashboardChart.destroy();
      dashboardChart = null;
    }

    // Prepare data for last 24 hours
    const hours = Array.from({ length: 24 }, (_, i) => i);
    const chartData = hours.map(hour => {
      const found = data.find(d => d.hour === hour);
      return found ? found.count : 0;
    });

    // Create new chart
    dashboardChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: hours.map(h => `${h.toString().padStart(2, '0')}:00`),
        datasets: [{
          label: i18n.t('dashboard.messages_per_hour'),
          data: chartData,
          borderColor: '#3498db',
          backgroundColor: 'rgba(52, 152, 219, 0.1)',
          tension: 0.4,
          fill: true,
          pointRadius: 3,
          pointHoverRadius: 5,
          pointBackgroundColor: '#3498db',
          pointBorderColor: '#fff',
          pointBorderWidth: 2
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            padding: 12,
            titleColor: '#fff',
            bodyColor: '#fff',
            borderColor: '#3498db',
            borderWidth: 1,
            displayColors: false,
            callbacks: {
              label: function(context) {
                return `${i18n.t('dashboard.messages')}: ${context.parsed.y}`;
              }
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              precision: 0,
              color: '#7f8c8d'
            },
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          },
          x: {
            ticks: {
              color: '#7f8c8d',
              maxRotation: 45,
              minRotation: 45
            },
            grid: {
              display: false
            }
          }
        }
      }
    });
  } catch (error) {
    console.error('Error loading chart:', error);
    const canvas = document.getElementById('hourlyChart');
    if (canvas) {
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = '14px Arial';
      ctx.fillStyle = '#e74c3c';
      ctx.textAlign = 'center';
      ctx.fillText(i18n.t('errors.loading_chart'), canvas.width / 2, canvas.height / 2);
    }
  }
}

/**
 * Start auto-refresh dashboard every 30 seconds
 */
function startDashboardRefresh() {
  stopDashboardRefresh();
  dashboardInterval = setInterval(() => {
    if (currentPage === 'dashboard') {
      loadDashboardMetrics();
      loadActiveUsers();
      loadDashboardInvoices();
      // Don't reload chart on auto-refresh to avoid flickering
    }
  }, 30000);
}

/**
 * Stop dashboard auto-refresh
 */
function stopDashboardRefresh() {
  if (dashboardInterval) {
    clearInterval(dashboardInterval);
    dashboardInterval = null;
  }
}

/**
 * Navigate to page from dashboard cards
 */
function navigateToPage(page) {
  navigateTo(page);
}

/**
 * Load dashboard invoices list
 */
async function loadDashboardInvoices() {
  try {
    const token = localStorage.getItem('token');
    const response = await fetch('/api/invoices/admin?limit=10&sort=created_at&order=desc', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    const invoices = data.data || data.invoices || [];

    const invoicesList = document.getElementById('dashboardInvoicesList');
    if (!invoicesList) return;

    if (invoices.length === 0) {
      invoicesList.innerHTML = `
        <div style="text-align: center; padding: 40px; color: #999;">
          <p data-i18n="dashboard.no_invoices">No invoices found</p>
        </div>
      `;
      return;
    }

    invoicesList.innerHTML = invoices.map(invoice => {
      const statusClass = (invoice.status || 'draft').toLowerCase();
      const statusText = invoice.status || 'DRAFT';
      const amount = invoice.total_amount ? `$${parseFloat(invoice.total_amount).toFixed(2)}` : '$0.00';
      const date = invoice.created_at ? new Date(invoice.created_at).toLocaleDateString() : '-';
      const invoiceNumber = invoice.invoice_number || invoice.id || '-';
      const type = invoice.type || 'invoice';
      const client = invoice.client_name || invoice.client_email || '-';
      const title = invoice.title || invoice.description || '-';

      return `
        <div class="invoice-list-item" onclick="openInvoiceFromDashboard(${invoice.id})" style="cursor: pointer;">
          <div class="invoice-cell invoice-number">${escapeHtml(invoiceNumber)}</div>
          <div class="invoice-cell invoice-type">${escapeHtml(type)}</div>
          <div class="invoice-cell">${escapeHtml(client)}</div>
          <div class="invoice-cell">${escapeHtml(title)}</div>
          <div class="invoice-cell invoice-amount">${amount}</div>
          <div class="invoice-cell">
            <span class="invoice-status-badge ${statusClass}">${statusText}</span>
          </div>
          <div class="invoice-cell">${date}</div>
        </div>
      `;
    }).join('');
  } catch (error) {
    console.error('Error loading invoices:', error);
    const invoicesList = document.getElementById('dashboardInvoicesList');
    if (invoicesList) {
      invoicesList.innerHTML = `
        <div style="text-align: center; padding: 40px; color: #e74c3c;">
          <p>${i18n.t('errors.loading_invoices')}</p>
        </div>
      `;
    }
  }
}


/**
 * Open invoice from dashboard
 * Loads invoice details and shows modal
 */
async function openInvoiceFromDashboard(invoiceId) {
  try {
    const token = localStorage.getItem('token');
    const response = await fetch(`/api/invoices/admin/${invoiceId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    
    if (data.success && data.invoice) {
      showInvoiceDetailsModalFromDashboard(data.invoice);
    } else {
      Notification.error('Failed to load invoice details');
    }
  } catch (error) {
    console.error('Error loading invoice:', error);
    Notification.error('Failed to load invoice details');
  }
}

/**
 * Show invoice details modal from dashboard
 */
function showInvoiceDetailsModalFromDashboard(invoice) {
  const isRejected = invoice.status === 'rejected';
  
  // Format currency helper
  const formatCurrency = (amount, currency = 'USD') => {
    const value = parseFloat(amount) || 0;
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency
    }).format(value);
  };
  
  const modal = document.createElement('div');
  modal.className = 'modal-overlay active';
  modal.id = 'invoiceDetailsModal';
  modal.innerHTML = `
    <div class="modal-dialog" style="max-width: 800px;">
      <div class="modal-header">
        <h3>${invoice.invoice_number} - ${invoice.title}</h3>
        <button class="modal-close" onclick="closeDashboardInvoiceModal()">&times;</button>
      </div>
      <div class="modal-body">
        <div style="margin-bottom: 20px;">
          <span class="badge badge-${invoice.status === 'paid' ? 'success' : invoice.status === 'sent' ? 'warning' : 'secondary'}">${invoice.status.toUpperCase()}</span>
          <span style="margin-left: 10px;">${invoice.type === 'quote' ? '📋 Quote' : '📄 Invoice'}</span>
        </div>

        ${isRejected && invoice.rejection_reason ? `
          <div style="background: #f8d7da; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #dc3545;">
            <h4 style="color: #721c24; margin-bottom: 10px; font-size: 16px;">⚠️ Rejection Reason:</h4>
            <p style="color: #721c24; margin: 0;">"${escapeHtml(invoice.rejection_reason)}"</p>
          </div>
        ` : ''}

        <h4 style="margin-top: 20px; color: #333;">Client</h4>
        <p style="margin: 10px 0;"><strong>${escapeHtml(invoice.client_name)}</strong><br>
        ${escapeHtml(invoice.client_email)}<br>
        ${escapeHtml(invoice.client_phone || '')}</p>

        <h4 style="margin-top: 20px; color: #333;">Items</h4>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Description</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Total</th>
              </tr>
            </thead>
            <tbody>
              ${invoice.items.map(item => `
                <tr>
                  <td>${escapeHtml(item.description)}</td>
                  <td>${item.quantity}</td>
                  <td>${formatCurrency(item.unit_price, invoice.currency)}</td>
                  <td>${formatCurrency(item.total_price, invoice.currency)}</td>
                </tr>
              `).join('')}
            </tbody>
          </table>
        </div>

        <div style="margin-top: 20px; text-align: right; border-top: 2px solid #e5e7eb; padding-top: 15px;">
          <p style="margin: 5px 0;">Subtotal: ${formatCurrency(invoice.subtotal, invoice.currency)}</p>
          <p style="margin: 5px 0;">Tax: ${formatCurrency(invoice.tax_amount, invoice.currency)}</p>
          <p style="margin: 5px 0;">Discount: ${formatCurrency(invoice.discount_amount, invoice.currency)}</p>
          <p style="font-size: 20px; margin: 10px 0 0 0;"><strong>Total: ${formatCurrency(invoice.total_amount, invoice.currency)}</strong></p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeDashboardInvoiceModal()">Close</button>
        <button class="btn btn-primary" onclick="navigateToInvoicePage(${invoice.id})">View Full Details</button>
      </div>
    </div>
  `;

  document.body.appendChild(modal);
}

/**
 * Close dashboard invoice modal
 */
function closeDashboardInvoiceModal() {
  const modal = document.getElementById('invoiceDetailsModal');
  if (modal) {
    modal.remove();
  }
}

/**
 * Navigate to invoice page
 */
function navigateToInvoicePage(invoiceId) {
  closeDashboardInvoiceModal();
  navigateTo('invoices');
  // Wait for page to load then open the invoice
  setTimeout(() => {
    if (typeof viewInvoice === 'function') {
      viewInvoice(invoiceId);
    }
  }, 500);
}
