// fc-confirm.jsx, destructive confirmations + the notification itself. Same
// "balanced" system + shared kit. Confirm sheets are iOS-style action sheets
// (centred alert for the heaviest actions); the lock screen is its own device
// surface (dark wallpaper, clock, push banner) — not the app chrome.
//   ConfirmCancelFight · cancel an upcoming fight (keeps the camp data)
//   ConfirmDeleteCamp  · permanently delete a camp + its logs (typed/destructive)
//   ConfirmChangeGoal  · change goal mid-camp (replans every daily target)
//   NotifPrompt        · iOS notification-permission system prompt
//   LockScreenPush     · the 6:50 AM weigh-in nudge on the lock screen

const { Phone: CPhone, StatusBar: CStatusBar, HomeIndicator: CHome } = window;
const CB = '#a32a18';

// ── action-sheet confirm ───────────────────────────────────────────────────────
// A dimmed app screen with a bottom sheet. tone 'red' paints the primary action
// destructive; 'ink' for a heavy-but-reversible replan.
function ConfirmSheet({ styleKey = 'balanced', label, icon, tone = 'red', eyebrow, title, body, bullets, confirm, cancel = 'Keep it', note }) {
  const tc = tone === 'red' ? 'var(--t-red)' : 'var(--ink)';
  const soft = tone === 'red' ? 'var(--t-red-soft)' : 'var(--accent-soft)';
  return (
    <CPhone styleKey={styleKey} label={label}>
      {/* dimmed backdrop — a hint of the screen behind */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(15,14,11,0.55)', backdropFilter: 'blur(2px)' }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 12 }}>
        <div style={{ background: 'var(--paper)', borderRadius: 24, overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.4)' }}>
          <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 10 }}><div style={{ width: 36, height: 5, borderRadius: 3, background: 'var(--rule-2)', opacity: 0.5 }} /></div>
          <div style={{ padding: '26px 24px 20px', textAlign: 'center' }}>
            <div style={{ width: 60, height: 60, margin: '0 auto', borderRadius: '50%', background: soft, display: 'flex', alignItems: 'center', justifyContent: 'center', color: tc }}>{icon}</div>
            {eyebrow && <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600, color: tc, marginTop: 18 }}>{eyebrow}</div>}
            <div style={{ fontFamily: 'var(--sans)', fontSize: 21, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink)', marginTop: eyebrow ? 8 : 18, textWrap: 'balance' }}>{title}</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 10, textWrap: 'pretty' }}>{body}</div>
            {bullets && (
              <div style={{ textAlign: 'left', background: 'var(--paper-2)', borderRadius: 14, padding: '15px 17px', marginTop: 18, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {bullets.map((b, i) => (
                  <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                    <span style={{ flexShrink: 0, marginTop: 1, color: b[0] === 'keep' ? 'var(--t-green)' : 'var(--t-red)' }}>
                      {b[0] === 'keep'
                        ? <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 L6.5 12 L13 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        : <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>}
                    </span>
                    <span style={{ flex: 1, fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.45, color: 'var(--ink-2)', textWrap: 'pretty' }}>{b[1]}</span>
                  </div>
                ))}
              </div>
            )}
            {note && <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginTop: 16 }}>{note}</div>}
          </div>
          <div style={{ padding: '0 16px 16px', display: 'flex', flexDirection: 'column', gap: 9 }}>
            <button style={{ width: '100%', minHeight: 54, borderRadius: 14, border: 'none', background: tone === 'red' ? 'var(--t-red)' : 'var(--ink)', color: '#fff', fontFamily: 'var(--display)', fontSize: 14, letterSpacing: '0.12em', fontWeight: 600 }}>{confirm}</button>
            <button style={{ width: '100%', minHeight: 50, borderRadius: 14, border: 'none', background: 'var(--paper-2)', color: 'var(--ink)', fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 600 }}>{cancel}</button>
          </div>
        </div>
      </div>
      <CHome />
    </CPhone>
  );
}

const IcoCalX = <svg width="28" height="28" viewBox="0 0 30 30" fill="none"><rect x="4" y="6" width="22" height="20" rx="3" stroke="currentColor" strokeWidth="1.8"/><path d="M4 11 H26 M10 3 V7 M20 3 V7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/><path d="M11 18 L19 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>;
const IcoTrash = <svg width="26" height="26" viewBox="0 0 28 28" fill="none"><path d="M5 7 H23 M10 7 V4.5 H18 V7 M7 7 L8 24 H20 L21 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><path d="M12 11 V20 M16 11 V20" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>;
const IcoTarget = <svg width="28" height="28" viewBox="0 0 30 30" fill="none"><circle cx="15" cy="15" r="11" stroke="currentColor" strokeWidth="1.8"/><circle cx="15" cy="15" r="6" stroke="currentColor" strokeWidth="1.8"/><circle cx="15" cy="15" r="1.6" fill="currentColor"/></svg>;
const IcoCard = <svg width="28" height="28" viewBox="0 0 30 30" fill="none"><rect x="4" y="7" width="22" height="16" rx="3" stroke="currentColor" strokeWidth="1.8"/><path d="M4 12 H26" stroke="currentColor" strokeWidth="1.8"/><path d="M8 18.5 H14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>;

