/* App シェル：サイドバー・トップバー・ルーティング・ログイン */
const { useState, useEffect } = React;

const NAV_ITEMS = [
  { key: "home", label: "ホーム", sub: "レコメンド", icon: "home", code: "S2" },
  { key: "search", label: "学生検索", icon: "search", code: "S3" },
  { key: "jobpost", label: "求人管理", icon: "job", code: "S10" },
  { key: "messages", label: "メッセージ", icon: "chat", code: "S5", badge: 2 },
  { key: "calendar", label: "実習カレンダー", icon: "calendar", code: "S6" },
  { key: "pipeline", label: "パイプライン", icon: "pipeline", code: "S7" },
  { key: "dashboard", label: "ダッシュボード", icon: "dash", code: "S9" },
];
const NAV_FOOT = [{ key: "profile", label: "病院プロフィール", icon: "profile", code: "S8" }];

const ROUTE_TITLE = {
  home: "ホーム", search: "学生検索", detail: "学生詳細", messages: "メッセージ",
  calendar: "病院実習カレンダー", pipeline: "実習・サポートパイプライン",
  dashboard: "ダッシュボード", profile: "病院プロフィール設定", jobpost: "求人管理",
};

function Placeholder({ name }) {
  return <div style={{ padding: 60, textAlign: "center", color: "var(--ink-3)" }}>{name} は準備中です</div>;
}

