/* Profile + settings sheets + notifications */
function Toggle({ on, set }) { return <button onClick={() => set(!on)} aria-pressed={on} style={{ width: 46, height: 28, borderRadius: 14, background: on ? 'var(--red)' : 'var(--line)', position: 'relative', transition: 'background .2s', flex: 'none' }}><span style={{ position: 'absolute', top: 3, left: on ? 21 : 3, width: 22, height: 22, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,.25)', transition: 'left .25s cubic-bezier(.2,.8,.2,1)' }}></span></button>; }
function Radio({ options, value, set, labels }) { return <div style={{ display: 'grid' }}>{options.map((o, i) => <button key={o} className="press" onClick={() => set(o)} style={{ display: 'flex', alignItems: 'center', gap: 12, minHeight: 52, borderBottom: i < options.length - 1 ? '1px solid var(--line)' : 0, textAlign: 'left' }}><span style={{ flex: 1, fontSize: 14.5, fontWeight: 600 }}>{labels ? labels[i] : o}</span><span style={{ width: 22, height: 22, borderRadius: '50%', border: `2px solid ${value === o ? 'var(--red)' : '#C4BDCC'}`, display: 'grid', placeItems: 'center' }}>{value === o && <span className="pop" style={{ width: 11, height: 11, borderRadius: '50%', background: 'var(--red)' }}></span>}</span></button>)}</div>; }
function Group({ children }) { return <div style={{ margin: '0 16px 14px', padding: '0 12px', borderRadius: 16, background: 'var(--sur)', border: '1px solid var(--line)' }}>{children}</div>; }

function Profile({ onSheet, onSignOut }) {
  const { topInset, bottomInset, city, themePref, currency, notif } = useApp();
  const u = DP.USER;
  return <div className="scr" style={{ paddingBottom: bottomInset + 90 }}>
    <div style={{ position: 'relative', padding: `${topInset + 18}px 20px 22px`, background: 'linear-gradient(266deg,#3B2E4D,#E54558)', color: '#fff', borderRadius: '0 0 28px 28px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}><img src={u.avatar} alt="" style={{ width: 64, height: 64, borderRadius: '50%', objectFit: 'cover', border: '2.5px solid rgba(255,255,255,.8)' }} /><div style={{ flex: 1, minWidth: 0 }}><div style={{ fontFamily: 'var(--dp-font-display)', fontWeight: 600, fontSize: 22, letterSpacing: '-.02em' }}>{u.name}</div><div style={{ fontSize: 13, opacity: .85, marginTop: 2 }}>{u.email}</div></div><button className="press" onClick={() => onSheet('account')} style={{ height: 34, padding: '0 14px', borderRadius: 9999, background: 'rgba(255,255,255,.18)', border: '1px solid rgba(255,255,255,.35)', color: '#fff', fontSize: 13, fontWeight: 700 }}>Edit</button></div>
      <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>{[['3', 'Bookings'], ['2', 'Cities'], ['12', 'Saved']].map(([n, l]) => <div key={l} style={{ flex: 1, padding: '10px 12px', borderRadius: 14, background: 'rgba(255,255,255,.14)', backdropFilter: 'blur(6px)' }}><div style={{ fontWeight: 700, fontSize: 18 }}>{n}</div><div style={{ fontSize: 11.5, opacity: .85 }}>{l}</div></div>)}</div>
    </div>
    <div style={{ height: 18 }}></div>
    <Group><Row icon={Ico.user} label="Account info" onClick={() => onSheet('account')} /><Row icon={Ico.pin} label="Location" value={city} onClick={() => onSheet('city')} /><Row icon={Ico.coin} label="Currency" value={currency} onClick={() => onSheet('currency')} /><Row icon={Ico.moon} label="Theme" value={{ system: 'System', light: 'Light', dark: 'Dark' }[themePref]} onClick={() => onSheet('theme')} /><Row icon={Ico.bell} label="Notifications" value={notif.reminders ? 'On' : 'Off'} onClick={() => onSheet('notif')} last /></Group>
    <Group><Row icon={Ico.users} label="Invite friends" onClick={() => onSheet('invite')} /><Row icon={Ico.star} label="Rate the app" onClick={() => onSheet('rate')} /><Row icon={Ico.help} label="Help & support" onClick={() => onSheet('help')} last /></Group>
    <Group><Row icon={Ico.out} label="Sign out" onClick={onSignOut} /><Row icon={Ico.trash} label="Delete account" danger onClick={() => onSheet('delete')} last right={<span />} /></Group>
  </div>;
}

function SettingsSheets({ sheet, close, toast }) {
  const { themePref, setThemePref, currency, setCurrency, notif, setNotif, setStage } = useApp();
  const [stars, setStars] = useState(0); const [confirm, setConfirm] = useState('');
  const u = DP.USER;
  const F = ({ l, v, type }) => <div style={{ marginBottom: 12 }}><div style={{ fontSize: 12, fontWeight: 700, color: 'var(--mut)', marginBottom: 6 }}>{l}</div><Field><input defaultValue={v} type={type || 'text'} style={inputStyle} /></Field></div>;
  return <>
    <Sheet open={sheet === 'account'} onClose={close} title="Account info"><div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}><div style={{ position: 'relative' }}><img src={u.avatar} alt="" style={{ width: 84, height: 84, borderRadius: '50%', objectFit: 'cover' }} /><span style={{ position: 'absolute', right: -2, bottom: -2, width: 30, height: 30, borderRadius: '50%', background: 'var(--red)', color: '#fff', display: 'grid', placeItems: 'center', border: '2px solid var(--sur)' }}><Ico.copy size={14} /></span></div></div><F l="Full name" v={u.name} /><F l="Email" v={u.email} type="email" /><F l="Phone" v={u.phone} type="tel" /><Btn onClick={() => { close(); toast('Profile updated'); }} style={{ marginTop: 6 }}>Save Changes</Btn></Sheet>
    <Sheet open={sheet === 'currency'} onClose={close} title="Currency"><p style={{ margin: '0 0 6px', fontSize: 13, color: 'var(--mut)' }}>Prices are always charged in the event's own currency. This only changes the reference shown next to it.</p><Radio options={['EUR', 'GBP', 'DKK', 'NOK', 'CHF']} labels={['€ Euro', '£ British pound', 'DKK Danish krone', 'NOK Norwegian krone', 'CHF Swiss franc']} value={currency} set={v => { setCurrency(v); close(); }} /></Sheet>
    <Sheet open={sheet === 'theme'} onClose={close} title="Theme"><Radio options={['system', 'light', 'dark']} labels={['Follow system', 'Light', 'Dark']} value={themePref} set={v => { setThemePref(v); setTimeout(close, 250); }} /></Sheet>
    <Sheet open={sheet === 'notif'} onClose={close} title="Notifications">{[['reminders', 'Event reminders', 'The day before and 2 hours before doors'], ['city', 'New in your city', 'When an event is added near you'], ['offers', 'Insider offers', 'Early access and discount codes']].map(([k, l, s], i, a) => <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 0', borderBottom: i < a.length - 1 ? '1px solid var(--line)' : 0 }}><div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14.5 }}>{l}</div><div style={{ fontSize: 12.5, color: 'var(--mut)', marginTop: 2 }}>{s}</div></div><Toggle on={!!notif[k]} set={v => setNotif({ ...notif, [k]: v })} /></div>)}</Sheet>
    <Sheet open={sheet === 'invite'} onClose={close} title="Invite friends"><div style={{ textAlign: 'center', padding: '6px 0 14px' }}><div style={{ width: 80, height: 80, margin: '0 auto 14px', borderRadius: '50%', background: 'var(--red-soft)', color: 'var(--red)', display: 'grid', placeItems: 'center' }}><Ico.users size={36} /></div><b style={{ fontSize: 17 }}>Bring the crew</b><p style={{ color: 'var(--mut)', fontSize: 14, margin: '6px 0 0' }}>Share DesiPass with friends so you can go to events together.</p></div><Field><span style={{ ...inputStyle, fontFamily: 'var(--dp-font-mono)', fontSize: 13 }}>desipass.com/i/priya-7k2</span><button onClick={() => { toast('Link copied'); }} style={{ color: 'var(--red)', fontWeight: 700, fontSize: 13 }}>Copy</button></Field><Btn onClick={() => { close(); setTimeout(() => window.openShare && window.openShare({ id: 'app', nm: 'DesiPass', img: DP.A + 'desipass-logo-dark.png' }), 320); }} style={{ marginTop: 12 }} icon={<Ico.share size={18} />}>Share Link</Btn></Sheet>
    <Sheet open={sheet === 'rate'} onClose={close} title="Rate the app"><div style={{ textAlign: 'center', padding: '10px 0 16px' }}><div style={{ display: 'flex', justifyContent: 'center', gap: 8 }}>{[1, 2, 3, 4, 5].map(n => <button key={n} className="press" onClick={() => setStars(n)} style={{ color: n <= stars ? '#F5A623' : 'var(--line)', transition: 'color .15s, transform .2s', transform: n <= stars ? 'scale(1.1)' : 'none' }}><Ico.star size={38} fill={n <= stars ? 'currentColor' : 'none'} stroke={1.4} /></button>)}</div><p style={{ color: 'var(--mut)', fontSize: 14, margin: '14px 0 0' }}>{stars === 0 ? 'How are we doing?' : stars >= 4 ? 'Thank you. Mind sharing this on the store?' : 'Tell us what we can do better.'}</p></div><Field style={{ height: 'auto', alignItems: 'flex-start', padding: 14 }}><textarea placeholder="Your feedback (optional)" rows={3} style={{ ...inputStyle, resize: 'none', fontSize: 14 }}></textarea></Field><Btn disabled={!stars} onClick={() => { close(); toast('Thanks for the feedback'); }} style={{ marginTop: 12 }}>Submit</Btn></Sheet>
    <Sheet open={sheet === 'help'} onClose={close} title="Help & support">{['Where is my ticket?', 'Can I get a refund?', 'Transfer a ticket to a friend', 'The QR code will not scan', 'Change the name on a ticket'].map((q, i, a) => <Row key={q} label={q} last={i === a.length - 1} onClick={() => q === 'Can I get a refund?' ? (close(), setTimeout(() => window.openRefund && openRefund(null), 250)) : toast('Opening article')} />)}<div style={{ marginTop: 16, padding: 14, borderRadius: 14, border: '1px solid var(--line)', fontSize: 13.5, color: 'var(--mut)' }}>Still stuck? Email <a href="mailto:support@desipass.com?subject=DesiPass%20support" style={{ fontWeight: 700, color: 'var(--ink)' }}>support@desipass.com</a> or chat on WhatsApp. We reply within a few hours.</div><Btn kind="ghost" style={{ marginTop: 12, background: '#25D366', color: '#fff' }}>Chat on WhatsApp</Btn></Sheet>
    <Sheet open={sheet === 'delete'} onClose={close} title="Delete account"><div style={{ padding: '4px 0 10px' }}><div style={{ width: 72, height: 72, margin: '0 auto 14px', borderRadius: '50%', background: 'var(--red-soft)', color: 'var(--red)', display: 'grid', placeItems: 'center' }}><Ico.trash size={32} /></div><p style={{ margin: 0, textAlign: 'center', fontSize: 14, color: 'var(--mut)', lineHeight: 1.5 }}>This removes your profile, saved events and booking history. Tickets for upcoming events stay valid by email. Type <b style={{ color: 'var(--ink)' }}>DELETE</b> to confirm.</p></div><Field><input value={confirm} onChange={e => setConfirm(e.target.value)} placeholder="DELETE" style={inputStyle} /></Field><Btn disabled={confirm !== 'DELETE'} onClick={() => { close(); setStage('signin'); }} style={{ marginTop: 12 }}>Delete My Account</Btn><Btn kind="ghost" onClick={close} style={{ marginTop: 8 }}>Keep Account</Btn></Sheet>
  </>;
}

function NotifSheet({ open, onClose, onOpen }) {
  const items = [{ ev: DP.EVENTS[DP.DEMO.standard], t: 'Only a few tickets left', s: DP.EVENTS[DP.DEMO.standard].nm + ' is almost full.', when: '2h ago' }, { ev: DP.EVENTS[DP.DEMO.seatRows], t: 'Soon: ' + DP.EVENTS[DP.DEMO.seatRows].nm, s: 'At ' + DP.EVENTS[DP.DEMO.seatRows].ven + '. Your ticket is ready.', when: 'Today' }, { ev: DP.EVENTS[DP.DEMO.club], t: 'New in Berlin', s: DP.EVENTS[DP.DEMO.club].nm + ' just went on sale.', when: 'Yesterday' }];
  return <Sheet open={open} onClose={onClose} title="Notifications">{items.map((n, i) => <button key={i} className="press" onClick={() => { onClose(); onOpen(n.ev); }} style={{ display: 'flex', gap: 12, alignItems: 'center', width: '100%', textAlign: 'left', padding: '12px 0', borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 0 }}><img src={n.ev.img} alt="" style={{ width: 48, height: 48, borderRadius: 12, objectFit: 'cover' }} /><div style={{ flex: 1, minWidth: 0 }}><div style={{ fontWeight: 700, fontSize: 14 }}>{n.t}</div><div style={{ fontSize: 12.5, color: 'var(--mut)', marginTop: 2 }}>{n.s}</div></div><div style={{ fontSize: 11, color: 'var(--mut2)', whiteSpace: 'nowrap' }}>{n.when}</div></button>)}</Sheet>;
}

Object.assign(window, { Profile, SettingsSheets, NotifSheet, Toggle });