// FOTOHRA v2.4
// Oprava tlačítka: používá skutečný HTTPS odkaz, který zachytí Scriptable
// přes WebView.shouldAllowRequest a otevře nativně v Safari nebo Opeře.

const THREAD_URL = "https://www.bike-forum.cz/forum/fotohra-xxvi";
const DEADLINE_DAYS = 14;

const fm = FileManager.local();
const appDir = fm.joinPath(fm.documentsDirectory(), "Fotohra");
const prefsPath = fm.joinPath(appDir, "prefs.json");

if (!fm.fileExists(appDir)) {
  fm.createDirectory(appDir, true);
}

await main();
Script.complete();

async function main() {
  try {
    const browser = await getBrowserPreference();
    const html = await download(THREAD_URL);

    const posts = parsePosts(html);
    const rootId =
      (posts.find(p => p.isRoot) || posts[0])?.id;

    if (!rootId) {
      throw new Error(
        "Nenašel jsem zakládající příspěvek."
      );
    }

    let found = null;

    for (let i = posts.length - 1; i >= 0; i--) {
      const p = posts[i];

      if (
        p.replyTo !== rootId ||
        !p.hasImage
      ) {
        continue;
      }

      const topic = findTopic(p.text);

      if (topic) {
        found = {
          ...p,
          topic
        };

        break;
      }
    }

    if (!found) {
      throw new Error(
        "Nenašel jsem aktuální zadání."
      );
    }

    const postUrl =
      `${THREAD_URL}#commentAnchor${found.id}`;

    const publishedAt =
      parseForumDate(found.date);

    const deadlineAt =
      publishedAt == null
        ? null
        : publishedAt +
          DEADLINE_DAYS *
          24 *
          60 *
          60 *
          1000;

    const web = new WebView();

    /*
      Tlačítko obsahuje normální HTTPS adresu příspěvku.

      Když se WebView pokusí adresu načíst,
      tato funkce požadavek zachytí.

      WebView navigaci zakáže a příspěvek
      otevře externě ve zvoleném prohlížeči.
    */
    web.shouldAllowRequest = request => {
      const url =
        String(request.url || "");

      if (url.startsWith(THREAD_URL)) {
        openInBrowser(
          postUrl,
          browser
        );

        return false;
      }

      if (
        url ===
        "https://fotohra.local/refresh"
      ) {
        Safari.open(
          URLScheme.forRunningScript()
        );

        return false;
      }

      if (
        url ===
        "https://fotohra.local/change-browser"
      ) {
        try {
          if (fm.fileExists(prefsPath)) {
            fm.remove(prefsPath);
          }
        } catch (_) {}

        Safari.open(
          URLScheme.forRunningScript()
        );

        return false;
      }

      return true;
    };

    await web.loadHTML(
      renderHtml({
        threadTitle:
          extractThreadTitle(html) ||
          "Fotohra",

        topic:
          found.topic,

        author:
          found.author,

        exactDate:
          found.date,

        freshness:
          freshnessLabel(found.date),

        comment:
          found.text,

        postUrl,

        browserName:
          browser === "opera"
            ? "Opera"
            : "Safari",

        publishedAt,
        deadlineAt
      })
    );

    await web.present(false);

  } catch (e) {
    const alert = new Alert();

    alert.title =
      "Fotohra – chyba";

    alert.message =
      String(e);

    alert.addCancelAction("OK");

    await alert.presentAlert();
  }
}

async function download(url) {
  const req = new Request(url);

  req.timeoutInterval = 15;

  req.headers = {
    "User-Agent":
      "Mozilla/5.0 iPhone Safari"
  };

  return await req.loadString();
}

async function getBrowserPreference() {
  const prefs = loadPrefs();

  if (
    prefs.browser === "safari" ||
    prefs.browser === "opera"
  ) {
    return prefs.browser;
  }

  const alert = new Alert();

  alert.title =
    "Vyber prohlížeč";

  alert.message =
    "Volba se uloží. Později ji změníš dole na kartě.";

  alert.addAction("Safari");
  alert.addAction("Opera");
  alert.addCancelAction("Zrušit");

  const choice =
    await alert.presentSheet();

  const browser =
    choice === 1
      ? "opera"
      : "safari";

  savePrefs({
    browser
  });

  return browser;
}

function openInBrowser(
  url,
  browser
) {
  if (browser === "opera") {
    /*
      Opera pro iOS historicky používá
      schéma touch-http / touch-https.
    */
    const operaUrl =
      url.startsWith("https://")
        ? "touch-https://" +
          url.slice(8)

        : url.startsWith("http://")
          ? "touch-http://" +
            url.slice(7)

          : url;

    Safari.open(operaUrl);

    return;
  }

  Safari.open(url);
}