function Sidebar({ route, go, open, onClose }) {
  const Icons = window.SV_Icons;
  const { HOSPITAL } = window.SV_DATA;
  const Item = ({ it }) => {
    const active = route === it.key || (it.key === "home" && route === "detail");
    const Icon = Icons[it.icon];
    const [h, setH] = useState(false);
    return (
      <button onClick={() => { go(it.key); onClose && onClose(); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{
          display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left",
          padding: "10px 13px", borderRadius: 11, position: "relative",
          color: active ? "var(--brand-800)" : "var(--ink-2)",
          background: active ? "var(--brand-50)" : h ? "var(--surface-3)" : "transparent",
          fontWeight: active ? 700 : 500, fontSize: 14, transition: "background .15s,color .15s",
        }}>
        <span style={{ color: active ? "var(--brand-600)" : "var(--ink-3)", display: "flex" }}><Icon size={20} /></span>
        <span style={{ flex: 1 }}>{it.label}</span>
        {it.badge && <span className="num" style={{ background: "var(--new)", color: "#fff", fontSize: 11, fontWeight: 700, borderRadius: 999, minWidth: 18, height: 18, display: "grid", placeItems: "center", padding: "0 5px" }}>{it.badge}</span>}
        {active && <span style={{ position: "absolute", left: -16, top: "50%", transform: "translateY(-50%)", width: 4, height: 22, borderRadius: 4, background: "var(--brand-500)" }} />}
      </button>
    );
  };
  return (
    <>
      {/* backdrop */}
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(18,40,45,.38)", backdropFilter: "blur(2px)", zIndex: 40, opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity .22s" }} />
    <aside style={{ width: "var(--sidebar-w)", background: "var(--surface)", borderRight: "1px solid var(--border)", display: "flex", flexDirection: "column", height: "100vh", position: "fixed", left: 0, top: 0, zIndex: 50, transform: open ? "none" : "translateX(-100%)", transition: "transform .26s cubic-bezier(.2,.7,.3,1)", boxShadow: open ? "var(--shadow-lg)" : "none" }}>
      <div style={{ padding: "18px 16px 16px", display: "flex", alignItems: "center", gap: 11 }}>
        <img src="assets/solact-mark.png" alt="SOLACT" style={{ width: 38, height: 38, objectFit: "contain" }} />
        <div style={{ flex: 1 }}>
          <div className="disp" style={{ fontSize: 18, fontWeight: 800, color: "var(--brand-800)", letterSpacing: ".02em", lineHeight: 1 }}>SolaVet</div>
          <div style={{ fontSize: 10.5, color: "var(--ink-3)", marginTop: 3, letterSpacing: ".04em" }}>動物病院・企業様向け</div>
        </div>
        <button onClick={onClose} aria-label="メニューを閉じる" style={{ width: 34, height: 34, borderRadius: 9, display: "grid", placeItems: "center", color: "var(--ink-3)", background: "var(--surface-3)" }}><Icons.x size={18} /></button>
      </div>

      {/* 病院スイッチャ */}
      <div style={{ margin: "0 16px 8px", padding: "11px 13px", borderRadius: 12, background: "var(--surface-3)", border: "1px solid var(--border)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <span style={{ width: 30, height: 30, borderRadius: 8, background: "var(--brand-100)", color: "var(--brand-700)", display: "grid", placeItems: "center" }}><window.SV_Icons.paw size={17} /></span>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{HOSPITAL.nameHonorific}</div>
            <div style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{HOSPITAL.unit}</div>
          </div>
        </div>
        <div style={{ marginTop: 9, display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, fontWeight: 700, color: "var(--brand-700)", background: "var(--brand-50)", border: "1px solid var(--brand-100)", borderRadius: 999, padding: "3px 10px" }}>
          <window.SV_Icons.sparkle size={12} /> {HOSPITAL.plan}プラン
        </div>
      </div>

      <nav style={{ padding: "8px 16px", display: "flex", flexDirection: "column", gap: 3, flex: 1 }}>
        {NAV_ITEMS.map((it) => <Item key={it.key} it={it} />)}
        <div style={{ marginTop: "auto", paddingTop: 10, borderTop: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 3 }}>
          {NAV_FOOT.map((it) => <Item key={it.key} it={it} />)}
        </div>
      </nav>
    </aside>
    </>
  );
}

function Topbar({ route, go, onLogout, onMenu }) {
  const Icons = window.SV_Icons;
  const { HOSPITAL } = window.SV_DATA;
  const code = NAV_ITEMS.concat(NAV_FOOT).find((i) => i.key === route)?.code || (route === "detail" ? "S4" : "");
  return (
    <header style={{ height: 64, flexShrink: 0, background: "rgba(255,255,255,.85)", backdropFilter: "blur(8px)", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 16, padding: "0 28px", position: "sticky", top: 0, zIndex: 30 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <button onClick={onMenu} aria-label="メニュー" style={{ width: 40, height: 40, borderRadius: 10, display: "grid", placeItems: "center", color: "var(--ink)", background: "var(--surface-3)" }}><Icons.menu size={20} /></button>
        <img src="assets/solact-mark.png" alt="" style={{ width: 30, height: 30, objectFit: "contain" }} />
        {route === "detail" && (
          <button onClick={() => go("home")} style={{ display: "flex", alignItems: "center", gap: 5, color: "var(--ink-2)", fontSize: 13, fontWeight: 600, padding: "6px 10px", borderRadius: 8, background: "var(--surface-3)" }}><Icons.arrowLeft size={16} />戻る</button>
        )}
        <h1 className="disp" style={{ fontSize: 17, fontWeight: 700, whiteSpace: "nowrap" }}>{ROUTE_TITLE[route]}</h1>
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ display: "flex", alignItems: "center", gap: 9, background: "var(--surface-3)", borderRadius: 10, padding: "8px 13px", width: 240, color: "var(--ink-3)", cursor: "text" }} onClick={() => go("search")}>
        <Icons.search size={17} />
        <span style={{ fontSize: 13 }}>学生を検索…</span>
      </div>
      <button onClick={() => go("messages")} style={{ position: "relative", width: 40, height: 40, borderRadius: 10, display: "grid", placeItems: "center", color: "var(--ink-2)", background: "var(--surface-3)" }}>
        <Icons.bell size={19} />
        <span style={{ position: "absolute", top: 7, right: 8, width: 8, height: 8, borderRadius: "50%", background: "var(--new)", boxShadow: "0 0 0 2px #fff" }} />
      </button>
      <div style={{ display: "flex", alignItems: "center", gap: 9, paddingLeft: 6 }}>
        <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--brand-100)", color: "var(--brand-700)", display: "grid", placeItems: "center" }}><Icons.paw size={18} /></div>
        <div style={{ lineHeight: 1.3 }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, whiteSpace: "nowrap" }}>{HOSPITAL.name}</div>
          <button onClick={onLogout} style={{ fontSize: 11, color: "var(--ink-3)" }}>ログアウト</button>
        </div>
      </div>
    </header>
  );
}

