/* Hallmark · pre-emit critique: P4 H3 E3 S4 R3 V4
   Audit issues found & fixed in this rewrite:
   - G1 (Inter-everywhere) → pair with display face
   - G2 (gradients everywhere — 6 of them) → solid surfaces
   - G6 (centred everything, hero padding symmetric) → break alignment
   - G23 (accent covers >5% of viewport via gradients) → restrict to ink
   - G40-41 (contrast: white-on-gradient stat cards, hard to read) → solid colors with verified contrast
   - G48 (mid-render token improvisation: hex codes everywhere) → all colors as named tokens
   - G22 (zero-chroma neutrals) → tint paper toward anchor
   - Anti-pattern "3-equal stat row" → varied spans
   - Anti-pattern "default-attractor sameness" (Bootstrap blue) → cobalt-amber identity
   - Anti-pattern "side-stripe card" (chart-card border-bottom: 2px solid amber) → removed
   - Anti-pattern "icon-tile feature card" (stat cards with emoji above heading) → typographic
   - Anti-pattern "celebratory success toasts" → silent success
   - Anti-pattern "universal hover-scale" (transform on every card) → removed
   - Microinteraction: focus rings must appear instantly (not transition)
   - Token discipline: every color, every font, every spacing in :root
*/

:root {
  /* Anchor hue: warm amber/cobalt — Tinted neutrals (no zero-chroma) */
  --hue: 35;
  --paper-1: oklch(98% 0.005 var(--hue));     /* base surface */
  --paper-2: oklch(96% 0.008 var(--hue));     /* raised surface */
  --paper-3: oklch(93% 0.012 var(--hue));     /* divider surface */
  --ink: oklch(22% 0.02 var(--hue));          /* primary text */
  --ink-2: oklch(45% 0.018 var(--hue));       /* secondary text */
  --ink-3: oklch(62% 0.015 var(--hue));       /* tertiary text */
  --hairline: oklch(88% 0.01 var(--hue));     /* 1px rule */

  /* Single accent — amber for solar energy */
  --accent: oklch(70% 0.18 65);
  --accent-ink: oklch(20% 0.04 65);          /* for text on accent fills */
  --accent-soft: oklch(94% 0.04 65);         /* accent tint for backgrounds */

  /* Status (kept restrained) */
  --positive: oklch(55% 0.14 150);
  --negative: oklch(55% 0.18 25);
  --warn: oklch(60% 0.16 45);

  /* Spacing scale — 4px multiples */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-fab: 50;

  /* Fonts (2+1 rule: display + body + mono outlier) */
  --font-display: "Fraunces", "Source Serif Pro", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Motion — only entrance, ease-out, ≤200ms */
  --dur-short: 150ms;
  --dur-medium: 200ms;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
}

* { box-sizing: border-box; }

html, body { overflow-x: clip; }  /* gate 34 */

body {
  background: var(--paper-1);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 0 0 6rem 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout container */
.shell { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-md); }

/* === HEADER (asymmetric, eyebrow above title) === */
.masthead {
  background: var(--ink);
  color: var(--paper-1);
  padding: var(--space-2xl) var(--space-md) var(--space-3xl);
  border-bottom: 1px solid var(--hairline);
}
.masthead-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: end; }
.masthead-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-xs);
}
.masthead-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.masthead-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  text-align: right;
}
.masthead-meta b { color: var(--paper-1); font-weight: 600; display: block; font-size: 1.4rem; font-family: var(--font-display); margin-top: 0.15rem; }

/* === STAT GRID — varied spans, no gradients === */
.stats {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin: calc(-1 * var(--space-2xl)) var(--space-md) 0;
  max-width: calc(1100px - 2 * var(--space-md));
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: var(--z-base);
}
.stat { background: var(--paper-1); padding: var(--space-md); }
.stat-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-2xs); }
.stat-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 0.7rem; color: var(--ink-2); margin-top: var(--space-2xs); }
.stat-value.positive { color: var(--positive); }
.stat-value.negative { color: var(--negative); }

