/* global React */
const { useState: useManualState } = React;

function Manual() {
  const [loaded, setLoaded] = useManualState(false);

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: "calc(100vh - 112px)" }}>
      {/* Toolbar */}
      <div style={{
        padding: "10px 20px",
        display: "flex",
        alignItems: "center",
        gap: 12,
        borderBottom: "1px solid var(--line)",
        background: "var(--surface)",
        flexShrink: 0
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 18 }}>📖</span>
          <div>
            <div style={{ fontWeight: 700, fontSize: 14, color: "var(--ink-1)" }}>คู่มือการใช้งาน SSS</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)" }}>คู่มือสำหรับทุกฝ่าย · 10 หน้า · A4</div>
          </div>
        </div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
          <button
            className="btn"
            onClick={() => window.open("คู่มือการใช้งาน SSS.html", "_blank")}
            style={{ fontSize: 13 }}
          >
            เปิดในแท็บใหม่
          </button>
          <button
            className="btn primary"
            onClick={() => {
              const w = window.open("คู่มือการใช้งาน SSS.html", "_blank");
              if (w) setTimeout(() => w.print(), 800);
            }}
            style={{ fontSize: 13 }}
          >
            🖨 พิมพ์ / บันทึก PDF
          </button>
        </div>
      </div>

      {/* Iframe */}
      <div style={{ flex: 1, position: "relative", background: "#ece9f6" }}>
        {!loaded && (
          <div style={{
            position: "absolute", inset: 0, display: "grid", placeItems: "center",
            color: "var(--ink-4)", fontSize: 13
          }}>
            กำลังโหลดคู่มือ…
          </div>
        )}
        <iframe
          src="คู่มือการใช้งาน SSS.html"
          title="คู่มือการใช้งาน SSS"
          onLoad={() => setLoaded(true)}
          style={{
            width: "100%",
            height: "100%",
            border: "none",
            display: "block",
            opacity: loaded ? 1 : 0,
            transition: "opacity 0.2s"
          }}
        />
      </div>
    </div>
  );
}

window.Manual = Manual;