/* S1 ログイン */
function Login({ onLogin }) {
  const Icons = window.SV_Icons;
  const { Button } = window.SV_UI;
  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", overflowY: "auto", padding: "48px 32px", boxSizing: "border-box", background: "var(--bg)" }}>
      <div style={{ width: "min(100%,400px)", margin: "auto", textAlign: "center", animation: "fadeUp .5s both" }}>
        <img src="assets/solact-mark.png" alt="" style={{ width: 60, height: 60, objectFit: "contain" }} />
        <div className="disp" style={{ fontSize: 27, fontWeight: 800, color: "var(--brand-800)", marginTop: 14, letterSpacing: ".02em" }}>SolaVet</div>
        <p style={{ fontSize: 13.5, color: "var(--ink-2)", marginTop: 7, lineHeight: 1.6 }}>動物病院・企業様向け 管理画面にログイン</p>

        <div style={{ marginTop: 28, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-xl)", boxShadow: "var(--shadow-md)", padding: 28, textAlign: "left", display: "flex", flexDirection: "column", gap: 14 }}>
          <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)" }}>メールアドレス
            <input defaultValue="recruit@haru-vet.jp" style={inp} />
          </label>
          <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)" }}>パスワード
            <input type="password" defaultValue="········" style={inp} />
          </label>
          <Button variant="primary" size="lg" full onClick={onLogin} iconRight={Icons.arrowRight} style={{ marginTop: 6 }}>ログイン</Button>
        </div>
        <p style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 16, lineHeight: 1.7, maxWidth: 340, marginInline: "auto" }}>1アカウント＝1病院。新着はLINEで通知し、内容の確認・やり取りはこの管理画面で行います。</p>
      </div>
    </div>
  );
}
const inp = { display: "block", width: "100%", marginTop: 6, padding: "11px 13px", borderRadius: 10, border: "1px solid var(--border-strong)", fontSize: 14, color: "var(--ink)", fontWeight: 500, background: "var(--surface)" };

function App() {
  const [authed, setAuthed] = useState(false);
  const [route, setRoute] = useState("home");
  const [param, setParam] = useState(null);
  const [scoutId, setScoutId] = useState(null);
  const [menuOpen, setMenuOpen] = useState(false);

  const go = (r, p = null) => { setRoute(r); setParam(p); window.scrollTo(0, 0); const m = document.getElementById("sv-main"); if (m) m.scrollTop = 0; };
  const nav = { go, route, param };
  const onScout = (id) => setScoutId(id);

  if (!authed) return <Login onLogin={() => setAuthed(true)} />;

  const screens = {
    home: () => <window.SV_Home nav={nav} onScout={onScout} />,
    detail: () => (window.SV_Detail ? <window.SV_Detail nav={nav} id={param} onScout={onScout} /> : <Placeholder name="学生詳細(S4)" />),
    messages: () => (window.SV_Chat ? <window.SV_Chat nav={nav} id={param} /> : <Placeholder name="メッセージ(S5)" />),
    calendar: () => (window.SV_Calendar ? <window.SV_Calendar nav={nav} /> : <Placeholder name="実習カレンダー(S6)" />),
    pipeline: () => (window.SV_Pipeline ? <window.SV_Pipeline nav={nav} /> : <Placeholder name="パイプライン(S7)" />),
    dashboard: () => (window.SV_Dashboard ? <window.SV_Dashboard nav={nav} /> : <Placeholder name="ダッシュボード(S9)" />),
    profile: () => (window.SV_Profile ? <window.SV_Profile nav={nav} /> : <Placeholder name="病院プロフィール(S8)" />),
    search: () => (window.SV_Search ? <window.SV_Search nav={nav} onScout={onScout} /> : <Placeholder name="学生検索(S3)" />),
    jobpost: () => (window.SV_JobPost ? <window.SV_JobPost nav={nav} /> : <Placeholder name="求人作成(S10)" />),
  };

  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <Sidebar route={route} go={go} open={menuOpen} onClose={() => setMenuOpen(false)} />
      <Topbar route={route} go={go} onLogout={() => setAuthed(false)} onMenu={() => setMenuOpen(true)} />
      <main id="sv-main" style={{ flex: 1, overflow: "auto", padding: route === "messages" ? 0 : "30px 32px 60px" }}>
        {(screens[route] || screens.home)()}
      </main>
      {window.SV_ScoutModal && <window.SV_ScoutModal id={scoutId} onClose={() => setScoutId(null)} nav={nav} />}
    </div>
  );
}

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