import { apiGet } from '../api.js';
import { canOpenKioskSettings, openDeviceSettings, openNetworkSettings, openWifiSettings } from '../kiosk-settings.js';
import { syncNotifications } from '../notifications.js';

export async function renderDashboard(root, { experience } = {}) {
  const currentExperience = experience || {
    moduleKey: 'mixed',
    moduleLabel: 'FTTH',
    moduleMetricLabel: 'Missions FTTH',
    moduleInProgressLabel: 'FTTH en cours',
    moduleActionLabel: 'Ouvrir FTTH',
    moduleOpenActionLabel: 'Voir fiches',
    navItems: [],
  };

  root.innerHTML = `
    <section class="screen-stack">
      <div class="screen-hero mobile-dashboard-hero">
        <div class="d-flex align-items-start justify-content-between gap-3">
          <div>
            <div class="screen-hero-pill"><i class="fas fa-chart-line"></i> tableau de bord</div>
            <h5 class="mt-3 mb-1">Vue d'ensemble terrain</h5>
            <p class="mb-0 opacity-75">Retrouvez vos volumes de tickets, vos priorités et les accès rapides juste après la connexion.</p>
          </div>
          <button class="btn btn-light btn-sm" id="btnRefreshDashboard" type="button">Actualiser</button>
        </div>
        <div class="screen-hero-meta" id="dashboardHeroStats"></div>
      </div>

      <div id="dashboardAlert"></div>

      <div class="mobile-dashboard-grid" id="dashboardMetrics"></div>

      <div class="mobile-dashboard-grid mobile-dashboard-grid-secondary">
        <section class="mobile-panel mobile-dashboard-panel">
          <div class="report-panel-title">
            <div>
              <div class="report-panel-title-main">Raccourcis</div>
              <div class="report-panel-subtitle">Accès direct aux écrans opérationnels</div>
            </div>
          </div>
          <div class="mobile-dashboard-actions">
            ${renderShortcutActions(currentExperience)}
          </div>
          ${renderKioskSettingsPanel()}
        </section>

        <section class="mobile-panel mobile-dashboard-panel">
          <div class="report-panel-title">
            <div>
              <div class="report-panel-title-main">Alertes prioritaires</div>
              <div class="report-panel-subtitle">Éléments qui demandent une attention rapide</div>
            </div>
          </div>
          <div id="dashboardPriorityList" class="screen-stack"></div>
        </section>
      </div>

      <section class="mobile-panel mobile-dashboard-panel">
        <div class="report-panel-title">
          <div>
            <div class="report-panel-title-main">Dernières assignations</div>
            <div class="report-panel-subtitle">Aperçu des tickets disponibles sans quitter le dashboard</div>
          </div>
        </div>
        <div id="dashboardRecentList" class="screen-stack"></div>
      </section>
    </section>
  `;

  const alertBox = root.querySelector('#dashboardAlert');
  const heroStats = root.querySelector('#dashboardHeroStats');
  const metricsBox = root.querySelector('#dashboardMetrics');
  const priorityBox = root.querySelector('#dashboardPriorityList');
  const recentBox = root.querySelector('#dashboardRecentList');
  const kioskButtons = Array.from(root.querySelectorAll('[data-kiosk-settings]'));

  for (const button of kioskButtons) {
    button.addEventListener('click', async () => {
      const action = String(button.dataset.kioskSettings || '');
      const handlers = {
        wifi: openWifiSettings,
        network: openNetworkSettings,
        device: openDeviceSettings,
      };
      const handler = handlers[action];
      if (!handler) {
        return;
      }

      try {
        await handler();
      } catch (error) {
        alertBox.innerHTML = '<div class="alert alert-warning">Impossible d’ouvrir les paramètres de la tablette depuis ce terminal.</div>';
      }
    });
  }

  async function load() {
    alertBox.innerHTML = '';
    heroStats.innerHTML = '<div class="screen-hero-kpi"><span class="screen-hero-kpi-label">Chargement</span><span class="screen-hero-kpi-value">Synchronisation…</span></div>';
    metricsBox.innerHTML = '<div class="mobile-panel mobile-dashboard-panel">Chargement du tableau de bord…</div>';
    priorityBox.innerHTML = '<div class="text-body-secondary">Analyse des priorités…</div>';
    recentBox.innerHTML = '<div class="text-body-secondary">Chargement des assignations…</div>';

    const shouldLoadIncidents = currentExperience.moduleKey === 'backbones' || currentExperience.moduleKey === 'mixed';
    const shouldLoadTickets = currentExperience.moduleKey !== 'backbones';

    const [incidentsResult, ftthResult] = await Promise.allSettled([
      shouldLoadIncidents ? apiGet('/api/mobile/incidents/assigned') : Promise.resolve({ ok: true, incidents: [] }),
      shouldLoadTickets ? apiGet('/api/mobile/ftth/assigned') : Promise.resolve({ ok: true, tickets: [] }),
    ]);

    const incidents = incidentsResult.status === 'fulfilled' ? (incidentsResult.value?.incidents || []) : [];
    const tickets = ftthResult.status === 'fulfilled' ? (ftthResult.value?.tickets || []) : [];
    const urgentCount = incidents.filter((item) => String(item.priority || '').toLowerCase() === 'urgent').length;
    const inProgressFtth = tickets.filter((item) => {
      const status = String(item.status || '').toLowerCase();
      return status && status !== 'traité' && status !== 'validé' && status !== 'clôturé';
    }).length;

    syncNotifications({ incidents, tickets });

    heroStats.innerHTML = renderHeroStats(currentExperience, incidents.length, tickets.length, urgentCount, inProgressFtth);
    metricsBox.innerHTML = renderMetricCards(currentExperience, incidents.length, tickets.length, urgentCount, inProgressFtth);

    const priorityItems = buildPriorityItems(currentExperience, incidents.length, tickets.length, urgentCount, inProgressFtth);

    priorityBox.innerHTML = priorityItems.map((text) => `
      <div class="mobile-dashboard-priority-item">
        <i class="fas fa-bell"></i>
        <span>${escapeHtml(text)}</span>
      </div>
    `).join('');

    const recentIncidents = incidents.slice(0, 2).map((item) => ({
      title: item.ticket_id || `INC-${item.id}`,
      subtitle: item.title || 'Incident terrain',
      meta: item.status_label || item.priority || 'À traiter',
      href: `#/treatment?id=${Number(item.id || 0)}`,
      icon: 'fa-triangle-exclamation',
    }));

    const recentTickets = tickets.slice(0, 2).map((item) => ({
      title: item.client_name || item.ref_code || `FTTH-${item.id}`,
      subtitle: item.nature_intervention || item.client_address || `Mission ${currentExperience.moduleLabel}`,
      meta: item.priority || item.status || 'À ouvrir',
      href: `#/ftth-report?id=${Number(item.id || 0)}`,
      icon: 'fa-network-wired',
    }));

    const recentItems = currentExperience.moduleKey === 'backbones'
      ? recentIncidents
      : currentExperience.moduleKey === 'mixed'
        ? [...recentIncidents, ...recentTickets]
        : recentTickets;
    recentBox.innerHTML = recentItems.length
      ? recentItems.map((item) => `
          <a class="mobile-dashboard-recent" href="${item.href}">
            <span class="mobile-dashboard-recent-icon"><i class="fas ${item.icon}"></i></span>
            <span class="mobile-dashboard-recent-copy">
              <strong>${escapeHtml(item.title)}</strong>
              <span>${escapeHtml(item.subtitle)}</span>
            </span>
            <span class="mobile-dashboard-recent-meta">${escapeHtml(item.meta)}</span>
          </a>
        `).join('')
      : '<div class="report-empty-state">Aucune assignation récente à afficher.</div>';

    if ((shouldLoadIncidents && incidentsResult.status === 'rejected') || (shouldLoadTickets && ftthResult.status === 'rejected')) {
      alertBox.innerHTML = '<div class="alert alert-warning">Certaines données n’ont pas pu être synchronisées. Le dashboard affiche les éléments disponibles.</div>';
    }
  }

  root.querySelector('#btnRefreshDashboard').addEventListener('click', load);
  await load();
}

