import { Routes, Route } from "react-router-dom";
import { useEffect, useState } from "react";
// import { listen } from "@tauri-apps/api/event";
import "./App.css";
import icon from "./assets/icon.png";
import U1 from "./pages/U1/u1";
import U2 from "./pages/U2/u2";
import U3 from "./pages/U3/u3";
import U4 from "./pages/U4/u4";

import UI6 from "./pages/UI6/UI6";
import UI7 from "./pages/UI7/UI7";
import UI8 from "./pages/UI8/UI8";
import UI9 from "./pages/UI9/UI9";

function App() {
  const [time, setTime] = useState<string>(() => formatDate(new Date()));

  useEffect(() => {
    const id = setInterval(() => setTime(formatDate(new Date())), 1000);
    // let unlisten: (() => void) | null = null;
    // (async () => {
    //   try {
    //     const off = await listen("idcard-error", (e) => {
    //       console.error("[idcard-error]", e.payload);
    //     });
    //     unlisten = off;
    //   } catch (err) {
    //     console.error("failed to set idcard-error listener", err);
    //   }
    // })();
    return () => {
      clearInterval(id);
      // if (unlisten) unlisten();
    };
  }, []);

  return (
    <div className="app-container">
      {/* 全局背景层 */}
      <div className="global-background">
        {/* 顶部固定区域 - 始终显示 */}
        <div className="global-header">
          <img className="header-logo" alt="logo" src={icon} />
          <span className="header-title">医疗自助服务系统</span>
        </div>
        <span className="header-time">{time}</span>
      </div>

      {/* 路由内容区域 */}
      <div className="content-area">
        <Routes>
          <Route path="/" element={<U1 />} />
          <Route path="/u2" element={<U2 />} />
          <Route path="/u3" element={<U3 />} />
          <Route path="/u4" element={<U4 />} />
          <Route path="/UI6" element={<UI6 />} />
          <Route path="/UI7" element={<UI7 />} />
          <Route path="/UI8" element={<UI8 />} />
          <Route path="/UI9" element={<UI9 />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

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

function formatDate(d: Date) {
  const Y = d.getFullYear();
  const M = pad(d.getMonth() + 1);
  const D = pad(d.getDate());
  const hh = pad(d.getHours());
  const mm = pad(d.getMinutes());
  const ss = pad(d.getSeconds());
  return `${Y}-${M}-${D} ${hh}:${mm}:${ss}`;
}