package main

import (
	"encoding/json"
	"errors"
	"fmt"
	"html/template"
	"log"
	"net/http"
	"os"
	"path/filepath"
	"strings"
	"sync"
	"time"

	"github.com/robinson/gos7"
	"gopkg.in/yaml.v3"
)

// =============================================
// Configuration
// =============================================
type Config struct {
	Server     ServerConfig     `yaml:"server"`
	PLC        PLCConfig        `yaml:"plc"`
	Thresholds ThresholdsConfig `yaml:"thresholds"`
	Trend      TrendConfig      `yaml:"trend"`
	Press      PressConfig      `yaml:"press"`
	UI         UIConfig         `yaml:"ui"`
}

type ServerConfig struct {
	ListenAddr string `yaml:"listen_addr"`
}

type PLCConfig struct {
	IP                string `yaml:"ip"`
	DBNum             int    `yaml:"db_num"`
	Rack              int    `yaml:"rack"`
	Slot              int    `yaml:"slot"`
	PollMs            int    `yaml:"poll_ms"`
	ConnectTimeoutSec int    `yaml:"connect_timeout_sec"`
	IdleTimeoutSec    int    `yaml:"idle_timeout_sec"`
	ReconnectDelaySec int    `yaml:"reconnect_delay_sec"`
}

type ThresholdsConfig struct {
	WarningPercent  float64 `yaml:"warning_percent"`
	CriticalPercent float64 `yaml:"critical_percent"`
	GaugeMaxPercent float64 `yaml:"gauge_max_percent"`

	// legacy compatibility
	LegacyWarningKn  float64 `yaml:"warning_kn,omitempty"`
	LegacyCriticalKn float64 `yaml:"critical_kn,omitempty"`
	LegacyMaxKn      float64 `yaml:"max_kn,omitempty"`
}

type TrendConfig struct {
	Minutes int `yaml:"minutes"`
}

type PressConfig struct {
	MAX_TONNAGE float64 `yaml:"MAX_TONNAGE"`

	// legacy compatibility
	LegacyMaxTonnage float64 `yaml:"max_tonnage,omitempty"`
}

type UIConfig struct {
	Title      string `yaml:"title"`
	Subtitle   string `yaml:"subtitle"`
	LeftLabel  string `yaml:"left_label"`
	RightLabel string `yaml:"right_label"`
	UnitForce  string `yaml:"unit_force"`
	UnitPct    string `yaml:"unit_percent"`
}

func defaultConfig() Config {
	return Config{
		Server: ServerConfig{
			ListenAddr: ":8080",
		},
		PLC: PLCConfig{
			IP:                "192.168.0.1",
			DBNum:             1001,
			Rack:              0,
			Slot:              1,
			PollMs:            500,
			ConnectTimeoutSec: 5,
			IdleTimeoutSec:    5,
			ReconnectDelaySec: 5,
		},
		Thresholds: ThresholdsConfig{
			WarningPercent:  80.0,
			CriticalPercent: 95.0,
			GaugeMaxPercent: 130.0,
		},
		Trend: TrendConfig{
			Minutes: 5,
		},
		Press: PressConfig{
			MAX_TONNAGE: 64.0,
		},
		UI: UIConfig{
			Title:      "Force Monitor",
			Subtitle:   "Siemens S7-1215C • Live monitoring • PLC values in % • kN calculated from MAX_TONNAGE",
			LeftLabel:  "LEVI STEBER",
			RightLabel: "DESNI STEBER",
			UnitForce:  "kN",
			UnitPct:    "%",
		},
	}
}

