// fc-errors.jsx, error & system states — the unhappy paths every real app needs
// but mockups skip. Same "balanced" system + shared kit. Calm, specific, always
// with a way forward; never a dead end or a raw error code.
//   SysOffline       · Today while offline — logging still works, sync deferred
//   SaveWeightError  · a weigh-in that failed to save (queued + retry)
//   SysSyncFailed    · server unreachable — sync error sheet over the dashboard
//   PaywallError     · purchase declined + restore purchases
//   NotifDenied      · OS notification permission denied — re-enable path
//   AccountCollision · sign-up with an email that already has an account

const { Phone: XPhone, StatusBar: XStatusBar, HomeIndicator: XHome, LargeTitle: XLargeTitle,
        TabBar: XTabBar, GearButton: XGear, DashBanner: XDashBanner, Eyebrow: XEyebrow,
        CoachTip: XCoachTip } = window;

const XB = '#a32a18';

// ── shared error primitives ───────────────────────────────────────────────────
function CTA({ label, kind = 'ink' }) {
  const styles = {
    ink:     { background: 'var(--ink)', color: 'var(--paper)', border: 'none' },
    outline: { background: 'transparent', color: 'var(--ink)', border: '1px solid var(--rule-2)' },
  }[kind];
  return <button style={{ width: '100%', minHeight: 54, borderRadius: 'var(--radius-ctl)', fontFamily: 'var(--display)', fontSize: 14, letterSpacing: '0.13em', fontWeight: 600, ...styles }}>{label}</button>;
}
function TextLink({ children, accent = true }) {
  return <button style={{ fontFamily: 'var(--sans)', fontSize: 14.5, color: accent ? 'var(--accent)' : 'var(--ink-2)', fontWeight: 600, minHeight: 32 }}>{children}</button>;
}

// Inline alert card — tone-tinted, hairline, icon + copy. tone: 'amber' | 'red'.
function AlertCard({ tone = 'amber', icon, title, body, children }) {
  const tc = tone === 'red' ? 'var(--t-red)' : 'var(--t-amber)';
  const soft = tone === 'red' ? 'var(--t-red-soft)' : 'var(--t-amber-soft)';
  const edge = `color-mix(in srgb, ${tc} 26%, transparent)`;
  return (
    <div style={{ background: soft, border: `1px solid ${edge}`, borderRadius: 'var(--radius)', padding: '17px 19px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 22, height: 22, flexShrink: 0, color: tc, display: 'flex' }}>{icon}</span>
        <span style={{ fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 700, color: 'var(--ink)' }}>{title}</span>
      </div>
      {body && <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 9, textWrap: 'pretty' }}>{body}</div>}
      {children}
    </div>
  );
}

// Centred full-screen problem layout (icon, title, body, CTAs).
function ProblemScreen({ styleKey = 'balanced', label, navTitle, tone = 'amber', icon, eyebrow, title, body, primary, secondary, footer, tab = null }) {
  const tc = tone === 'red' ? 'var(--t-red)' : tone === 'amber' ? 'var(--t-amber)' : 'var(--accent)';
  const soft = tone === 'red' ? 'var(--t-red-soft)' : tone === 'amber' ? 'var(--t-amber-soft)' : 'var(--accent-soft)';
  return (
    <XPhone styleKey={styleKey} label={label}>
      <XStatusBar />
      {navTitle && (
        <div style={{ height: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--display)', fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink-2)', flexShrink: 0 }}>{navTitle}</div>
      )}
      <div style={{ flex: 1, padding: '10px 26px 22px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
          <div style={{ width: 80, height: 80, borderRadius: '50%', background: soft, display: 'flex', alignItems: 'center', justifyContent: 'center', color: tc }}>{icon}</div>
          {eyebrow && <div style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600, color: tc, marginTop: 22 }}>{eyebrow}</div>}
          <div style={{ fontFamily: 'var(--sans)', fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink)', marginTop: eyebrow ? 10 : 22, textWrap: 'balance' }}>{title}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 11, maxWidth: '30ch', textWrap: 'pretty' }}>{body}</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          {primary && <CTA label={primary} />}
          {secondary && <CTA label={secondary} kind="outline" />}
          {footer && <div style={{ textAlign: 'center', marginTop: 4 }}>{footer}</div>}
        </div>
      </div>
      {tab ? <XTabBar active={tab} /> : null}
      <XHome />
    </XPhone>
  );
}