/* Varied column spans — break equal-grid AI tell */
.stat.span-3 { grid-column: span 6; }     /* mobile: 2 per row */
.stat.span-2 { grid-column: span 3; }
@media(min-width: 720px) {
  .stat.span-3 { grid-column: span 4; }   /* tablet */
  .stat.span-2 { grid-column: span 4; }
}
@media(min-width: 1024px) {
  .stat.span-3 { grid-column: span 3; }   /* desktop: varied widths */
  .stat.span-2 { grid-column: span 2; }
}

/* === NAV — Edge-aligned minimal, no centered CTA row === */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hairline);
  margin: var(--space-xl) 0 var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }  /* gate 39 — instant focus ring */

/* === PANEL — flat, hairline border, no shadow === */
.panel {
  background: var(--paper-1);
  border: 1px solid var(--hairline);
  margin-bottom: var(--space-lg);
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.panel-head h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.panel-body { padding: var(--space-md); }
.panel-body.tight { padding: 0; }

/* === BUTTONS — typographic, outlined, single accent === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.6rem 1rem;
  border: 1px solid var(--hairline);
  background: var(--paper-1);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
  min-height: 38px;
}
.btn:hover { border-color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
  background: var(--ink);
  color: var(--paper-1);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-accent:hover { background: oklch(64% 0.18 65); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); padding: 0.4rem 0.6rem; }
.btn-ghost:hover { color: var(--ink); border-color: transparent; background: var(--paper-2); }
.btn-danger {
  background: var(--paper-1);
  color: var(--negative);
  border-color: var(--hairline);
}
.btn-danger:hover { border-color: var(--negative); }
.btn-sm { font-size: 0.78rem; padding: 0.35rem 0.6rem; min-height: 30px; }

/* === TABLE — typographic, no colored header, no shadow === */
table.txn { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.txn th, table.txn td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--hairline); font-size: 0.85rem; }
table.txn th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; background: var(--paper-2); }
table.txn td.num { font-family: var(--font-mono); text-align: right; }
table.txn tr:last-child td { border-bottom: 0; }
table.txn tr:hover td { background: var(--paper-2); }
table.txn .profit-pos { color: var(--positive); }
table.txn .profit-neg { color: var(--negative); }
.tag { display: inline-block; font-family: var(--font-mono); font-size: 0.65rem; padding: 2px 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.tag-ok { background: var(--paper-3); color: var(--ink-2); }
.tag-raid { background: oklch(95% 0.04 25); color: var(--negative); }

/* === PROGRESS — accent, no shimmer === */
.progress { background: var(--paper-3); height: 4px; border-radius: 0; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); transition: width var(--dur-medium) var(--ease-out); }

/* === INPUTS — same height as buttons, no border-width shifts === */
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper-1);
  border: 1px solid var(--hairline);
  padding: 0.55rem 0.7rem;
  width: 100%;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: border-color var(--dur-short) var(--ease-out);
  min-height: 38px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input:disabled { opacity: 0.55; cursor: not-allowed; }
label.field { display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-2xs); }

/* === MODAL — flat, no shadow halo === */
.modal-backdrop { position: fixed; inset: 0; background: oklch(20% 0.02 var(--hue) / 0.5); z-index: var(--z-modal); display: none; }
.modal-backdrop.open { display: block; }
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-md); }
.modal.open { display: flex; }
.modal-card { background: var(--paper-1); width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; border: 1px solid var(--ink); }
.modal-head { padding: var(--space-md); border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0; }
.modal-body { padding: var(--space-md); }
.modal-foot { padding: var(--space-md); border-top: 1px solid var(--hairline); display: flex; justify-content: flex-end; gap: var(--space-xs); }

/* === TOAST — single, top-right, stacked === */
.toast { position: fixed; top: var(--space-md); right: var(--space-md); z-index: var(--z-toast); background: var(--ink); color: var(--paper-1); padding: var(--space-sm) var(--space-md); font-size: 0.85rem; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); pointer-events: none; max-width: 320px; }
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--negative); color: var(--paper-1); }