func normalizeConfig(cfg *Config) {
	def := defaultConfig()

	if strings.TrimSpace(cfg.Server.ListenAddr) == "" {
		cfg.Server.ListenAddr = def.Server.ListenAddr
	}

	if strings.TrimSpace(cfg.PLC.IP) == "" {
		cfg.PLC.IP = def.PLC.IP
	}
	if cfg.PLC.DBNum <= 0 {
		cfg.PLC.DBNum = def.PLC.DBNum
	}
	if cfg.PLC.PollMs <= 0 {
		cfg.PLC.PollMs = def.PLC.PollMs
	}
	if cfg.PLC.ConnectTimeoutSec <= 0 {
		cfg.PLC.ConnectTimeoutSec = def.PLC.ConnectTimeoutSec
	}
	if cfg.PLC.IdleTimeoutSec <= 0 {
		cfg.PLC.IdleTimeoutSec = def.PLC.IdleTimeoutSec
	}
	if cfg.PLC.ReconnectDelaySec <= 0 {
		cfg.PLC.ReconnectDelaySec = def.PLC.ReconnectDelaySec
	}

	// backward compatibility with old names
	if cfg.Thresholds.WarningPercent <= 0 && cfg.Thresholds.LegacyWarningKn > 0 {
		cfg.Thresholds.WarningPercent = cfg.Thresholds.LegacyWarningKn
	}
	if cfg.Thresholds.CriticalPercent <= 0 && cfg.Thresholds.LegacyCriticalKn > 0 {
		cfg.Thresholds.CriticalPercent = cfg.Thresholds.LegacyCriticalKn
	}
	if cfg.Thresholds.GaugeMaxPercent <= 0 && cfg.Thresholds.LegacyMaxKn > 0 {
		cfg.Thresholds.GaugeMaxPercent = cfg.Thresholds.LegacyMaxKn
	}

	if cfg.Thresholds.WarningPercent <= 0 {
		cfg.Thresholds.WarningPercent = def.Thresholds.WarningPercent
	}
	if cfg.Thresholds.CriticalPercent <= 0 {
		cfg.Thresholds.CriticalPercent = def.Thresholds.CriticalPercent
	}
	if cfg.Thresholds.GaugeMaxPercent <= 0 {
		cfg.Thresholds.GaugeMaxPercent = def.Thresholds.GaugeMaxPercent
	}

	if cfg.Trend.Minutes <= 0 {
		cfg.Trend.Minutes = def.Trend.Minutes
	}

	if cfg.Press.MAX_TONNAGE <= 0 && cfg.Press.LegacyMaxTonnage > 0 {
		cfg.Press.MAX_TONNAGE = cfg.Press.LegacyMaxTonnage
	}
	if cfg.Press.MAX_TONNAGE <= 0 {
		cfg.Press.MAX_TONNAGE = def.Press.MAX_TONNAGE
	}

	if strings.TrimSpace(cfg.UI.Title) == "" {
		cfg.UI.Title = def.UI.Title
	}
	if strings.TrimSpace(cfg.UI.Subtitle) == "" {
		cfg.UI.Subtitle = def.UI.Subtitle
	}
	if strings.TrimSpace(cfg.UI.LeftLabel) == "" {
		cfg.UI.LeftLabel = def.UI.LeftLabel
	}
	if strings.TrimSpace(cfg.UI.RightLabel) == "" {
		cfg.UI.RightLabel = def.UI.RightLabel
	}
	if strings.TrimSpace(cfg.UI.UnitForce) == "" {
		cfg.UI.UnitForce = def.UI.UnitForce
	}
	if strings.TrimSpace(cfg.UI.UnitPct) == "" {
		cfg.UI.UnitPct = def.UI.UnitPct
	}
}

func loadOrCreateConfig(configPath string) (Config, error) {
	cfg := defaultConfig()

	_, err := os.Stat(configPath)
	if errors.Is(err, os.ErrNotExist) {
		data, marshalErr := yaml.Marshal(&cfg)
		if marshalErr != nil {
			return cfg, fmt.Errorf("failed to marshal default config: %w", marshalErr)
		}

		if writeErr := os.WriteFile(configPath, data, 0644); writeErr != nil {
			return cfg, fmt.Errorf("failed to create config file: %w", writeErr)
		}

		log.Printf("config file not found, created default config: %s", configPath)
		return cfg, nil
	}
	if err != nil {
		return cfg, fmt.Errorf("failed to stat config file: %w", err)
	}

	data, err := os.ReadFile(configPath)
	if err != nil {
		return cfg, fmt.Errorf("failed to read config file: %w", err)
	}

	if err := yaml.Unmarshal(data, &cfg); err != nil {
		return cfg, fmt.Errorf("failed to parse config file: %w", err)
	}

	normalizeConfig(&cfg)
	return cfg, nil
}

func getMaxHistoryPoints(cfg Config) int {
	points := (cfg.Trend.Minutes*60*1000/cfg.PLC.PollMs + 2)
	if points < 10 {
		return 10
	}
	return points
}

// =============================================
// Data Structures
// =============================================
type Measurement struct {
	Time  string  `json:"time"`
	SilaL float32 `json:"sila_l"` // %
	SilaR float32 `json:"sila_r"` // %
}

type AppState struct {
	sync.Mutex
	Connected bool
	SilaL     float32 // %
	SilaR     float32 // %

	SilaLkN    float32
	SilaRkN    float32
	SumPercent float32
	SumkN      float32

	History    []Measurement
	LastUpdate time.Time
}

type APIState struct {
	Connected  bool          `json:"connected"`
	SilaL      float32       `json:"sila_l"`
	SilaR      float32       `json:"sila_r"`
	SilaLkN    float32       `json:"sila_l_kn"`
	SilaRkN    float32       `json:"sila_r_kn"`
	SumPercent float32       `json:"sum_percent"`
	SumkN      float32       `json:"sum_kn"`
	History    []Measurement `json:"history"`
	LastUpdate string        `json:"last_update"`
}

type PageData struct {
	Title            string
	Subtitle         string
	LeftLabel        string
	RightLabel       string
	UnitForce        string
	UnitPct          string
	MaxTonnage       float64
	WarningPercent   float64
	CriticalPercent  float64
	GaugeMaxPercent  float64
	TrendMinutes     int
	MaxHistoryPoints int
	PollMs           int
}

var (
	state  AppState
	cfg    Config
	uiTmpl = template.Must(template.New("ui").Parse(uiHTML))
)

// =============================================
// Helpers
// =============================================
func setDisconnected() {
	state.Lock()
	state.Connected = false
	state.Unlock()
}