function renderMetricCard(label, value, icon, badgeClass, href, actionLabel) {
  return `
    <article class="mobile-panel mobile-dashboard-panel mobile-dashboard-metric-card">
      <div class="mobile-dashboard-metric-head">
        <span class="mobile-dashboard-metric-icon"><i class="fas ${icon}"></i></span>
        <span class="badge ${badgeClass}">${escapeHtml(label)}</span>
      </div>
      <div class="mobile-dashboard-metric-value">${value}</div>
      <a class="btn btn-outline-secondary btn-sm" href="${href}">${escapeHtml(actionLabel)}</a>
    </article>
  `;
}

function renderShortcutActions(experience) {
  const actions = experience.navItems.filter((item) => item.path !== '/dashboard');
  return actions.map((item, index) => {
    const classes = index === 0 ? 'btn btn-primary mobile-cta' : 'btn btn-outline-primary mobile-cta';
    return `<a class="${classes}" href="#${item.path}"><i class="fas ${item.icon} me-2"></i>${escapeHtml(item.label)}</a>`;
  }).join('');
}

function renderKioskSettingsPanel() {
  if (!canOpenKioskSettings()) {
    return '';
  }

  return `
    <div class="mobile-kiosk-tools">
      <div class="mobile-kiosk-tools-title">Accès tablette autorisé en mode borne</div>
      <div class="mobile-kiosk-tools-actions">
        <button class="btn btn-outline-secondary mobile-cta" type="button" data-kiosk-settings="wifi">
          <i class="fas fa-wifi me-2"></i>Wi‑Fi
        </button>
        <button class="btn btn-outline-secondary mobile-cta" type="button" data-kiosk-settings="network">
          <i class="fas fa-signal me-2"></i>Données mobiles
        </button>
        <button class="btn btn-outline-secondary mobile-cta" type="button" data-kiosk-settings="device">
          <i class="fas fa-sliders-h me-2"></i>Paramètres tablette
        </button>
      </div>
    </div>
  `;
}