// ── icons ──────────────────────────────────────────────────────────────────────
const IcoCloudOff = <svg width="40" height="40" viewBox="0 0 44 44" fill="none"><path d="M13 30 H30 a6 6 0 0 0 1-11.9 A8 8 0 0 0 16 16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><line x1="9" y1="9" x2="35" y2="35" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>;
const IcoCloudArrow = <svg width="40" height="40" viewBox="0 0 44 44" fill="none"><path d="M13 31 H31 a6 6 0 0 0 0.5-12 A8.5 8.5 0 0 0 14 17 a6.5 6.5 0 0 0 -1 14Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M22 30 V18 M18 22 L22 18 L26 22" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
const IcoCardX = <svg width="40" height="40" viewBox="0 0 44 44" fill="none"><rect x="5" y="11" width="34" height="22" rx="3" stroke="currentColor" strokeWidth="1.8"/><line x1="5" y1="18" x2="39" y2="18" stroke="currentColor" strokeWidth="1.8"/><path d="M27 24 L33 30 M33 24 L27 30" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>;
const IcoBellOff = <svg width="38" height="38" viewBox="0 0 44 44" fill="none"><path d="M13 30 V21 a9 9 0 0 1 14-7.5 M31 21 v9 M9 30 H35 M18.5 34 a3.5 3.5 0 0 0 7 0" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><line x1="9" y1="9" x2="35" y2="35" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>;
const IcoTri = <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3 L22 20 H2 Z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/><line x1="12" y1="9" x2="12" y2="14" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/><circle cx="12" cy="17" r="1" fill="currentColor"/></svg>;
const IcoUserX = <svg width="40" height="40" viewBox="0 0 44 44" fill="none"><circle cx="19" cy="15" r="6.5" stroke="currentColor" strokeWidth="1.8"/><path d="M8 35 a11 11 0 0 1 20-6.4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/><path d="M30 28 L38 36 M38 28 L30 36" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>;

// ── TODAY · OFFLINE ────────────────────────────────────────────────────────────
function SysOffline({ styleKey = 'balanced' }) {
  return (
    <XPhone styleKey={styleKey} label="Today · Offline">
      <XStatusBar />
      <XDashBanner tone="amber" label="OFFLINE" meta="CHANGES SAVED HERE"
        icon={<svg width="13" height="13" viewBox="0 0 18 18" fill="none"><path d="M5 13 H12 a3 3 0 0 0 0.4-6 A4 4 0 0 0 6 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/><line x1="3" y1="3" x2="15" y2="15" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>} />
      <XLargeTitle title="Today" trailing={<XGear />} />
      <div style={{ flex: 1, padding: '2px 20px 24px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 4 }}>
            <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 104, lineHeight: 0.8, letterSpacing: '-0.035em', color: 'var(--ink)' }}>76.0</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.16em', color: 'var(--ink-3)', fontWeight: 600 }}>KG</span>
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--t-amber)', fontWeight: 700, marginTop: 14 }}>Logged 7:02 AM · waiting to sync</div>
        </div>

        <AlertCard tone="amber" icon={IcoTri} title="You’re offline" body="No connection right now, but you can keep logging. Today’s weigh-in is saved on this device and syncs automatically the moment you’re back online.">
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 13, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--t-amber)' }} />1 weigh-in queued · last synced 2h ago
          </div>
        </AlertCard>

        <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '20px', opacity: 0.6 }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>Pace</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-3)', marginTop: 8, textWrap: 'pretty' }}>Your trend updates once today’s log syncs.</div>
        </div>
      </div>
      <XTabBar active="home" /><XHome />
    </XPhone>
  );
}

// ── SAVE WEIGHT FAILED ─────────────────────────────────────────────────────────
function SaveWeightError({ styleKey = 'balanced' }) {
  return (
    <XPhone styleKey={styleKey} label="Log · Save failed">
      <XStatusBar />
      <div style={{ height: 50, padding: '0 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
        <button style={{ fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--ink-2)', fontWeight: 500, minHeight: 44 }}>Cancel</button>
        <span style={{ fontFamily: 'var(--display)', fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink-2)' }}>Log weight</span>
        <span style={{ width: 44 }} />
      </div>
      <div style={{ flex: 1, padding: '8px 26px 22px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 10, marginTop: 18 }}>
          <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 76, letterSpacing: '-0.03em', color: 'var(--ink)' }}>76.0</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 15, letterSpacing: '0.12em', color: 'var(--ink-3)', fontWeight: 600 }}>KG</span>
        </div>
        <div style={{ textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginTop: 10 }}>Today · 7:02 AM</div>

        <div style={{ marginTop: 30 }}>
          <AlertCard tone="red" icon={IcoTri} title="Couldn’t save your weigh-in" body="Something went wrong on our end — your number wasn’t lost. It’s held on this device and we’ll keep trying. You can also retry now.">
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 13, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--t-red)' }} />Saved locally · retrying automatically
            </div>
          </AlertCard>
        </div>

        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          <CTA label="RETRY NOW" />
          <CTA label="KEEP & CLOSE" kind="outline" />
        </div>
      </div>
      <XHome />
    </XPhone>
  );
}

// ── SYNC FAILED ──────────────────────────────────────────────────────────────────
function SysSyncFailed({ styleKey = 'balanced' }) {
  return (
    <ProblemScreen styleKey={styleKey} label="Sync failed" navTitle="Sync" tone="amber"
      icon={IcoCloudArrow} eyebrow="Couldn’t reach OnWeight"
      title="We can’t sync right now."
      body="Your connection looks fine, but our servers aren’t responding. Nothing you logged is lost — it’s safe on this device and will sync as soon as we’re back."
      primary="TRY AGAIN"
      secondary="CONTINUE OFFLINE"
      footer={<TextLink>Check service status</TextLink>}
    />
  );
}

// ── PAYWALL · PURCHASE FAILED ──────────────────────────────────────────────────
function PaywallError({ styleKey = 'balanced' }) {
  return (
    <XPhone styleKey={styleKey} label="Paywall · Purchase failed">
      <XStatusBar />
      <div style={{ height: 50, padding: '0 16px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexShrink: 0 }}>
        <button aria-label="Close" style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M1 1 L13 13 M13 1 L1 13" stroke="var(--ink-2)" strokeWidth="1.6" strokeLinecap="round"/></svg>
        </button>
      </div>
      <div style={{ flex: 1, padding: '4px 26px 22px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--t-red-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--t-red)' }}>{IcoCardX}</div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 25, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink)', marginTop: 24, textWrap: 'balance' }}>Your purchase didn’t go through.</div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 11, textWrap: 'pretty' }}>The payment was declined before anything was charged. Your camp plan is built and waiting — try again, or restore a purchase you’ve already made.</div>

        <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '16px 18px', marginTop: 22, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 600, color: 'var(--ink)' }}>OnWeight · Annual</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', marginTop: 3 }}>Billed yearly · cancel anytime</div>
          </div>
          <div style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 22, color: 'var(--ink)' }}>$59<span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)' }}>/yr</span></div>
        </div>

        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          <CTA label="TRY AGAIN" />
          <CTA label="CHANGE PAYMENT METHOD" kind="outline" />
          <div style={{ textAlign: 'center', marginTop: 2 }}><TextLink>Restore purchases</TextLink></div>
        </div>
      </div>
      <XHome />
    </XPhone>
  );
}

