{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block content %}

<div class="page-header">
  <div>
    <div class="page-title">Dashboard <small>Factory-wise contract overview</small></div>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('report') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-bar-chart-line me-1"></i> Report
    </a>
    <a href="{{ url_for('new_contract') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-lg me-1"></i> New Contract
    </a>
  </div>
</div>

<!-- Factory Summary Cards -->
<div class="factory-summary-grid">
  {% for fs in factory_summary %}
  <div class="factory-card fc-{{ fs.factory_code }}">
    <div class="factory-card-header">
      <span class="factory-card-name">{{ fs.factory_name }}</span>
      <span class="badge factory-chip fchip-{{ fs.factory_code }}">{{ fs.factory_code }}</span>
    </div>
    <div class="factory-card-stats">
      <div class="fcs-item">
        <div class="fcs-val accent">{{ fs.open_count }}</div>
        <div class="fcs-lbl">Open</div>
      </div>
      <div class="fcs-item">
        <div class="fcs-val {% if fs.overdue_count > 0 %}danger{% endif %}">{{ fs.overdue_count }}</div>
        <div class="fcs-lbl">Overdue</div>
      </div>
      <div class="fcs-item">
        <div class="fcs-val">{{ fs.total }}</div>
        <div class="fcs-lbl">Total</div>
      </div>
    </div>
    {% set pct = (fs.delivered / fs.total_qty * 100) if fs.total_qty > 0 else 0 %}
    <div class="kvpl-progress mb-2" style="margin-left:8px">
      <div class="kvpl-progress-bar {% if pct > 100 %}cf-over{% endif %}" style="width:{{ [pct,100]|min }}%"></div>
    </div>
    <div class="d-flex justify-content-between text-sm text-muted" style="padding-left:8px">
      <span>Del: <strong class="number">{{ "{:,.3f}".format(fs.delivered) }}</strong></span>
      <span>Bal: <strong class="number">{{ "{:,.3f}".format(fs.balance) }}</strong></span>
    </div>
  </div>
  {% else %}
  <div class="card col-span-all">
    <div class="card-body empty-state">
      <i class="bi bi-file-earmark-text d-block mb-2" style="font-size:32px;color:#cbd5e1"></i>
      No contracts yet. <a href="{{ url_for('new_contract') }}">Create one &rarr;</a>
    </div>
  </div>
  {% endfor %}
</div>

<!-- Overdue + Upcoming -->
<div class="row g-3 mb-4">
  <div class="col-xl-6">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <span class="card-title d-flex align-items-center gap-2">
          <i class="bi bi-exclamation-triangle-fill text-danger"></i>
          Overdue Contracts
        </span>
        <span class="badge badge-overdue">{{ overdue|length }}</span>
      </div>
      <div class="table-wrap">
        <table>
          <thead><tr>
            <th>Contract No</th><th>Fac.</th><th>Customer</th>
            <th>Due</th><th class="text-right">Balance (kg)</th>
          </tr></thead>
          <tbody>
          {% for c in overdue %}
            <tr>
              <td><a href="{{ url_for('view_contract', cid=c.id) }}" class="tlink fw-semibold">{{ c.contract_no }}</a></td>
              <td><span class="factory-chip fchip-{{ c.factory_code }}">{{ c.factory_code }}</span></td>
              <td class="td-wrap">{{ c.customer_name }}</td>
              <td class="text-danger fw-semibold">{{ c.delivery_due }}</td>
              <td class="text-right number">{{ "{:,.0f}".format(c.balance) }}</td>
            </tr>
          {% else %}
            <tr><td colspan="5" class="empty-state py-4">
              <i class="bi bi-check-circle-fill text-success me-1"></i> No overdue contracts
            </td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-xl-6">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <span class="card-title d-flex align-items-center gap-2">
          <i class="bi bi-clock-fill text-warning"></i>
          Due Within 30 Days
        </span>
        <span class="badge badge-warn">{{ upcoming|length }}</span>
      </div>
      <div class="table-wrap">
        <table>
          <thead><tr>
            <th>Contract No</th><th>Fac.</th><th>Customer</th>
            <th>Due</th><th class="text-right">Balance (kg)</th>
          </tr></thead>
          <tbody>
          {% for c in upcoming %}
            <tr>
              <td><a href="{{ url_for('view_contract', cid=c.id) }}" class="tlink fw-semibold">{{ c.contract_no }}</a></td>
              <td><span class="factory-chip fchip-{{ c.factory_code }}">{{ c.factory_code }}</span></td>
              <td class="td-wrap">{{ c.customer_name }}</td>
              <td>{{ c.delivery_due }}</td>
              <td class="text-right number">{{ "{:,.0f}".format(c.balance) }}</td>
            </tr>
          {% else %}
            <tr><td colspan="5" class="empty-state py-4">No contracts due soon</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Factory Summary Table -->
