function Settings({ snapshot }) {
  const roles = Object.keys(snapshot.permissions || {});

  const handleReset = () => {
    const confirmed = window.confirm(
      "Reset all data to demo defaults? This will erase all local changes and cannot be undone."
    );
    if (!confirmed) return;
    window.ConstructProData.resetToDemoSeed();
  };

  return (
    <div className="fade-in">
      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[.8fr_1.2fr]">
        <Card>
          <SectionTitle title="Tenant" subtitle={`${snapshot.tenant.name} · ${snapshot.project.location}`} />
          <div className="space-y-3 text-sm">
            <div className="flex justify-between gap-3"><span className="text-text-muted">Workspace</span><b>{snapshot.tenant.name}</b></div>
            <div className="flex justify-between gap-3"><span className="text-text-muted">Project</span><b>{snapshot.project.name}</b></div>
            <div className="flex justify-between gap-3"><span className="text-text-muted">Projects</span><b>{snapshot.projects.length}</b></div>
            <div className="flex justify-between gap-3"><span className="text-text-muted">Default alert timer</span><b>{snapshot.tenant.defaultAlertDurationSec}s</b></div>
            <div className="flex justify-between gap-3"><span className="text-text-muted">Submission requirements</span><b>{(snapshot.tenant.evidenceRequirements || []).join(" + ") || "None"}</b></div>
          </div>
        </Card>
        <Card>
          <SectionTitle title="Role Access" subtitle="Field alert routing and approval control." />
          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
            {roles.map((role) => (
              <div key={role} className="rounded-xl border border-border-light p-4">
                <div className="flex items-center justify-between gap-3">
                  <span className="font-bold">{role}</span>
                  <Badge tone={role === "Admin" || role === "Project Manager" ? "orange" : "neutral"}>{role === "Admin" || role === "Project Manager" ? "Approver" : "Responder"}</Badge>
                </div>
                <p className="mt-2 text-xs text-text-muted">{(snapshot.permissions[role] || []).slice(0, 3).join(", ")}</p>
              </div>
            ))}
          </div>
          <Button className="mt-4" onClick={() => window.ConstructProData.showToast("Settings saved.")}>Save Preferences</Button>
        </Card>
      </div>
      <Card className="mt-6">
        <SectionTitle title="Demo data" subtitle="Restore the initial walkthrough project and sample data." />
        <p className="text-sm text-text-muted">
          All changes are stored in this browser only. Use reset to start fresh with the demo Greenview project.
        </p>
        <Button variant="secondary" className="mt-4 border-danger/30 text-danger hover:bg-danger/5" onClick={handleReset}>
          Reset to demo defaults
        </Button>
      </Card>
    </div>
  );
}

Object.assign(window, { Settings });