// ============================================================
//  Mobile app extras v2 — extended icons, Modal, Toast, AutoSave
//  Loads AFTER components/shared.jsx (extends window.Icons)
// ============================================================

Object.assign(Icons, {
  google: (p) => (
    <svg width={p?.size || 22} height={p?.size || 22} viewBox="0 0 24 24" style={{ display: "block" }}>
      <path fill="#4285F4" d="M21.6 12.2c0-.6-.05-1.2-.15-1.8H12v3.4h5.4a4.6 4.6 0 0 1-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.1Z" />
      <path fill="#34A853" d="M12 22c2.7 0 5-.9 6.6-2.4l-3.2-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3.1v2.6A10 10 0 0 0 12 22Z" />
      <path fill="#FBBC05" d="M6.4 14c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.4H3.1A10 10 0 0 0 2 12c0 1.6.4 3.1 1.1 4.6L6.4 14Z" />
      <path fill="#EA4335" d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.8-2.8A10 10 0 0 0 3.1 7.4L6.4 10c.8-2.4 3-4.1 5.6-4.1Z" />
    </svg>
  ),
  lock:   (p) => <Icon {...p}><rect x="4.5" y="10.5" width="15" height="10" rx="2.2" /><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3" /><circle cx="12" cy="15.3" r="1.1" fill="currentColor" stroke="none" /></Icon>,
  mail:   (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2.4" /><path d="m3.6 6.5 8.4 6 8.4-6" /></Icon>,
  eyeOff: (p) => <Icon {...p}><path d="M9.9 5.2A9.5 9.5 0 0 1 12 5c6.5 0 10 7 10 7a16 16 0 0 1-2.9 3.6M6.3 6.4A16 16 0 0 0 2 12s3.5 7 10 7a9.3 9.3 0 0 0 4-.9" /><path d="m9.7 9.8a3 3 0 0 0 4.3 4.2" /><path d="m3 3 18 18" /></Icon>,
  file:   (p) => <Icon {...p}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z" /><path d="M14 3v5h5M8.5 13h7M8.5 16.5h5" /></Icon>,
  save:   (p) => <Icon {...p}><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" /><path d="M17 21v-8H7v8M7 3v5h7" /></Icon>,
  alert:  (p) => <Icon {...p}><path d="M10.3 3.8 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.8a2 2 0 0 0-3.4 0Z" /><path d="M12 9v4" /><circle cx="12" cy="17" r="0.6" fill="currentColor" stroke="none" /></Icon>,
  clock:  (p) => <Icon {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7.5V12l3 2" /></Icon>,
  logout: (p) => <Icon {...p}><path d="M9 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3" /><path d="M16 17l5-5-5-5M21 12H9" /></Icon>,
  chevL:  (p) => <Icon {...p} d="m15 6-6 6 6 6" />,
  phone:  (p) => <Icon {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.4 2.1L8 9.7a16 16 0 0 0 6.3 6.3l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2Z" /></Icon>,
  at:     (p) => <Icon {...p}><circle cx="12" cy="12" r="4" /><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" /></Icon>,
  image:  (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" /></Icon>,
  zap:    (p) => <Icon {...p}><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z" /></Icon>,
  trophy: (p) => <Icon {...p}><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18" /><path d="M4 22h16M10 14.7a6 6 0 0 1-4-5.7V4h12v5a6 6 0 0 1-4 5.7" /><path d="M9 22v-4h6v4" /></Icon>,
  msgCircle: (p) => <Icon {...p}><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22l5.9-2Z" /></Icon>,
  timerReset: (p) => <Icon {...p}><circle cx="12" cy="14" r="8" /><path d="M12 10v4l2 2" /><path d="M10 2h4" /></Icon>,
  newspaper: (p) => <Icon {...p}><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9h4" /><path d="M10 6h8M10 10h8M10 14h4" /></Icon>,
  arrowUp: (p) => <Icon {...p}><path d="M12 19V5M5 12l7-7 7 7" /></Icon>,
});

// ---- Shared input style (consistent across all screens) ----
const nkInput = {
  width: "100%", borderRadius: 10, padding: "12px 14px",
  fontFamily: "var(--ff-ui)", fontSize: 15, color: "var(--text)",
  background: "var(--bg-card)", border: "1px solid var(--border-2)",
  outline: "none", transition: "border-color .15s ease",
};

// ---- Section label ----
const SectionLabel = ({ children }) => (
  <div style={{ fontFamily: "var(--ff-ui)", fontSize: 11.5, letterSpacing: "0.06em",
    color: "var(--subtext)", textTransform: "uppercase", marginBottom: 9, fontWeight: 600 }}>{children}</div>
);

// ---------- Toast ----------
function Toast({ message, tone }) {
  if (!message) return null;
  const tones = {
    success: { c: "var(--st-approve)", ic: <Icons.check size={17} sw={2.6} /> },
    info:    { c: "var(--blue)",       ic: <Icons.bell size={16} /> },
    amber:   { c: "var(--st-review)",  ic: <Icons.alert size={16} /> },
    error:   { c: "var(--red)",        ic: <Icons.x size={16} /> },
  };
  const t = tones[tone] || tones.success;
  return (
    <div style={{ position: "absolute", left: 0, right: 0, bottom: 104, display: "flex",
      justifyContent: "center", pointerEvents: "none", zIndex: 90,
      animation: "nk-toast .26s cubic-bezier(.2,.8,.2,1)" }}>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 9,
        background: "var(--text)", color: "var(--bg-card)", padding: "11px 16px",
        borderRadius: 99, fontFamily: "var(--ff-ui)", fontSize: 13.5, fontWeight: 600,
        boxShadow: "0 10px 30px rgba(0,0,0,0.30)", maxWidth: "84%" }}>
        <span style={{ color: t.c, display: "grid" }}>{t.ic}</span>
        <span>{message}</span>
      </div>
    </div>
  );
}

// ---------- Modal (confirm / alert) ----------
function Modal({ data, onClose }) {
  if (!data) return null;
  const { title, body, confirmLabel = "Confirm", cancelLabel = "Cancel",
    tone = "blue", icon, onConfirm, single } = data;
  const toneC = tone === "red" ? "var(--red)" : tone === "amber" ? "var(--st-review)"
    : tone === "green" ? "var(--st-approve)" : "var(--blue)";
  const Ic = icon || (tone === "red" ? Icons.alert : tone === "amber" ? Icons.alert : Icons.check);
  return (
    <div onClick={onClose} style={{ position: "absolute", inset: 0, zIndex: 100, display: "flex",
      alignItems: "center", justifyContent: "center", padding: 22,
      background: "color-mix(in srgb, #0a0f1a 52%, transparent)",
      animation: "nk-fade .18s ease" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: 320,
        background: "var(--bg-card)", borderRadius: 18, padding: "22px 20px 18px",
        boxShadow: "0 24px 60px rgba(0,0,0,0.34)",
        animation: "nk-pop .22s cubic-bezier(.2,.9,.3,1)" }}>
        <div style={{ width: 46, height: 46, borderRadius: 13, display: "grid", placeItems: "center",
          margin: "0 auto 13px", color: toneC,
          background: `color-mix(in srgb, ${toneC} 13%, transparent)` }}>
          <Ic size={24} />
        </div>
        <div style={{ fontFamily: "var(--ff-ui)", fontWeight: 700, fontSize: 17.5,
          color: "var(--text)", textAlign: "center", marginBottom: 6 }}>{title}</div>
        <div style={{ fontFamily: "var(--ff-ui)", fontSize: 14, lineHeight: 1.5,
          color: "var(--subtext)", textAlign: "center", marginBottom: 18 }}>{body}</div>
        <div style={{ display: "flex", gap: 10 }}>
          {!single && (
            <button onClick={onClose} style={{ flex: 1, padding: "12px", borderRadius: 11,
              background: "var(--bg-sunken)", color: "var(--text-2)",
              border: "1px solid var(--border-2)",
              fontFamily: "var(--ff-ui)", fontWeight: 600, fontSize: 14.5, cursor: "pointer" }}>
              {cancelLabel}
            </button>
          )}
          <button onClick={() => { onConfirm && onConfirm(); onClose(); }} style={{ flex: 1,
            padding: "12px", borderRadius: 11, background: toneC, color: "#fff", border: "none",
            fontFamily: "var(--ff-ui)", fontWeight: 600, fontSize: 14.5, cursor: "pointer",
            boxShadow: `0 6px 16px color-mix(in srgb, ${toneC} 40%, transparent)` }}>
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

// ---------- Auto-save indicator ----------
function AutoSaveIndicator({ dirty, saving, lastSaved }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 5, minHeight: 18,
      fontFamily: "var(--ff-ui)", fontSize: 11.5, color: "var(--subtext)" }}>
      {saving ? (
        <React.Fragment>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--blue)",
            animation: "nk-fade .6s ease infinite alternate" }} />
          <span>Saving…</span>
        </React.Fragment>
      ) : dirty ? (
        <React.Fragment>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--st-review)" }} />
          <span>Unsaved changes</span>
        </React.Fragment>
      ) : lastSaved ? (
        <React.Fragment>
          <Icons.check size={13} sw={2.2} style={{ color: "var(--st-approve)" }} />
          <span>Saved {lastSaved}</span>
        </React.Fragment>
      ) : null}
    </div>
  );
}

Object.assign(window, { Toast, Modal, AutoSaveIndicator, nkInput, SectionLabel });