// Sync & activation screens — Activate gate, Paired status, Get/Enter pair-code.
// All designed to live inside the iPhone artboard.

// ─── 1. Activate (first launch, before onboarding) ───────────

function ActivateScreen({ filled = false }) {
  // Show the input either empty or with sample chars filled in for the demo.
  const code = filled ? ['A4F2', 'B7K9', 'Q3X1'] : ['', '', ''];
  return (
    <div style={{
      background: W.bg, minHeight: 874, position: 'relative',
      paddingTop: 56,
    }}>
      <PhoneStatusBarOverlay/>

      {/* Top mark */}
      <div style={{ padding: '32px 22px 0', textAlign: 'center' }}>
        <div style={{
          width: 56, height: 56, borderRadius: 999, margin: '0 auto',
          background: W.cardSoft, border: `0.5px solid ${W.line}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="rings" size={24} color={W.clay} strokeWidth={1.4}/>
        </div>
        <div style={{
          fontFamily: FONT_UI, fontSize: 10, fontWeight: 600,
          letterSpacing: 2, textTransform: 'uppercase', color: W.muted,
          marginTop: 18,
        }}>WeddingOS</div>
      </div>

      {/* Hero */}
      <div style={{ padding: '32px 22px 0', textAlign: 'center' }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 38, fontWeight: 500,
          color: W.ink, letterSpacing: -0.4, lineHeight: 1,
        }}>
          Welcome.
        </div>
        <div style={{
          fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 18,
          color: W.ink2, marginTop: 12,
        }}>
          Let's activate your planner.
        </div>
        <div style={{
          fontFamily: FONT_UI, fontSize: 13.5, color: W.muted,
          marginTop: 16, lineHeight: 1.55, padding: '0 18px',
        }}>
          Enter the access code from your Etsy delivery.
          This becomes your private key — keep it somewhere safe.
        </div>
      </div>

      {/* Code input */}
      <div style={{ padding: '36px 22px 0' }}>
        <div style={{
          fontFamily: FONT_UI, fontSize: 10, fontWeight: 600,
          letterSpacing: 1.8, textTransform: 'uppercase', color: W.muted,
          textAlign: 'center', marginBottom: 14,
        }}>Access code</div>

        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <CodeChip text="WO" muted/>
          <span style={{ color: W.faint, fontFamily: FONT_MONO, fontSize: 16 }}>–</span>
          {code.map((seg, i) => (
            <React.Fragment key={i}>
              <CodeChip text={seg} placeholder="····"/>
              {i < code.length - 1 && (
                <span style={{ color: W.faint, fontFamily: FONT_MONO, fontSize: 16 }}>–</span>
              )}
            </React.Fragment>
          ))}
        </div>

        {/* Activate button */}
        <button style={{
          marginTop: 28, width: '100%', padding: '16px 0',
          background: filled ? W.ink : W.cardSoft,
          color: filled ? W.bg : W.faint,
          border: filled ? 'none' : `0.5px solid ${W.line}`,
          borderRadius: 999, cursor: 'pointer',
          fontFamily: FONT_UI, fontSize: 14, fontWeight: 500, letterSpacing: 0.3,
          transition: 'all 200ms ease',
        }}>
          {filled ? 'Activate' : 'Enter code to continue'}
        </button>

        {/* Help row */}
        <div style={{
          marginTop: 22, textAlign: 'center',
          fontFamily: FONT_UI, fontSize: 12, color: W.muted,
        }}>
          Can't find your code?
          <span style={{ color: W.clay, marginLeft: 6 }}>Check the Etsy receipt PDF</span>
        </div>
      </div>

      {/* Bottom reassurance */}
      <div style={{
        position: 'absolute', bottom: 36, left: 22, right: 22,
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 13,
          color: W.muted, lineHeight: 1.5,
        }}>
          One purchase. Up to five devices.<br/>
          No accounts, no email, no tracking.
        </div>
      </div>
    </div>
  );
}

function CodeChip({ text, placeholder, muted }) {
  const isEmpty = !text;
  return (
    <div style={{
      minWidth: 60, height: 44, padding: '0 10px',
      borderRadius: 10,
      background: muted ? 'transparent' : W.card,
      border: `0.5px solid ${muted ? 'transparent' : W.line}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: FONT_MONO, fontSize: 16, fontWeight: 500,
      letterSpacing: 2,
      color: isEmpty ? W.faint : (muted ? W.muted : W.ink),
    }}>
      {text || placeholder}
    </div>
  );
}

