// Settings screen — workspace configuration with subTab routing
window.SettingsScreen = function SettingsScreen({ t, lang, setLang, theme, setTheme, subTab }) {
  const Icons = window.Icons;
  const sub = subTab || "general";

  return (
    <div className="page">
      <window.PageHeader title={t("settings_title")} subtitle={t("settings_sub")} />

      {sub === "general" && (
        <>
          <div className="card">
            <div className="card-header"><h3>Workspace</h3></div>
            <div style={{ padding: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <label className="field">Workspace name<input className="input" defaultValue="Vildez" /></label>
              <label className="field">Subdomain<input className="input" defaultValue="vildez.vildez.io" /></label>
              <label className="field">Default currency<input className="input" defaultValue="EUR (€)" /></label>
              <label className="field">Time zone<input className="input" defaultValue="Europe/Madrid" /></label>
            </div>
            <div style={{ borderTop: "1px solid var(--border)", padding: "12px 20px", display: "flex", justifyContent: "flex-end", gap: 8 }}>
              <window.Btn variant="ghost">Cancel</window.Btn>
              <window.Btn variant="brand">{t("save_changes")}</window.Btn>
            </div>
          </div>

          <div className="card" style={{ marginTop: 16 }}>
            <div className="card-header"><h3>{t("language")}</h3></div>
            <div className="row-list">
              <div className="row">
                <div className="row-main">
                  <div className="row-title">{t("language")}</div>
                  <div className="row-sub">{lang === "es" ? "Idioma de la interfaz para tu cuenta." : "UI language for your account."}</div>
                </div>
                <div className="tab-bar">
                  <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>English</button>
                  <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>Español</button>
                </div>
              </div>
            </div>
          </div>
        </>
      )}

      {sub === "appearance" && (
        <div className="card">
          <div className="card-header"><h3>{t("appearance")}</h3></div>
          <div className="row-list">
            <div className="row">
              <div className="row-main">
                <div className="row-title">{t("theme")}</div>
                <div className="row-sub">{lang === "es" ? "Elige cómo se ve Vildez." : "Choose how Vildez looks for you."}</div>
              </div>
              <div className="tab-bar">
                <button className={theme === "light" ? "active" : ""} onClick={() => setTheme("light")}>
                  <Icons.Sun style={{ width: 12, height: 12, marginRight: 4, verticalAlign: "-2px" }} /> {t("light")}
                </button>
                <button className={theme === "dark" ? "active" : ""} onClick={() => setTheme("dark")}>
                  <Icons.Moon style={{ width: 12, height: 12, marginRight: 4, verticalAlign: "-2px" }} /> {t("dark")}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {sub === "billing" && (
        <>
          <div className="card">
            <div className="card-header"><h3>{lang === "es" ? "Plan actual" : "Current plan"}</h3></div>
            <div style={{ padding: 20, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
              <div>
                <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 4 }}>Vildez Pro</div>
                <div style={{ fontSize: 13, color: "var(--text-muted)" }}>{lang === "es" ? "€29/mes — renueva el 18 may 2026" : "€29/mo — renews May 18, 2026"}</div>
              </div>
              <window.Btn variant="ghost">{lang === "es" ? "Cambiar plan" : "Change plan"}</window.Btn>
            </div>
          </div>
          <div className="card" style={{ marginTop: 16 }}>
            <div className="card-header"><h3>{lang === "es" ? "Método de pago" : "Payment method"}</h3></div>
            <div style={{ padding: 20, display: "flex", gap: 14, alignItems: "center" }}>
              <div style={{ width: 44, height: 30, borderRadius: 4, background: "var(--bg-sunken)", border: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, fontFamily: "var(--font-mono)" }}>VISA</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 500, fontSize: 13 }}>•••• 4242</div>
                <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{lang === "es" ? "Caduca 11/27" : "Expires 11/27"}</div>
              </div>
              <window.Btn variant="ghost">{lang === "es" ? "Editar" : "Edit"}</window.Btn>
            </div>
          </div>
        </>
      )}

      {sub === "security" && (
        <>
          <div className="card">
            <div className="card-header"><h3>{lang === "es" ? "Autenticación" : "Authentication"}</h3></div>
            <div className="row-list">
              <div className="row">
                <div className="row-main">
                  <div className="row-title">{lang === "es" ? "Verificación en dos pasos" : "Two-factor authentication"}</div>
                  <div className="row-sub">{lang === "es" ? "Añade una capa extra de seguridad a tu cuenta." : "Add an extra layer of security to your account."}</div>
                </div>
                <window.Btn variant="brand">{lang === "es" ? "Activar" : "Enable"}</window.Btn>
              </div>
              <div className="row">
                <div className="row-main">
                  <div className="row-title">{lang === "es" ? "Dispositivos de confianza" : "Trusted devices"}</div>
                  <div className="row-sub">{lang === "es" ? "3 dispositivos autorizados." : "3 authorized devices."}</div>
                </div>
                <window.Btn variant="ghost">{lang === "es" ? "Gestionar" : "Manage"}</window.Btn>
              </div>
            </div>
          </div>
        </>
      )}

      {sub === "advanced" && (
        <div className="card" style={{ borderColor: "var(--border)" }}>
          <div className="card-header"><h3 style={{ color: "var(--danger)" }}>Danger zone</h3></div>
          <div className="row-list">
            <div className="row">
              <div className="row-main">
                <div className="row-title">{lang === "es" ? "Exportar datos del workspace" : "Export workspace data"}</div>
                <div className="row-sub">{lang === "es" ? "Descarga todas las facturas, clientes y documentos en ZIP." : "Download all invoices, clients and documents as a ZIP."}</div>
              </div>
              <window.Btn variant="ghost" icon={Icons.Download}>Export</window.Btn>
            </div>
            <div className="row">
              <div className="row-main">
                <div className="row-title">{lang === "es" ? "Eliminar workspace" : "Delete workspace"}</div>
                <div className="row-sub">{lang === "es" ? "Esta acción es permanente. Se borrarán todos los datos." : "This action is permanent. All data will be erased."}</div>
              </div>
              <window.Btn variant="ghost" icon={Icons.Trash} style={{ color: "var(--danger)" }}>Delete</window.Btn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { SettingsScreen: window.SettingsScreen });