function renderHeroStats(experience, incidentsCount, ticketsCount, urgentCount, inProgressCount) {
  if (experience.moduleKey === 'backbones') {
    return `
      <div class="screen-hero-kpi">
        <span class="screen-hero-kpi-label">Incidents</span>
        <span class="screen-hero-kpi-value">${incidentsCount}</span>
      </div>
      <div class="screen-hero-kpi">
        <span class="screen-hero-kpi-label">Urgents</span>
        <span class="screen-hero-kpi-value">${urgentCount}</span>
      </div>
    `;
  }

  return `
    <div class="screen-hero-kpi">
      <span class="screen-hero-kpi-label">${escapeHtml(experience.moduleMetricLabel)}</span>
      <span class="screen-hero-kpi-value">${ticketsCount}</span>
    </div>
    <div class="screen-hero-kpi">
      <span class="screen-hero-kpi-label">En cours</span>
      <span class="screen-hero-kpi-value">${inProgressCount}</span>
    </div>
  `;
}

function renderMetricCards(experience, incidentsCount, ticketsCount, urgentCount, inProgressCount) {
  if (experience.moduleKey === 'backbones') {
    return `
      ${renderMetricCard('Incidents assignés', incidentsCount, 'fa-triangle-exclamation', 'text-bg-warning', '#/assigned', 'Ouvrir incidents')}
      ${renderMetricCard('Incidents urgents', urgentCount, 'fa-bolt', 'text-bg-danger', '#/assigned', 'Traiter urgences')}
    `;
  }

  return `
    ${renderMetricCard(experience.moduleMetricLabel, ticketsCount, 'fa-network-wired', 'text-bg-info', '#/ftth', experience.moduleActionLabel)}
    ${renderMetricCard(experience.moduleInProgressLabel, inProgressCount, 'fa-file-waveform', 'text-bg-primary', '#/ftth', experience.moduleOpenActionLabel)}
  `;
}

function buildPriorityItems(experience, incidentsCount, ticketsCount, urgentCount, inProgressCount) {
  if (experience.moduleKey === 'backbones') {
    return [
      urgentCount ? `${urgentCount} incident(s) urgent(s) nécessitent une prise en charge.` : '',
      !incidentsCount ? 'Aucun incident en attente pour le moment.' : '',
    ].filter(Boolean);
  }

  return [
    inProgressCount ? `${inProgressCount} mission(s) ${experience.moduleLabel.toLowerCase()} restent à compléter.` : '',
    !ticketsCount ? `Aucune mission ${experience.moduleLabel.toLowerCase()} en attente pour le moment.` : '',
  ].filter(Boolean);
}

function escapeHtml(value) {
  return String(value ?? '')
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#039;');
}