function loadPrefs() {
  try {
    if (!fm.fileExists(prefsPath)) {
      return {};
    }

    return JSON.parse(
      fm.readString(prefsPath)
    );

  } catch (_) {
    return {};
  }
}

function savePrefs(obj) {
  fm.writeString(
    prefsPath,
    JSON.stringify(
      obj,
      null,
      2
    )
  );
}

function parsePosts(html) {
  return html
    .split(
      /<div id="comment(?=\d+)/i
    )
    .slice(1)
    .map(part => {
      const id =
        (
          part.match(
            /^(\d+)/
          ) || []
        )[1];

      const replyTo =
        (
          part.match(
            /href="#commentAnchor(\d+)"[^>]*class="[^"]*go-to-previous/
          ) || []
        )[1] || null;

      const textHtml =
        (
          part.match(
            /<div class="post-text[^"]*">([\s\S]*?)<\/div>/i
          ) || []
        )[1] || "";

      return {
        id,

        isRoot:
          /class="[^"]*post-first/
            .test(
              part.slice(
                0,
                250
              )
            ),

        replyTo,

        hasImage:
          /class="post-images\b|\/static\/images\/discussionpost\//i
            .test(part),

        author:
          (
            part.match(
              /data-username-canonical="([^"]+)"/
            ) || []
          )[1] ||
          "neznámý autor",

        date:
          htmlToText(
            (
              part.match(
                /<span class="post-date">([\s\S]*?)<\/span>/i
              ) || []
            )[1] || ""
          ),

        text:
          htmlToText(
            textHtml
          )
      };
    })
    .filter(
      p => p.id
    );
}

function findTopic(text) {
  const lines =
    text
      .split(/\n+/)
      .map(
        s => s.trim()
      )
      .filter(Boolean);

  for (
    let i = lines.length - 1;
    i >= 0;
    i--
  ) {
    const match =
      lines[i].match(
        /(?:další|nové|aktuální)\s+téma(?:\s+(?:je|bude|jest))?\s*[:\-]?\s*(.+)$/i
      );

    if (match?.[1]) {
      return match[1].trim();
    }
  }

  for (
    let i = lines.length - 1;
    i >= 0;
    i--
  ) {
    const line =
      lines[i];

    if (
      mostlyUpper(line) &&
      !/^(SEZNAM TÉMAT|PRAVIDLA|DALŠÍ TÉMA|NOVÉ TÉMA)$/i
        .test(line)
    ) {
      return line;
    }
  }

  return null;
}

function mostlyUpper(text) {
  const letters =
    text.match(
      /[A-Za-zÁČĎÉĚÍŇÓŘŠŤÚŮÝŽáčďéěíňóřšťúůýž]/g
    ) || [];

  if (letters.length < 4) {
    return false;
  }

  const upper =
    letters.filter(
      character =>
        character ===
        character.toUpperCase()
    ).length;

  return (
    upper /
    letters.length
  ) >= 0.75;
}

function htmlToText(s) {
  return s
    .replace(
      /<br\s*\/?\s*>/gi,
      "\n"
    )
    .replace(
      /<\/p>/gi,
      "\n"
    )
    .replace(
      /<[^>]+>/g,
      ""
    )
    .replace(
      /&nbsp;|&#160;/gi,
      " "
    )
    .replace(
      /&amp;/gi,
      "&"
    )
    .replace(
      /&quot;/gi,
      '"'
    )
    .replace(
      /&#39;|&apos;/gi,
      "'"
    )
    .replace(
      /&#x([0-9a-f]+);/gi,
      (_, n) =>
        String.fromCodePoint(
          parseInt(
            n,
            16
          )
        )
    )
    .replace(
      /&#(\d+);/g,
      (_, n) =>
        String.fromCodePoint(
          Number(n)
        )
    )
    .replace(
      /\r/g,
      ""
    )
    .replace(
      /[ \t]+\n/g,
      "\n"
    )
    .replace(
      /\n{3,}/g,
      "\n\n"
    )
    .trim();
}

function parseForumDate(text) {
  const match =
    text.match(
      /(\d{1,2})\.(\d{1,2})\.(\d{4})\s+(\d{1,2}):(\d{2})/
    );

  if (!match) {
    return null;
  }

  return new Date(
    +match[3],
    +match[2] - 1,
    +match[1],
    +match[4],
    +match[5],
    0,
    0
  ).getTime();
}

