{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Branch Analytics{% endblock %}
{% block body_class %}branch-ai-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="/static/hil-pages/branches_analytics.css">
{% endblock %}
{% block content %}
<main class="branch-page">
    <h1 class="brand">Branch Analytics</h1>

    <div class="card">
        <div class="hil-inline-f5ed25e14e">
            <div class="muted">Compare branches, identify fast/slow movers, and get direct AI guidance.</div>
            <div>
                <a href="/admin">Admin</a>
            </div>
        </div>

        <div class="bottom-left-back">
            <a href="/analytics">Back</a>
        </div>
    </div>

    <div class="section-panel">
        <h2 class="hil-inline-d462248a40">Overview</h2>
        <div class="hil-inline-ea0662e451">
            <div class="hil-inline-47b618fc66">
                <label class="muted">Days</label>
                <input id="days" type="number" min="1" max="365" value="30">
            </div>
            <div>
                <button type="button" onclick="loadOverview()">Refresh</button>
            </div>
        </div>
        <div class="analytics-charts">
            <div class="chart-card">
                <h3>Branch Revenue vs Profit</h3>
                <p>Compare branch earning strength and retained profit.</p>
                <div class="chart-frame"><canvas id="branchRevenueChart"></canvas></div>
            </div>
            <div class="chart-card">
                <h3>Growth and Margin</h3>
                <p>Track which branches are improving and which ones convert revenue best.</p>
                <div class="chart-frame"><canvas id="branchHealthChart"></canvas></div>
            </div>
        </div>
        <div id="overview" class="table-wrap hil-inline-56f4356299"></div>
    </div>

    <div class="card">
        <h2 class="hil-inline-d462248a40">Branch Intelligence Assistant</h2>
        <div class="muted">Ask practical business questions. The assistant uses recent branch performance to give clear, action-focused guidance.</div>
        <div class="agent-shell hil-inline-56f4356299">
            <div class="agent-controls">
                <button class="ghost" type="button" onclick="askAI('Which branch is strongest and what should I do next?')">Best branch</button>
                <button class="ghost" type="button" onclick="askAI('Which products should I restock or transfer?')">Stock advice</button>
                <button class="ghost" type="button" onclick="askAI('How can I increase profit this week?')">Profit advice</button>
                <button class="secondary" id="voice-toggle" type="button" onclick="toggleVoice()">Voice On</button>
                <button class="secondary" type="button" onclick="stopVoice()">Stop Voice</button>
                <button class="secondary" type="button" onclick="clearChat()">Clear Chat</button>
                <span class="voice-status" id="voice-status">Voice responses on</span>
            </div>
            <div id="chat-box" class="chat-box" aria-live="polite"></div>
            <div class="agent-input">
                <textarea id="question" rows="2" placeholder="Type a business question..."></textarea>
                <button type="button" onclick="askAI()">Ask</button>
            </div>
        </div>
    </div>
</main>

<script>
const CHAT_KEY = "branchAnalyticsAiChat";
const VOICE_KEY = "branchAnalyticsAiVoice";
let chatHistory = loadChat();
let voiceEnabled = localStorage.getItem(VOICE_KEY) !== "off";
let branchRevenueChart = null;
let branchHealthChart = null;

const branchPalette = {
  blue: "#2563eb",
  emerald: "#059669",
  cyan: "#0891b2",
  violet: "#7c3aed",
  amber: "#d97706",
  grid: "rgba(100, 116, 139, 0.18)",
  text: "#334155"
};

Chart.defaults.font.family = "'Inter', 'Segoe UI', Arial, sans-serif";
Chart.defaults.color = branchPalette.text;

function money(value) {
  return Number(value || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
}

function chartBase(extra = {}) {
  const pluginOverrides = extra.plugins || {};
  const basePlugins = {
    legend: {position: "bottom", labels: {usePointStyle: true, boxWidth: 8, padding: 16}},
    tooltip: {
      backgroundColor: "#0f172a",
      borderColor: "rgba(148, 163, 184, 0.28)",
      borderWidth: 1,
      padding: 12,
      titleColor: "#f8fafc",
      bodyColor: "#e2e8f0"
    }
  };
  return {
    responsive: true,
    maintainAspectRatio: false,
    layout: {padding: {top: 8, right: 12, bottom: 4, left: 4}},
    ...extra,
    plugins: {
      ...basePlugins,
      ...pluginOverrides,
      legend: {...basePlugins.legend, ...(pluginOverrides.legend || {})},
      tooltip: {...basePlugins.tooltip, ...(pluginOverrides.tooltip || {})}
    }
  };
}

function renderBranchCharts(branches) {
  const rows = Array.isArray(branches) && branches.length ? branches : [{
    branch_name: "No data",
    revenue: 0,
    profit: 0,
    growth_rate: 0,
    margin: 0
  }];
  const labels = rows.map(row => row.branch_name || "Branch");

  if (branchRevenueChart) branchRevenueChart.destroy();
  branchRevenueChart = new Chart(document.getElementById("branchRevenueChart"), {
    type: "bar",
    data: {
      labels,
      datasets: [{
        label: "Revenue",
        data: rows.map(row => Number(row.revenue || 0)),
        backgroundColor: branchPalette.blue,
        borderRadius: 6,
        maxBarThickness: 36
      }, {
        label: "Profit",
        data: rows.map(row => Number(row.profit || 0)),
        backgroundColor: branchPalette.emerald,
        borderRadius: 6,
        maxBarThickness: 36
      }]
    },
    options: chartBase({
      plugins: {
        tooltip: {callbacks: {label: ctx => ctx.dataset.label + ": " + money(ctx.raw)}}
      },
      scales: {
        x: {grid: {display: false}, ticks: {color: branchPalette.text}},
        y: {beginAtZero: true, grid: {color: branchPalette.grid}, ticks: {callback: value => money(value)}}
      }
    })
  });

  if (branchHealthChart) branchHealthChart.destroy();
  branchHealthChart = new Chart(document.getElementById("branchHealthChart"), {
    type: "line",
    data: {
      labels,
      datasets: [{
        label: "Growth %",
        data: rows.map(row => Number(row.growth_rate || 0)),
        borderColor: branchPalette.cyan,
        backgroundColor: "rgba(8, 145, 178, 0.12)",
        borderWidth: 3,
        pointRadius: 3,
        tension: 0.35,
        fill: true
      }, {
        label: "Margin %",
        data: rows.map(row => Number(row.margin || 0)),
        borderColor: branchPalette.violet,
        backgroundColor: "rgba(124, 58, 237, 0.10)",
        borderWidth: 3,
        pointRadius: 3,
        tension: 0.35,
        fill: true
      }]
    },
    options: chartBase({
      interaction: {mode: "index", intersect: false},
      plugins: {
        tooltip: {callbacks: {label: ctx => ctx.dataset.label + ": " + Number(ctx.raw || 0).toFixed(1) + "%"}}
      },
      scales: {
        x: {grid: {display: false}, ticks: {color: branchPalette.text}},
        y: {grid: {color: branchPalette.grid}, ticks: {callback: value => value + "%"}}
      }
    })
  });
}

function esc(s) {
  return String(s || "").replace(/[&<>"']/g, function(c) {
    const map = {
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': "&quot;",
      "'": "&#39;"
    };
    return map[c];
  });
}

function loadChat() {
  try {
    const saved = JSON.parse(localStorage.getItem(CHAT_KEY) || "[]");
    return Array.isArray(saved) ? saved.slice(-16) : [];
  } catch (e) {
    return [];
  }
}

function saveChat() {
  localStorage.setItem(CHAT_KEY, JSON.stringify(chatHistory.slice(-16)));
}

function renderChat() {
  const box = document.getElementById("chat-box");
  if (!chatHistory.length) {
    box.innerHTML = "<div class='chat-empty'>Ask a question to start. Example: which branch needs attention this week?</div>";
    return;
  }
  box.innerHTML = chatHistory.map(item => {
    const role = item.role === "user" ? "user" : item.role === "error" ? "error" : "assistant";
    return "<div class='message " + role + "'>" + esc(item.content) + "</div>";
  }).join("");
  box.scrollTop = box.scrollHeight;
}

function addMessage(role, content) {
  chatHistory.push({role: role, content: String(content || "").trim()});
  chatHistory = chatHistory.slice(-16);
  saveChat();
  renderChat();
}

function setVoiceUi() {
  document.getElementById("voice-toggle").textContent = voiceEnabled ? "Voice On" : "Voice Off";
  document.getElementById("voice-status").textContent = voiceEnabled ? "Voice responses on" : "Voice responses off";
}

function speak(text) {
  if (!voiceEnabled || !("speechSynthesis" in window) || !window.SpeechSynthesisUtterance) {
    return;
  }
  const clean = String(text || "").replace(/\s+/g, " ").slice(0, 900);
  if (!clean) return;
  window.speechSynthesis.cancel();
  const utterance = new SpeechSynthesisUtterance(clean);
  utterance.rate = 0.96;
  utterance.pitch = 1;
  window.speechSynthesis.speak(utterance);
}

function stopVoice() {
  if ("speechSynthesis" in window) {
    window.speechSynthesis.cancel();
  }
}

function toggleVoice() {
  voiceEnabled = !voiceEnabled;
  localStorage.setItem(VOICE_KEY, voiceEnabled ? "on" : "off");
  setVoiceUi();
}

function clearChat() {
  stopVoice();
  chatHistory = [];
  saveChat();
  renderChat();
}

function loadOverview() {
  const days = Number(document.getElementById("days").value || 30);
  fetch("/api/analytics/branches/overview?days=" + encodeURIComponent(days))
    .then(res => res.json())
    .then(data => {
      const box = document.getElementById("overview");
      if (!data.branches || data.branches.length === 0) {
        box.innerHTML = "<div class='muted'>No branch data available.</div>";
        return;
      }
      let html = "<table><thead><tr><th>Branch</th><th>Trend</th><th>Revenue</th><th>Profit</th><th>Movers</th><th>Recommendation</th></tr></thead><tbody>";
      data.branches.forEach(r => {
        const movers = []
          .concat((r.high_moving || []).slice(0,3).map(p => "<span class='pill'>Fast</span> " + esc(p)))
          .concat((r.low_moving || []).slice(0,3).map(p => "<span class='pill'>Slow</span> " + esc(p)));
        const rec = (r.recommendations || [])[0] || "";
        html += "<tr>"
          + "<td><strong>" + esc(r.branch_name) + "</strong></td>"
          + "<td>" + esc(r.trend) + " (" + esc(r.growth_rate) + "%)</td>"
          + "<td>" + esc(r.revenue) + "</td>"
          + "<td>" + esc(r.profit) + "</td>"
          + "<td>" + movers.join("<br>") + "</td>"
          + "<td>" + esc(rec) + "</td>"
          + "</tr>";
      });
      html += "</tbody></table>";
      box.innerHTML = html;
      renderBranchCharts(data.branches);
    })
    .catch(() => {
      document.getElementById("overview").innerHTML = "<div class='muted'>Failed to load.</div>";
      renderBranchCharts([]);
    });
}

async function askAI(quickQuestion) {
  const days = Number(document.getElementById("days").value || 30);
  const input = document.getElementById("question");
  const q = String(quickQuestion || input.value || "").trim();
  if (!q) return;
  input.value = "";
  addMessage("user", q);
  addMessage("assistant", "Thinking...");
  const thinkingIndex = chatHistory.length - 1;
  try {
    const res = await fetch("/api/analytics/branches/ai", {
      method: "POST",
      headers: {"Content-Type":"application/json"},
      body: JSON.stringify({question: q, days: days, history: chatHistory.slice(-10)})
    });
    const data = await res.json();
    const answer = data.answer || data.message || "I could not complete the analysis just now. Refresh the overview and try again.";
    chatHistory[thinkingIndex] = {role: data.error ? "error" : "assistant", content: answer};
    saveChat();
    renderChat();
    if (!data.error) speak(answer);
  } catch (e) {
    chatHistory[thinkingIndex] = {role: "error", content: "The branch assistant is temporarily unavailable. Refresh the overview, then try again."};
    saveChat();
    renderChat();
  }
}

document.getElementById("question").addEventListener("keydown", function(event) {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    askAI();
  }
});

setVoiceUi();
renderChat();
loadOverview();
</script>
{% endblock %}