<div class="card mb-4">
  <div class="card-header">
    <span class="card-title">Factory-wise Pending Summary</span>
    <span class="text-sm text-muted">All open contracts</span>
  </div>
  <div class="table-wrap">
    <table>
      <thead><tr>
        <th>Factory</th>
        <th class="text-right">Open</th>
        <th class="text-right">Overdue</th>
        <th class="text-right">Declared (kg)</th>
        <th class="text-right">Delivered (kg)</th>
        <th class="text-right">Balance (kg)</th>
        <th class="text-right">Progress</th>
      </tr></thead>
      <tbody>
      {% set gd = namespace(val=0) %} {% set gv = namespace(val=0) %} {% set gb = namespace(val=0) %}
      {% for fs in factory_summary %}
        {% set gd.val = gd.val + fs.total_qty %}
        {% set gv.val = gv.val + fs.delivered %}
        {% set gb.val = gb.val + [fs.balance,0]|max %}
        {% set pct = (fs.delivered / fs.total_qty * 100)|round(1) if fs.total_qty > 0 else 0 %}
        <tr>
          <td>
            <div class="d-flex align-items-center gap-2">
              <span class="factory-chip fchip-{{ fs.factory_code }}">{{ fs.factory_code }}</span>
              <span class="fw-500">{{ fs.factory_name }}</span>
            </div>
          </td>
          <td class="text-right fw-semibold">{{ fs.open_count }}</td>
          <td class="text-right {% if fs.overdue_count > 0 %}text-danger fw-semibold{% else %}text-muted{% endif %}">{{ fs.overdue_count }}</td>
          <td class="text-right number">{{ "{:,.0f}".format(fs.total_qty) }}</td>
          <td class="text-right number">{{ "{:,.3f}".format(fs.delivered) }}</td>
          <td class="text-right number fw-600">{{ "{:,.3f}".format([fs.balance,0]|max) }}</td>
          <td class="text-right" style="min-width:120px">
            <div class="d-flex align-items-center justify-content-end gap-2">
              <div class="kvpl-progress flex-grow-1" style="max-width:70px">
                <div class="kvpl-progress-bar {% if pct > 100 %}cf-over{% endif %}" style="width:{{ [pct,100]|min }}%"></div>
              </div>
              <span class="text-sm text-muted" style="min-width:32px">{{ pct }}%</span>
            </div>
          </td>
        </tr>
      {% endfor %}
      </tbody>
      {% if factory_summary %}
      <tfoot>
        <tr>
          <td colspan="3"><strong>Grand Total</strong></td>
          <td class="text-right number">{{ "{:,.0f}".format(gd.val) }}</td>
          <td class="text-right number">{{ "{:,.3f}".format(gv.val) }}</td>
          <td class="text-right number">{{ "{:,.3f}".format(gb.val) }}</td>
          <td></td>
        </tr>
      </tfoot>
      {% endif %}
    </table>
  </div>
</div>

<!-- Recent Contracts -->
<div class="card mb-4">
  <div class="card-header">
    <span class="card-title">Recent Contracts</span>
    <a href="{{ url_for('contracts') }}" class="btn btn-outline-secondary btn-sm">View All</a>
  </div>
  <div class="table-wrap">
    <table>
      <thead><tr>
        <th>Contract No</th><th>Fac.</th><th>Customer</th><th>Materials</th>
        <th class="text-right">Price</th><th class="text-right">Declared</th><th>Due Date</th><th>Status</th>
      </tr></thead>
      <tbody>
      {% for c in recent %}
        <tr>
          <td><a href="{{ url_for('view_contract', cid=c.id) }}" class="tlink">{{ c.contract_no }}</a></td>
          <td><span class="factory-chip fchip-{{ c.factory_code }}">{{ c.factory_code }}</span></td>
          <td class="fw-500 td-wrap">{{ c.customer_name }}</td>
          <td class="text-muted text-sm td-wrap">{{ c.material_names }}</td>
          <td class="text-right number text-sm">{{ "{:,.2f}".format(c.price) if c.price else '–' }}</td>
          <td class="text-right number">{{ "{:,.0f}".format(c.qty) }}</td>
          <td>{{ c.delivery_due }}</td>
          <td><span class="badge badge-{{ c.status }}">{{ c.status|capitalize }}</span></td>
        </tr>
      {% else %}
        <tr><td colspan="8" class="empty-state">No contracts yet</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Chart -->
<div class="card">
  <div class="card-header">
    <span class="card-title">Monthly Deliveries – Last 6 Months</span>
    <span class="text-sm text-muted">by factory (kg)</span>
  </div>
  <div class="card-body">
    <canvas id="trendChart" height="72"></canvas>
    <div id="chartEmpty" style="display:none;padding:40px;text-align:center;color:#94a3b8;font-size:13.5px"><i class="bi bi-bar-chart-line" style="font-size:32px;display:block;margin-bottom:8px;opacity:.3"></i>No deliveries recorded in the last 6 months</div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