// ─── 2. Paired status (in-app Sync settings) ─────────────────

function SyncStatusScreen({ onBack }) {
  // Live values from localStorage (set by sync-bridge on activation).
  const license = (typeof localStorage !== 'undefined'
    && localStorage.getItem('weddingos.license')) || '';
  // Mask: show first segment + bullets for the rest.
  const maskedLicense = license
    ? license.split('-').map((s, i) => i < 2 ? s : '····').join('–')
    : 'WO–····–····–····';

  return (
    <div style={{ background: W.bg, paddingBottom: 28, minHeight: 874 }}>
      <div style={{ paddingTop: 56 }}/>

      {/* Back row */}
      <div style={{
        padding: '4px 22px 12px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={onBack} style={{
          background: W.card, border: `0.5px solid ${W.line}`,
          width: 36, height: 36, borderRadius: 999, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 0,
        }}>
          <Icon name="chevronL" size={14} color={W.ink2}/>
        </button>
        <div style={{
          fontFamily: FONT_UI, fontSize: 11, fontWeight: 600,
          letterSpacing: 1.6, textTransform: 'uppercase', color: W.muted,
        }}>Sync &amp; devices</div>
        <div style={{ width: 36 }}/>
      </div>

      {/* Hero: synced status */}
      <div style={{ padding: '12px 22px 24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 8, height: 8, borderRadius: 999, background: W.green,
            boxShadow: `0 0 0 4px ${W.green}22`,
          }}/>
          <span style={{
            fontFamily: FONT_UI, fontSize: 11, fontWeight: 600,
            letterSpacing: 1.4, textTransform: 'uppercase', color: W.green,
          }}>Synced</span>
        </div>
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 32, fontWeight: 500,
          color: W.ink, marginTop: 10, letterSpacing: -0.3, lineHeight: 1.1,
        }}>
          Your plan is <span style={{ fontStyle: 'italic' }}>backed up.</span>
        </div>
        <div style={{
          fontFamily: FONT_UI, fontSize: 13, color: W.muted, marginTop: 6,
        }}>
          Edits auto-sync within a few seconds. Pair another device to plan from anywhere.
        </div>
      </div>

      {/* License card */}
      <div style={{ padding: '0 16px 18px' }}>
        <Card style={{ padding: 18 }}>
          <div style={{
            fontFamily: FONT_UI, fontSize: 10, fontWeight: 600,
            letterSpacing: 1.6, textTransform: 'uppercase', color: W.muted,
          }}>Your access code</div>
          <div style={{
            fontFamily: FONT_MONO, fontSize: 17, color: W.ink, marginTop: 10,
            letterSpacing: 2,
          }}>{maskedLicense}</div>
          <div style={{
            fontFamily: FONT_UI, fontSize: 12, color: W.muted, marginTop: 8,
            lineHeight: 1.5,
          }}>
            Tap to reveal. Keep this somewhere safe — it's your recovery key.
          </div>
        </Card>
      </div>

      {/* Devices */}
      <SectionTitle eyebrow="Paired" title="Your devices"/>
      <div style={{ padding: '0 16px 18px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <DeviceRow icon="home" name="This device" meta="Synced just now" current/>
      </div>

      {/* Pair another device */}
      <div style={{ padding: '6px 16px 18px' }}>
        <button style={{
          width: '100%', padding: '14px 0',
          background: W.ink, color: W.bg, border: 'none', borderRadius: 999,
          cursor: 'pointer', fontFamily: FONT_UI, fontSize: 14, fontWeight: 500,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Icon name="plus" size={15} color={W.bg} strokeWidth={1.6}/>
          Pair another device
        </button>
      </div>

      {/* Stats */}
      <div style={{ padding: '12px 16px 26px' }}>
        <Card style={{ padding: 18 }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          }}>
            {[
              ['Devices', '2 / 5'],
              ['Backup size', '8.4 KB'],
              ['Region', 'US-West'],
            ].map(([k, v], i) => (
              <div key={k} style={{
                borderRight: i < 2 ? `0.5px solid ${W.line}` : 'none',
                paddingLeft: i === 0 ? 0 : 14,
                paddingRight: i === 2 ? 0 : 14,
              }}>
                <div style={{
                  fontFamily: FONT_UI, fontSize: 9.5, fontWeight: 600,
                  letterSpacing: 1.4, color: W.muted, textTransform: 'uppercase',
                }}>{k}</div>
                <div style={{
                  fontFamily: FONT_DISPLAY, fontSize: 20, color: W.ink,
                  marginTop: 3, letterSpacing: -0.2,
                }}>{v}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Footer link */}
      <div style={{
        padding: '0 22px',
        fontFamily: FONT_UI, fontSize: 12, color: W.muted,
        textAlign: 'center', lineHeight: 1.6,
      }}>
        Stored privately on Cloudflare ·
        <span style={{ color: W.clay, marginLeft: 4 }}>Export backup</span>
      </div>
    </div>
  );
}

function DeviceRow({ icon, name, meta, current }) {
  return (
    <Card style={{
      padding: 14, display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 999, background: W.cardSoft,
        border: `0.5px solid ${W.lineSoft}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <Icon name={icon} size={16} color={W.ink2} strokeWidth={1.4}/>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: FONT_UI, fontSize: 14, fontWeight: 500, color: W.ink,
        }}>{name}</div>
        <div style={{
          fontFamily: FONT_UI, fontSize: 11.5, color: W.muted, marginTop: 2,
        }}>{meta}</div>
      </div>
      {current && (
        <Pill tone="sage">This device</Pill>
      )}
    </Card>
  );
}

// ─── 3. Get pairing code (showing the 6-digit code) ──────────

function GetPairCodeScreen({ onBack }) {
  return (
    <div style={{ background: W.bg, paddingBottom: 28, minHeight: 874 }}>
      <div style={{ paddingTop: 56 }}/>

      {/* Back row */}
      <div style={{
        padding: '4px 22px 12px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={onBack} style={{
          background: W.card, border: `0.5px solid ${W.line}`,
          width: 36, height: 36, borderRadius: 999, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 0,
        }}>
          <Icon name="chevronL" size={14} color={W.ink2}/>
        </button>
        <div style={{
          fontFamily: FONT_UI, fontSize: 11, fontWeight: 600,
          letterSpacing: 1.6, textTransform: 'uppercase', color: W.muted,
        }}>Pair a device</div>
        <div style={{ width: 36 }}/>
      </div>

      {/* Eyebrow */}
      <div style={{ padding: '24px 22px 0', textAlign: 'center' }}>
        <div style={{
          fontFamily: FONT_UI, fontSize: 10, fontWeight: 600,
          letterSpacing: 2, textTransform: 'uppercase', color: W.muted,
        }}>Step 1 of 2</div>
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 26, fontWeight: 500,
          color: W.ink, marginTop: 10, letterSpacing: -0.2, lineHeight: 1.15,
        }}>
          On your other device,<br/>
          <span style={{ fontStyle: 'italic' }}>enter this code.</span>
        </div>
      </div>

      {/* Big code */}
      <div style={{ padding: '38px 22px 0' }}>
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 10,
        }}>
          {['8','4','7','2','9','1'].map((d, i) => (
            <div key={i} style={{
              width: 44, height: 60, borderRadius: 10,
              background: W.card, border: `0.5px solid ${W.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONT_DISPLAY, fontSize: 36, fontWeight: 500, color: W.ink,
              boxShadow: '0 1px 2px rgba(60,40,20,0.03), 0 8px 18px -10px rgba(60,40,20,0.1)',
            }}>{d}</div>
          ))}
        </div>

        {/* Timer */}
        <div style={{
          marginTop: 22, textAlign: 'center',
          fontFamily: FONT_UI, fontSize: 12, color: W.muted, letterSpacing: 0.3,
        }}>
          Expires in <span style={{
            fontFamily: FONT_MONO, color: W.clay, fontWeight: 500,
          }}>9:47</span>
        </div>

        {/* Instructions */}
        <div style={{
          marginTop: 36, padding: '20px 18px',
          background: W.cardSoft, borderRadius: 14,
          border: `0.5px solid ${W.lineSoft}`,
        }}>
          <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 14,
          }}>
            <StepDot n={1}/>
            <div style={{
              fontFamily: FONT_UI, fontSize: 13, color: W.ink, lineHeight: 1.5,
            }}>
              Open <strong>WeddingOS</strong> on your other device
            </div>
          </div>
          <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 14,
          }}>
            <StepDot n={2}/>
            <div style={{
              fontFamily: FONT_UI, fontSize: 13, color: W.ink, lineHeight: 1.5,
            }}>
              On the welcome screen, tap <strong>Already have a wedding?</strong>
            </div>
          </div>
          <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 12,
          }}>
            <StepDot n={3}/>
            <div style={{
              fontFamily: FONT_UI, fontSize: 13, color: W.ink, lineHeight: 1.5,
            }}>
              Enter the code above. Your planning syncs automatically.
            </div>
          </div>
        </div>
      </div>

      {/* Bottom note */}
      <div style={{
        position: 'absolute', bottom: 36, left: 22, right: 22,
        textAlign: 'center',
        fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 13,
        color: W.muted, lineHeight: 1.5,
      }}>
        Code is single-use and expires in 10 minutes.
      </div>
    </div>
  );
}