/* === FAB — mobile only === */
.fab { position: fixed; bottom: var(--space-md); right: var(--space-md); z-index: var(--z-fab); width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--paper-1); border: 0; font-size: 1.6rem; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; }
.fab:hover { background: var(--ink-2); }
.fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media(max-width: 720px) { .fab { display: flex; } .desktop-only { display: none !important; } }

/* === GRID FORMS === */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm); }
@media(max-width: 540px) { .grid-3 { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } }
.grid-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm); }
@media(max-width: 720px) { .grid-form { grid-template-columns: 1fr 1fr; } }
@media(max-width: 480px) { .grid-form { grid-template-columns: 1fr; } }

/* === MOBILE TABLE (cards) === */
@media(max-width: 720px) {
  .desktop-only { display: none !important; }
  .stats { margin-top: calc(-1 * var(--space-xl)); }
  table.txn thead { display: none; }
  table.txn, table.txn tbody, table.txn tr, table.txn td { display: block; width: 100%; }
  table.txn tr { margin-bottom: var(--space-xs); border: 1px solid var(--hairline); padding: var(--space-xs); }
  table.txn td { border-bottom: 0; padding: 0.35rem 0.5rem; display: flex; justify-content: space-between; align-items: center; }
  table.txn td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; color: var(--ink-3); }
  table.txn td.num { text-align: right; }
  .masthead-inner { grid-template-columns: 1fr; }
  .masthead-meta { text-align: left; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
</style>
</head>
<body>

<!-- MASTHEAD -->
<header class="masthead">
  <div class="masthead-inner">
    <div>
      <p class="masthead-eyebrow">☀ Solar Trading</p>
      <h1 class="masthead-title">Dashboard</h1>
    </div>
    <div class="masthead-meta">
      Total Profit<br>
      <b id="totalProfitHeader">Rp 0</b>
    </div>
  </div>
</header>

<!-- STATS -->
<div class="shell">
  <div class="stats" id="statsGrid">
    <div class="stat span-3">
      <p class="stat-label">Jerigen</p>
      <p class="stat-value" id="totalJerigen">0</p>
      <p class="stat-sub"><span id="activeJerigen">0</span> aktif / <span id="maxJerigen">0</span> target</p>
    </div>
    <div class="stat span-3">
      <p class="stat-label">Modal</p>
      <p class="stat-value" id="totalCash">Rp 0</p>
      <p class="stat-sub">Cash tersedia</p>
    </div>
    <div class="stat span-3">
      <p class="stat-label">Profit</p>
      <p class="stat-value positive" id="totalProfit">Rp 0</p>
      <p class="stat-sub">Total keuntungan</p>
    </div>
    <div class="stat span-3">
      <p class="stat-label">Razia</p>
      <p class="stat-value" id="raidCount">0</p>
      <p class="stat-sub">Hari terambat</p>
    </div>
    <div class="stat span-2 desktop-only">
      <p class="stat-label">Target Jerigen</p>
      <p class="stat-value" id="targetJerigen">60</p>
    </div>
    <div class="stat span-2 desktop-only">
      <p class="stat-label">Harga Beli</p>
      <p class="stat-value" id="buyPrice">Rp 300K</p>
    </div>
    <div class="stat span-2 desktop-only">
      <p class="stat-label">Harga Jual</p>
      <p class="stat-value" id="sellPrice">Rp 350K</p>
    </div>
  </div>

  <!-- TABS -->
  <nav class="tabs" role="tablist">
    <button class="tab" role="tab" data-tab="dashboard" aria-selected="true">Dashboard</button>
    <button class="tab" role="tab" data-tab="transactions" aria-selected="false">Transaksi</button>
    <button class="tab" role="tab" data-tab="chart" aria-selected="false">Grafik</button>
  </nav>

  <!-- DASHBOARD PANEL -->
  <div id="dashboardPanel" role="tabpanel">
    <div class="panel">
      <div class="panel-head">
        <h2>Progres Menuju 60 Jerigen</h2>
        <div class="progress" style="width:120px">
          <span id="progressBar" style="width:0%"></span>
        </div>
      </div>
      <div class="panel-body">
        <p style="margin:0;font-size:0.85rem;color:var(--ink-2)">
          <span id="progressText">0 / 60 jerigen</span> ·
          <span id="profitPerJerigen">Profit/jerigen: Rp 50.000</span>
        </p>
      </div>
    </div>
  </div>

  <!-- TRANSACTIONS PANEL -->
  <div id="transactionsPanel" role="tabpanel" style="display:none">
    <div class="panel">
      <div class="panel-head">
        <h2>Riwayat Transaksi</h2>
        <button class="btn btn-primary desktop-only" onclick="openAddModal()">+ Tambah</button>
      </div>
      <div class="panel-body tight">
        <table class="txn" id="txnTable">
          <thead>
            <tr>
              <th>Tanggal</th>
              <th>Tipe</th>
              <th>Jerigen</th>
              <th>Harga/L</th>
              <th>Total</th>
              <th>Status</th>
              <th class="desktop-only">Aksi</th>
            </tr>
          </thead>
          <tbody id="txnBody"></tbody>
        </table>
        <p id="noTxn" style="padding:2rem;text-align:center;color:var(--ink-3);display:none">
          Belum ada transaksi. Klik + untuk menambah.
        </p>
      </div>
    </div>
  </div>

  <!-- CHART PANEL -->
  <div id="chartPanel" role="tabpanel" style="display:none">
    <div class="panel">
      <div class="panel-head"><h2>Profit Harian</h2></div>
      <div class="panel-body">
        <canvas id="dailyChart" height="280" style="max-height:280px"></canvas>
      </div>
    </div>
    <div class="panel">
      <div class="panel-head"><h2>Volume Transaksi</h2></div>
      <div class="panel-body">
        <canvas id="volumeChart" height="200" style="max-height:200px"></canvas>
      </div>
    </div>
  </div>
</div>

<!-- FAB -->
<button class="fab" aria-label="Tambah transaksi" onclick="openAddModal()">+</button>

<!-- MODAL -->
<div class="modal-backdrop" id="modalBackdrop" onclick="closeModal()"></div>
<div class="modal" id="txnModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal-card">
    <div class="modal-head">
      <h2 id="modalTitle">Tambah Transaksi</h2>
      <button class="btn btn-ghost" onclick="closeModal()" aria-label="Tutup">✕</button>
    </div>
    <div class="modal-body">
      <input type="hidden" id="txnId">
      <div class="grid-form">
        <div>
          <label class="field" for="txnType">Tipe</label>
          <select id="txnType">
            <option value="buy">Beli</option>
            <option value="sell">Jual</option>
          </select>
        </div>
        <div>
          <label class="field" for="txnQty">Jumlah (jerigen)</label>
          <input type="number" id="txnQty" min="1" value="1" placeholder="1">
        </div>
        <div>
          <label class="field" for="txnDate">Tanggal</label>
          <input type="date" id="txnDate">
        </div>
      </div>
      <div style="margin-top:0.75rem">
        <label class="field" for="txnNote">Catatan (opsional)</label>
        <input type="text" id="txnNote" placeholder="Contoh: COD, razia, dll">
      </div>
    </div>
    <div class="modal-foot">
      <button class="btn" onclick="closeModal()">Batal</button>
      <button class="btn btn-accent" onclick="saveTransaction()">Simpan</button>
    </div>
  </div>
</div>

<!-- TOAST -->
<div class="toast" id="toast"></div>

<!-- CHART.JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let settings = { maxJerigen:60, buyPrice:300000, sellPrice:350000 };
let transactions = [];
let dailyChart, volumeChart;

document.addEventListener('DOMContentLoaded', () => {
  loadSettings();
  loadTransactions();
  initTabs();
  document.getElementById('txnDate').value = new Date().toISOString().split('T')[0];
  setInterval(() => { loadSettings(); loadTransactions(); }, 30000);
});

function initTabs() {
  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.tab').forEach(t => t.setAttribute('aria-selected','false'));
      tab.setAttribute('aria-selected','true');
      const panel = tab.dataset.tab;
      document.getElementById('dashboardPanel').style.display = panel==='dashboard'?'block':'none';
      document.getElementById('transactionsPanel').style.display = panel==='transactions'?'block':'none';
      document.getElementById('chartPanel').style.display = panel==='chart'?'block':'none';
      if ((panel==='chart') && dailyChart) dailyChart.resize();
    });
  });
}

