/* Task 9 — Settings */
const { useState: useStateSet } = React;

function SettingRow({ title, sub, children }) {
  return React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, padding: "16px 0", borderBottom: "1px solid var(--co-border)" } },
    React.createElement("div", { style: { maxWidth: 460 } },
      React.createElement("div", { style: { fontSize: 13.5, fontWeight: 600 } }, title),
      sub && React.createElement("div", { style: { fontSize: 12.5, color: "var(--co-text-3)", marginTop: 3 } }, sub)),
    React.createElement("div", { style: { flexShrink: 0 } }, children));
}

function SettingsCard({ title, sub, children }) {
  return React.createElement("div", { className: "co-card", style: { marginBottom: 16 } },
    React.createElement("div", { className: "co-card-head", style: { display: "block" } },
      React.createElement("div", { className: "co-card-title" }, title),
      sub && React.createElement("div", { style: { fontSize: 12, color: "var(--co-text-3)", marginTop: 3, fontWeight: 400 } }, sub)),
    React.createElement("div", { style: { padding: "4px 20px 12px" } }, children));
}

function Settings({ role }) {
  const isAdmin = window.CardOps.can(role, "manage_users");
  const canEdit = window.CardOps.can(role, "edit_settings");
  const [makerChecker, setMakerChecker] = useStateSet(false);
  const [grace, setGrace] = useStateSet(14);
  const [reminders, setReminders] = useStateSet({ 30: true, 14: true, 7: true, 1: false });
  const [slack, setSlack] = useStateSet("#card-ops-alerts");
  const [emails, setEmails] = useStateSet("ops@thorwallet.org, finance@thorwallet.org");

  const lockedTip = (el, perm) => window.CardOps.can(role, perm) ? el : React.createElement(window.Tip, { label: window.CardOps.permReason(perm) }, el);

  return React.createElement("div", { className: "co-page", style: { maxWidth: 880 } },
    React.createElement("div", { className: "co-page-head" },
      React.createElement("div", null,
        React.createElement("h1", { className: "co-page-title" }, "Settings"),
        React.createElement("p", { className: "co-page-sub" }, "Team, renewals, and activation controls"))),

    !canEdit && React.createElement("div", { className: "co-banner amber" },
      React.createElement(window.Icon, { name: "lock" }),
      React.createElement("div", null, "You are signed in as ", React.createElement("b", null, window.CardOps.ROLES[role].label), ". Settings are read-only for your role.")),

    // Users & roles
    React.createElement(SettingsCard, { title: "Users & roles", sub: isAdmin ? "Manage who can access Card Ops and what they can do." : "Admin only — visible to you in read-only mode." },
      React.createElement("div", { className: "co-table-wrap", style: { border: "none" } },
        React.createElement("table", { className: "co-table", style: { minWidth: 0 } },
          React.createElement("thead", null, React.createElement("tr", null,
            ["User", "Email", "Role", "Last active", ""].map((h) => React.createElement("th", { key: h, className: "no-sort" }, h)))),
          React.createElement("tbody", null,
            window.CardOps.USERS.map((u) => React.createElement("tr", { key: u.id, style: { cursor: "default" } },
              React.createElement("td", null, React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
                React.createElement(window.Avatar, { initials: u.initials, role: u.role, size: 30 }),
                React.createElement("span", { className: "co-cell-strong" }, u.name))),
              React.createElement("td", { className: "co-cell-muted" }, u.email),
              React.createElement("td", null, React.createElement(window.RoleBadge, { role: u.role })),
              React.createElement("td", { className: "co-cell-muted" }, u.last),
              React.createElement("td", { style: { textAlign: "right" } },
                lockedTip(React.createElement("button", { className: "co-btn co-btn-ghost co-btn-sm", disabled: !isAdmin }, "Edit"), "manage_users"))))))),
      React.createElement("div", { style: { paddingTop: 12 } },
        lockedTip(React.createElement(window.Button, { variant: "secondary", size: "sm", icon: "plus", disabled: !isAdmin }, "Invite user"), "manage_users"))),

    // Renewal config
    React.createElement(SettingsCard, { title: "Renewals", sub: "Yearly fee enforcement and reminder cadence." },
      React.createElement(SettingRow, { title: "Grace window", sub: "Days after expiry before a card is auto-blocked." },
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
          React.createElement("input", { type: "range", min: 0, max: 30, value: grace, disabled: !canEdit, onChange: (e) => setGrace(+e.target.value), style: { accentColor: "var(--co-primary)", width: 160 } }),
          React.createElement("span", { className: "co-pill blue", style: { minWidth: 56, justifyContent: "center" } }, grace, " days"))),
      React.createElement(SettingRow, { title: "Reminder schedule", sub: "Send renewal reminders this many days before expiry." },
        React.createElement("div", { style: { display: "flex", gap: 8 } },
          [30, 14, 7, 1].map((d) => React.createElement("button", {
            key: d, disabled: !canEdit,
            className: "co-toggle-chip" + (reminders[d] ? " on" : ""),
            style: reminders[d] ? { color: "var(--co-primary)", borderColor: "var(--co-primary)", background: "var(--co-primary-tint)" } : null,
            onClick: () => setReminders({ ...reminders, [d]: !reminders[d] }),
          }, d, "d"))))),

    // Maker-checker
    React.createElement(SettingsCard, { title: "Activation controls", sub: "Extra safeguards on the highest-risk action." },
      React.createElement(SettingRow, { title: "Maker-checker on activation", sub: "Require a second ops user to approve each activation before it goes live. Off by default." },
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
          React.createElement("span", { style: { fontSize: 12.5, color: "var(--co-text-3)", fontWeight: 600 } }, makerChecker ? "On" : "Off"),
          lockedTip(React.createElement(window.Switch, { on: makerChecker, onChange: canEdit ? setMakerChecker : () => {} }), "edit_settings")))));
}

window.Settings = Settings;