// Chart.js multi-CDN loader with fallback chain
(function loadChartJS(cdns, idx) {
  if (idx >= cdns.length) {
    // All CDNs failed – show error when chart tries to render
    window._chartLoadFailed = true;
    return;
  }
  var s = document.createElement('script');
  s.src = cdns[idx];
  s.onload  = function() { window._chartLoadFailed = false; };
  s.onerror = function() { loadChartJS(cdns, idx + 1); };
  document.head.appendChild(s);
})([
  'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js',
  'https://unpkg.com/chart.js@4.4.1/dist/chart.umd.min.js'
], 0);
</script>
<script>
(function() {
  var FC_COLORS = { DE:'#16a34a', PW:'#2563eb', CF:'#7c3aed', LV:'#d97706', DD:'#dc2626' };

  function showChartError(msg) {
    var canvas = document.getElementById('trendChart');
    var empty  = document.getElementById('chartEmpty');
    if (canvas) canvas.style.display = 'none';
    if (empty)  {
      empty.style.display = 'block';
      empty.innerHTML = '<i class="bi bi-bar-chart-line" style="font-size:32px;display:block;margin-bottom:8px;opacity:.3"></i>' + (msg || 'No deliveries recorded in the last 6 months');
    }
  }

  function renderChart(months, data, factories) {
    var canvas = document.getElementById('trendChart');
    if (!canvas) return;

    var hasData = months.some(function(m) {
      return factories.some(function(fc) { return data[m] && data[m][fc]; });
    });
    if (!hasData) { showChartError(); return; }

    if (typeof Chart === 'undefined') {
      showChartError('<i class="bi bi-exclamation-triangle me-1"></i>Chart library failed to load. Check your network connection.');
      return;
    }

    var datasets = factories
      .filter(function(fc) { return months.some(function(m) { return data[m] && data[m][fc]; }); })
      .map(function(fc) {
        return {
          label: fc,
          borderRadius: 5,
          borderSkipped: false,
          backgroundColor: (FC_COLORS[fc] || '#94a3b8') + '28',
          borderColor: FC_COLORS[fc] || '#94a3b8',
          borderWidth: 2,
          data: months.map(function(m) { return (data[m] && data[m][fc]) || 0; })
        };
      });

    new Chart(canvas.getContext('2d'), {
      type: 'bar',
      data: { labels: months, datasets: datasets },
      options: {
        responsive: true,
        plugins: {
          legend: { position: 'top', labels: { font: { family: 'Plus Jakarta Sans', size: 12 }, padding: 16 } },
          tooltip: {
            backgroundColor: '#0f1923',
            titleFont: { family: 'Plus Jakarta Sans' },
            bodyFont: { family: 'IBM Plex Mono', size: 12 },
            callbacks: {
              label: function(c) {
                return ' ' + c.dataset.label + ': ' + c.parsed.y.toLocaleString(undefined, {minimumFractionDigits:3}) + ' kg';
              }
            }
          }
        },
        scales: {
          x: { grid: { display: false }, ticks: { font: { family: 'Plus Jakarta Sans', size: 12 } } },
          y: { grid: { color: '#f1f5f9' }, ticks: {
            font: { family: 'IBM Plex Mono', size: 11 },
            callback: function(v) { return v >= 1000 ? (v/1000).toFixed(1) + 'k' : v; }
          }}
        }
      }
    });
  }

  function initChart() {
    var apiUrl = (window.SCRIPT_ROOT || '') + '/api/dashboard/chart';
    fetch(apiUrl, { credentials: 'same-origin' })
      .then(function(r) {
        if (!r.ok) throw new Error('API returned ' + r.status);
        return r.json();
      })
      .then(function(payload) {
        renderChart(payload.months, payload.data, payload.factories);
      })
      .catch(function(err) {
        console.error('Dashboard chart error:', err);
        showChartError('<i class="bi bi-exclamation-triangle me-1"></i>Chart could not load: ' + err.message);
      });
  }

  // Wait for Chart.js to load (it loads asynchronously via the CDN loader above)
  function waitForChart(attempts) {
    if (typeof Chart !== 'undefined') {
      initChart();
    } else if (attempts > 0) {
      setTimeout(function() { waitForChart(attempts - 1); }, 200);
    } else {
      showChartError('<i class="bi bi-exclamation-triangle me-1"></i>Chart library failed to load. Check your network connection.');
    }
  }

  // Start polling after DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() { waitForChart(25); });
  } else {
    waitForChart(25);
  }
})();
</script>
{% endblock %}