// ── CANCEL FIGHT ─────────────────────────────────────────────────────────────────
function ConfirmCancelFight() {
  return (
    <ConfirmSheet label="Confirm · Cancel fight" icon={IcoCalX} tone="red" eyebrow="Sat 11 Jan · Lightweight"
      title="Cancel this fight?"
      body="Your camp switches back to maintenance. Nothing you’ve logged is lost — you can book a new date any time."
      bullets={[['keep', 'Your weigh-in history and trend stay exactly as they are.'], ['keep', 'You move to a calmer maintenance routine.'], ['lose', 'Your dated fight-week plan and daily targets are cleared.']]}
      confirm="CANCEL FIGHT" cancel="Keep my fight" />
  );
}

// ── DELETE CAMP ────────────────────────────────────────────────────────────────
function ConfirmDeleteCamp() {
  return (
    <ConfirmSheet label="Confirm · Delete camp" icon={IcoTrash} tone="red" eyebrow="Lightweight · MMA · 14 Sep"
      title="Delete this camp for good?"
      body="This permanently removes the camp and every weigh-in inside it. This can’t be undone."
      bullets={[['lose', '38 logged weigh-ins erased.'], ['lose', 'This camp’s trend and result removed from history.'], ['keep', 'Your account and other camps are untouched.']]}
      confirm="DELETE CAMP" cancel="Keep it" />
  );
}

// ── CANCEL SUBSCRIPTION ────────────────────────────────────────────────────
// The billing-cancel confirm (B1). Distinct from cancelling a fight: this ends
// the paid plan but keeps access until the period ends, then drops to read-only.
function ConfirmCancelSub() {
  return (
    <ConfirmSheet label="Confirm · Cancel subscription" icon={IcoCard} tone="red" eyebrow="Annual · renews 14 Sep 2026"
      title="Cancel your subscription?"
      body="You keep full access until 14 Sep 2026. After that OnWeight drops to read-only — your history stays, but live tracking stops."
      bullets={[['keep', 'Full access until 14 Sep 2026 — nothing changes today.'], ['keep', 'Your weigh-in history and past camps stay readable.'], ['lose', 'Daily logging, targets and projections stop after that date.']]}
      confirm="CANCEL SUBSCRIPTION" cancel="Keep my subscription" />
  );
}

// ── CHANGE LIMIT (mid-camp replan) ──────────────────────────────────────────────
function ConfirmChangeGoal() {
  return (
    <ConfirmSheet label="Confirm · Change goal" icon={IcoTarget} tone="ink" eyebrow="Replan camp"
      title="Change your limit?"
      body="Moving from 74.4 kg to 70.3 kg rebuilds every daily target between today and weigh-in. Your logged history stays the same."
      bullets={[['keep', 'All your past weigh-ins are kept.'], ['lose', 'Today’s and all future targets are recalculated.'], ['lose', 'Your weekly pace verdict resets to the new plan.']]}
      note="New cut: 5.7 kg in 41 days · 0.97 kg/wk"
      confirm="REPLAN AT 70.3 KG" cancel="Keep 74.4 kg" />
  );
}

// ── NOTIFICATION PERMISSION PROMPT (iOS system dialog) ─────────────────────────
function NotifPrompt({ styleKey = 'balanced' }) {
  return (
    <CPhone styleKey={styleKey} label="Notif permission prompt">
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(15,14,11,0.55)', backdropFilter: 'blur(2px)' }} />
      {/* a sliver of context behind the dialog */}
      <div style={{ position: 'absolute', top: 90, left: 0, right: 0, textAlign: 'center', padding: '0 40px' }}>
        <div style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 600 }}>One last thing</div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 22, fontWeight: 700, color: '#fff', marginTop: 10, textWrap: 'balance' }}>Turn on your morning reminder.</div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.5, color: 'rgba(255,255,255,0.8)', marginTop: 10, textWrap: 'pretty' }}>A daily fasted weigh-in is the whole engine. We’ll nudge you at the same time each morning — nothing else.</div>
      </div>
      {/* the OS dialog */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 36 }}>
        <div style={{ width: 270, background: 'rgba(248,246,242,0.96)', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 70px rgba(0,0,0,0.45)', backdropFilter: 'blur(20px)' }}>
          <div style={{ padding: '20px 18px 16px', textAlign: 'center' }}>
            <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 17, fontWeight: 600, color: '#000' }}>“OnWeight” Would Like to Send You Notifications</div>
            <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 13, lineHeight: 1.4, color: '#1c1c1c', marginTop: 5 }}>Notifications may include alerts, sounds, and icon badges. These can be configured in Settings.</div>
          </div>
          <div style={{ borderTop: '0.5px solid rgba(0,0,0,0.22)', display: 'flex' }}>
            <button style={{ flex: 1, minHeight: 44, border: 'none', borderRight: '0.5px solid rgba(0,0,0,0.22)', background: 'transparent', fontFamily: 'system-ui, sans-serif', fontSize: 17, color: '#0a84ff' }}>Don’t Allow</button>
            <button style={{ flex: 1, minHeight: 44, border: 'none', background: 'transparent', fontFamily: 'system-ui, sans-serif', fontSize: 17, fontWeight: 600, color: '#0a84ff' }}>Allow</button>
          </div>
        </div>
      </div>
      <CHome />
    </CPhone>
  );
}