function freshnessLabel(text) {
  const publishedAt =
    parseForumDate(text);

  if (publishedAt == null) {
    return "AKTUÁLNÍ";
  }

  const minutes =
    Math.max(
      0,
      Math.floor(
        (
          Date.now() -
          publishedAt
        ) /
        60000
      )
    );

  if (minutes < 30) {
    return "ČERSTVÉ";
  }

  if (minutes < 360) {
    return "LOVÍ SE";
  }

  if (minutes < 1440) {
    return "DNES";
  }

  return "AKTUÁLNÍ";
}

function extractThreadTitle(html) {
  const h1 =
    (
      html.match(
        /<h1[^>]*>([\s\S]*?)<\/h1>/i
      ) || []
    )[1];

  if (h1) {
    return htmlToText(
      h1
    ).trim();
  }

  const title =
    (
      html.match(
        /<title>\s*([\s\S]*?)\s*<\/title>/i
      ) || []
    )[1];

  if (!title) {
    return null;
  }

  return title
    .replace(
      /\s*-\s*Diskuse[\s\S]*$/i,
      ""
    )
    .trim();
}

function esc(s) {
  return String(s)
    .replace(
      /&/g,
      "&amp;"
    )
    .replace(
      /</g,
      "&lt;"
    )
    .replace(
      />/g,
      "&gt;"
    )
    .replace(
      /"/g,
      "&quot;"
    );
}

