// Onboarding flow + Push notification preview

function Onboarding({ onFinish, onOpenWeekly }) {
  const t = window.t;
  const [step, setStep] = React.useState(0);
  const [name, setName] = React.useState('Max');
  const [steam, setSteam] = React.useState(false);
  const [epic, setEpic] = React.useState(false);
  const [selectedGroups, setSelectedGroups] = React.useState(['squad']);

  const stepTotal = 4;
  const next = () => setStep(s => Math.min(stepTotal, s + 1));
  const prev = () => setStep(s => Math.max(0, s - 1));

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 200,
      background: 'var(--bg-deep)',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {/* aura background */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at 50% -10%, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 50%)',
      }} />

      {/* top bar */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '60px 16px 0',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        {step > 0 && (
          <button onClick={prev} style={{
            appearance: 'none', cursor: 'pointer',
            width: 32, height: 32, borderRadius: 999,
            background: 'var(--surface)', border: '1px solid var(--border)',
            color: 'var(--text)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M15 6l-6 6 6 6" />
            </svg>
          </button>
        )}
        {/* step indicator */}
        <div style={{ flex: 1, display: 'flex', gap: 4 }}>
          {Array.from({ length: stepTotal }).map((_, i) => (
            <div key={i} style={{
              flex: 1, height: 3, borderRadius: 999,
              background: i <= step ? 'var(--accent)' : 'var(--surface-2)',
              transition: 'background 200ms ease',
            }} />
          ))}
        </div>
        <button onClick={onFinish} style={{
          appearance: 'none', cursor: 'pointer',
          background: 'transparent', border: 0,
          color: 'var(--muted)', fontFamily: 'Space Grotesk, system-ui',
          fontSize: 13, fontWeight: 500,
        }}>{t('ob_skip')}</button>
      </div>

      {/* content */}
      <div style={{
        position: 'relative', zIndex: 2,
        flex: 1, padding: '40px 24px 24px',
        display: 'flex', flexDirection: 'column',
        overflowY: 'auto',
      }}>
        {step === 0 && <OBWelcome />}
        {step === 1 && <OBName name={name} setName={setName} />}
        {step === 2 && <OBLink steam={steam} epic={epic} setSteam={setSteam} setEpic={setEpic} />}
        {step === 3 && <OBGroup selected={selectedGroups} setSelected={setSelectedGroups} />}
      </div>

      {/* footer */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '12px 16px 28px',
      }}>
        <Button full onClick={step === stepTotal - 1 ? onFinish : next}>
          {step === 0 ? t('ob_start')
            : step === stepTotal - 1 ? t('ob_finish')
            : (window.__LANG || 'de') === 'en' ? 'Continue' : 'Weiter'}
        </Button>
        {step === 0 && (
          <button onClick={onFinish} style={{
            appearance: 'none', cursor: 'pointer',
            background: 'transparent', border: 0,
            color: 'var(--muted)', fontFamily: 'Space Grotesk, system-ui',
            fontSize: 13, fontWeight: 500,
            width: '100%', padding: '14px 0 0',
          }}>{t('ob_login')}</button>
        )}
      </div>
    </div>
  );
}