// ── NOTIFICATIONS · PERMISSION DENIED ──────────────────────────────────────────
function NotifDenied({ styleKey = 'balanced' }) {
  return (
    <ProblemScreen styleKey={styleKey} label="Notifications off" navTitle="Notifications" tone="amber"
      icon={IcoBellOff} eyebrow="Notifications are off"
      title="Your morning reminder can’t reach you."
      body="OnWeight doesn’t have permission to send notifications, so your daily weigh-in nudge is switched off. A consistent morning ping is the single biggest driver of an accurate trend."
      primary="OPEN SETTINGS"
      secondary="I’LL REMEMBER MYSELF"
      footer={<span style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', lineHeight: 1.5 }}>Settings → OnWeight → Notifications → Allow</span>}
    />
  );
}

// ── SIGN-UP · EMAIL ALREADY EXISTS ──────────────────────────────────────────────
function AccountCollision({ styleKey = 'balanced' }) {
  return (
    <XPhone styleKey={styleKey} label="Sign up · Email exists">
      <XStatusBar />
      <div style={{ height: 50, padding: '0 14px', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
        <button aria-label="Back" style={{ width: 44, height: 44, borderRadius: 0, marginLeft: -8, background: 'none', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="9" height="16" viewBox="0 0 11 18" fill="none"><path d="M9 1 L2 9 L9 17" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ flex: 1, textAlign: 'center', fontFamily: 'var(--display)', fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink-2)' }}>Create account</div>
        <span style={{ width: 38 }} />
      </div>
      <div style={{ flex: 1, padding: '8px 26px 22px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', textWrap: 'balance' }}>Create your account</div>

        <div style={{ marginTop: 24 }}>
          <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 600, marginBottom: 8 }}>Email</div>
          <div style={{ background: 'var(--paper)', border: '1.5px solid var(--accent)', borderRadius: 'var(--radius-ctl)', minHeight: 52, display: 'flex', alignItems: 'center', padding: '0 16px', fontFamily: 'var(--sans)', fontSize: 16, color: 'var(--ink)' }}>alex.mercer@gmail.com</div>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 9 }}>
            <svg width="15" height="15" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 1 }}><circle cx="8" cy="8" r="7" stroke="var(--accent)" strokeWidth="1.4"/><line x1="8" y1="4.5" x2="8" y2="9" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round"/><circle cx="8" cy="11.5" r="0.9" fill="var(--accent)"/></svg>
            <span style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--accent)', lineHeight: 1.45, fontWeight: 500 }}>This email already has an OnWeight account.</span>
          </div>
        </div>

        <div style={{ marginTop: 22 }}>
          <AlertCard tone="amber" icon={IcoTri} title="Already signed up?" body="Looks like you’ve been here before. Log in to pick your camp back up, or reset your password if you’ve forgotten it.">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginTop: 15 }}>
              <CTA label="LOG IN INSTEAD" />
              <div style={{ textAlign: 'center' }}><TextLink>Reset your password</TextLink></div>
            </div>
          </AlertCard>
        </div>

        <div style={{ flex: 1 }} />
        <div style={{ textAlign: 'center', fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-3)' }}>Use a different email to start fresh.</div>
      </div>
      <XHome />
    </XPhone>
  );
}

Object.assign(window, { SysOffline, SaveWeightError, SysSyncFailed, PaywallError, NotifDenied, AccountCollision });