package view

import (
	"fmt"
	"git.staur.ca/stobbsm/clustvirt/lib/host"
	"git.staur.ca/stobbsm/clustvirt/view/components"
	"git.staur.ca/stobbsm/clustvirt/view/layouts"
)

script memchart(used uint64, free uint64, buf uint64, cache uint64) {
  ctx = document.getElementById('memchart');

  new Chart(ctx, {
    type: 'pie',
      data: {
        labels: [
          'Used',
          'Free',
          'Cached',
          'Buffered'
        ],
      datasets: [{
        label: 'Memory Usage',
        data: [
          used,
          free,
          cache,
          buf,
        ],
        backgroundColor: [
          'rgb(255,0,0)',
          'rgb(0,255,0)',
          'rgb(128,128,0)',
          'rgb(0,0,255)'
        ],
        hoverOffset: 4
      }],
    }
  });
}

// MemChart get's the memory pi chart from the host
templ MemChart(h *host.Host) {
	<div class={ "flex" , "flex-row" }>
		<div class={ "size-40" , "md:size-80" }>
			<canvas id="memchart" class={ "size-40" , "md:size-80" }></canvas>
		</div>
		<ul>
			<li>Free: <span id="memfree">{ fmt.Sprintf("%d Gi", h.NodeMemory.Free/1024/1024) }</span></li>
			<li>Cached: <span id="memcach">{ fmt.Sprintf("%d Gi", h.NodeMemory.Cached/1024/1024) }</span></li>
			<li>Buffers: <span id="membuf">{ fmt.Sprintf("%d Gi", h.NodeMemory.Buffers/1024/1024) }</span></li>
			<li>Total: <span id="memtot">{ fmt.Sprintf("%d Gi", h.NodeMemory.Total/1024/1024) }</span></li>
		</ul>
	</div>
	@memchart(h.NodeMemory.Total-h.NodeMemory.Free-h.NodeMemory.Buffers-h.NodeMemory.Cached, h.NodeMemory.Free,
		h.NodeMemory.Buffers, h.NodeMemory.Cached)
}

templ hostButton(hostname string) {
	<button
		hx-target="#sysContent"
		hx-get={ fmt.Sprintf("/htmx/host/%s", hostname) }
		class={ "rounded",
      "border",
      "border-solid",
      "border-uiblue-700",
      "text-uigrey-200",
      "bg-uiblue-800",
      "hover:border-uipurple-400",
      "hover:text-ui-grey-800",
      "hover:bg-uipurple-600",
      "gap-2",
      "p-1",
      "my-1",
      "w-full",
      "flex",
      "flex-row",
      "justify-between" }
	>
		<span class={ "px-2" }>{ hostname }</span>
		<img class={ "htmx-indicator" , "inline-block" , "h-6" , "px-2" } src="/static/images/bars.svg"/>
	</button>
}

// HostConnect is the page that allows us to select a host to get information from
templ HostMain(navBarItems []components.NavItem) {
	@layouts.Manager("ClustVirt", "Cluster Manager", navBarItems) {
		<div class={ "flex" , "flex-row" , "h-full" , "mt-2" }>
			<div id="sysNavBar" class={ "w-1/6" , "border-uigrey-600" , "border" , "rounded" , "border-dotted" , "p-2" }>
				<ul>
					<li>
						@hostButton("venus.staur.ca")
					</li>
					<li>
						@hostButton("earth.staur.ca")
					</li>
					<li>
						@hostButton("mars.staur.ca")
					</li>
				</ul>
			</div>
			<div id="sysContent" class={ "w-3/4" , "px-2" }>
				<p>This is where you can see a system overview of all available hosts</p>
				<p>
					For now, there is just this simple box to choose a host to connect to
					and push the button to load the system information via HTMX
				</p>
			</div>
		</div>
	}
}

// HostInfo is meant to be an HTMX response
templ HostInfo(h *host.Host) {
	<div class={ "flex" , "flex-col" }>
		<div
			class={ "flex" , "flex-row" , "justify-start" , "px-2" }
			hx-trigger="every 30s"
			hx-get={ fmt.Sprintf("/htmx/host/%s/stats", h.HostName) }
			hx-target="#sysInfo"
		>
			<h3>{ h.HostName }</h3>
			<img class={ "h-6" , "px-2" , "htmx-indicator" , "inline-block" } src="/static/images/grid.svg"/>
		</div>
		<div class={ "flex" , "flex-row" , "flex-wrap" } id="sysInfo">
			@SysInfo(h)
		</div>
	</div>
}

templ SysInfo(h *host.Host) {
	@MemChart(h)
}