function OBWelcome() {
  const t = window.t;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28, alignItems: 'flex-start' }}>
      {/* abstract mark */}
      <div style={{
        width: 120, height: 120, position: 'relative',
        margin: '20px 0 12px',
      }}>
        <div style={{
          position: 'absolute', width: 80, height: 80, borderRadius: 22,
          background: 'linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, transparent))',
          top: 0, left: 0, transform: 'rotate(-8deg)',
          boxShadow: '0 12px 40px oklch(0.85 0.18 145 / 0.4)',
        }} />
        <div style={{
          position: 'absolute', width: 80, height: 80, borderRadius: 22,
          background: 'linear-gradient(135deg, var(--violet), color-mix(in oklab, var(--violet) 60%, transparent))',
          bottom: 0, right: 0, transform: 'rotate(12deg)',
          boxShadow: '0 12px 40px oklch(0.72 0.15 295 / 0.3)',
        }} />
        <div style={{
          position: 'absolute', width: 60, height: 60, borderRadius: 18,
          background: 'var(--bg-deep)',
          border: '2px solid var(--accent)',
          top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(45deg)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{
            fontFamily: 'Space Grotesk, system-ui', fontSize: 30, fontWeight: 800,
            color: 'var(--accent)', transform: 'rotate(-45deg)',
          }}>Z</span>
        </div>
      </div>

      <h1 style={{
        fontFamily: 'Space Grotesk, system-ui', fontSize: 38, fontWeight: 700,
        color: 'var(--text)', letterSpacing: -1.5, lineHeight: 1.05, margin: 0,
      }}>{t('ob_welcome_title')}</h1>
      <p style={{
        fontFamily: 'Space Grotesk, system-ui', fontSize: 16, lineHeight: 1.5,
        color: 'var(--muted)', margin: 0, maxWidth: 320,
      }}>{t('ob_welcome_desc')}</p>

      {/* feature bullets */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 8 }}>
        <OBBullet icon="◐" text={(window.__LANG || 'de') === 'en' ? 'Set times once — match automatically' : 'Einmal Zeiten setzen – automatisch matchen'} />
        <OBBullet icon="◉" text={(window.__LANG || 'de') === 'en' ? 'Multiple groups, one calendar' : 'Mehrere Gruppen, ein Kalender'} />
        <OBBullet icon="▲" text={(window.__LANG || 'de') === 'en' ? 'Steam + Epic libraries linked' : 'Steam + Epic Bibliotheken verbunden'} />
      </div>
    </div>
  );
}

function OBBullet({ icon, text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{
        width: 32, height: 32, borderRadius: 10,
        background: 'color-mix(in oklab, var(--accent) 14%, transparent)',
        color: 'var(--accent)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14,
      }}>{icon}</div>
      <span style={{
        fontFamily: 'Space Grotesk, system-ui', fontSize: 14,
        color: 'var(--text)',
      }}>{text}</span>
    </div>
  );
}

function OBName({ name, setName }) {
  const t = window.t;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <StepHeader stepNum={1} title={t('ob_name_title')} desc={t('ob_name_desc')} />
      <div style={{ marginTop: 8 }}>
        <input
          value={name} onChange={e => setName(e.target.value)}
          placeholder={t('ob_name_placeholder')}
          style={{
            width: '100%', boxSizing: 'border-box',
            background: 'var(--surface)',
            border: '1px solid var(--border)',
            borderRadius: 14, padding: '16px 18px',
            color: 'var(--text)', outline: 'none',
            fontFamily: 'Space Grotesk, system-ui', fontSize: 18, fontWeight: 500,
          }}
        />
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, marginTop: 14,
          fontFamily: 'Space Grotesk, system-ui', fontSize: 13,
          color: 'var(--muted)',
        }}>
          <Avatar id="me" size={32} />
          <span>{(window.__LANG || 'de') === 'en' ? `Preview: hey, ${name || '…'}` : `Vorschau: Servus, ${name || '…'}`}</span>
        </div>
      </div>
    </div>
  );
}

function OBLink({ steam, epic, setSteam, setEpic }) {
  const t = window.t;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <StepHeader stepNum={2} title={t('ob_link_title')} desc={t('ob_link_desc')} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8 }}>
        <LinkRow connected={steam} onClick={() => setSteam(s => !s)}
          label={t('ob_link_steam')} sub="84 games · Library + wishlist"
          accent="#66c0f4" mark="S" />
        <LinkRow connected={epic} onClick={() => setEpic(s => !s)}
          label={t('ob_link_epic')} sub="23 games · Free + owned"
          accent="#ffffff" mark="E" />
      </div>
    </div>
  );
}

