// 橋本商会ポータル — Single variant (B: HASHIMOTO ブランド忠実)
const { useState: aState, useEffect: aEffect, useRef: aRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "font": "noto"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = aState({ name: "home" });
  const [toast, setToast] = aState({ show: false, msg: "" });
  const [lastSubmit, setLastSubmit] = aState({ key: null, fields: null });
  const currentUser = "三浦";

  // モバイル端末・PWA standalone モードでは iOS フレームを外して全画面表示する
  const [fullscreen, setFullscreen] = aState(() => {
    if (typeof window === "undefined") return false;
    const isStandalone =
      window.matchMedia?.("(display-mode: standalone)").matches ||
      window.navigator.standalone === true;
    const isMobile = window.matchMedia?.("(max-width: 540px)").matches;
    return isStandalone || isMobile;
  });
  aEffect(() => {
    const mq = window.matchMedia?.("(max-width: 540px)");
    const mqStandalone = window.matchMedia?.("(display-mode: standalone)");
    const update = () => {
      const isStandalone =
        mqStandalone?.matches || window.navigator.standalone === true;
      setFullscreen(isStandalone || (mq?.matches ?? false));
    };
    mq?.addEventListener?.("change", update);
    mqStandalone?.addEventListener?.("change", update);
    return () => {
      mq?.removeEventListener?.("change", update);
      mqStandalone?.removeEventListener?.("change", update);
    };
  }, []);

  aEffect(() => {
    document.documentElement.dataset.density = tweaks.density;
    document.documentElement.dataset.font = tweaks.font;
  }, [tweaks]);

  const showToast = (msg) => {
    setToast({ show: true, msg });
    setTimeout(() => setToast({ show: false, msg }), 1800);
  };

  const nav = (name, payload) => {
    if (name === "detail") setRoute({ name, caseKey: payload });
    else setRoute({ name });
  };

  const onSubmit = (fields) => {
    const key = `20260524-${String(Math.floor(Math.random() * 90) + 10).padStart(3, "0")}`;
    setLastSubmit({ key, fields });
    setRoute({ name: "complete" });
  };

  const onOpenCase = (key) => setRoute({ name: "detail", caseKey: key });

  const variant = "brand";

  let screen;
  if (route.name === "home") {
    screen = <HomeScreen onNav={nav} onOpenCase={onOpenCase} currentUser={currentUser} variant={variant} />;
  } else if (route.name === "intake") {
    screen = <IntakeScreen onNav={nav} onSubmit={onSubmit} variant={variant} />;
  } else if (route.name === "complete") {
    screen = <CompleteScreen caseKey={lastSubmit.key} fields={lastSubmit.fields} onNav={nav} onShowToast={showToast} onOpenCase={onOpenCase} variant={variant} />;
  } else if (route.name === "detail") {
    screen = <CaseDetailScreen caseKey={route.caseKey} onNav={nav} onShowToast={showToast} variant={variant} />;
  } else if (route.name === "list") {
    screen = <CaseListScreen onNav={nav} onOpenCase={onOpenCase} variant={variant} />;
  } else if (route.name === "notif") {
    screen = <NotifPlaceholder onNav={nav} variant={variant} />;
  } else if (route.name === "me") {
    screen = <MePlaceholder onNav={nav} currentUser={currentUser} variant={variant} />;
  } else {
    screen = <HomeScreen onNav={nav} onOpenCase={onOpenCase} currentUser={currentUser} variant={variant} />;
  }

  return (
    <div className={fullscreen ? "stage stage-fullscreen" : "stage"} data-variant={variant}>
      {fullscreen ? (
        <div className="fullscreen-shell">
          {screen}
          <Toast show={toast.show}>{toast.msg}</Toast>
        </div>
      ) : (
        <IOSDevice width={402} height={874}>
          <div style={{ position: "absolute", inset: 0, paddingTop: 50 }}>
            {screen}
            <Toast show={toast.show}>{toast.msg}</Toast>
          </div>
        </IOSDevice>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="密度">
          <TweakRadio
            label=""
            value={tweaks.density}
            options={[{ value: "comfortable", label: "標準" }, { value: "compact", label: "コンパクト" }]}
            onChange={v => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection label="日本語フォント">
          <TweakSelect
            label=""
            value={tweaks.font}
            options={[
              { value: "noto", label: "Noto Sans JP" },
              { value: "biz", label: "BIZ UDPGothic" },
              { value: "zen", label: "Zen Kaku Gothic New" },
            ]}
            onChange={v => setTweak("font", v)}
          />
        </TweakSection>
        <TweakSection label="画面へジャンプ">
          <TweakButton label="ホーム" onClick={() => nav("home")} />
          <TweakButton label="新規受付フォーム" onClick={() => nav("intake")} />
          <TweakButton label="案件一覧" onClick={() => nav("list")} />
          <TweakButton label="案件詳細 (サンプル)" onClick={() => nav("detail", "20260524-002")} />
          <TweakButton label="通知" onClick={() => nav("notif")} secondary />
          <TweakButton label="自分" onClick={() => nav("me")} secondary />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function NotifPlaceholder({ onNav, variant }) {
  return (
    <div className="screen">
      <AppBar variant={variant} title="通知" big left={<button className="appbar icon-btn" onClick={() => onNav("home")}><Ico.back /></button>} />
      <div className="screen-scroll">
        <div className="section">
          <div className="section-head"><h2>未読</h2></div>
          <div className="col gap-8">
            {RECENT_NOTIFS.map((n, i) => (
              <div key={i} className="notif">
                <div className="ico-wrap">{n.kind === "chat" ? <Ico.chat /> : <Ico.cal />}</div>
                <div style={{ flex: 1 }}>
                  <div className="label">{n.text}</div>
                  <div className="meta"><span className="mono" style={{ fontSize: 10 }}>{n.caseKey}</span> · {n.time}</div>
                </div>
                <Ico.chevR style={{ color: "var(--text-4)" }} />
              </div>
            ))}
          </div>
        </div>
        <div className="section">
          <div className="section-head"><h2>既読</h2></div>
          <div className="card" style={{ background: "var(--surface-2)", borderStyle: "dashed", textAlign: "center", padding: 18 }}>
            <div className="muted text-sm">既読の通知はありません</div>
          </div>
        </div>
      </div>
      <TabBar active="notif" onNav={onNav} />
    </div>
  );
}

function MePlaceholder({ onNav, currentUser, variant }) {
  return (
    <div className="screen">
      <AppBar variant={variant} title="自分" big left={<button className="appbar icon-btn" onClick={() => onNav("home")}><Ico.back /></button>} />
      <div className="screen-scroll">
        <div className="section">
          <div className="card" style={{ display: "flex", alignItems: "center", gap: 12, padding: 16 }}>
            <div style={{ width: 56, height: 56, borderRadius: 999, background: "var(--primary-soft)", color: "var(--primary)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 20 }}>
              {currentUser.slice(0, 1)}
            </div>
            <div style={{ flex: 1 }}>
              <div className="bold">{currentUser} さん</div>
              <div className="text-sm muted">整備セクション · 京都拠点</div>
            </div>
            <Ico.edit style={{ color: "var(--text-3)" }} />
          </div>
        </div>
        <div className="section">
          <div className="list">
            {["通知設定", "拠点切替", "スペース振り分けルール", "音声入力の設定", "PWA としてホーム画面に追加"].map(s => (
              <button key={s} className="list-row">
                <div className="grow"><div className="title">{s}</div></div>
                <Ico.chevR style={{ color: "var(--text-4)" }} />
              </button>
            ))}
          </div>
        </div>
      </div>
      <TabBar active="me" onNav={onNav} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);