func snapshotState() APIState {
	state.Lock()
	defer state.Unlock()

	historyCopy := make([]Measurement, len(state.History))
	copy(historyCopy, state.History)

	lastUpdate := ""
	if !state.LastUpdate.IsZero() {
		lastUpdate = state.LastUpdate.Format(time.RFC3339Nano)
	}

	return APIState{
		Connected:  state.Connected,
		SilaL:      state.SilaL,
		SilaR:      state.SilaR,
		SilaLkN:    state.SilaLkN,
		SilaRkN:    state.SilaRkN,
		SumPercent: state.SumPercent,
		SumkN:      state.SumkN,
		History:    historyCopy,
		LastUpdate: lastUpdate,
	}
}

func calculateForces(leftPercent, rightPercent float32) (leftKN, rightKN, sumPercent, sumKN float32) {
	lp := float64(leftPercent)
	rp := float64(rightPercent)

	sumPct := (lp + rp) / 2.0

	// each column contributes half of total nominal press force
	left := (lp / 100.0) * (cfg.Press.MAX_TONNAGE / 2.0)
	right := (rp / 100.0) * (cfg.Press.MAX_TONNAGE / 2.0)

	// total force by rule
	total := (sumPct / 100.0) * cfg.Press.MAX_TONNAGE

	return float32(left), float32(right), float32(sumPct), float32(total)
}

// =============================================
// PLC Poller
// =============================================
func startPLCPoller() {
	maxHistoryPoints := getMaxHistoryPoints(cfg)

	for {
		handler := gos7.NewTCPClientHandler(cfg.PLC.IP, cfg.PLC.Rack, cfg.PLC.Slot)
		handler.Timeout = time.Duration(cfg.PLC.ConnectTimeoutSec) * time.Second
		handler.IdleTimeout = time.Duration(cfg.PLC.IdleTimeoutSec) * time.Second

		if err := handler.Connect(); err != nil {
			setDisconnected()
			log.Printf("PLC connect failed: %v - retrying in %ds...", err, cfg.PLC.ReconnectDelaySec)
			time.Sleep(time.Duration(cfg.PLC.ReconnectDelaySec) * time.Second)
			continue
		}

		client := gos7.NewClient(handler)
		log.Println("PLC connected successfully")

		for {
			buf := make([]byte, 8)

			if err := client.AGReadDB(cfg.PLC.DBNum, 0, 8, buf); err != nil {
				log.Printf("PLC read error: %v - reconnecting...", err)
				setDisconnected()
				_ = handler.Close()
				break
			}

			var helper gos7.Helper
			silaL := helper.GetRealAt(buf, 0)
			silaR := helper.GetRealAt(buf, 4)

			leftKN, rightKN, sumPercent, sumKN := calculateForces(silaL, silaR)

			now := time.Now()
			ts := now.Format("15:04:05.000")

			state.Lock()
			state.Connected = true
			state.SilaL = silaL
			state.SilaR = silaR
			state.SilaLkN = leftKN
			state.SilaRkN = rightKN
			state.SumPercent = sumPercent
			state.SumkN = sumKN
			state.LastUpdate = now

			state.History = append(state.History, Measurement{
				Time:  ts,
				SilaL: silaL,
				SilaR: silaR,
			})

			if len(state.History) > maxHistoryPoints {
				state.History = state.History[len(state.History)-maxHistoryPoints:]
			}
			state.Unlock()

			time.Sleep(time.Duration(cfg.PLC.PollMs) * time.Millisecond)
		}
	}
}

// =============================================
// HTTP Handlers
// =============================================
func apiData(w http.ResponseWriter, r *http.Request) {
	resp := snapshotState()

	w.Header().Set("Content-Type", "application/json")
	w.Header().Set("Cache-Control", "no-store")
	_ = json.NewEncoder(w).Encode(resp)
}

func serveUI(w http.ResponseWriter, r *http.Request) {
	data := PageData{
		Title:            cfg.UI.Title,
		Subtitle:         cfg.UI.Subtitle,
		LeftLabel:        cfg.UI.LeftLabel,
		RightLabel:       cfg.UI.RightLabel,
		UnitForce:        cfg.UI.UnitForce,
		UnitPct:          cfg.UI.UnitPct,
		MaxTonnage:       cfg.Press.MAX_TONNAGE,
		WarningPercent:   cfg.Thresholds.WarningPercent,
		CriticalPercent:  cfg.Thresholds.CriticalPercent,
		GaugeMaxPercent:  cfg.Thresholds.GaugeMaxPercent,
		TrendMinutes:     cfg.Trend.Minutes,
		MaxHistoryPoints: getMaxHistoryPoints(cfg),
		PollMs:           cfg.PLC.PollMs,
	}

	w.Header().Set("Content-Type", "text/html; charset=utf-8")
	if err := uiTmpl.Execute(w, data); err != nil {
		http.Error(w, "failed to render UI", http.StatusInternalServerError)
		log.Printf("template execute error: %v", err)
	}
}