function LinkRow({ connected, onClick, label, sub, accent, mark }) {
  const t = window.t;
  return (
    <button onClick={onClick} style={{
      appearance: 'none', cursor: 'pointer', textAlign: 'left',
      background: connected
        ? `color-mix(in oklab, ${accent} 10%, var(--surface))`
        : 'var(--surface)',
      border: `1px solid ${connected
        ? `color-mix(in oklab, ${accent} 40%, var(--border))`
        : 'var(--border)'}`,
      borderRadius: 14, padding: 14,
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 12,
        background: `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 60%, #000))`,
        color: '#000', fontWeight: 800, fontSize: 18,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Space Grotesk, system-ui',
      }}>{mark}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'Space Grotesk, system-ui', fontSize: 15, fontWeight: 600,
          color: 'var(--text)',
        }}>{label}</div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--muted)',
          marginTop: 2,
        }}>{sub}</div>
      </div>
      <div style={{
        padding: '6px 12px', borderRadius: 999,
        background: connected ? 'var(--accent)' : 'var(--surface-2)',
        color: connected ? 'var(--bg-deep)' : 'var(--muted)',
        fontFamily: 'Space Grotesk, system-ui', fontSize: 11, fontWeight: 700,
        letterSpacing: 0.6, textTransform: 'uppercase',
      }}>
        {connected ? `✓ ${t('connected')}` : t('verbinden')}
      </div>
    </button>
  );
}

