// Shared ErrorBoundary (class — hooks can't catch render errors) + PageLoader skeleton.
(function () {
  const { useState, useEffect } = React;
  const IC = window.IC;

  // ---- ErrorBoundary: catches render errors in any screen ----
  class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
    static getDerivedStateFromError() { return { hasError: true }; }
    componentDidCatch(err, info) { try { console.error("Screen error:", err, info); } catch (e) {} }
    componentDidUpdate(prev) {
      // reset when the routed screen changes so navigating away recovers
      if (this.state.hasError && prev.resetKey !== this.props.resetKey) {
        this.setState({ hasError: false });
      }
    }
    render() {
      if (this.state.hasError) {
        return (
          <div className="page wide">
            <div className="err-card">
              <div className="err-ic">{IC.warn}</div>
              <div className="err-title">เกิดข้อผิดพลาด</div>
              <div className="err-sub">ไม่สามารถแสดงหน้านี้ได้ในขณะนี้ — กรุณารีเฟรชหน้าหรือลองอีกครั้ง</div>
              <div className="err-acts">
                <button className="btn" onClick={() => this.setState({ hasError: false })}>{IC.clock} ลองอีกครั้ง</button>
                <button className="btn pri" onClick={() => window.location.reload()}>รีเฟรชหน้า</button>
              </div>
            </div>
          </div>
        );
      }
      return this.props.children;
    }
  }
  window.ErrorBoundary = ErrorBoundary;

  // ---- PageLoader: subtle skeleton shimmer ----
  window.PageLoader = function PageLoader() {
    return (
      <div className="page wide" aria-busy="true">
        <div className="sk sk-eyebrow" />
        <div className="sk sk-title" />
        <div className="sk sk-sub" />
        <div className="sk-cards">
          <div className="sk-card"><div className="sk sk-line w60" /><div className="sk sk-line w90" /><div className="sk sk-bar" /></div>
          <div className="sk-card"><div className="sk sk-line w40" /><div className="sk sk-line w80" /><div className="sk sk-bar" /></div>
          <div className="sk-card"><div className="sk sk-line w50" /><div className="sk sk-line w70" /><div className="sk sk-bar" /></div>
        </div>
      </div>
    );
  };

  // ---- ScreenHost: shows loader for >=150ms on screen change, wraps in ErrorBoundary ----
  window.ScreenHost = function ScreenHost({ screenKey, children }) {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
      setLoading(true);
      const t = setTimeout(() => setLoading(false), 150);
      return () => clearTimeout(t);
    }, [screenKey]);
    return (
      <window.ErrorBoundary resetKey={screenKey}>
        {loading ? <window.PageLoader /> : children}
      </window.ErrorBoundary>
    );
  };
})();