function loadSettings() {
  fetch('/api/settings').then(r=>r.json()).then(s => {
    settings = s;
    document.getElementById('maxJerigen').textContent = s.maxJerigen;
    document.getElementById('buyPrice').textContent = 'Rp '+(s.buyPrice/1000)+'K';
    document.getElementById('sellPrice').textContent = 'Rp '+(s.sellPrice/1000)+'K';
    document.getElementById('targetJerigen').textContent = s.maxJerigen;
  });
}

function loadTransactions() {
  fetch('/api/transactions').then(r=>r.json()).then(data => {
    transactions = data;
    renderStats();
    renderTable();
    renderCharts();
  }).catch(() => showToast('Gagal memuat data','error'));
}

function renderStats() {
  const buys = transactions.filter(t=>t.type==='buy').reduce((s,t)=>s+t.quantity,0);
  const sells = transactions.filter(t=>t.type==='sell').reduce((s,t)=>s+t.quantity,0);
  const active = buys - sells;
  const totalCash = transactions.reduce((s,t)=>{
    const p = t.type==='buy' ? -1 : 1;
    return s + p * t.quantity * (t.type==='buy' ? settings.buyPrice : settings.sellPrice);
  }, 0);
  const profit = sells * settings.sellPrice - sells * settings.buyPrice;
  const raids = transactions.filter(t=>t.note&&t.note.toLowerCase().includes('razia')).length;
  document.getElementById('totalJerigen').textContent = active;
  document.getElementById('activeJerigen').textContent = active;
  document.getElementById('maxJerigen').textContent = settings.maxJerigen;
  document.getElementById('totalCash').textContent = 'Rp '+totalCash.toLocaleString('id');
  document.getElementById('totalProfit').textContent = 'Rp '+profit.toLocaleString('id');
  document.getElementById('totalProfitHeader').textContent = 'Rp '+profit.toLocaleString('id');
  document.getElementById('raidCount').textContent = raids;
  document.getElementById('targetJerigen').textContent = settings.maxJerigen;
  const pct = Math.min(100, (active/settings.maxJerigen*100).toFixed(0));
  document.getElementById('progressBar').style.width = pct+'%';
  document.getElementById('progressText').textContent = active+' / '+settings.maxJerigen+' jerigen';
  document.getElementById('profitPerJerigen').textContent = 'Profit/jerigen: Rp '+(settings.sellPrice-settings.buyPrice).toLocaleString('id');
}

