// Réglages — écran mobile : menu → sous-sections (mêmes sections partagées
// que le web : ui_kits/shared/SettingsSections.jsx + CompanySettings embarqué).
// window.OryzeApp.SettingsScreen
(function () {
  const { IconButton, Tag } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  const SECTIONS = [
    { key: "entreprise", label: "Entreprise", sub: "SIREN, courriel BT-34, TVA, séries", icon: "building" },
    { key: "equipe", label: "Équipe", sub: "Membres et invitations", icon: "users" },
    { key: "securite", label: "Sécurité", sub: "2FA, mot de passe, appareils", icon: "shield" },
    { key: "abonnement", label: "Abonnement", sub: "Plan démo — tarification non définie", icon: "card" },
    { key: "support", label: "Support", sub: "Contact et signalements", icon: "mail" },
  ];

  function SettingsScreen({ go }) {
    const [mode, setMode] = React.useState("menu");
    const S = window.OryzeShared;
    const active = SECTIONS.find((s) => s.key === mode);

    if (mode !== "menu") {
      return (
        <div style={{ padding: "14px 16px 26px", display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <IconButton size="sm" variant="ghost" label="Retour" icon={<Ic.chevronLeft size={20} />} onClick={() => setMode("menu")} />
            <div style={{ fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em", flex: 1 }}>{active.label}</div>
          </div>
          {mode === "entreprise" ? React.createElement(S.CompanySettings, { embedded: true, compact: true })
            : mode === "equipe" ? <S.TeamSection compact />
            : mode === "securite" ? <S.SecuritySection compact />
            : mode === "abonnement" ? <S.SubscriptionSection />
            : <S.SupportSection />}
        </div>
      );
    }

    return (
      <div style={{ padding: "14px 16px 26px", display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <IconButton size="sm" variant="ghost" label="Retour" icon={<Ic.chevronLeft size={20} />} onClick={() => go && go("dashboard")} />
          <div style={{ fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em", flex: 1 }}>Réglages</div>
        </div>

        <div style={{ border: "var(--border-thin) solid var(--line-keyline)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--surface-card)" }}>
          {SECTIONS.map((s, i) => {
            const Ico = Ic[s.icon] || Ic.settings;
            return (
              <div key={s.key} onClick={() => setMode(s.key)}
                style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 14px", borderBottom: i === SECTIONS.length - 1 ? "none" : "1px solid var(--line-divider)", cursor: "pointer" }}>
                <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--surface-sunken)", border: "var(--border-hair) solid var(--line-divider)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none", color: "var(--text-body)" }}>
                  <Ico size={16} />
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{s.label}</div>
                  <div style={{ fontSize: 11.5, color: "var(--text-subtle)", marginTop: 1 }}>{s.sub}</div>
                </div>
                <Ic.chevronRight size={16} style={{ color: "var(--text-subtle)", flex: "none" }} />
              </div>
            );
          })}
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "12px 14px", border: "var(--border-thin) solid var(--line-keyline)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)" }}>
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Marie Lefèvre</div>
            <div style={{ fontSize: 11.5, color: "var(--text-subtle)", marginTop: 1 }}>Atelier Lefèvre · Titulaire</div>
          </div>
          <a href="../onboarding/index.html" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 600, color: "var(--fin-negative)", textDecoration: "none" }}>
            <Ic.logout size={15} /> Se déconnecter
          </a>
        </div>
        <div style={{ fontSize: 11.5, color: "var(--text-subtle)", textAlign: "center" }}>Mode démo — version 0.4 (fictive)</div>
      </div>
    );
  }

  window.OryzeApp = window.OryzeApp || {};
  window.OryzeApp.SettingsScreen = SettingsScreen;
})();