function OBGroup({ selected, setSelected }) {
  const t = window.t;
  const toggle = (id) => {
    setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <StepHeader stepNum={3} title={t('ob_group_title')} desc={t('ob_group_desc')} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
        {window.GROUPS.map(g => {
          const isOn = selected.includes(g.id);
          return (
            <button key={g.id} onClick={() => toggle(g.id)} style={{
              appearance: 'none', cursor: 'pointer', textAlign: 'left',
              padding: 14, borderRadius: 16,
              background: isOn
                ? `oklch(0.85 0.16 ${g.hue} / 0.10)`
                : 'var(--surface)',
              border: `1px solid ${isOn
                ? `oklch(0.85 0.16 ${g.hue} / 0.45)`
                : 'var(--border)'}`,
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: `oklch(0.3 0.06 ${g.hue})`,
                color: `oklch(0.88 0.16 ${g.hue})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 22,
                border: `1px solid oklch(0.85 0.16 ${g.hue} / 0.4)`,
              }}>{g.glyph}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: 'Space Grotesk, system-ui', fontSize: 15, fontWeight: 600,
                  color: 'var(--text)',
                }}>{window.groupName(g)}</div>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--muted)',
                  marginTop: 2,
                }}>{g.memberIds.length} {t('mitglieder').toLowerCase()}</div>
              </div>
              <div style={{
                width: 22, height: 22, borderRadius: 7,
                border: `1.5px solid ${isOn ? `oklch(0.85 0.16 ${g.hue})` : 'var(--border)'}`,
                background: isOn ? `oklch(0.85 0.16 ${g.hue})` : 'transparent',
                color: isOn ? 'var(--bg-deep)' : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12l5 5L20 7" />
                </svg>
              </div>
            </button>
          );
        })}
        <button style={{
          appearance: 'none', cursor: 'pointer',
          padding: 14, borderRadius: 16,
          background: 'transparent',
          border: '1px dashed var(--border)',
          color: 'var(--muted)',
          fontFamily: 'Space Grotesk, system-ui', fontSize: 13, fontWeight: 500,
        }}>{t('ob_create_group')}</button>
        <button style={{
          appearance: 'none', cursor: 'pointer',
          padding: 10, borderRadius: 12,
          background: 'transparent', border: 0,
          color: 'var(--muted)',
          fontFamily: 'Space Grotesk, system-ui', fontSize: 13, fontWeight: 500,
        }}>{t('ob_join_via_link')}</button>
      </div>
    </div>
  );
}

function StepHeader({ stepNum, title, desc }) {
  const t = window.t;
  return (
    <div>
      <div style={{
        fontFamily: 'Space Grotesk, system-ui', fontSize: 11, fontWeight: 700,
        color: 'var(--accent)', letterSpacing: 1.5, textTransform: 'uppercase',
        marginBottom: 12,
      }}>{t('ob_step', stepNum)}</div>
      <h1 style={{
        fontFamily: 'Space Grotesk, system-ui', fontSize: 30, fontWeight: 700,
        color: 'var(--text)', letterSpacing: -0.8, lineHeight: 1.1, margin: 0,
      }}>{title}</h1>
      <p style={{
        fontFamily: 'Space Grotesk, system-ui', fontSize: 14, lineHeight: 1.5,
        color: 'var(--muted)', margin: '10px 0 0',
      }}>{desc}</p>
    </div>
  );
}

// Push notification preview (lock-screen style toast)
function NotificationToast({ visible, onClose, onOpen, title, body, actions, onAction }) {
  const t = window.t;
  const notifTitle = title || t('notif_title');
  const notifBody = body || t('notif_body');
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 80,
      padding: '8px 8px 0',
      transform: visible ? 'translateY(0)' : 'translateY(-120%)',
      opacity: visible ? 1 : 0,
      transition: 'transform 360ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease',
      pointerEvents: visible ? 'auto' : 'none',
    }}>
      <button onClick={onOpen} style={{
        appearance: 'none', cursor: 'pointer', textAlign: 'left',
        width: '100%', padding: '12px 14px',
        background: 'rgba(40, 38, 55, 0.85)',
        backdropFilter: 'blur(20px) saturate(180%)',
        WebkitBackdropFilter: 'blur(20px) saturate(180%)',
        border: '1px solid rgba(255,255,255,0.1)',
        borderRadius: 18,
        display: 'flex', alignItems: 'flex-start', gap: 10,
        boxShadow: '0 12px 28px rgba(0,0,0,0.4)',
        animation: 'slideInTop 360ms cubic-bezier(.2,.8,.2,1)',
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 9, flexShrink: 0,
          background: 'linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #000))',
          color: 'var(--bg-deep)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Space Grotesk, system-ui', fontSize: 18, fontWeight: 800,
        }}>Z</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 2,
          }}>
            <span style={{
              fontFamily: 'Space Grotesk, system-ui', fontSize: 11, fontWeight: 600,
              color: 'rgba(255,255,255,0.6)', letterSpacing: 0.4,
              textTransform: 'uppercase',
            }}>{t('notif_app')}</span>
            <span onClick={(e) => { e.stopPropagation(); onClose(); }} style={{
              color: 'rgba(255,255,255,0.4)', fontSize: 14, cursor: 'pointer',
              padding: '0 4px',
            }}>×</span>
          </div>
          <div style={{
            fontFamily: 'Space Grotesk, system-ui', fontSize: 14, fontWeight: 600,
            color: '#fff', marginBottom: 3, lineHeight: 1.3,
          }}>{notifTitle}</div>
          <div style={{
            fontFamily: 'Space Grotesk, system-ui', fontSize: 13,
            color: 'rgba(255,255,255,0.7)', lineHeight: 1.3,
          }}>{notifBody}</div>
          {actions && actions.length > 0 && (
            <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
              {actions.map((a, i) => (
                <span key={i} role="button"
                  onClick={(e) => { e.stopPropagation(); onAction && onAction(a); }}
                  style={{
                    flex: 1, textAlign: 'center', cursor: 'pointer',
                    padding: '7px 10px', borderRadius: 10,
                    background: `color-mix(in oklab, ${a.color} 24%, transparent)`,
                    border: `1px solid ${a.color}`,
                    color: '#fff',
                    fontFamily: 'Space Grotesk, system-ui', fontSize: 12, fontWeight: 700,
                  }}>{a.label}</span>
              ))}
            </div>
          )}
        </div>
      </button>
    </div>
  );
}

Object.assign(window, { Onboarding, NotificationToast });