// ====== Settings page (minimal) ======

const Toggle = ({ on, onClick }) => (
  <div className={`toggle ${on ? "on" : ""}`} onClick={onClick} role="switch" aria-checked={on} />
);

const SETTINGS_SECTIONS = [
  { id: "profile",       label: "Shop Profile",     icon: "store" },
  { id: "hours",         label: "Business Hours",   icon: "clock" },
  { id: "orders",        label: "Orders & Service", icon: "orders" },
  { id: "dateRanges",    label: "Date Ranges",      icon: "calendar" },
  { id: "payments",      label: "Payments",         icon: "money" },
  { id: "notifications", label: "Notifications",    icon: "bell" },
  { id: "appearance",    label: "Appearance",       icon: "image" },
  { id: "security",      label: "Security",         icon: "lock" },
];

const ACCENTS = [
  { v: "#c8a25c", name: "Antique Gold" },
  { v: "#5c9b7b", name: "Imperial Jade" },
  { v: "#b35a4a", name: "Ceremonial Rouge" },
  { v: "#b87349", name: "Copper" },
];

const DAYS = [
  { d: "Monday",    open: "08:00", close: "20:00", on: true },
  { d: "Tuesday",   open: "08:00", close: "20:00", on: true },
  { d: "Wednesday", open: "08:00", close: "20:00", on: true },
  { d: "Thursday",  open: "08:00", close: "21:00", on: true },
  { d: "Friday",    open: "08:00", close: "22:00", on: true },
  { d: "Saturday",  open: "09:00", close: "22:00", on: true },
  { d: "Sunday",    open: "10:00", close: "18:00", on: false },
];

const ORDER_NUMBER_PERIODS = [
  { id: "day", label: "Day", sub: "Reset every calendar day." },
  { id: "week", label: "Week", sub: "Reset at the start of each week." },
  { id: "sales_week", label: "Sale week", sub: "Reset every Sunday for your Sunday-Saturday sale week." },
  { id: "month", label: "Month", sub: "Reset on the first day of each month." },
  { id: "year", label: "Year", sub: "Reset on January 1." },
];

const WEB_PREFERENCES_KEY = "teaGangWebPreferences";
const WEB_PREFERENCES_PLATFORM = "web";

const DEFAULT_WEB_PREFERENCES = {
  shop_name: "The Tea Gang",
  shop_tagline: "drinks & snacks",
  contact_phone: "(415) 555-0192",
  contact_email: "hello@theteagang.co",
  shop_address: "482 Mission St\nSan Francisco, CA 94105",
  business_hours: DAYS,
  shop_timezone: "Pacific Time - Los Angeles",
  order_pickup_enabled: true,
  order_delivery_enabled: true,
  order_dine_in_enabled: false,
  order_auto_accept: true,
  default_prep_minutes: "12",
  sales_tax_percent: "8.625",
  suggested_tips: ["15", "18", "20"],
  payment_methods: {
    card: true,
    cash: true,
    apple_pay: true,
    google_pay: true,
    zelle: false,
  },
  currency: "USD - US Dollar ($)",
  notify_order_added: true,
  notify_low_stock: true,
  notify_daily_summary: true,
  notify_reviews: false,
  notify_payouts: true,
  delivery_channel: "in_app",
  accent: "#c8a25c",
  density: "Comfortable",
  receipt_footer: "Thank you for visiting The Tea Gang - see you again soon.",
  custom_date_ranges_v1: window.TeaGangCustomDateRanges?.defaults || [],
};

const readLocalPreferences = () => {
  try {
    const raw = window.localStorage.getItem(WEB_PREFERENCES_KEY);
    return raw ? JSON.parse(raw) : {};
  } catch (_) {
    return {};
  }
};

const writeLocalPreferences = (prefs) => {
  window.localStorage.setItem(WEB_PREFERENCES_KEY, JSON.stringify(prefs));
};

const mergePreferences = (...sets) => {
  const merged = Object.assign({}, DEFAULT_WEB_PREFERENCES, ...sets);
  merged.business_hours = Array.isArray(merged.business_hours)
    ? merged.business_hours
    : DEFAULT_WEB_PREFERENCES.business_hours;
  merged.payment_methods = {
    ...DEFAULT_WEB_PREFERENCES.payment_methods,
    ...(merged.payment_methods || {}),
  };
  merged.suggested_tips = Array.isArray(merged.suggested_tips)
    ? merged.suggested_tips
    : DEFAULT_WEB_PREFERENCES.suggested_tips;
  merged.custom_date_ranges_v1 =
    window.TeaGangCustomDateRanges?.normalize?.(merged.custom_date_ranges_v1) ||
    window.TeaGangCustomDateRanges?.defaults ||
    [];
  if (!merged.custom_date_ranges_v1.length) {
    merged.custom_date_ranges_v1 = window.TeaGangCustomDateRanges?.defaults || [];
  }
  return merged;
};

