<?php
require_once "../../../config/settings.inc.php";
define("IEM_APPID", 170);
require_once "../../../include/mlib.php";
require_once "../../../include/forms.php";
force_https();
require_once "../../../include/myview.php";
require_once "../../../include/iemprop.php";
$t = new MyView();

$wfo = get_str404("wfo", "DMX");
$thisyear = date("Y");
$sdate = get_str404("sdate", "{$thisyear}-01-01");
$edate = get_str404("edate", "{$thisyear}-12-31");
$otype = get_str404("otype", "1.C.13");
$threshold = get_str404("threshold", "SLGT");
$overlap = get_float404("overlap", 5.0);
$oparts = explode(".", $otype);
$phsig = $_GET["phsig"] ?? [];

$wsargs = [
    "wfo" => $wfo,
    "day" => $oparts[0],
    "threshold" => $threshold,
    "outlook_type" => $oparts[1],
    "cycle" => $oparts[2],
    "sdate" => $sdate,
    "edate" => $edate,
    "phsig" => implode(",", $phsig),
    "overlap" => $overlap,
];
$wsurl = "/json/outlook_and_vtec.py";
$wsurl_external = sprintf("%s?%s", $wsurl, http_build_query($wsargs));
$jobj = require_json_response($wsurl, $wsargs);

/**
 * Simple helper to escape output for HTML contexts.  We use this for all
 * dynamic output in this page to prevent XSS issues.  We also cast to string
 * to prevent issues with non-string values.
 * @param mixed $value The value to escape for HTML output
 * @return string The escaped string safe for HTML contexts
 */
function h($value) {
    return htmlspecialchars((string) $value, ENT_QUOTES | ENT_SUBSTITUTE, "UTF-8");
}

$table = "";
$rows = [];
foreach ($jobj["outlooks"] as $o) {
    $safeDate = h($o["date"]);
    $safeIssue = h($o["utc_issue"]);
    $safeExpire = h($o["utc_expire"]);
    $safeOutlook = h("{$o["day"]} {$o["threshold"]} {$o["outlook_type"]}@{$o["cycle"]}");
    $eventCount = count($o["events"]);
    $eventsHtml = "";
    $eventsText = [];

    $table .= <<<EOM
<tr><td>{$safeDate}</td>
<td>{$safeIssue}</td><td>{$safeExpire}</td>
<td>{$safeOutlook}</td>
<td>{$o["overlap_percent"]}</td>
<td data-event-count="{$eventCount}">
EOM;
    foreach ($o["events"] as $e) {
        $uri = h($e["vtec_app_uri"]);
        $label = h($e["label"]);
        $eventsHtml .= sprintf('<a href="%s" target="_new">%s</a><br />', $uri, $label);
        $eventsText[] = $e["label"];
    }
    $table .= $eventsHtml ?: "<span class='text-muted'>None</span>";
    $table .= "</td></tr>";
    $rows[] = [
        "date" => $o["date"],
        "utc_issue" => $o["utc_issue"],
        "utc_expire" => $o["utc_expire"],
        "outlook" => "{$o["day"]} {$o["threshold"]} {$o["outlook_type"]}@{$o["cycle"]}",
        "event_count" => $eventCount,
        "events_html" => $eventsHtml,
        "overlap_percent" => $o["overlap_percent"],
        "events_text" => implode(" | ", $eventsText),
    ];
}

$t->jsextra = <<<EOM
<script src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
<script src="index.module.js?v=2" type="module"></script>
EOM;
$t->headextra = <<<EOM
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
EOM;
$t->title = "SPC/WPC Outlooks with Warnings by WFO";

$wfoSelect = networkSelect("WFO", $wfo, [], $selectName="wfo");