// =============================================
// Main
// =============================================
func main() {
	wd, err := os.Getwd()
	if err != nil {
		log.Fatalf("failed to get working directory: %v", err)
	}

	configPath := filepath.Join(wd, "config.yaml")

	cfg, err = loadOrCreateConfig(configPath)
	if err != nil {
		log.Fatalf("failed to load config: %v", err)
	}

	log.Printf("config loaded from: %s", configPath)
	log.Printf("PLC: ip=%s db=%d rack=%d slot=%d poll=%dms",
		cfg.PLC.IP, cfg.PLC.DBNum, cfg.PLC.Rack, cfg.PLC.Slot, cfg.PLC.PollMs)
	log.Printf("Press MAX_TONNAGE: %.2f %s", cfg.Press.MAX_TONNAGE, cfg.UI.UnitForce)

	go startPLCPoller()

	http.HandleFunc("/", serveUI)
	http.HandleFunc("/api/data", apiData)

	log.Println("S7-1200 Force Monitor started")
	log.Printf("Open: http://localhost%s", cfg.Server.ListenAddr)
	log.Fatal(http.ListenAndServe(cfg.Server.ListenAddr, nil))
}

// =============================================
// Embedded UI Template
// =============================================
const uiHTML = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Title}}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

        :root {
            --bg: #09090b;
            --panel: rgba(255,255,255,0.06);
            --panel-border: rgba(255,255,255,0.10);
            --muted: #a1a1aa;
            --line: #27272a;
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background:
                radial-gradient(circle at top left, rgba(56,189,248,0.12), transparent 22%),
                radial-gradient(circle at top right, rgba(168,85,247,0.12), transparent 22%),
                linear-gradient(180deg, #09090b 0%, #0f172a 100%);
            color: #f4f4f5;
        }

        .title {
            font-family: 'Space Grotesk', sans-serif;
        }

        .glass {
            background: rgba(255,255,255,0.055);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        .gauge-container {
            position: relative;
            width: 100%;
            max-width: 360px;
            height: 340px;
            margin: 0 auto;
        }

        .gauge-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .soft-glow-green {
            box-shadow: 0 0 0 1px rgba(34,197,94,0.30), 0 0 40px rgba(34,197,94,0.08);
        }

        .soft-glow-yellow {
            box-shadow: 0 0 0 1px rgba(234,179,8,0.30), 0 0 40px rgba(234,179,8,0.08);
        }

        .soft-glow-red {
            box-shadow: 0 0 0 1px rgba(239,68,68,0.30), 0 0 40px rgba(239,68,68,0.08);
        }

        .metric-big {
            line-height: 0.95;
        }

        .status-pill {
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.03);
        }
    </style>
</head>
<body class="text-zinc-100">
    <div class="max-w-7xl mx-auto p-5 md:p-8 min-h-screen">
        <div id="alarm-banner" class="hidden mb-8 bg-red-600/90 border border-red-500 text-white px-8 py-4 rounded-2xl flex items-center justify-between text-lg font-medium">
            <div class="flex items-center gap-3">
                <span class="text-2xl">⚠️</span>
                <span id="alarm-text">CRITICAL FORCE ALARM ACTIVE</span>
            </div>
        </div>

        <div class="flex flex-col gap-6 xl:flex-row xl:items-center xl:justify-between mb-10">
            <div>
                <h1 class="title text-4xl md:text-5xl xl:text-6xl font-semibold tracking-tighter bg-gradient-to-r from-sky-300 to-violet-300 bg-clip-text text-transparent">
                    {{.Title}}
                </h1>
                <p class="text-zinc-400 mt-2 text-base md:text-lg">{{.Subtitle}}</p>
                <p class="text-zinc-500 mt-1 text-sm font-mono">MAX_TONNAGE = {{printf "%.1f" .MaxTonnage}} {{.UnitForce}}</p>
            </div>

            <div class="status-pill px-6 py-4 rounded-3xl flex flex-col md:flex-row md:items-center gap-4 md:gap-8 w-fit">
                <div class="flex items-center gap-3">
                    <div id="dot" class="w-4 h-4 rounded-full bg-red-500 ring-4 ring-red-500/20"></div>
                    <span id="status-text" class="font-semibold text-lg text-red-400">Disconnected</span>
                </div>
                <div class="hidden md:block h-8 w-px bg-zinc-700"></div>
                <div id="last-update" class="font-mono text-zinc-400 text-sm">Last update: --:--:--.---</div>
            </div>
        </div>

        <div class="glass border border-zinc-700/70 rounded-3xl p-6 md:p-8 mb-10">
            <div class="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-6">
                <div>
                    <div class="text-zinc-400 text-sm uppercase tracking-[0.25em]">TOTAL FORCE</div>
                    <div class="mt-2 flex items-end gap-4">
                        <div class="text-5xl md:text-6xl font-mono font-bold text-emerald-300 metric-big" id="sum-kn">0.0</div>
                        <div class="text-2xl text-emerald-400 mb-1">{{.UnitForce}}</div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 min-w-[280px]">
                    <div class="bg-zinc-900/60 rounded-2xl px-5 py-4 border border-zinc-800">
                        <div class="text-zinc-500 text-xs uppercase tracking-widest">TOTAL %</div>
                        <div class="text-3xl font-mono font-bold text-sky-200 mt-1"><span id="sum-percent">0.0</span> {{.UnitPct}}</div>
                    </div>
                    <div class="bg-zinc-900/60 rounded-2xl px-5 py-4 border border-zinc-800">
                        <div class="text-zinc-500 text-xs uppercase tracking-widest">FORMULA</div>
                        <div class="text-sm font-mono text-zinc-300 mt-2">(L + R) / 2</div>
                    </div>
                    <div class="bg-zinc-900/60 rounded-2xl px-5 py-4 border border-zinc-800">
                        <div class="text-zinc-500 text-xs uppercase tracking-widest">LIMITS</div>
                        <div class="text-sm font-mono text-zinc-300 mt-2">
                            W {{printf "%.0f" .WarningPercent}}{{.UnitPct}} • C {{printf "%.0f" .CriticalPercent}}{{.UnitPct}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-2 gap-8 xl:gap-10">
            <div id="card-l" class="glass border border-zinc-700/70 rounded-3xl p-6 md:p-8 transition-all duration-300">
                <div class="flex justify-between items-start mb-6 gap-6">
                    <div class="flex items-center gap-4">
                        <div id="led-l" class="w-6 h-6 bg-emerald-500 rounded-full shadow-lg shadow-emerald-600/40"></div>
                        <div>
                            <h2 class="text-2xl md:text-3xl font-bold tracking-wider">{{.LeftLabel}}</h2>
                            <div id="state-l" class="text-sm text-zinc-400 mt-1">NORMAL</div>
                        </div>
                    </div>
                    <div id="digital-l" class="text-right">
                        <div class="percent text-5xl md:text-6xl font-mono font-bold text-sky-100 leading-none">0.0</div>
                        <div class="text-xl text-sky-400 mt-1">{{.UnitPct}}</div>
                        <div class="kn text-lg text-zinc-300 font-mono mt-3">0.0 {{.UnitForce}}</div>
                    </div>
                </div>

                <div class="gauge-container">
                    <canvas id="gaugeL" class="gauge-canvas"></canvas>
                </div>

                <div class="mt-3 grid grid-cols-4 gap-2 text-xs font-mono text-zinc-500">
                    <div>0</div>
                    <div class="text-center">W {{printf "%.0f" .WarningPercent}}</div>
                    <div class="text-center">C {{printf "%.0f" .CriticalPercent}}</div>
                    <div class="text-right">{{printf "%.0f" .GaugeMaxPercent}}</div>
                </div>
            </div>

            <div id="card-r" class="glass border border-zinc-700/70 rounded-3xl p-6 md:p-8 transition-all duration-300">
                <div class="flex justify-between items-start mb-6 gap-6">
                    <div class="flex items-center gap-4">
                        <div id="led-r" class="w-6 h-6 bg-emerald-500 rounded-full shadow-lg shadow-emerald-600/40"></div>
                        <div>
                            <h2 class="text-2xl md:text-3xl font-bold tracking-wider">{{.RightLabel}}</h2>
                            <div id="state-r" class="text-sm text-zinc-400 mt-1">NORMAL</div>
                        </div>
                    </div>
                    <div id="digital-r" class="text-right">
                        <div class="percent text-5xl md:text-6xl font-mono font-bold text-violet-100 leading-none">0.0</div>
                        <div class="text-xl text-violet-400 mt-1">{{.UnitPct}}</div>
                        <div class="kn text-lg text-zinc-300 font-mono mt-3">0.0 {{.UnitForce}}</div>
                    </div>
                </div>

                <div class="gauge-container">
                    <canvas id="gaugeR" class="gauge-canvas"></canvas>
                </div>

                <div class="mt-3 grid grid-cols-4 gap-2 text-xs font-mono text-zinc-500">
                    <div>0</div>
                    <div class="text-center">W {{printf "%.0f" .WarningPercent}}</div>
                    <div class="text-center">C {{printf "%.0f" .CriticalPercent}}</div>
                    <div class="text-right">{{printf "%.0f" .GaugeMaxPercent}}</div>
                </div>
            </div>
        </div>

        <div class="mt-10 glass border border-zinc-700/70 rounded-3xl p-6 md:p-8">
            <div class="flex flex-col gap-3 md:flex-row md:justify-between md:items-center mb-6">
                <h2 class="text-2xl md:text-3xl font-semibold">{{.TrendMinutes}}-Minute Live Trend</h2>
                <div class="text-emerald-400 font-mono text-sm">
                    Chart = percent only • FIFO • {{.MaxHistoryPoints}} points max • {{.PollMs}} ms poll
                </div>
            </div>
            <div class="h-[360px] md:h-96">
                <canvas id="lineChart"></canvas>
            </div>
        </div>
    </div>

    <script>
        const WARNING_PERCENT = {{.WarningPercent}};
        const CRITICAL_PERCENT = {{.CriticalPercent}};
        const GAUGE_MAX_PERCENT = {{.GaugeMaxPercent}};
        const UNIT_FORCE = '{{.UnitForce}}';
        const UNIT_PCT = '{{.UnitPct}}';

        const START_ANGLE = Math.PI * 0.75;   // 135 deg
        const END_ANGLE   = Math.PI * 2.25;   // 405 deg

        let lineChart = null;
        let latestData = null;

        function clamp(v, min, max) {
            return Math.max(min, Math.min(max, v));
        }

        function polar(cx, cy, r, a) {
            return {
                x: cx + Math.cos(a) * r,
                y: cy + Math.sin(a) * r
            };
        }

        function valueToAngle(value) {
            const ratio = clamp((Number(value) || 0) / GAUGE_MAX_PERCENT, 0, 1);
            return START_ANGLE + ratio * (END_ANGLE - START_ANGLE);
        }

        function prepCanvas(canvas) {
            const dpr = window.devicePixelRatio || 1;
            const rect = canvas.getBoundingClientRect();
            const w = Math.max(1, Math.floor(rect.width));
            const h = Math.max(1, Math.floor(rect.height));
            const rw = Math.max(1, Math.floor(w * dpr));
            const rh = Math.max(1, Math.floor(h * dpr));

            if (canvas.width !== rw || canvas.height !== rh) {
                canvas.width = rw;
                canvas.height = rh;
            }

            const ctx = canvas.getContext('2d');
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

            return { ctx, w, h };
        }

        function drawArc(ctx, cx, cy, r, a1, a2, color, width, glow) {
            ctx.save();
            ctx.beginPath();
            ctx.arc(cx, cy, r, a1, a2, false);
            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.lineCap = 'round';
            if (glow) {
                ctx.shadowColor = color;
                ctx.shadowBlur = glow;
            }
            ctx.stroke();
            ctx.restore();
        }

        function drawGauge(canvasId, percentValue, knValue, zone, accentColor) {
            const canvas = document.getElementById(canvasId);
            if (!canvas) return;

            const setup = prepCanvas(canvas);
            const ctx = setup.ctx;
            const w = setup.w;
            const h = setup.h;

            const cx = w / 2;
            const cy = h * 0.60;
            const radius = Math.min(w, h) * 0.34;
            const bandWidth = Math.max(16, radius * 0.16);
            const trackR = radius;

            const clampedValue = clamp(Number(percentValue) || 0, 0, GAUGE_MAX_PERCENT);
            const valueAngle = valueToAngle(clampedValue);

            // Outer shadow ring
            ctx.save();
            ctx.beginPath();
            ctx.arc(cx, cy, radius + 22, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(255,255,255,0.015)';
            ctx.shadowColor = 'rgba(0,0,0,0.4)';
            ctx.shadowBlur = 30;
            ctx.fill();
            ctx.restore();

            // Base track
            drawArc(ctx, cx, cy, trackR, START_ANGLE, END_ANGLE, 'rgba(255,255,255,0.06)', bandWidth + 8, 0);

            // Zone segments
            const warnA = valueToAngle(WARNING_PERCENT);
            const critA = valueToAngle(CRITICAL_PERCENT);

            drawArc(ctx, cx, cy, trackR, START_ANGLE, warnA, 'rgba(34,211,238,0.22)', bandWidth, 0);
            drawArc(ctx, cx, cy, trackR, warnA, critA, 'rgba(234,179,8,0.22)', bandWidth, 0);
            drawArc(ctx, cx, cy, trackR, critA, END_ANGLE, 'rgba(239,68,68,0.22)', bandWidth, 0);

            // Active arc
            drawArc(ctx, cx, cy, trackR, START_ANGLE, valueAngle, accentColor, bandWidth - 2, 18);

            // Ticks
            for (let v = 0; v <= GAUGE_MAX_PERCENT + 0.001; v += 5) {
                const a = valueToAngle(v);
                const isMajor = Math.abs(v % 10) < 0.001;
                const isThreshold = Math.abs(v - WARNING_PERCENT) < 0.001 || Math.abs(v - CRITICAL_PERCENT) < 0.001;

                const r1 = isThreshold ? radius * 0.70 : isMajor ? radius * 0.75 : radius * 0.81;
                const r2 = radius * 0.96;

                const p1 = polar(cx, cy, r1, a);
                const p2 = polar(cx, cy, r2, a);

                ctx.beginPath();
                ctx.moveTo(p1.x, p1.y);
                ctx.lineTo(p2.x, p2.y);

                if (Math.abs(v - WARNING_PERCENT) < 0.001) {
                    ctx.strokeStyle = '#eab308';
                    ctx.lineWidth = 3;
                } else if (Math.abs(v - CRITICAL_PERCENT) < 0.001) {
                    ctx.strokeStyle = '#ef4444';
                    ctx.lineWidth = 3;
                } else if (isMajor) {
                    ctx.strokeStyle = 'rgba(228,228,231,0.82)';
                    ctx.lineWidth = 2;
                } else {
                    ctx.strokeStyle = 'rgba(113,113,122,0.85)';
                    ctx.lineWidth = 1;
                }

                ctx.stroke();
            }

            // Numeric labels
            const labelValues = [];
            for (let v = 0; v <= GAUGE_MAX_PERCENT; v += 20) {
                labelValues.push(v);
            }
            if (labelValues[labelValues.length - 1] !== GAUGE_MAX_PERCENT) {
                labelValues.push(GAUGE_MAX_PERCENT);
            }

            ctx.fillStyle = '#d4d4d8';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = '600 13px Inter, sans-serif';

            for (const v of labelValues) {
                const a = valueToAngle(v);
                const p = polar(cx, cy, radius * 1.11, a);
                ctx.fillText(String(Math.round(v)), p.x, p.y);
            }

            // Needle
            const needleTip = polar(cx, cy, radius * 0.82, valueAngle);
            const needleTail = polar(cx, cy, radius * 0.12, valueAngle + Math.PI);
            const needleLeft = polar(cx, cy, 9, valueAngle + Math.PI / 2);
            const needleRight = polar(cx, cy, 9, valueAngle - Math.PI / 2);

            ctx.save();
            ctx.beginPath();
            ctx.moveTo(needleLeft.x, needleLeft.y);
            ctx.lineTo(needleTip.x, needleTip.y);
            ctx.lineTo(needleRight.x, needleRight.y);
            ctx.lineTo(needleTail.x, needleTail.y);
            ctx.closePath();
            ctx.fillStyle = accentColor;
            ctx.shadowColor = accentColor;
            ctx.shadowBlur = 12;
            ctx.fill();
            ctx.restore();

            // Center cap
            ctx.beginPath();
            ctx.arc(cx, cy, 16, 0, Math.PI * 2);
            ctx.fillStyle = '#18181b';
            ctx.fill();
            ctx.lineWidth = 3;
            ctx.strokeStyle = accentColor;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(cx, cy, 7, 0, Math.PI * 2);
            ctx.fillStyle = '#fafafa';
            ctx.fill();

            // Inner center plate
            ctx.beginPath();
            ctx.arc(cx, cy + 6, radius * 0.34, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(9,9,11,0.82)';
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.strokeStyle = 'rgba(255,255,255,0.08)';
            ctx.stroke();

            // Center value text
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            ctx.fillStyle = '#f4f4f5';
            ctx.font = '700 34px Space Grotesk, Inter, sans-serif';
            ctx.fillText(clampedValue.toFixed(1), cx, cy - 8);

            ctx.fillStyle = accentColor;
            ctx.font = '700 13px Inter, sans-serif';
            ctx.fillText(UNIT_PCT, cx, cy + 22);

            ctx.fillStyle = '#a1a1aa';
            ctx.font = '600 12px Inter, sans-serif';
            ctx.fillText((Number(knValue) || 0).toFixed(1) + ' ' + UNIT_FORCE, cx, cy + 42);
        }

        function setStatusConnected(connected) {
            const dot = document.getElementById('dot');
            const text = document.getElementById('status-text');

            if (connected) {
                dot.className = 'w-4 h-4 rounded-full bg-emerald-400 ring-4 ring-emerald-400/20';
                text.textContent = 'Connected';
                text.className = 'font-semibold text-lg text-emerald-400';
            } else {
                dot.className = 'w-4 h-4 rounded-full bg-red-500 ring-4 ring-red-500/20';
                text.textContent = 'Disconnected';
                text.className = 'font-semibold text-lg text-red-400';
            }
        }

        function getZone(percentValue) {
            if (percentValue >= CRITICAL_PERCENT) return 'critical';
            if (percentValue >= WARNING_PERCENT) return 'warning';
            return 'normal';
        }

        function zoneColor(zone, left) {
            if (zone === 'critical') return '#ef4444';
            if (zone === 'warning') return '#eab308';
            return left ? '#22d3ee' : '#c084fc';
        }

        function applyChannelState(side, percentValue) {
            const zone = getZone(percentValue);
            const card = document.getElementById('card-' + side);
            const led = document.getElementById('led-' + side);
            const stateText = document.getElementById('state-' + side);

            card.classList.remove('soft-glow-green', 'soft-glow-yellow', 'soft-glow-red');

            if (zone === 'critical') {
                led.className = 'w-6 h-6 bg-red-500 rounded-full shadow-lg shadow-red-600/50';
                stateText.textContent = 'CRITICAL';
                stateText.className = 'text-sm text-red-400 mt-1 font-semibold';
                card.classList.add('soft-glow-red');
            } else if (zone === 'warning') {
                led.className = 'w-6 h-6 bg-yellow-400 rounded-full shadow-lg shadow-yellow-500/50';
                stateText.textContent = 'WARNING';
                stateText.className = 'text-sm text-yellow-400 mt-1 font-semibold';
                card.classList.add('soft-glow-yellow');
            } else {
                led.className = 'w-6 h-6 bg-emerald-500 rounded-full shadow-lg shadow-emerald-600/40';
                stateText.textContent = 'NORMAL';
                stateText.className = 'text-sm text-emerald-400 mt-1 font-semibold';
                card.classList.add('soft-glow-green');
            }
        }

        function formatLastUpdate(isoString) {
            if (!isoString) return 'Last update: --:--:--.---';
            const d = new Date(isoString);
            if (isNaN(d.getTime())) return 'Last update: --:--:--.---';

            const hh = String(d.getHours()).padStart(2, '0');
            const mm = String(d.getMinutes()).padStart(2, '0');
            const ss = String(d.getSeconds()).padStart(2, '0');
            const ms = String(d.getMilliseconds()).padStart(3, '0');

            return 'Last update: ' + hh + ':' + mm + ':' + ss + '.' + ms;
        }

        function updateAlarmBanner(leftPercent, rightPercent) {
            const banner = document.getElementById('alarm-banner');
            const text = document.getElementById('alarm-text');

            const leftCritical = leftPercent >= CRITICAL_PERCENT;
            const rightCritical = rightPercent >= CRITICAL_PERCENT;

            if (leftCritical || rightCritical) {
                if (leftCritical && rightCritical) {
                    text.textContent = 'CRITICAL FORCE ALARM ACTIVE • LEFT + RIGHT';
                } else if (leftCritical) {
                    text.textContent = 'CRITICAL FORCE ALARM ACTIVE • LEFT';
                } else {
                    text.textContent = 'CRITICAL FORCE ALARM ACTIVE • RIGHT';
                }
                banner.classList.remove('hidden');
            } else {
                banner.classList.add('hidden');
            }
        }

        function redrawGaugesFromLatest() {
            if (!latestData) return;

            const leftPercent = Number(latestData.sila_l) || 0;
            const rightPercent = Number(latestData.sila_r) || 0;
            const leftKN = Number(latestData.sila_l_kn) || 0;
            const rightKN = Number(latestData.sila_r_kn) || 0;

            drawGauge('gaugeL', leftPercent, leftKN, getZone(leftPercent), zoneColor(getZone(leftPercent), true));
            drawGauge('gaugeR', rightPercent, rightKN, getZone(rightPercent), zoneColor(getZone(rightPercent), false));
        }

        async function fetchData() {
            try {
                const res = await fetch('/api/data', { cache: 'no-store' });
                const d = await res.json();
                latestData = d;

                const leftPercent = Number(d.sila_l) || 0;
                const rightPercent = Number(d.sila_r) || 0;
                const leftKN = Number(d.sila_l_kn) || 0;
                const rightKN = Number(d.sila_r_kn) || 0;
                const sumPercent = Number(d.sum_percent) || 0;
                const sumKN = Number(d.sum_kn) || 0;

                setStatusConnected(!!d.connected);

                document.querySelector('#digital-l .percent').textContent = leftPercent.toFixed(1);
                document.querySelector('#digital-l .kn').textContent = leftKN.toFixed(1) + ' ' + UNIT_FORCE;

                document.querySelector('#digital-r .percent').textContent = rightPercent.toFixed(1);
                document.querySelector('#digital-r .kn').textContent = rightKN.toFixed(1) + ' ' + UNIT_FORCE;

                document.getElementById('sum-percent').textContent = sumPercent.toFixed(1);
                document.getElementById('sum-kn').textContent = sumKN.toFixed(1);

                applyChannelState('l', leftPercent);
                applyChannelState('r', rightPercent);

                drawGauge('gaugeL', leftPercent, leftKN, getZone(leftPercent), zoneColor(getZone(leftPercent), true));
                drawGauge('gaugeR', rightPercent, rightKN, getZone(rightPercent), zoneColor(getZone(rightPercent), false));

                updateAlarmBanner(leftPercent, rightPercent);
                document.getElementById('last-update').textContent = formatLastUpdate(d.last_update);

                if (Array.isArray(d.history) && d.history.length > 0 && lineChart) {
                    const labels = d.history.map(h => h.time);
                    const dataL = d.history.map(h => h.sila_l);
                    const dataR = d.history.map(h => h.sila_r);
                    const warningLine = new Array(d.history.length).fill(WARNING_PERCENT);
                    const criticalLine = new Array(d.history.length).fill(CRITICAL_PERCENT);

                    lineChart.data.labels = labels;
                    lineChart.data.datasets[0].data = dataL;
                    lineChart.data.datasets[1].data = dataR;
                    lineChart.data.datasets[2].data = warningLine;
                    lineChart.data.datasets[3].data = criticalLine;
                    lineChart.update('none');
                }
            } catch (err) {
                console.warn('Fetch error:', err);
                setStatusConnected(false);
            }
        }

        window.onload = () => {
            lineChart = new Chart(document.getElementById('lineChart'), {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [
                        {
                            label: 'Sila L %',
                            borderColor: '#22d3ee',
                            backgroundColor: 'rgba(34,211,238,0.10)',
                            borderWidth: 3,
                            tension: 0.25,
                            pointRadius: 0,
                            data: []
                        },
                        {
                            label: 'Sila R %',
                            borderColor: '#c084fc',
                            backgroundColor: 'rgba(192,132,252,0.10)',
                            borderWidth: 3,
                            tension: 0.25,
                            pointRadius: 0,
                            data: []
                        },
                        {
                            label: 'Warning %',
                            borderColor: '#eab308',
                            borderWidth: 1.5,
                            borderDash: [8, 8],
                            pointRadius: 0,
                            data: []
                        },
                        {
                            label: 'Critical %',
                            borderColor: '#ef4444',
                            borderWidth: 1.5,
                            borderDash: [8, 8],
                            pointRadius: 0,
                            data: []
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    scales: {
                        x: {
                            grid: { color: '#3f3f46' },
                            ticks: {
                                color: '#71717a',
                                maxTicksLimit: 12
                            }
                        },
                        y: {
                            min: 0,
                            max: GAUGE_MAX_PERCENT,
                            grid: { color: '#3f3f46' },
                            ticks: {
                                color: '#71717a',
                                stepSize: 10
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: { color: '#e4e4e7' }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(9,9,11,0.95)'
                        }
                    }
                }
            });

            fetchData();
            setInterval(fetchData, {{.PollMs}});

            window.addEventListener('resize', () => {
                redrawGaugesFromLatest();
            });
        };
    </script>
</body>
</html>`