// ── LOCK-SCREEN PUSH (the morning weigh-in nudge) ──────────────────────────────
function LockScreenPush({ styleKey = 'balanced' }) {
  return (
    <CPhone styleKey={styleKey} label="Lock screen · Morning push">
      {/* dark wallpaper */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 80% at 50% 8%, #2a2722 0%, #16140f 55%, #0c0b08 100%)' }} />
      {/* status bar (light) */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 30px', color: '#fff' }}>
        <span style={{ fontFamily: 'system-ui, sans-serif', fontSize: 15, fontWeight: 600 }}>6:50</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <svg width="17" height="11" viewBox="0 0 17 11" fill="none"><rect x="0.5" y="3" width="3" height="8" rx="1" fill="#fff"/><rect x="4.8" y="1.5" width="3" height="9.5" rx="1" fill="#fff"/><rect x="9.1" y="0" width="3" height="11" rx="1" fill="#fff"/><rect x="13.4" y="0" width="3" height="11" rx="1" fill="rgba(255,255,255,0.4)"/></svg>
          <svg width="22" height="11" viewBox="0 0 24 12" fill="none"><rect x="1" y="1" width="20" height="10" rx="3" stroke="#fff" strokeOpacity="0.5"/><rect x="2.5" y="2.5" width="15" height="7" rx="1.5" fill="#fff"/><rect x="22" y="4" width="1.6" height="4" rx="0.8" fill="#fff" fillOpacity="0.6"/></svg>
        </div>
      </div>
      {/* clock */}
      <div style={{ position: 'absolute', top: 70, left: 0, right: 0, textAlign: 'center', color: '#fff' }}>
        <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 15, fontWeight: 500, letterSpacing: '0.02em', opacity: 0.92 }}>Saturday, 11 January</div>
        <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 78, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.05, marginTop: 2 }}>6:50</div>
      </div>
      {/* the push notification banner */}
      <div style={{ position: 'absolute', top: 248, left: 12, right: 12 }}>
        <div style={{ background: 'rgba(245,243,238,0.82)', backdropFilter: 'blur(24px)', borderRadius: 20, padding: '13px 15px', display: 'flex', gap: 12, boxShadow: '0 8px 30px rgba(0,0,0,0.25)' }}>
          {/* app icon */}
          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#15140f', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            {window.AppMark ? <window.AppMark ink="#f6f4ef" accent="#a32a18" size={26} /> : null}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontFamily: 'system-ui, sans-serif', fontSize: 13, fontWeight: 600, color: '#000', textTransform: 'uppercase', letterSpacing: '0.02em' }}>OnWeight</span>
              <span style={{ fontFamily: 'system-ui, sans-serif', fontSize: 12, color: 'rgba(0,0,0,0.5)', flexShrink: 0 }}>now</span>
            </div>
            <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 14.5, fontWeight: 600, color: '#000', marginTop: 2 }}>Morning weigh-in</div>
            <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 14.5, lineHeight: 1.35, color: '#1c1c1c', marginTop: 1, textWrap: 'pretty' }}>Day 41 · 9 to go. Step on fasted before water or coffee — takes 10 seconds.</div>
          </div>
        </div>
      </div>
      {/* bottom affordances */}
      <div style={{ position: 'absolute', bottom: 38, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 40px' }}>
        <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M10 2 a4 4 0 0 0 -4 4 v3 l-2 3 h12 l-2 -3 v-3 a4 4 0 0 0 -4 -4Z" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round"/><path d="M8 16 a2 2 0 0 0 4 0" stroke="#fff" strokeWidth="1.6"/></svg>
        </div>
        <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><rect x="3" y="8" width="14" height="10" rx="2.5" stroke="#fff" strokeWidth="1.6"/><path d="M6.5 8 V6 a3.5 3.5 0 0 1 7 0 V8" stroke="#fff" strokeWidth="1.6"/></svg>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 9, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
        <div style={{ width: 140, height: 5, background: 'rgba(255,255,255,0.85)', borderRadius: 3 }} />
      </div>
    </CPhone>
  );
}

Object.assign(window, { ConfirmCancelFight, ConfirmCancelSub, ConfirmDeleteCamp, ConfirmChangeGoal, NotifPrompt, LockScreenPush });