$opts = [
    "1.C.1" => "Day 1 Convective @1z",
    "1.C.20" => "Day 1 Convective @20z",
    "1.C.16" => "Day 1 Convective @16z",
    "1.C.13" => "Day 1 Convective @13z",
    "1.C.6" => "Day 1 Convective @6z",
    "1.F.17" => "Day 1 Fire Weather @17z",
    "1.F.7" => "Day 1 Fire Weather @7z",
    "1.E.1" => "Day 1 Excessive Rainfall @1z",
    "1.E.20" => "Day 1 Excessive Rainfall @20z",
    "1.E.16" => "Day 1 Excessive Rainfall @16z",
    "1.E.8" => "Day 1 Excessive Rainfall @8z",
    "2.C.17" => "Day 2 Convective @17z",
    "2.C.7" => "Day 2 Convective @7z",
    "2.F.18" => "Day 2 Fire Weather @18z",
    "2.F.8" => "Day 2 Fire Weather @8z",
    "2.E.20" => "Day 2 Excessive Rainfall @20z",
    "2.E.8" => "Day 2 Excessive Rainfall @8z",
    "3.C.20" => "Day 3 Convective @20z",
    "3.C.8" => "Day 3 Convective @8z",
    "3.F.21" => "Day 3 Fire Weather @21z",
    "3.E.20" => "Day 3 Excessive Rainfall @20z",
    "3.E.8" => "Day 3 Excessive Rainfall @8z",
    "4.C.10" => "Day 4 Convective @10z",
    "4.E.20" => "Day 4 Excessive Rainfall @20z",
    "4.E.8" => "Day 4 Excessive Rainfall @8z",
    "4.F.21" => "Day 4 Fire Weather @21z",
    "5.C.10" => "Day 5 Convective @10z",
    "5.E.20" => "Day 5 Excessive Rainfall @20z",
    "5.E.8" => "Day 5 Excessive Rainfall @8z",
    "5.F.21" => "Day 5 Fire Weather @21z",
    "6.C.10" => "Day 6 Convective @10z",
    "6.F.21" => "Day 6 Fire Weather @21z",
    "7.C.10" => "Day 7 Convective @10z",
    "7.F.21" => "Day 7 Fire Weather @21z",
    "8.C.10" => "Day 8 Convective @10z",
    "8.F.21" => "Day 8 Fire Weather @21z",
];
$oselect = make_select("otype", $otype, $opts);

$topts = [
    "0.15" => "15% (day 4+)",
    "0.30" => "30% (day 4+)",
    "TSTM" => "General Thunder",
    "MRGL" => "Marginal",
    "SLGT" => "Slight",
    "ENH" => "Enhanced",
    "MDT" => "Moderate",
    "HIGH" => "High",
    "CRIT" => "Critical (Fire)",
    "ELEV" => "Elevated (Fire)",
    "EXTM" => "Extreme (Fire)",
    "IDRT" => "IDRT (Fire)",
    "SDRT" => "SDRT (Fire)",
];
$tselect = make_select("threshold", $threshold, $topts);

$wopts = [
    "FF.W" => "Flash Flood Warning",
    "MA.W" => "Marine Warning",
    "FW.W" => "Red Flag Warning",
    "SV.W" => "Severe Thunderstorm Warning",
    "TO.W" => "Tornado Warning",
];
$wselect = "";
foreach ($wopts as $k => $v) {
    $sel = in_array($k, $phsig) ? "selected" : "";
    $wselect .= "<option value='$k' $sel>$v</option>";
}

