<%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" meta:resourcekey="PageResource1" %>

<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Threading" %>
<%@ Import Namespace="System.Globalization" %>

<script runat="server">
    String version = WebAppVersion.GetWebAppVersion();

    protected override void InitializeCulture()
    {
        HttpCookie lang = Request.Cookies["siteLanguage"];

        String selectedLanguage = (lang != null) ? lang.Value : "en";
        UICulture = selectedLanguage;
        Culture = selectedLanguage;

        Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(selectedLanguage);
        Thread.CurrentThread.CurrentUICulture = new CultureInfo(selectedLanguage);
        base.InitializeCulture();
    }
</script>

<%
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.Cache.SetExpires(DateTime.Now.AddMinutes(-30)); %>

<%--view template starts here (will be appended inside a row-fluid)--%>

<link href="<%= ResolveUrl("~/app/pages/mes/" + Path.GetFileNameWithoutExtension(this.Request.PhysicalPath) + "/" + Path.GetFileNameWithoutExtension(this.Request.PhysicalPath) + ".css")%>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/ag-grid/ag-grid.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/ag-grid/ag-theme-alpine.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/app/components/ag-grid/ag-grid-styles.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/fonts/reboto-font.css") %>" rel="stylesheet" />
<link href="<%= ResolveUrl("~/assets/tailwind/tailwind.min.css") %>" rel="stylesheet" />