// ---- Row primitive ----
const Row = ({ name, sub, children, stack }) => (
  <div className={`set-row ${stack ? "stack" : ""}`}>
    <div className="set-row-text">
      <div className="set-row-name">{name}</div>
      {sub && <div className="set-row-sub">{sub}</div>}
    </div>
    <div className="set-row-control">{children}</div>
  </div>
);

// ============================================================
// Panels
// ============================================================
const ProfilePanel = ({ prefs, updatePref }) => (
  <div>
    <div className="set-panel-head">
      <div className="set-panel-title">Shop Profile</div>
      <div className="set-panel-desc">How your tea house appears on receipts, the storefront, and order confirmations.</div>
    </div>

    <div className="set-block">
      <Row name="Shop logo" sub="Square image, at least 256x256px. Shown on receipts and the customer app.">
        <div className="set-logo">
          <div className="set-logo-mark" style={{ backgroundImage: "url(assets/logo.jpg)" }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <button className="btn btn-ghost"><Ic name="image" size={14} /> Replace</button>
            <span className="set-hint">JPG or PNG · up to 2 MB</span>
          </div>
        </div>
      </Row>

      <Row name="Shop name" sub="Displayed across the admin and on every receipt.">
        <input className="set-input w-md" value={prefs.shop_name} onChange={e => updatePref("shop_name", e.target.value)} />
      </Row>

      <Row name="Tagline" sub="A short line beneath your name.">
        <input className="set-input w-md" value={prefs.shop_tagline} onChange={e => updatePref("shop_tagline", e.target.value)} />
      </Row>

      <Row name="Contact phone">
        <input className="set-input w-md mono" value={prefs.contact_phone} onChange={e => updatePref("contact_phone", e.target.value)} />
      </Row>

      <Row name="Contact email">
        <input className="set-input w-md" value={prefs.contact_email} onChange={e => updatePref("contact_email", e.target.value)} />
      </Row>

      <Row name="Address" sub="Used for pickup directions and tax locale." stack>
        <textarea className="set-input" rows="2" value={prefs.shop_address} onChange={e => updatePref("shop_address", e.target.value)} />
      </Row>
    </div>
  </div>
);

const HoursPanel = ({ prefs, updatePref }) => {
  const days = prefs.business_hours || DAYS;
  const setDays = (next) => updatePref("business_hours", next);
  const toggle = (i) => setDays(days.map((d, idx) => idx === i ? { ...d, on: !d.on } : d));
  const setTime = (i, key, val) => setDays(days.map((d, idx) => idx === i ? { ...d, [key]: val } : d));
  return (
    <div>
      <div className="set-panel-head">
        <div className="set-panel-title">Business Hours</div>
        <div className="set-panel-desc">When guests can place pickup and delivery orders. Times follow your shop timezone.</div>
      </div>

      <div className="set-block">
        <div className="set-block-label">Weekly schedule</div>
        {days.map((d, i) => (
          <div className="hours-row" key={d.d}>
            <span className="hours-day">{d.d}</span>
            <Toggle on={d.on} onClick={() => toggle(i)} />
            {d.on ? (
              <div className="hours-times">
                <input className="time-input" value={d.open} onChange={e => setTime(i, "open", e.target.value)} />
                <span className="dash">-</span>
                <input className="time-input" value={d.close} onChange={e => setTime(i, "close", e.target.value)} />
              </div>
            ) : (
              <span className="hours-closed">Closed</span>
            )}
          </div>
        ))}
      </div>

      <div className="set-block">
        <div className="set-block-label">Timezone</div>
        <Row name="Shop timezone" sub="All order timestamps and reports use this zone.">
          <select className="set-input w-md" value={prefs.shop_timezone} onChange={e => updatePref("shop_timezone", e.target.value)}>
            <option value="Pacific Time - Los Angeles">Pacific Time - Los Angeles</option>
            <option value="Mountain Time - Denver">Mountain Time - Denver</option>
            <option value="Central Time - Chicago">Central Time - Chicago</option>
            <option value="Eastern Time - New York">Eastern Time - New York</option>
          </select>
        </Row>
      </div>
    </div>
  );
};

const OrdersPanel = ({ prefs, updatePref, onDirty }) => {
  const [numberSettings, setNumberSettings] = React.useState({ reset_period: "day", prefix: "TG" });
  const [nextNumber, setNextNumber] = React.useState(null);
  const [numberLoading, setNumberLoading] = React.useState(true);
  const [numberSaving, setNumberSaving] = React.useState("");
  const [numberError, setNumberError] = React.useState("");
  const [customRanges, setCustomRanges] = React.useState([]);

  const loadOrderNumberSettings = React.useCallback(async () => {
    const backend = window.TeaGangBackend;
    if (!backend?.enabled) {
      setNumberLoading(false);
      return;
    }
    setNumberLoading(true);
    setNumberError("");
    try {
      const [savedSettings, preview, ranges] = await Promise.all([
        backend.fetchOrderNumberSettings(),
        backend.nextOrderNumber(),
        backend.fetchCustomDateRanges?.() || [],
      ]);
      setNumberSettings(savedSettings || { reset_period: "day", prefix: "TG" });
      setNextNumber(preview || 1);
      setCustomRanges(ranges);
    } catch (err) {
      console.error("Could not load order number settings.", err);
      setNumberError(err.message || "Could not load order number settings.");
    } finally {
      setNumberLoading(false);
    }
  }, []);

  React.useEffect(() => { loadOrderNumberSettings(); }, [loadOrderNumberSettings]);

  const choosePeriod = async (period) => {
    if (numberSaving || period === numberSettings.reset_period) return;
    const backend = window.TeaGangBackend;
    setNumberSaving(period);
    setNumberError("");
    try {
      const saved = await backend.updateOrderNumberSettings({
        reset_period: period,
        prefix: numberSettings.prefix || "TG",
      });
      const preview = await backend.nextOrderNumber();
      setNumberSettings(saved);
      setNextNumber(preview || 1);
      onDirty?.();
    } catch (err) {
      console.error("Could not save order number settings.", err);
      setNumberError(err.message || "Could not save order number settings.");
    } finally {
      setNumberSaving("");
    }
  };

  const resetCounter = async () => {
    if (numberSaving || numberLoading) return;
    const backend = window.TeaGangBackend;
    if (!backend?.resetOrderNumberCounter) return;
    const prefix = numberSettings.prefix || "TG";
    const ok = window.confirm(
      `Reset the current ${numberSettings.reset_period || "day"} counter?\n\nThe next order will start at ${prefix}-1. Existing order numbers will not change.`
    );
    if (!ok) return;
    setNumberSaving("reset");
    setNumberError("");
    try {
      const preview = await backend.resetOrderNumberCounter();
      setNextNumber(preview || 1);
      onDirty?.();
    } catch (err) {
      console.error("Could not reset order number counter.", err);
      setNumberError(err.message || "Could not reset order number counter.");
    } finally {
      setNumberSaving("");
    }
  };

  return (
    <div>
      <div className="set-panel-head">
        <div className="set-panel-title">Orders &amp; Service</div>
        <div className="set-panel-desc">Control how incoming orders are handled and which fulfilment modes you offer.</div>
      </div>

      <div className="set-block">
        <div className="set-block-label">Fulfilment</div>
        <Row name="Pickup" sub="Guests collect at the counter.">
          <Toggle on={prefs.order_pickup_enabled} onClick={() => updatePref("order_pickup_enabled", !prefs.order_pickup_enabled)} />
        </Row>
        <Row name="Delivery" sub="Dispatch via courier within your zone.">
          <Toggle on={prefs.order_delivery_enabled} onClick={() => updatePref("order_delivery_enabled", !prefs.order_delivery_enabled)} />
        </Row>
        <Row name="Dine-in" sub="Table service inside the shop.">
          <Toggle on={prefs.order_dine_in_enabled} onClick={() => updatePref("order_dine_in_enabled", !prefs.order_dine_in_enabled)} />
        </Row>
      </div>

      <div className="set-block">
        <div className="set-block-label">Order numbering</div>
        <Row name="Reset period" sub="Supabase assigns order numbers atomically. Choose when the counter starts back at 1." stack>
          <div className="order-number-setting">
            <div className="order-number-preview">
              <span className="mono">{numberSettings.prefix || "TG"}-{nextNumber || "-"}</span>
              <small>next preview</small>
              <button className="btn btn-ghost" onClick={resetCounter} disabled={numberLoading || !!numberSaving}>
                {numberSaving === "reset" ? <span className="btn-spinner" /> : <Ic name="refresh" size={13} />} Reset
              </button>
            </div>
            <div className="period-grid">
              {ORDER_NUMBER_PERIODS.map(period => {
                const active = numberSettings.reset_period === period.id;
                return (
                  <button
                    key={period.id}
                    className={`period-tile ${active ? "on" : ""}`}
                    onClick={() => choosePeriod(period.id)}
                    disabled={numberLoading || !!numberSaving}
                  >
                    <span className="period-check">{active ? <Ic name="check" size={12} /> : null}</span>
                    <span>
                      <div className="period-name">{period.label}</div>
                      <div className="period-sub">{period.sub}</div>
                    </span>
                    {numberSaving === period.id && <span className="btn-spinner" />}
                  </button>
                );
              })}
            </div>
            {customRanges.length > 0 && (
              <>
                <div className="set-block-sublabel">Custom ranges</div>
                <div className="period-grid">
                  {customRanges.map(range => {
                    const active = numberSettings.reset_period === range.id;
                    return (
                      <button
                        key={range.id}
                        className={`period-tile ${active ? "on" : ""}`}
                        onClick={() => choosePeriod(range.id)}
                        disabled={numberLoading || !!numberSaving}
                      >
                        <span className="period-check">{active ? <Ic name="check" size={12} /> : null}</span>
                        <span>
                          <div className="period-name">{range.name}</div>
                          <div className="period-sub">{window.TeaGangCustomDateRanges.label(range)}</div>
                        </span>
                        {numberSaving === range.id && <span className="btn-spinner" />}
                      </button>
                    );
                  })}
                </div>
              </>
            )}
            {numberError && <div className="set-error">{numberError}</div>}
          </div>
        </Row>
      </div>

      <div className="set-block">
        <div className="set-block-label">Order flow</div>
        <Row name="Auto-accept new orders" sub="Skip manual confirmation and send straight to the kitchen.">
          <Toggle on={prefs.order_auto_accept} onClick={() => updatePref("order_auto_accept", !prefs.order_auto_accept)} />
        </Row>
        <Row name="Default prep time" sub="Quoted to guests when they order.">
          <div className="set-input-group">
            <input value={prefs.default_prep_minutes} onChange={e => updatePref("default_prep_minutes", e.target.value)} />
            <span className="suffix">min</span>
          </div>
        </Row>
        <Row name="Sales tax" sub="Applied to taxable items at checkout.">
          <div className="set-input-group">
            <input value={prefs.sales_tax_percent} onChange={e => updatePref("sales_tax_percent", e.target.value)} />
            <span className="suffix">%</span>
          </div>
        </Row>
      </div>

      <div className="set-block">
        <div className="set-block-label">Tipping</div>
        <Row name="Suggested tips" sub="Preset percentages shown at checkout.">
          <div className="set-row-control" style={{ gap: 8 }}>
            {(prefs.suggested_tips || ["", "", ""]).slice(0, 3).map((tip, index) => (
              <div className="set-input-group" key={index}>
                <input
                  value={tip}
                  style={{ width: 48 }}
                  onChange={e => {
                    const next = [...(prefs.suggested_tips || ["", "", ""])];
                    next[index] = e.target.value;
                    updatePref("suggested_tips", next);
                  }}
                />
                <span className="suffix">%</span>
              </div>
            ))}
          </div>
        </Row>
      </div>
    </div>
  );
};

const DateRangesPanel = ({ prefs, updatePref }) => {
  const backend = window.TeaGangBackend;
  const backendEnabled = !!(backend?.enabled && backend.fetchCustomDateRanges);
  const blank = { id: "", name: "", startWeekday: 7, endWeekday: 6 };
  const [ranges, setRanges] = React.useState(() =>
    window.TeaGangCustomDateRanges?.normalize?.(prefs.custom_date_ranges_v1) || []
  );
  const [loading, setLoading] = React.useState(backendEnabled);
  const [saving, setSaving] = React.useState(false);
  const [rangeError, setRangeError] = React.useState("");
  const [draft, setDraft] = React.useState(blank);
  const [editingId, setEditingId] = React.useState("");

  React.useEffect(() => {
    if (!backendEnabled) return;
    setLoading(true);
    backend.fetchCustomDateRanges()
      .then(data => setRanges(data))
      .catch(err => setRangeError(err.message || "Could not load date ranges."))
      .finally(() => setLoading(false));
  }, [backendEnabled]);

  const syncToPrefs = (updatedRanges) => {
    if (!backendEnabled) {
      updatePref("custom_date_ranges_v1", updatedRanges);
    }
    window.TeaGangCustomDateRanges?.notifyChanged?.();
  };

  const resetDraft = () => {
    setDraft(blank);
    setEditingId("");
  };

  const saveDraft = async () => {
    const name = draft.name.trim();
    if (!name || saving) return;
    setRangeError("");
    setSaving(true);
    try {
      if (backendEnabled) {
        const params = { name, startWeekday: Number(draft.startWeekday), endWeekday: Number(draft.endWeekday) };
        let next;
        if (editingId) {
          const saved = await backend.updateCustomDateRange(editingId, params);
          next = ranges.map(r => r.id === editingId ? saved : r);
        } else {
          const saved = await backend.insertCustomDateRange(params);
          next = [...ranges, saved];
        }
        setRanges(next);
        syncToPrefs(next);
      } else {
        const nextRange = {
          id: editingId || `custom_range_${Date.now()}`,
          name,
          startWeekday: Number(draft.startWeekday),
          endWeekday: Number(draft.endWeekday),
        };
        const next = editingId
          ? ranges.map(r => r.id === editingId ? nextRange : r)
          : [...ranges, nextRange];
        setRanges(next);
        syncToPrefs(next);
      }
      resetDraft();
    } catch (err) {
      setRangeError(err.message || "Could not save date range.");
    } finally {
      setSaving(false);
    }
  };

  const editRange = (range) => {
    setEditingId(range.id);
    setDraft({ ...range });
  };

  const deleteRange = async (id) => {
    if (saving) return;
    setRangeError("");
    setSaving(true);
    try {
      if (backendEnabled) await backend.deleteCustomDateRange(id);
      const next = ranges.filter(r => r.id !== id);
      setRanges(next);
      syncToPrefs(next);
      if (editingId === id) resetDraft();
    } catch (err) {
      setRangeError(err.message || "Could not delete date range.");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <div className="set-panel-head">
        <div className="set-panel-title">Custom Date Ranges</div>
        <div className="set-panel-desc">Named recurring ranges for Dashboard and Orders filters. Example: Sale week from Sunday through Saturday.</div>
      </div>

      <div className="set-block">
        <div className="set-block-label">{editingId ? "Edit range" : "Add range"}</div>
        <Row name="Range name" sub="This label appears as a filter chip.">
          <input className="set-input w-md" value={draft.name} placeholder="Sale week" disabled={saving} onChange={e => setDraft({ ...draft, name: e.target.value })} />
        </Row>
        <Row name="Weekdays" sub="The current matching range is calculated from today.">
          <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
            <select className="set-input" value={draft.startWeekday} disabled={saving} onChange={e => setDraft({ ...draft, startWeekday: Number(e.target.value) })}>
              {window.TeaGangCustomDateRanges.weekdays.map(day => <option key={day.value} value={day.value}>{day.label}</option>)}
            </select>
            <span className="muted">to</span>
            <select className="set-input" value={draft.endWeekday} disabled={saving} onChange={e => setDraft({ ...draft, endWeekday: Number(e.target.value) })}>
              {window.TeaGangCustomDateRanges.weekdays.map(day => <option key={day.value} value={day.value}>{day.label}</option>)}
            </select>
          </div>
        </Row>
        <div className="row" style={{ justifyContent: "flex-end", gap: 8 }}>
          {editingId && <button className="btn btn-ghost" onClick={resetDraft} disabled={saving}>Cancel</button>}
          <button className="btn btn-primary" onClick={saveDraft} disabled={saving}>
            {saving ? <span className="btn-spinner" /> : <Ic name="check" size={14} />} {editingId ? "Update range" : "Add range"}
          </button>
        </div>
        {rangeError && <div className="set-error">{rangeError}</div>}
      </div>

      <div className="set-block">
        <div className="set-block-label">Saved ranges</div>
        {loading ? (
          <div className="set-hint">Loading…</div>
        ) : ranges.length === 0 ? (
          <div className="set-hint">No custom ranges yet. Add Sale week with Sunday to Saturday to match your shop reporting week.</div>
        ) : ranges.map(range => (
          <Row key={range.id} name={range.name} sub={window.TeaGangCustomDateRanges.label(range)}>
            <div className="row" style={{ gap: 6 }}>
              <button className="icon-btn" title="Edit range" disabled={saving} onClick={() => editRange(range)}><Ic name="edit" size={13} /></button>
              <button className="icon-btn" title="Delete range" disabled={saving} onClick={() => deleteRange(range.id)}><Ic name="trash" size={13} /></button>
            </div>
          </Row>
        ))}
      </div>
    </div>
  );
};

const PaymentsPanel = ({ prefs, updatePref }) => {
  const methods = prefs.payment_methods || DEFAULT_WEB_PREFERENCES.payment_methods;
  const toggle = (k) => updatePref("payment_methods", { ...methods, [k]: !methods[k] });
  const METHODS = [
    { k: "card",       name: "Card",        sub: "Visa, MC, Amex" },
    { k: "cash",       name: "Cash",        sub: "At the counter" },
    { k: "apple_pay",  name: "Apple Pay",   sub: "Tap to pay" },
    { k: "google_pay", name: "Google Pay",  sub: "Tap to pay" },
    { k: "zelle",      name: "Zelle",       sub: "Bank transfer" },
  ];
  return (
    <div>
      <div className="set-panel-head">
        <div className="set-panel-title">Payments</div>
        <div className="set-panel-desc">Choose which methods guests can pay with and how amounts are shown.</div>
      </div>

      <div className="set-block">
        <div className="set-block-label">Accepted methods</div>
        <Row name="Payment methods" sub="Tap to enable the methods you accept." stack>
          <div className="method-grid">
            {METHODS.map(m => (
              <button key={m.k} className={`method-tile ${methods[m.k] ? "on" : ""}`} onClick={() => toggle(m.k)}>
                <span className="m-check"><Ic name="check" size={12} /></span>
                <span>
                  <div className="m-name">{m.name}</div>
                  <div className="m-sub">{m.sub}</div>
                </span>
              </button>
            ))}
          </div>
        </Row>
      </div>

      <div className="set-block">
        <div className="set-block-label">Currency &amp; rounding</div>
        <Row name="Currency">
          <select className="set-input w-md" value={prefs.currency || "USD - US Dollar ($)"} onChange={e => updatePref("currency", e.target.value)}>
            <option value="USD - US Dollar ($)">USD - US Dollar ($)</option>
            <option value="CAD - Canadian Dollar ($)">CAD - Canadian Dollar ($)</option>
            <option value="EUR - Euro (EUR)">EUR - Euro (EUR)</option>
            <option value="GBP - Pound (GBP)">GBP - Pound (GBP)</option>
          </select>
        </Row>
        <Row name="Processor" sub="Card payouts settle to this account.">
          <div className="row" style={{ gap: 10 }}>
            <span className="mono" style={{ fontSize: 12.5, color: "var(--ink-700)" }}>Stripe ····4821</span>
            <button className="btn btn-ghost"><Ic name="link" size={13} /> Manage</button>
          </div>
        </Row>
      </div>
    </div>
  );
};

const NotificationsPanel = ({ prefs, updatePref }) => {
  const toggle = (key) => updatePref(key, !prefs[key]);
  return (
    <div>
      <div className="set-panel-head">
        <div className="set-panel-title">Notifications</div>
        <div className="set-panel-desc">Decide what reaches you and where. Critical order alerts can't be turned off.</div>
      </div>

      <div className="set-block">
        <div className="set-block-label">Alerts</div>
        <Row name="New order" sub="A guest places an order.">
          <Toggle on={prefs.notify_order_added} onClick={() => toggle("notify_order_added")} />
        </Row>
        <Row name="Low stock" sub="An ingredient drops below its par level.">
          <Toggle on={prefs.notify_low_stock} onClick={() => toggle("notify_low_stock")} />
        </Row>
        <Row name="Daily summary" sub="End-of-day sales and order recap at close.">
          <Toggle on={prefs.notify_daily_summary} onClick={() => toggle("notify_daily_summary")} />
        </Row>
        <Row name="New review" sub="A guest leaves feedback.">
          <Toggle on={prefs.notify_reviews} onClick={() => toggle("notify_reviews")} />
        </Row>
        <Row name="Payouts" sub="A deposit lands in your account.">
          <Toggle on={prefs.notify_payouts} onClick={() => toggle("notify_payouts")} />
        </Row>
      </div>

      <div className="set-block">
        <div className="set-block-label">Channels</div>
        <Row name="Delivery channel" sub="Where alerts are sent.">
          <div className="seg" style={{ minWidth: 240 }}>
            <button className={prefs.delivery_channel === "in_app" ? "on" : ""} onClick={() => updatePref("delivery_channel", "in_app")}><Ic name="bell" size={13} /> In-app</button>
            <button className={prefs.delivery_channel === "email" ? "on" : ""} onClick={() => updatePref("delivery_channel", "email")}><Ic name="globe" size={13} /> Email</button>
            <button className={prefs.delivery_channel === "sms" ? "on" : ""} onClick={() => updatePref("delivery_channel", "sms")}><Ic name="phone" size={13} /> SMS</button>
          </div>
        </Row>
      </div>
    </div>
  );
};

const AppearancePanel = ({
  prefs,
  updatePref,
  accent,
  setAccent,
  density,
  setDensity,
}) => (
  <div>
    <div className="set-panel-head">
      <div className="set-panel-title">Appearance</div>
      <div className="set-panel-desc">Tune the console's trim and density. Changes apply instantly across the admin.</div>
    </div>

    <div className="set-block">
      <div className="set-block-label">Theme</div>
      <Row name="Accent color" sub="The trim used for highlights, active states, and charts.">
        <div className="swatch-row">
          {ACCENTS.map(a => (
            <div
              key={a.v}
              className={`swatch ${accent === a.v ? "on" : ""}`}
              style={{ background: a.v }}
              title={a.name}
              onClick={() => setAccent(a.v)}
            />
          ))}
        </div>
      </Row>
      <Row name="Density" sub="Spacing of tables, cards, and lists.">
        <div className="seg" style={{ minWidth: 220 }}>
          <button className={density === "Comfortable" ? "on" : ""} onClick={() => setDensity("Comfortable")}>Comfortable</button>
          <button className={density === "Compact" ? "on" : ""} onClick={() => setDensity("Compact")}>Compact</button>
        </div>
      </Row>
    </div>

    <div className="set-block">
      <div className="set-block-label">Receipts</div>
      <Row name="Receipt footer" sub="A short note printed at the bottom of every receipt." stack>
        <textarea className="set-input" rows="2" value={prefs.receipt_footer} onChange={e => updatePref("receipt_footer", e.target.value)} />
      </Row>
    </div>
  </div>
);

const SecurityPanel = () => (
  <div>
    <div className="set-panel-head">
      <div className="set-panel-title">Security</div>
      <div className="set-panel-desc">Manage how you sign in and protect the shop's data.</div>
    </div>

    <div className="set-block">
      <div className="set-block-label">Access</div>
      <Row name="Password" sub="Last changed 3 months ago.">
        <button className="btn btn-ghost"><Ic name="lock" size={13} /> Change password</button>
      </Row>
      <Row name="Two-factor authentication" sub="Require a code from your phone at sign-in.">
        <Toggle on={true} onClick={() => {}} />
      </Row>
      <Row name="Active sessions" sub="2 devices · Mission St. iPad, this browser.">
        <button className="btn btn-ghost">Sign out others</button>
      </Row>
    </div>

    <div className="set-block">
      <div className="set-block-label danger-label">Danger zone</div>
      <div className="danger-row">
        <div className="set-row-text">
          <div className="set-row-name">Export shop data</div>
          <div className="set-row-sub">Download all orders, menu, and customer records as CSV.</div>
        </div>
        <button className="btn btn-ghost"><Ic name="arrow-down" size={13} /> Export</button>
      </div>
      <div className="danger-row">
        <div className="set-row-text">
          <div className="set-row-name">Close this shop</div>
          <div className="set-row-sub">Permanently deactivate The Tea Gang. This can't be undone.</div>
        </div>
        <button className="btn btn-danger"><Ic name="trash" size={13} /> Close shop</button>
      </div>
    </div>
  </div>
);

// ============================================================
// Settings shell
// ============================================================
const Settings = ({ accent, setAccent, density, setDensity }) => {
  const [active, setActive] = React.useState("profile");
  const [dirty, setDirty] = React.useState(false);
  const [prefs, setPrefs] = React.useState(() => mergePreferences(readLocalPreferences(), { accent, density }));
  const [saving, setSaving] = React.useState(false);
  const [loadingPrefs, setLoadingPrefs] = React.useState(true);
  const [saveError, setSaveError] = React.useState("");

  const applyPreferences = React.useCallback((nextPrefs, { markDirty = false } = {}) => {
    const merged = mergePreferences(nextPrefs);
    setPrefs(merged);
    setAccent(merged.accent);
    setDensity(merged.density);
    if (markDirty) setDirty(true);
    return merged;
  }, [setAccent, setDensity]);

  React.useEffect(() => {
    let disposed = false;
    const loadPreferences = async () => {
      const backend = window.TeaGangBackend;
      const local = readLocalPreferences();
      if (!backend?.enabled || !backend.fetchUserPreferences) {
        if (!disposed) {
          applyPreferences(mergePreferences(local, { accent, density }));
          setLoadingPrefs(false);
        }
        return;
      }
      try {
        const remote = await backend.fetchUserPreferences(WEB_PREFERENCES_PLATFORM);
        if (disposed) return;
        const merged = mergePreferences(local, remote || {}, { accent: remote?.accent || local.accent || accent, density: remote?.density || local.density || density });
        writeLocalPreferences(merged);
        if (!remote && backend.upsertUserPreferences) {
          await backend.upsertUserPreferences(merged, WEB_PREFERENCES_PLATFORM);
        }
        applyPreferences(merged);
        setSaveError("");
      } catch (err) {
        console.error("Could not load web preferences.", err);
        if (!disposed) {
          applyPreferences(mergePreferences(local, { accent, density }));
          setSaveError(err.message || "Could not load saved settings.");
        }
      } finally {
        if (!disposed) setLoadingPrefs(false);
      }
    };
    loadPreferences();
    return () => { disposed = true; };
  }, []);

  const updatePref = React.useCallback((key, value) => {
    setPrefs(prev => {
      const next = mergePreferences(prev, { [key]: value });
      if (key === "accent") setAccent(value);
      if (key === "density") setDensity(value);
      setDirty(true);
      setSaveError("");
      return next;
    });
  }, [setAccent, setDensity]);

  const savePreferences = async () => {
    const backend = window.TeaGangBackend;
    setSaving(true);
    setSaveError("");
    try {
      const next = mergePreferences(prefs, { accent, density });
      writeLocalPreferences(next);
      if (backend?.enabled && backend.upsertUserPreferences) {
        await backend.upsertUserPreferences(next, WEB_PREFERENCES_PLATFORM);
      }
      window.TeaGangCustomDateRanges?.notifyChanged?.();
      setPrefs(next);
      setDirty(false);
    } catch (err) {
      console.error("Could not save web preferences.", err);
      setSaveError(err.message || "Could not save settings.");
    } finally {
      setSaving(false);
    }
  };

  const discardPreferences = async () => {
    setLoadingPrefs(true);
    setSaveError("");
    try {
      const backend = window.TeaGangBackend;
      const remote = backend?.enabled && backend.fetchUserPreferences
        ? await backend.fetchUserPreferences(WEB_PREFERENCES_PLATFORM)
        : null;
      const next = mergePreferences(readLocalPreferences(), remote || {});
      applyPreferences(next);
      setDirty(false);
    } catch (err) {
      setSaveError(err.message || "Could not reload settings.");
    } finally {
      setLoadingPrefs(false);
    }
  };

  const panelProps = {
    prefs,
    updatePref,
    accent: prefs.accent,
    density: prefs.density,
    setAccent: (v) => updatePref("accent", v),
    setDensity: (v) => updatePref("density", v),
  };

  const renderPanel = () => {
    switch (active) {
      case "profile":       return <ProfilePanel {...panelProps} />;
      case "hours":         return <HoursPanel {...panelProps} />;
      case "orders":        return <OrdersPanel {...panelProps} onDirty={() => setDirty(true)} />;
      case "dateRanges":    return <DateRangesPanel {...panelProps} />;
      case "payments":      return <PaymentsPanel {...panelProps} />;
      case "notifications": return <NotificationsPanel {...panelProps} />;
      case "appearance":    return <AppearancePanel {...panelProps} />;
      case "security":      return <SecurityPanel />;
      default:              return <ProfilePanel {...panelProps} />;
    }
  };

  return (
    <div className="settings" onChangeCapture={() => setDirty(true)}>
      <div className="page-head" style={{ marginBottom: 26 }}>
        <div>
          <div className="page-eyebrow">shop preferences</div>
          <h1 className="page-title">Settings</h1>
        </div>
      </div>

      <div className="settings-layout">
        <nav className="set-rail">
          {SETTINGS_SECTIONS.map(s => (
            <button
              key={s.id}
              className={`set-rail-item ${active === s.id ? "active" : ""}`}
              onClick={() => setActive(s.id)}
            >
              <Ic name={s.icon} size={16} />
              {s.label}
            </button>
          ))}
        </nav>

        <div className="set-content">
          {loadingPrefs ? (
            <div className="set-block" style={{ padding: 28 }}>
              <div className="row" style={{ gap: 10, color: "var(--ink-500)" }}>
                <span className="btn-spinner" /> Loading saved settings...
              </div>
            </div>
          ) : renderPanel()}

          <div className="set-savebar">
            <span className="save-note">
              <span className={`save-dot ${dirty ? "" : "clean"}`} />
              {saveError || (saving ? "Saving..." : dirty ? "Unsaved changes" : "All changes saved")}
            </span>
            <div style={{ flex: 1 }} />
            <button className="btn btn-ghost" onClick={discardPreferences} disabled={saving || loadingPrefs}>Discard</button>
            <button className="btn btn-primary" onClick={savePreferences} disabled={saving || loadingPrefs || !dirty}>
              {saving ? <span className="btn-spinner" /> : <Ic name="check" size={14} />} Save changes
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Settings = Settings;