$pcp = $jobj["stats"]["total_outlooks"] > 0 ? round(100.0 * $jobj["stats"]["outlooks_with_events"] / $jobj["stats"]["total_outlooks"], 2) : 0.0;
$tableRowsJson = json_encode($rows, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
$safeWsurl = h($wsurl_external);
$safeSdate = h($sdate);
$safeEdate = h($edate);

$t->content = <<<EOM
<div class="outlook-app">
    <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/nws/">NWS Mainpage</a></li>
        <li class="breadcrumb-item active" aria-current="page">SPC/WPC Outlooks and Coincident Warnings</li>
    </ol>
    </nav>

    <header class="outlook-header">
        <h1>SPC/WPC Outlooks and Coincident Warnings</h1>
        <p>
            This page lists SPC and WPC outlooks for a given WFO and date range, along with any
            coincident Tornado, Severe Thunderstorm, Flash Flood, or Marine Warnings issued by that
            WFO during the outlook period.  Use the filters below to customize the outlook types,
            thresholds, and event types shown.  The "CWA Overlap %" column indicates the percent
            of the outlook area that overlaps with the issuing WFO's county warning area (CWA).
        </p>
    </header>

    <section class="outlook-controls card">
        <h2>Filters</h2>
        <form name="opt" action="/nws/outlook_and_vtec/" method="GET" class="outlook-form">
            <div class="field">
                <label for="wfo">WFO</label>
                $wfoSelect
            </div>
            <div class="field">
                <label for="sdate">Start Date</label>
                <input id="sdate" type="date" name="sdate" value="{$safeSdate}"
                 class="form-control" min="2001-01-01">
            </div>
            <div class="field">
                <label for="edate">End Date</label>
                <input id="edate" type="date" name="edate" value="{$safeEdate}"
                 class="form-control" min="2001-01-01">
            </div>
            <div class="field field-wide">
                <label for="phsig">Phenomena / Significance</label>
                <select id="phsig" name="phsig[]" class="form-select" multiple size="5">
                $wselect
                </select>
            </div>
            <div class="field field-wide">
                <label for="otype">Outlook Type</label>
                $oselect
            </div>
            <div class="field">
                <label for="threshold">Outlook Threshold</label>
                $tselect
            </div>
            <div class="field">
                <label for="overlap">CWA Overlap %</label>
                <input id="overlap" type="number" name="overlap" value="{$overlap}"
                class="form-control" min="1" max="100" step="0.1">
            </div>
            <div class="field actions">
                <input type="submit" value="Apply Filters" class="btn btn-primary">
            </div>
        </form>
        <p class="service-link">
            JSON Web Service:
            <a href="{$safeWsurl}" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">View JSON</a>
        </p>
    </section>

    <section class="stats-grid" aria-label="Summary statistics">
        <article class="stat-card">
            <h3>Outlooks Listed</h3>
            <p>{$jobj["stats"]["total_outlooks"]}</p>
        </article>
        <article class="stat-card">
            <h3>Outlooks With Events</h3>
            <p>{$jobj["stats"]["outlooks_with_events"]}</p>
        </article>
        <article class="stat-card">
            <h3>Percent Outlooks with 1+ Event</h3>
            <p>{$pcp}%</p>
        </article>
    </section>

    <section class="results-card card" aria-label="Outlook and event results">
        <div class="results-toolbar">
            <h2>Coincident Events</h2>
            <div class="table-controls">
                <label for="tableSearch" class="visually-hidden">Search rows</label>
                <input id="tableSearch" type="search" class="form-control" placeholder="Search dates, outlooks, or events">
                <label class="checkbox-control" for="onlyWithEvents">
                    <input id="onlyWithEvents" type="checkbox">
                    Show only rows with events
                </label>
            </div>
        </div>
        <p id="tableSummary" class="table-summary"></p>
        <div id="eventsTable" class="events-table" aria-live="polite"></div>
        <noscript>
            <table class="table table-striped table-sm">
                <thead>
                    <tr><th>Date</th>
                    <th>UTC Issue</th>
                    <th>UTC Expire</th>
                    <th>Outlook Type</th>
                    <th>CWA Overlap %</th>
                    <th>Coincident VTEC Events</th></tr>
                </thead>
                <tbody>
                {$table}
                </tbody>
            </table>
        </noscript>
    </section>

    <script type="application/json" id="tableRows">{$tableRowsJson}</script>
</div>

EOM;
$t->render('full.phtml');