<style>
    .content-container { padding-top: 0px !important; }
    #subnavbar-inner { display: none !important; }

    .professional-title {
        font-size: 22px;
        font-weight: 400;
        color: #202124;
        padding-bottom: 1px;
        border-bottom: 1px solid #dadce0;
        margin-bottom: 2px;
        font-family: 'Roboto', Arial, sans-serif;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .spinner {
        animation: spin 1s linear infinite;
        transform-origin: center;
    }
</style>

<h2 class="professional-title">Power Curtailment</h2>

<div class="bg-white shadow-md rounded-lg p-2 mb-4">

    <%-- ============ ACTION BAR ============ --%>
    <div class="bg-white shadow-md rounded-lg mb-2">
        <div class="flex items-center justify-between flex-wrap">

            <%-- Auto-refresh control + last updated --%>
            <div class="flex items-center space-x-3 mb-2">
                <button type="button" id="autoRefreshToggle"
                        class="auto-refresh-pill flex items-center rounded-full px-3 py-1 text-sm font-medium transition-colors"
                        data-bind="classes: { 'auto-on': autoRefreshEnabled, 'auto-off': not(autoRefreshEnabled) }"
                        title="<asp:Localize runat=server meta:resourcekey=auto_refresh_btn_title />">
                    <span class="auto-refresh-dot mr-2" data-bind="classes: { 'is-on': autoRefreshEnabled }"></span>
                    <span data-bind="classes: { hide: not(autoRefreshEnabled) }">
                        <asp:Localize runat="server" meta:resourcekey="auto_refresh_on_label" />&nbsp;<span data-bind="text: countdown"></span>s
                    </span>
                    <span data-bind="classes: { hide: autoRefreshEnabled }">
                        <asp:Localize runat="server" meta:resourcekey="auto_refresh_off_label" />
                    </span>
                </button>

                <div class="text-xs text-gray-500 flex items-center">
                    <i class="fa fa-clock-o mr-1"></i>
                    <asp:Localize runat="server" meta:resourcekey="last_updated_label" />:&nbsp;
                    <span class="text-gray-700 font-medium" data-bind="text: lastUpdatedText">-</span>
                </div>
            </div>

            <%-- Export + manual refresh --%>
            <div class="flex space-x-2 mb-2">
                <button type="button" class="btn-export-to-excel bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center justify-center" style="height: 36.5px; font-size: 14px;">
                    <span class="excel-export-state fa fa-file-excel-o mr-2"></span>
                    <img class="loading-state hide" style="width:20px;height:20px;" src="<%= ResolveUrl("~/assets/img/spinner20.gif") %>" />
                    <span>Excel</span>
                </button>
                <button id="refreshBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center justify-center" style="width: 120px; height: 36.5px; font-size: 14px;" title="<asp:localize runat=server meta:resourcekey=refresh_btn_title />">
                    <div data-bind="classes: { hide: isLoading }">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>Refresh</span>
                    </div>
                    <div data-bind="classes: { hide: not(isLoading) }">
                        <div class="flex items-center">
                            <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <g class="spinner">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
                                </g>
                            </svg>
                            <span>Loading...</span>
                        </div>
                    </div>
                </button>
            </div>
        </div>
    </div>

    <%-- ============ KPI ROW (global status summary) ============ --%>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
        <div class="kpi-card kpi-ok bg-white shadow-md rounded-lg p-3 flex items-center justify-between">
            <div>
                <div class="kpi-label text-xs text-gray-500 uppercase tracking-wide"><asp:Localize runat="server" meta:resourcekey="kpi_ok_label" /></div>
                <div class="kpi-value text-3xl font-semibold text-gray-800" data-bind="text: okCount">0</div>
            </div>
            <div class="kpi-icon text-green-500"><i class="fa fa-check-circle fa-2x"></i></div>
        </div>
        <div class="kpi-card kpi-off bg-white shadow-md rounded-lg p-3 flex items-center justify-between">
            <div>
                <div class="kpi-label text-xs text-gray-500 uppercase tracking-wide"><asp:Localize runat="server" meta:resourcekey="kpi_off_label" /></div>
                <div class="kpi-value text-3xl font-semibold text-gray-800" data-bind="text: offCount">0</div>
            </div>
            <div class="kpi-icon text-red-500"><i class="fa fa-power-off fa-2x"></i></div>
        </div>
        <div class="kpi-card kpi-total bg-white shadow-md rounded-lg p-3 flex items-center justify-between">
            <div>
                <div class="kpi-label text-xs text-gray-500 uppercase tracking-wide"><asp:Localize runat="server" meta:resourcekey="kpi_total_label" /></div>
                <div class="kpi-value text-3xl font-semibold text-gray-800" data-bind="text: totalCount">0</div>
            </div>
            <div class="kpi-icon text-gray-400"><i class="fa fa-cogs fa-2x"></i></div>
        </div>
    </div>

    <%-- ============ LEGEND ============ --%>
    <div class="legend-bar bg-white shadow-md rounded-lg p-2 mb-3 flex items-center flex-wrap">
        <span class="text-xs text-gray-500 mr-3 uppercase tracking-wide"><asp:Localize runat="server" meta:resourcekey="legend_label" />:</span>
        <span class="legend-chip chip-ok">ON</span>
        <span class="legend-chip chip-ok">OK</span>
        <span class="legend-chip chip-ok">MIN PUMP</span>
        <span class="legend-chip chip-ok">MIN USE</span>
        <span class="legend-divider"></span>
        <span class="legend-chip chip-danger">OFF</span>
        <span class="legend-chip chip-danger">NOT OK</span>
        <span class="legend-chip chip-danger">LOW FIRE</span>
    </div>

    <%-- ============ AREA GRIDS ============ --%>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">

        <div class="area-card area-caster-1 bg-white shadow-md rounded-lg p-2">
            <div class="area-header flex items-center justify-between mb-2 px-1">
                <h3 class="text-sm font-semibold text-gray-700 m-0">Caster 1</h3>
                <span class="text-xs text-gray-500" data-bind="text: area1Count">0 equipment</span>
            </div>
            <div id="grid-area-1" class="processes-grid-container ag-theme-alpine w-full"></div>
        </div>

        <div class="area-card area-caster-2 bg-white shadow-md rounded-lg p-2">
            <div class="area-header flex items-center justify-between mb-2 px-1">
                <h3 class="text-sm font-semibold text-gray-700 m-0">Caster 2</h3>
                <span class="text-xs text-gray-500" data-bind="text: area2Count">0 equipment</span>
            </div>
            <div id="grid-area-2" class="processes-grid-container ag-theme-alpine w-full"></div>
        </div>

        <div class="area-card area-lmf bg-white shadow-md rounded-lg p-2">
            <div class="area-header flex items-center justify-between mb-2 px-1">
                <h3 class="text-sm font-semibold text-gray-700 m-0">LMF</h3>
                <span class="text-xs text-gray-500" data-bind="text: area3Count">0 equipment</span>
            </div>
            <div id="grid-area-3" class="processes-grid-container ag-theme-alpine w-full"></div>
        </div>

        <div class="area-card area-vtd bg-white shadow-md rounded-lg p-2">
            <div class="area-header flex items-center justify-between mb-2 px-1">
                <h3 class="text-sm font-semibold text-gray-700 m-0">VTD Boiler</h3>
                <span class="text-xs text-gray-500" data-bind="text: area4Count">0 equipment</span>
            </div>
            <div id="grid-area-4" class="processes-grid-container ag-theme-alpine w-full"></div>
        </div>

        <div class="area-card area-refractory bg-white shadow-md rounded-lg p-2">
            <div class="area-header flex items-center justify-between mb-2 px-1">
                <h3 class="text-sm font-semibold text-gray-700 m-0">Refractory</h3>
                <span class="text-xs text-gray-500" data-bind="text: area5Count">0 equipment</span>
            </div>
            <div id="grid-area-5" class="processes-grid-container ag-theme-alpine w-full"></div>
        </div>

        <%-- Notes card lives in the last slot --%>
        <div class="area-card area-notes bg-white shadow-md rounded-lg p-3">
            <div class="area-header flex items-center justify-between mb-2 px-1">
                <h3 class="text-sm font-semibold text-gray-700 m-0"><asp:Localize runat="server" meta:resourcekey="notes_title" /></h3>
                <i class="fa fa-info-circle text-gray-400"></i>
            </div>
            <ul class="notes-list">
                <li class="note-item note-info">
                    <div class="note-icon"><i class="fa fa-power-off"></i></div>
                    <div class="note-body"><asp:Localize runat="server" meta:resourcekey="note_1" /></div>
                </li>
                <li class="note-item note-info">
                    <div class="note-icon"><i class="fa fa-wrench"></i></div>
                    <div class="note-body"><asp:Localize runat="server" meta:resourcekey="note_2" /></div>
                </li>
                <li class="note-item note-info">
                    <div class="note-icon"><i class="fa fa-hand-paper-o"></i></div>
                    <div class="note-body"><asp:Localize runat="server" meta:resourcekey="note_3" /></div>
                </li>
                <li class="note-item note-warning">
                    <div class="note-icon"><i class="fa fa-exclamation-triangle"></i></div>
                    <div class="note-body"><asp:Localize runat="server" meta:resourcekey="note_4" /></div>
                </li>
            </ul>
        </div>

    </div>
</div>

<div class="row-fluid screen-content" id="main-div"></div>