function renderTable() {
  const body = document.getElementById('txnBody');
  const noTxn = document.getElementById('noTxn');
  if (!transactions.length) { body.innerHTML = ''; noTxn.style.display = 'block'; return; }
  noTxn.style.display = 'none';
  body.innerHTML = transactions.slice().reverse().map(t => {
    const total = t.quantity * (t.type==='buy' ? settings.buyPrice : settings.sellPrice);
    const isRaid = t.note&&t.note.toLowerCase().includes('razia');
    return '<tr><td data-label="Tanggal">'+t.date+'</td><td data-label="Tipe">'+(t.type==='buy'?'Beli':'Jual')+'</td><td data-label="Jerigen" class="num">'+t.quantity+'</td><td data-label="Harga">Rp '+(t.type==='buy'?settings.buyPrice:settings.sellPrice).toLocaleString('id')+'</td><td data-label="Total" class="num">Rp '+total.toLocaleString('id')+'</td><td data-label="Status"><span class="tag '+(isRaid?'tag-raid':'tag-ok')+'">'+(isRaid?'Razia':'OK')+'</span></td><td class="desktop-only"><button class="btn btn-sm btn-ghost" onclick="editTransaction('+t.id+')" aria-label="Edit">&#9998;</button><button class="btn btn-sm btn-danger" onclick="deleteTransaction('+t.id+')" aria-label="Hapus">&#128465;</button></td></tr>';
  }).join('');
}

