{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}Generate Invoice{% endblock %}

{% block content %}
<style>
  .gi-container { max-width: 1000px; margin: 0 auto; }
  .gi-section { background: var(--body-bg, #fff); border: 1px solid var(--hairline-color, #ddd); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
  .gi-section h3 { margin-top: 0; border-bottom: 1px solid var(--hairline-color, #ddd); padding-bottom: 10px; }
  .gi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .gi-field { margin-bottom: 12px; }
  .gi-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.85em; color: var(--body-quiet-color, #666); }
  .gi-field input, .gi-field select { width: 100%; padding: 10px; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 0.9em; box-sizing: border-box; min-height: 40px; }
  .gi-btn { padding: 10px 24px; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.9em; }
  .gi-btn-primary { background: #417690; color: #fff; }
  .gi-btn-primary:hover { background: #205067; }
  .gi-btn-generate { background: #28a745; color: #fff; padding: 14px 32px; font-size: 1em; width: 100%; }
  .gi-btn-generate:hover { background: #218838; }
  .gi-btn-generate:disabled { background: #6c757d; cursor: not-allowed; }
  .gi-btn-reset { background: #6c757d; color: #fff; padding: 10px 24px; font-size: 0.9em; margin-top: 10px; }
  .gi-btn-reset:hover { background: #5a6268; }
  .gi-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
  .gi-table th, .gi-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--hairline-color, #ddd); font-size: 0.85em; }
  .gi-table th { font-weight: 600; color: var(--body-quiet-color, #666); }
  .gi-table tr.gi-total-row { font-weight: 700; border-top: 2px solid var(--body-quiet-color, #666); }
  .gi-msg { padding: 10px 16px; border-radius: 4px; margin-bottom: 16px; font-size: 0.9em; }
  .gi-msg-success { background: #dfd; border: 1px solid #afa; color: #155724; }
  .gi-msg-error { background: #fdd; border: 1px solid #faa; color: #721c24; }
  .gi-msg-info { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
  .gi-msg-warning { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }
  #gi-loading { display: none; color: var(--body-quiet-color, #666); font-style: italic; padding: 10px 0; }
  .gi-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; padding: 12px; background: var(--darkened-bg, #f8f8f8); border-radius: 4px; }
  .gi-summary div { font-size: 0.9em; }
  .gi-summary strong { color: var(--body-quiet-color, #666); }
</style>

<div class="gi-container">
  <h2>Generate Invoice</h2>
  <div style="font-size:0.85em; color:var(--body-quiet-color,#666); margin-bottom:16px; line-height:1.5">
    Works for any paid plan (PAYG / Boost / Scale / Enterprise / Custom). Free-plan orgs cannot be invoiced. The invoice bundles the platform fee for the selected period (advance, prorated if the plan started mid-month) with the prior period's usage (arrears) — matching how Stripe issues its monthly invoice.
  </div>
  <div id="gi-message"></div>
  <div id="gi-loading">Processing...</div>

  <!-- Step 1: Select Org + Period -->
  <div class="gi-section" id="select-section">
    <h3>Select Organization &amp; Period</h3>
    <div class="gi-grid">
      <div class="gi-field">
        <label>Organization</label>
        <select id="gi-org-id">
          <option value="">-- Select an organization --</option>
        </select>
      </div>
      <div class="gi-field">
        <label>Month</label>
        <select id="gi-month"></select>
      </div>
      <div class="gi-field">
        <label>Year</label>
        <input type="number" id="gi-year" min="2024" max="2030">
      </div>
    </div>
    <button class="gi-btn gi-btn-primary" onclick="previewUsage()" id="preview-btn">
      Preview Usage
    </button>
  </div>

  <!-- Step 2: Preview Results -->
  <div class="gi-section" id="preview-section" style="display:none">
    <h3>Usage Preview</h3>
    <div id="preview-notices"></div>
    <table class="gi-table" id="preview-table">
      <thead>
        <tr>
          <th>Dimension</th>
          <th>Usage</th>
          <th>Unit</th>
          <th>Cost</th>
          <th>Tier Breakdown</th>
        </tr>
      </thead>
      <tbody id="preview-tbody"></tbody>
    </table>
    <div class="gi-summary" id="preview-summary"></div>
    <div style="margin-top: 20px;">
      <button class="gi-btn gi-btn-generate" onclick="generateInvoice()" id="generate-btn" disabled>
        Generate Invoice
      </button>
    </div>
  </div>

  <!-- Step 3: Result -->
  <div class="gi-section" id="result-section" style="display:none">
    <h3>Invoice Generated</h3>
    <div id="result-content"></div>
    <button class="gi-btn gi-btn-reset" onclick="resetForm()">Generate Another</button>
  </div>
</div>

<script>
// Session auth only — no API key needed for admin pages
const ORG_CHOICES = {{ org_choices_json|safe }};

let previewData = null;

// Populate dropdowns
(function() {
  const sel = document.getElementById("gi-org-id");
  ORG_CHOICES.forEach(o => {
    const opt = document.createElement("option");
    opt.value = o.id;
    opt.textContent = o.label + " (" + o.id.substring(0, 8) + "...)";
    sel.appendChild(opt);
  });

  const mSel = document.getElementById("gi-month");
  const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  months.forEach((m, i) => {
    const opt = document.createElement("option");
    opt.value = String(i + 1).padStart(2, "0");
    opt.textContent = m;
    mSel.appendChild(opt);
  });

  // Default to previous month
  const now = new Date();
  let defMonth = now.getMonth(); // 0-indexed, so this is previous month
  let defYear = now.getFullYear();
  if (defMonth === 0) { defMonth = 12; defYear--; }
  mSel.value = String(defMonth).padStart(2, "0");
  document.getElementById("gi-year").value = defYear;
})();

function getCookie(name) {
  const v = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
  return v ? v.pop() : '';
}

function headers() {
  const h = {"Content-Type": "application/json", "X-CSRFToken": getCookie("csrftoken")};
  return h;
}

function showMsg(text, type) {
  const el = document.getElementById("gi-message");
  el.className = "gi-msg gi-msg-" + type;
  el.textContent = text;
  el.style.display = "block";
  el.scrollIntoView({ behavior: "smooth", block: "center" });
  if (type !== "error") {
    setTimeout(() => el.style.display = "none", 8000);
  }
}

function hideMsg() {
  document.getElementById("gi-message").style.display = "none";
}

function setLoading(show, text) {
  const el = document.getElementById("gi-loading");
  el.textContent = text || "Processing...";
  el.style.display = show ? "block" : "none";
}

function getPeriod() {
  const m = document.getElementById("gi-month").value;
  const y = document.getElementById("gi-year").value;
  return y + "-" + m;
}

function getOrgId() {
  return document.getElementById("gi-org-id").value.trim();
}

async function previewUsage() {
  const orgId = getOrgId();
  const period = getPeriod();
  if (!orgId) { showMsg("Please select an organization", "error"); return; }

  hideMsg();
  setLoading(true, "Checking usage records and generating preview...");
  document.getElementById("preview-btn").disabled = true;
  document.getElementById("preview-section").style.display = "none";
  document.getElementById("result-section").style.display = "none";

  try {
    const res = await fetch("/usage/admin/invoice/preview/", {
      method: "POST",
      headers: headers(),
      body: JSON.stringify({ organization_id: orgId, period: period })
    });
    const data = await res.json();

    if (!data.status) {
      showMsg(data.result || data.message || "Preview failed", "error");
      return;
    }

    previewData = data.result;
    renderPreview(previewData);
    document.getElementById("preview-section").style.display = "block";
    document.getElementById("generate-btn").disabled = false;

    if (previewData.invoice_exists) {
      showMsg("Warning: An invoice already exists for this period. Generation will fail unless it is deleted first.", "warning");
    } else if (previewData.backfill_ran) {
      showMsg("Backfill completed. Usage records were populated from historical data.", "info");
    }
  } catch (e) {
    showMsg("Network error: " + e.message, "error");
  } finally {
    setLoading(false);
    document.getElementById("preview-btn").disabled = false;
  }
}

function renderPreview(data) {
  const tbody = document.getElementById("preview-tbody");
  tbody.innerHTML = "";

  const items = data.line_items || [];
  const usageItems = items.filter(i => i.line_type === "usage");
  const creditItems = items.filter(i => i.line_type === "credit");

  if (usageItems.length === 0) {
    const tr = document.createElement("tr");
    tr.innerHTML = '<td colspan="5" style="text-align:center; color: #666; padding: 20px;">No usage recorded for this period</td>';
    tbody.appendChild(tr);
  }

  usageItems.forEach(item => {
    const tr = document.createElement("tr");
    const tierText = item.tier_breakdown
      ? item.tier_breakdown.map(t => `${t.range}: ${t.usage} @ ${t.rate} = $${t.cost}`).join("<br>")
      : "-";
    tr.innerHTML = `
      <td>${item.dimension || "-"}</td>
      <td>${parseFloat(item.quantity).toLocaleString()}</td>
      <td>${item.unit}</td>
      <td>$${parseFloat(item.amount).toFixed(2)}</td>
      <td style="font-size:0.8em">${tierText}</td>
    `;
    tbody.appendChild(tr);
  });

  creditItems.forEach(item => {
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td colspan="3">${item.description}</td>
      <td>-$${Math.abs(parseFloat(item.amount)).toFixed(2)}</td>
      <td>-</td>
    `;
    tbody.appendChild(tr);
  });

  // Summary
  const summary = document.getElementById("preview-summary");
  const planLabel = data.plan ? data.plan.charAt(0).toUpperCase() + data.plan.slice(1) : "-";
  summary.innerHTML = `
    <div><strong>Plan:</strong> ${planLabel}</div>
    <div><strong>Usage Total:</strong> $${parseFloat(data.usage_total).toFixed(2)}</div>
    <div><strong>Platform Fee:</strong> $${parseFloat(data.platform_fee).toFixed(2)}</div>
    <div><strong>Credits Applied:</strong> -$${parseFloat(data.credits_applied).toFixed(2)}</div>
    <div><strong>Subtotal:</strong> $${parseFloat(data.subtotal).toFixed(2)}</div>
    <div><strong>Tax:</strong> $${parseFloat(data.tax).toFixed(2)}</div>
    <div style="font-size:1.1em"><strong>Total: $${parseFloat(data.total).toFixed(2)}</strong></div>
  `;

  // Notices
  const notices = document.getElementById("preview-notices");
  notices.innerHTML = "";
  if (data.backfill_ran) {
    notices.innerHTML += '<div class="gi-msg gi-msg-info">Usage data was backfilled from historical records.</div>';
  }
  notices.innerHTML += `<div class="gi-msg gi-msg-info">Usage summary records found: ${data.usage_summary_count}</div>`;
}

async function generateInvoice() {
  const orgId = getOrgId();
  const period = getPeriod();
  if (!orgId) return;

  if (!confirm("Generate invoice for " + period + "? This will deduct credits and create the invoice record.")) {
    return;
  }

  hideMsg();
  setLoading(true, "Generating invoice...");
  document.getElementById("generate-btn").disabled = true;

  try {
    const res = await fetch("/usage/admin/invoice/generate/", {
      method: "POST",
      headers: headers(),
      body: JSON.stringify({ organization_id: orgId, period: period })
    });
    const data = await res.json();

    if (!data.status) {
      showMsg(data.result || data.message || "Generation failed", "error");
      document.getElementById("generate-btn").disabled = false;
      return;
    }

    const r = data.result;
    document.getElementById("preview-section").style.display = "none";
    document.getElementById("result-section").style.display = "block";

    const content = document.getElementById("result-content");
    content.innerHTML = `
      <div class="gi-msg gi-msg-success">Invoice generated successfully!</div>
      <div class="gi-summary">
        <div><strong>Invoice ID:</strong> ${r.invoice_id || "-"}</div>
        <div><strong>Total:</strong> $${parseFloat(r.total || 0).toFixed(2)}</div>
        <div><strong>Status:</strong> ${r.status || "-"}</div>
        <div><strong>Period:</strong> ${r.period_start} to ${r.period_end}</div>
        <div><strong>Line Items:</strong> ${r.line_items_count || 0}</div>
        <div><strong>Created:</strong> ${r.created}, Skipped: ${r.skipped}, Errors: ${r.errors}</div>
      </div>
    `;

    showMsg("Invoice generated successfully!", "success");
  } catch (e) {
    showMsg("Network error: " + e.message, "error");
    document.getElementById("generate-btn").disabled = false;
  } finally {
    setLoading(false);
  }
}

function resetForm() {
  previewData = null;
  document.getElementById("gi-org-id").value = "";
  document.getElementById("preview-section").style.display = "none";
  document.getElementById("result-section").style.display = "none";
  document.getElementById("generate-btn").disabled = true;
  document.getElementById("preview-tbody").innerHTML = "";
  document.getElementById("preview-summary").innerHTML = "";
  document.getElementById("preview-notices").innerHTML = "";
  hideMsg();
}
</script>
{% endblock %}