function renderHtml(data) {
  const comment =
    esc(data.comment)
      .replace(
        /\n/g,
        "<br>"
      );

  const published =
    data.publishedAt == null
      ? "null"
      : String(
          data.publishedAt
        );

  const deadline =
    data.deadlineAt == null
      ? "null"
      : String(
          data.deadlineAt
        );

  return `
<!doctype html>

<html lang="cs">

<head>

<meta charset="utf-8">

<meta
  name="viewport"
  content="width=device-width,initial-scale=1,viewport-fit=cover"
>

<style>

:root {
  --text: #f7f8fc;
  --muted: #c4ccda;
  --cyan: #75efff;
  --yellow: #ffe16b;
  --red: #ff7373;
  --line: rgba(255,255,255,.11);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    var(--text);

  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(117,239,255,.16),
      transparent 18%
    ),
    linear-gradient(
      180deg,
      #09101f,
      #101831
    );
}

.app {
  height: 100vh;

  display: flex;
  flex-direction: column;

  gap: 10px;

  padding:
    max(
      12px,
      env(safe-area-inset-top)
    )
    12px
    max(
      12px,
      env(safe-area-inset-bottom)
    );
}

.hero {
  position: relative;

  flex:
    0 0 23vh;

  min-height:
    145px;

  border-radius:
    21px;

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.34);
}

svg {
  width: 100%;
  height: 100%;
  display: block;
}

.heroInfo {
  position: absolute;

  left: 13px;
  right: 13px;
  bottom: 11px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-end;
}

.eyebrow {
  font-size:
    10px;

  letter-spacing:
    2px;

  font-weight:
    850;

  color:
    rgba(255,255,255,.8);
}

.title {
  font-size:
    25px;

  line-height:
    1;

  font-weight:
    950;

  letter-spacing:
    -.8px;

  text-shadow:
    0 2px 9px
    rgba(0,0,0,.35);
}

.badge {
  padding:
    8px 11px;

  border-radius:
    99px;

  background:
    rgba(21,125,51,.88);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    1px;
}

.card {
  flex: 1;
  min-height: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;

  padding:
    13px;

  border-radius:
    21px;

  border:
    1px solid
    var(--line);

  background:
    linear-gradient(
      180deg,
      rgba(37,46,68,.94),
      rgba(27,34,52,.96)
    );

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.34);
}

.label {
  font-size:
    9px;

  letter-spacing:
    1.8px;

  text-transform:
    uppercase;

  color:
    var(--muted);

  font-weight:
    900;
}

.topic {
  font-size:
    24px;

  line-height:
    1;

  font-weight:
    950;

  letter-spacing:
    -.8px;

  text-wrap:
    balance;
}

.row {
  display: flex;

  justify-content:
    space-between;

  gap: 10px;

  font-size:
    11px;

  color:
    var(--muted);
}

.author {
  color:
    #fff;

  font-weight:
    850;
}

.timers {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;
}

.timer {
  padding:
    9px 10px;

  border-radius:
    14px;

  background:
    rgba(255,255,255,.055);

  border:
    1px solid
    rgba(255,255,255,.09);
}

.timerName {
  font-size:
    8px;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;

  color:
    var(--muted);

  font-weight:
    850;
}

.timerValue {
  margin-top:
    4px;

  font-size:
    12px;

  line-height:
    1.18;

  font-weight:
    900;

  color:
    var(--cyan);

  font-variant-numeric:
    tabular-nums;
}

.deadline .timerValue {
  color:
    var(--yellow);
}

.overdue {
  border-color:
    rgba(255,115,115,.45)
    !important;
}

.overdue .timerValue {
  color:
    var(--red)
    !important;
}

.commentWrap {
  flex: 1;
  min-height: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;
}

.comment {
  flex: 1;

  min-height:
    62px;

  max-height:
    15vh;

  overflow:
    auto;

  -webkit-overflow-scrolling:
    touch;

  padding:
    10px;

  border-radius:
    14px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid
    rgba(255,255,255,.1);

  font-size:
    12px;

  line-height:
    1.3;
}

.buttons {
  display: grid;

  grid-template-columns:
    1fr .72fr;

  gap: 8px;
}

.btn {
  display: flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    48px;

  border-radius:
    15px;

  text-decoration:
    none;

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    950;

  text-align:
    center;

  border:
    1px solid
    rgba(255,255,255,.12);

  cursor:
    pointer;

  user-select:
    none;
}

.primary {
  background:
    linear-gradient(
      #35d96a,
      #1ca64b
    );
}

.secondary {
  background:
    linear-gradient(
      #17243a,
      #101a2a
    );
}

.btn small {
  display: block;

  margin-top:
    2px;

  font-size:
    9px;

  opacity:
    .83;
}

.foot {
  display: flex;

  justify-content:
    space-between;

  font-size:
    9px;

  color:
    rgba(255,255,255,.62);
}

.foot a {
  color:
    var(--cyan);

  text-decoration:
    none;

  font-weight:
    850;
}

@media (
  max-height: 620px
) {
  .hero {
    min-height:
      125px;

    flex-basis:
      20vh;
  }

  .title {
    font-size:
      21px;
  }

  .topic {
    font-size:
      21px;
  }

  .comment {
    max-height:
      12vh;
  }

  .btn {
    min-height:
      43px;
  }
}

</style>

</head>

<body>

<div class="app">

  <div class="hero">

    <svg
      viewBox="0 0 1000 620"
      preserveAspectRatio="none"
      aria-hidden="true"
    >

      <rect
        width="500"
        height="620"
        fill="#3f5fd7"
      />

      <rect
        x="500"
        width="500"
        height="620"
        fill="#d4464b"
      />

      <polygon
        points="130,470 500,120 870,470"
        fill="#48b85b"
      />

      <polygon
        points="420,245 500,120 585,248 545,248 522,225 505,244 488,228 468,248"
        fill="#f0f2f5"
      />

      <polygon
        points="0,420 210,300 360,420 500,315 640,420 770,265 1000,420 1000,620 0,620"
        fill="#45b557"
      />

      <circle
        cx="95"
        cy="115"
        r="55"
        fill="#f0cf42"
      />

      <circle
        cx="118"
        cy="108"
        r="49"
        fill="#3f5fd7"
      />

      <polygon
        points="265,82 279,115 314,115 286,135 297,168 265,146 233,168 244,135 216,115 251,115"
        fill="#fff"
      />

      <g
        transform="translate(855,108)"
      >

        <polygon
          points="0,-62 15,-30 47,-47 30,-15 62,0 30,15 47,47 15,30 0,62 -15,30 -47,47 -30,15 -62,0 -30,-15 -47,-47 -15,-30"
          fill="#111"
        />

        <circle
          r="28"
          fill="#f0cf42"
        />

      </g>

      <g
        stroke="#111"
        stroke-width="8"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >

        <circle
          cx="395"
          cy="465"
          r="74"
        />

        <circle
          cx="645"
          cy="465"
          r="74"
        />

        <path
          d="M395 465L495 392L560 465L645 465L558 350L495 392L470 315M558 350L625 325M464 315L504 315"
        />

      </g>

      <circle
        cx="495"
        cy="392"
        r="11"
        fill="#111"
      />

      <g
        stroke="#111"
        stroke-width="7"
        stroke-linecap="round"
        stroke-linejoin="round"
      >

        <circle
          cx="565"
          cy="252"
          r="25"
          fill="#e8edf2"
        />

        <polygon
          points="544,285 590,285 620,332 565,350 530,318"
          fill="#d9e1ea"
        />

        <path
          d="M590 295L650 245M545 292L510 242M565 350L525 416M590 343L635 466M532 318L498 390"
          fill="none"
        />

      </g>

    </svg>

    <div class="heroInfo">

      <div>

        <div class="eyebrow">
          BIKE-FORUM.CZ
        </div>

        <div class="title">
          ${esc(data.threadTitle)}
        </div>

      </div>

      <div class="badge">
        ${esc(data.freshness)}
      </div>

    </div>

  </div>

  <div class="card">

    <div class="label">
      Aktuální zadání
    </div>

    <div class="topic">
      ${esc(data.topic)}
    </div>

    <div class="row">

      <span>
        ${esc(data.exactDate)}
      </span>

      <span class="author">
        @${esc(data.author)}
      </span>

    </div>

    <div class="timers">

      <div class="timer">

        <div class="timerName">
          Od zveřejnění
        </div>

        <div
          class="timerValue"
          id="elapsed"
        >
          —
        </div>

      </div>

      <div
        class="timer deadline"
        id="deadlineBox"
      >

        <div
          class="timerName"
          id="deadlineName"
        >
          Do konce 14denní lhůty
        </div>

        <div
          class="timerValue"
          id="deadline"
        >
          —
        </div>

      </div>

    </div>

    <div class="commentWrap">

      <div class="label">
        Celý komentář
      </div>

      <div class="comment">
        ${comment}
      </div>

    </div>

    <div class="buttons">

      <a
        class="btn primary"
        href="${esc(data.postUrl)}"
      >

        <div>
          Zobrazit příspěvek

          <small>
            otevřít v prohlížeči
          </small>
        </div>

      </a>

      <a
        class="btn secondary"
        href="https://fotohra.local/refresh"
      >

        <div>
          Obnovit

          <small>
            zkontrolovat znovu
          </small>
        </div>

      </a>

    </div>

    <div class="foot">

      <span>
        prohlížeč:

        <b>
          ${esc(data.browserName)}
        </b>
      </span>

      <a
        href="https://fotohra.local/change-browser"
      >
        Změnit prohlížeč
      </a>

    </div>

  </div>

</div>

<script>

const publishedAt =
  ${published};

const deadlineAt =
  ${deadline};

function pad(number) {
  return String(number)
    .padStart(
      2,
      "0"
    );
}

function duration(milliseconds) {
  let totalSeconds =
    Math.max(
      0,
      Math.floor(
        milliseconds /
        1000
      )
    );

  const days =
    Math.floor(
      totalSeconds /
      86400
    );

  totalSeconds %=
    86400;

  const hours =
    Math.floor(
      totalSeconds /
      3600
    );

  totalSeconds %=
    3600;

  const minutes =
    Math.floor(
      totalSeconds /
      60
    );

  const seconds =
    totalSeconds %
    60;

  if (days > 0) {
    return (
      days +
      " d " +
      pad(hours) +
      " h " +
      pad(minutes) +
      " min " +
      pad(seconds) +
      " s"
    );
  }

  if (hours > 0) {
    return (
      hours +
      " h " +
      pad(minutes) +
      " min " +
      pad(seconds) +
      " s"
    );
  }

  if (minutes > 0) {
    return (
      minutes +
      " min " +
      pad(seconds) +
      " s"
    );
  }

  return (
    seconds +
    " s"
  );
}

function tick() {
  const elapsed =
    document.getElementById(
      "elapsed"
    );

  const remaining =
    document.getElementById(
      "deadline"
    );

  const box =
    document.getElementById(
      "deadlineBox"
    );

  const name =
    document.getElementById(
      "deadlineName"
    );

  if (
    publishedAt === null ||
    deadlineAt === null
  ) {
    elapsed.textContent =
      "čas nezjištěn";

    remaining.textContent =
      "čas nezjištěn";

    return;
  }

  const now =
    Date.now();

  elapsed.textContent =
    duration(
      now -
      publishedAt
    );

  const left =
    deadlineAt -
    now;

  if (left >= 0) {
    name.textContent =
      "Do konce 14denní lhůty";

    remaining.textContent =
      duration(left);

    box.classList
      .remove(
        "overdue"
      );

  } else {
    name.textContent =
      "14denní lhůta vypršela";

    remaining.textContent =
      "před " +
      duration(
        -left
      );

    box.classList
      .add(
        "overdue"
      );
  }
}

tick();

setInterval(
  tick,
  1000
);

</script>

</body>

</html>
`;
}