import { AppShell } from "@/components/AppShell";

export default function SettingsPage() {
  return (
    <AppShell
      title="Settings"
      description="Auth/session controls, integration defaults, and workspace-level product preferences."
      actions={<div className="badge">Auth fallback active</div>}
    >
      <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--ml-space-4)" }}>
        <article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
          <strong>Authentication</strong>
          <div style={{ color: "var(--ml-text-secondary)" }}>
            Initial shell uses a demo session fallback until platform auth contracts are finalized.
          </div>
        </article>
        <article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
          <strong>Telemetry & diagnostics</strong>
          <div style={{ color: "var(--ml-text-secondary)" }}>
            Both clients are initialized on app boot with best-effort defaults and no hard dependency on backend readiness.
          </div>
        </article>
        <article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
          <strong>Deferred configuration</strong>
          <div style={{ color: "var(--ml-text-secondary)" }}>
            Feature flags, blob upload policies, saved views, and extraction preferences remain follow-up work.
          </div>
        </article>
      </section>
    </AppShell>
  );
}