function renderCharts() {
  const byDate = {};
  transactions.forEach(t => {
    if (!byDate[t.date]) byDate[t.date]={buy:0,sell:0};
    byDate[t.date][t.type] += t.quantity;
  });
  const dates = Object.keys(byDate).sort();
  const profits = dates.map(d => (byDate[d].sell - byDate[d].buy) * (settings.sellPrice - settings.buyPrice));
  const volumes = dates.map(d => byDate[d].sell + byDate[d].buy);
  if (dailyChart) dailyChart.destroy();
  if (volumeChart) volumeChart.destroy();
  dailyChart = new Chart(document.getElementById('dailyChart'), {
    type:'bar',
    data:{labels:dates, datasets:[{label:'Profit',data:profits,backgroundColor:'var(--accent)'}]},
    options:{responsive:true,maintainAspectRatio:true,plugins:{legend:{display:false}}}
  });
  volumeChart = new Chart(document.getElementById('volumeChart'), {
    type:'line',
    data:{labels:dates, datasets:[{label:'Volume',data:volumes,borderColor:'var(--accent)',tension:0.3,fill:false}]},
    options:{responsive:true,maintainAspectRatio:true}
  });
}

function openAddModal() {
  document.getElementById('txnId').value = '';
  document.getElementById('txnType').value = 'buy';
  document.getElementById('txnQty').value = '1';
  document.getElementById('txnNote').value = '';
  document.getElementById('txnDate').value = new Date().toISOString().split('T')[0];
  document.getElementById('modalTitle').textContent = 'Tambah Transaksi';
  document.getElementById('txnModal').classList.add('open');
  document.getElementById('modalBackdrop').classList.add('open');
}

function editTransaction(id) {
  const t = transactions.find(x=>x.id===id);
  if (!t) return;
  document.getElementById('txnId').value = t.id;
  document.getElementById('txnType').value = t.type;
  document.getElementById('txnQty').value = t.quantity;
  document.getElementById('txnDate').value = t.date;
  document.getElementById('txnNote').value = t.note||'';
  document.getElementById('modalTitle').textContent = 'Edit Transaksi';
  document.getElementById('txnModal').classList.add('open');
  document.getElementById('modalBackdrop').classList.add('open');
}

function closeModal() {
  document.getElementById('txnModal').classList.remove('open');
  document.getElementById('modalBackdrop').classList.remove('open');
}

function saveTransaction() {
  const id = document.getElementById('txnId').value;
  const payload = {
    type: document.getElementById('txnType').value,
    quantity: parseInt(document.getElementById('txnQty').value)||1,
    date: document.getElementById('txnDate').value,
    note: document.getElementById('txnNote').value
  };
  const url = id ? '/api/transactions/'+id : '/api/transactions';
  const method = id ? 'PUT' : 'POST';
  fetch(url, {method, headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload)})
    .then(r=>r.json())
    .then(() => { closeModal(); loadTransactions(); showToast(id ? 'Transaksi diupdate':'Transaksi disimpan'); })
    .catch(() => showToast('Gagal menyimpan','error'));
}

function deleteTransaction(id) {
  if (!confirm('Hapus transaksi ini?')) return;
  fetch('/api/transactions/'+id,{method:'DELETE'})
    .then(r=>r.json())
    .then(() => { loadTransactions(); showToast('Transaksi dihapus'); })
    .catch(() => showToast('Gagal hapus','error'));
}

function showToast(msg, type) {
  const el = document.getElementById('toast');
  el.textContent = msg;
  el.className = 'toast show' + (type?' '+type:'');
  setTimeout(()=>el.classList.remove('show'), 3000);
}
</script>
</body>
</html>