function StepDot({ n }) {
  return (
    <div style={{
      width: 22, height: 22, borderRadius: 999, background: W.ink, color: W.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: FONT_UI, fontSize: 11, fontWeight: 600, flexShrink: 0,
    }}>{n}</div>
  );
}

// ─── 4. Enter pairing code (on second device) ────────────────

function EnterPairCodeScreen({ onBack }) {
  const code = ['8','4','7','2','9',''];
  return (
    <div style={{ background: W.bg, paddingBottom: 28, minHeight: 874 }}>
      <div style={{ paddingTop: 56 }}/>

      {/* Back row */}
      <div style={{
        padding: '4px 22px 12px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={onBack} style={{
          background: W.card, border: `0.5px solid ${W.line}`,
          width: 36, height: 36, borderRadius: 999, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 0,
        }}>
          <Icon name="chevronL" size={14} color={W.ink2}/>
        </button>
        <div style={{
          fontFamily: FONT_UI, fontSize: 11, fontWeight: 600,
          letterSpacing: 1.6, textTransform: 'uppercase', color: W.muted,
        }}>Join your wedding</div>
        <div style={{ width: 36 }}/>
      </div>

      {/* Hero */}
      <div style={{ padding: '32px 22px 0', textAlign: 'center' }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 30, fontWeight: 500,
          color: W.ink, letterSpacing: -0.3, lineHeight: 1.1,
        }}>
          Enter the 6-digit code<br/>
          <span style={{ fontStyle: 'italic', color: W.ink2 }}>from your other device</span>
        </div>
      </div>

      {/* Code input */}
      <div style={{ padding: '38px 22px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10 }}>
          {code.map((d, i) => {
            const isActive = !d && i === code.findIndex(x => !x);
            return (
              <div key={i} style={{
                width: 44, height: 60, borderRadius: 10,
                background: W.card,
                border: `${isActive ? 1.5 : 0.5}px solid ${isActive ? W.ink : W.line}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: FONT_DISPLAY, fontSize: 32, fontWeight: 500, color: W.ink,
                position: 'relative',
              }}>
                {d}
                {isActive && (
                  <div style={{
                    position: 'absolute', width: 2, height: 28,
                    background: W.ink, animation: 'wedos-cursor 1s steps(2) infinite',
                  }}/>
                )}
              </div>
            );
          })}
        </div>

        {/* On-screen number keys hint */}
        <div style={{
          marginTop: 26, textAlign: 'center',
          fontFamily: FONT_UI, fontSize: 12, color: W.muted,
        }}>
          Codes expire 10 minutes after creation
        </div>
      </div>

      {/* iOS-style number pad */}
      <div style={{
        position: 'absolute', bottom: 24, left: 0, right: 0,
        padding: '0 24px',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
        }}>
          {[1,2,3,4,5,6,7,8,9,'',0,'⌫'].map((k, i) => (
            <button key={i} style={{
              padding: '14px 0',
              background: k === '' ? 'transparent' : W.card,
              border: k === '' ? 'none' : `0.5px solid ${W.line}`,
              borderRadius: 14, cursor: k === '' ? 'default' : 'pointer',
              fontFamily: FONT_DISPLAY, fontSize: 22, color: W.ink,
            }} disabled={k === ''}>{k}</button>
          ))}
        </div>
      </div>

      <style>{`@keyframes wedos-cursor { 50% { opacity: 0 } }`}</style>
    </div>
  );
}

Object.assign(window, {
  ActivateScreen, SyncStatusScreen, GetPairCodeScreen, EnterPairCodeScreen,
});