<?php
/**
 * 公共维护页：单屏门户同风格展示维护进度；内容全部由后台配置驱动。
 */

declare(strict_types=1);

require_once __DIR__ . '/lib/store.php';

$state = Store::publicPayload(Store::ensure());
$isFinished = $state['mode'] === 'finished';

$title = $isFinished ? $state['titles']['finished'] : $state['titles']['maintenance'];
$message = $isFinished ? $state['messages']['finished'] : $state['messages']['maintenance'];

$pillText = $isFinished ? '维护已完成' : '计划内维护';
$zoneWord = $isFinished ? '归来' : '维护';
?>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= e($state['site_name']) ?> · <?= e($pillText) ?></title>
<meta name="description" content="<?= e($state['site_name']) ?> 系统维护与升级进度公告">
<meta name="robots" content="noindex, nofollow">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f0ebe3">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#171616">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d97706'/%3E%3Cstop offset='.55' stop-color='%23a855f7'/%3E%3Cstop offset='1' stop-color='%230891b2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z'/%3E%3C/svg%3E">
<link rel="stylesheet" href="assets/style.css?v=1">
<script>
/* 与主站相同的主题引导逻辑，共用同一个 localStorage 键。 */
(() => {
  try {
    const stored = localStorage.getItem("chatgpt2api-theme");
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const theme = stored === "light" || stored === "dark" ? stored : prefersDark ? "dark" : "light";
    document.documentElement.classList.toggle("dark", theme === "dark");
    document.documentElement.style.colorScheme = theme;
  } catch {
    document.documentElement.classList.remove("dark");
    document.documentElement.style.colorScheme = "light";
  }
})();
</script>
</head>
<body class="ms-shell">

<!-- 全页环境光斑 -->
<div class="ms-lights" aria-hidden="true">
  <span class="ms-light-one"></span>
  <span class="ms-light-two"></span>
  <span class="ms-light-three"></span>
  <span class="ms-light-four"></span>
  <span class="ms-light-five"></span>
</div>

<header class="ms-header" id="msHeader">
  <div class="ms-header-inner">
    <button type="button" class="ms-brand" onclick="window.scrollTo({top:0,behavior:'smooth'})">
      <img src="assets/logo-day.webp" alt="" aria-hidden class="ms-logo dark:hidden">
      <img src="assets/logo-night.webp" alt="" aria-hidden class="ms-logo hidden dark:block">
      <span><?= e($state['site_name']) ?></span>
    </button>
    <button type="button" class="ms-icon-btn" id="themeToggle" data-no-translate aria-label="切换明暗主题" title="切换明暗主题">
      <svg class="ms-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
      <svg class="ms-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
    </button>
  </div>
</header>

<main class="ms-main">
  <section class="ms-hero">
    <!-- 板块关键词：桌面端为右侧巨型渐变背景字 -->
    <span class="ms-zone-word" data-ms-zone aria-hidden="true"><?= e($zoneWord) ?></span>

    <!-- 气团光球 -->
    <div class="ms-orbs" aria-hidden="true">
      <span class="ms-orb ms-orb-amber"></span>
      <span class="ms-orb ms-orb-violet"></span>
      <span class="ms-orb ms-orb-cyan"></span>
      <span class="ms-orb ms-orb-rose"></span>
    </div>

    <div class="ms-hero-inner">

      <?php if ($isFinished): ?>
        <!-- 完成态：居中标记 -->
        <div class="ms-emblem is-finished" aria-hidden="true">
          <span class="ms-emblem-core">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          </span>
        </div>
      <?php endif; ?>

      <div class="ms-pill-wrap ms-rise" style="--rise-delay:.05s">
        <span class="ms-pill<?= $isFinished ? ' is-finished' : '' ?>">
          <span class="ms-pill-dot" aria-hidden="true"></span>
          <?= e($state['site_name']) ?> · <?= e($pillText) ?>
        </span>
      </div>

      <h1 class="ms-title ms-rise" style="--rise-delay:.14s"><?= e($title) ?></h1>

      <p class="ms-message ms-rise" style="--rise-delay:.24s"><?= e($message) ?></p>

      <?php if (!empty($state['stages'])): ?>
      <div class="ms-panel ms-rise" style="--rise-delay:.36s">
        <!-- 进度：大号渐变百分比 + 细进度条 -->
        <div class="ms-progress-head">
          <span class="ms-percent"><span class="ms-text-gradient"><?= (int) $state['progress'] ?></span><i>%</i></span>
          <span class="ms-progress-label">整体进度</span>
        </div>
        <div class="ms-bar" role="progressbar" aria-valuenow="<?= (int) $state['progress'] ?>" aria-valuemin="0" aria-valuemax="100">
          <span class="ms-bar-fill" style="--bar-w:<?= (int) $state['progress'] ?>%"></span>
        </div>

        <!-- 阶段时间线 -->
        <ol class="ms-steps">
          <?php foreach ($state['stages'] as $i => $stage): ?>
            <li class="ms-step is-<?= e($stage['state']) ?>">
              <span class="ms-step-node" aria-hidden="true">
                <?php if ($stage['state'] === 'done'): ?>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                <?php else: ?>
                  <i><?= $i + 1 ?></i>
                <?php endif; ?>
              </span>
              <span class="ms-step-body">
                <b><?= e($stage['title']) ?><?= $stage['state'] === 'active' ? '<em>进行中</em>' : '' ?></b>
                <small><?= e($stage['desc']) ?></small>
              </span>
            </li>
          <?php endforeach; ?>
        </ol>
      </div>
      <?php endif; ?>

      <?php if ($state['start_time'] || $state['eta_time']): ?>
      <div class="ms-meta ms-rise" style="--rise-delay:.46s">
        <?php if ($state['start_time']): ?>
        <div class="ms-meta-item">
          <span><?= $isFinished ? '开始时间' : '维护开始' ?></span>
          <b data-ms-local-time="<?= e($state['start_time']) ?>">—</b>
        </div>
        <?php endif; ?>
        <?php if ($state['eta_time']): ?>
        <div class="ms-meta-item">
          <span>预计完成</span>
          <b data-ms-local-time="<?= e($state['eta_time']) ?>">—</b>
        </div>
        <?php endif; ?>
      </div>
      <?php endif; ?>

      <?php if ($isFinished && $state['home_url']): ?>
      <div class="ms-rise" style="--rise-delay:.56s">
        <a class="ms-btn" href="<?= e($state['home_url']) ?>" rel="noopener">
          进入全新版本
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        </a>
      </div>
      <?php endif; ?>

    </div>
  </section>
</main>

<footer class="ms-footer">
  <div class="ms-brand ms-footer-brand">
    <img src="assets/logo-day.webp" alt="" aria-hidden class="ms-logo dark:hidden">
    <img src="assets/logo-night.webp" alt="" aria-hidden class="ms-logo hidden dark:block">
    <span><?= e($state['site_name']) ?></span>
  </div>
  <p><?= e($state['slogan']) ?></p>
  <p><small>© <?= date('Y') ?> <?= e($state['site_name']) ?> · 保留所有权利</small></p>
</footer>

<script>window.__MS__={updatedAt:<?= (int) $state['updated_at'] ?>};</script>
<script src="assets/app.js?v=1" defer></script>
</body>
</html>
