{% extends "base.html" %}
{% block title %}Owner yearly reports — TechHand Remote Support{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-file-invoice-dollar" aria-hidden="true"></i> Owner yearly reports</h1>
</div>
<p class="muted">Data lives in TNT. Use export or print for PDF workflow (browser print → Save as PDF).</p>

<div id="or-root" class="portal-owner-reports">
  <div class="row" style="display:flex; gap:1rem; flex-wrap:wrap;">
    <div style="flex:1; min-width:220px;">
      <h2 class="h6">Sites</h2>
      <ul id="or-sites" class="list-unstyled"></ul>
      <button type="button" class="btn btn-secondary btn-sm mt-2" id="or-refresh">Refresh</button>
    </div>
    <div style="flex:2; min-width:280px;">
      <h2 class="h6">Reports</h2>
      <ul id="or-reports" class="list-unstyled"></ul>
      <div class="mt-2">
        <label class="form-label small">Year</label>
        <input type="number" id="or-year" class="form-control form-control-sm" style="max-width:8rem;" />
        <button type="button" class="btn btn-primary btn-sm mt-1" id="or-ensure-year">Ensure year</button>
      </div>
    </div>
  </div>
  <hr/>
  <h2 class="h6">Edit report</h2>
  <p class="muted small" id="or-pick-hint">Select a report from the list.</p>
  <div id="or-editor" style="display:none;">
    <div class="mb-2">
      <label class="form-label small">Year summary</label>
      <textarea id="or-summary" class="form-control" rows="4"></textarea>
    </div>
    <div class="mb-2">
      <label class="form-label small">Notes</label>
      <textarea id="or-notes" class="form-control" rows="3"></textarea>
    </div>
    <button type="button" class="btn btn-primary btn-sm" id="or-save">Save</button>
    <a class="btn btn-outline-secondary btn-sm" id="or-print" href="#" target="_blank" rel="noopener">Print view</a>
    <a class="btn btn-outline-secondary btn-sm" id="or-json" href="#" target="_blank" rel="noopener">JSON</a>
    <a class="btn btn-outline-secondary btn-sm" id="or-csv" href="#" target="_blank" rel="noopener">CSV</a>
    <a class="btn btn-outline-secondary btn-sm" id="or-xlsx" href="#" target="_blank" rel="noopener">Excel</a>
  </div>
</div>

<script>
(function() {
  const sitesEl = document.getElementById('or-sites');
  const reportsEl = document.getElementById('or-reports');
  const yearInput = document.getElementById('or-year');
  const editor = document.getElementById('or-editor');
  const pickHint = document.getElementById('or-pick-hint');
  const summaryEl = document.getElementById('or-summary');
  const notesEl = document.getElementById('or-notes');
  let sites = [];
  let reports = [];
  let selectedReportId = null;
  let selectedPayload = null;

  yearInput.value = new Date().getFullYear();

  async function jget(path) {
    const r = await fetch('/api/portal/' + path, { headers: { 'Accept': 'application/json' } });
    const j = await r.json().catch(() => ({}));
    return { ok: r.ok, j };
  }
  async function jpatch(path, body) {
    const r = await fetch('/api/portal/' + path, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(body || {})
    });
    const j = await r.json().catch(() => ({}));
    return { ok: r.ok, j };
  }
  async function jpost(path, body) {
    const r = await fetch('/api/portal/' + path, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(body || {})
    });
    const j = await r.json().catch(() => ({}));
    return { ok: r.ok, j };
  }

  function renderSites() {
    sitesEl.innerHTML = '';
    sites.forEach(s => {
      const li = document.createElement('li');
      li.className = 'mb-1';
      li.textContent = s.name + ' (#' + s.id + ')';
      sitesEl.appendChild(li);
    });
    if (!sites.length) sitesEl.innerHTML = '<li class="muted">No sites (check sites:read scope).</li>';
  }

  function renderReports() {
    reportsEl.innerHTML = '';
    reports.forEach(rep => {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = '#';
      a.textContent = 'Year ' + rep.year + ' — site #' + rep.site_id + ' — ' + (rep.status || 'draft');
      a.addEventListener('click', function(e) {
        e.preventDefault();
        selectReport(rep);
      });
      li.appendChild(a);
      reportsEl.appendChild(li);
    });
    if (!reports.length) reportsEl.innerHTML = '<li class="muted">No reports yet.</li>';
  }

  function selectReport(rep) {
    selectedReportId = rep.id;
    selectedPayload = rep.data || {};
    summaryEl.value = selectedPayload.year_summary || '';
    notesEl.value = selectedPayload.notes || '';
    editor.style.display = 'block';
    pickHint.style.display = 'none';
    const base = '/api/portal/organization/owner-reports/reports/' + rep.id;
    document.getElementById('or-print').href = base + '/print';
    document.getElementById('or-json').href = base + '/export.json';
    document.getElementById('or-csv').href = base + '/export.csv';
    document.getElementById('or-xlsx').href = base + '/export.xlsx';
  }

  async function load() {
    const s = await jget('organization/sites');
    if (s.j && s.j.success) sites = s.j.sites || [];
    else sites = [];
    renderSites();
    const q = 'organization/owner-reports/reports';
    const r = await jget(q);
    if (r.j && r.j.success) reports = r.j.reports || [];
    else reports = [];
    renderReports();
  }

  document.getElementById('or-refresh').addEventListener('click', load);
  document.getElementById('or-ensure-year').addEventListener('click', async function() {
    const y = parseInt(yearInput.value, 10);
    if (!y) return;
    const res = await jpost('organization/owner-reports/ensure-year', { year: y });
    if (!res.ok || !res.j.success) {
      alert(res.j.error || 'Ensure year failed');
      return;
    }
    await load();
  });
  document.getElementById('or-save').addEventListener('click', async function() {
    if (!selectedReportId) return;
    const body = { data: { year_summary: summaryEl.value, notes: notesEl.value } };
    const res = await jpatch('organization/owner-reports/reports/' + selectedReportId, body);
    if (!res.ok || !res.j.success) {
      alert(res.j.error || 'Save failed');
      return;
    }
    await load();
  });

  load();
})();
</script>
{% endblock %}