/* ── Zafa — account detail pages: Notifications, Payments, Privacy, Help ── */

/* shared toggle row */
function AcctToggle({ icon, label, sub, on, onToggle }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 0' }}>
      {icon && <span style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--rose-100)', color: 'var(--rose-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={icon} size={18} stroke={1.9} /></span>}
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ margin: 0, fontSize: 14.5, fontWeight: 500 }}>{label}</p>
        {sub && <p className="muted" style={{ margin: '2px 0 0', fontSize: 12, lineHeight: 1.35 }}>{sub}</p>}
      </div>
      <button onClick={onToggle} style={{ width: 46, height: 27, borderRadius: 99, border: 'none', cursor: 'pointer', background: on ? 'var(--rose)' : 'var(--line)', position: 'relative', transition: 'background .15s', flexShrink: 0 }}>
        <span style={{ position: 'absolute', top: 3, insetInlineStart: on ? 22 : 3, width: 21, height: 21, borderRadius: '50%', background: '#fff', transition: 'inset-inline-start .15s', boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
      </button>
    </div>
  );
}

function AcctRow({ icon, label, sub, right, danger, onClick }) {
  return (
    <button onClick={onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 13, padding: '14px 0', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'start' }}>
      <span style={{ width: 34, height: 34, borderRadius: 10, background: danger ? '#FBEAE7' : 'var(--rose-100)', color: danger ? '#C0392B' : 'var(--rose-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={icon} size={18} stroke={1.9} /></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ margin: 0, fontSize: 14.5, fontWeight: 500, color: danger ? '#C0392B' : 'var(--ink)' }}>{label}</p>
        {sub && <p className="muted" style={{ margin: '2px 0 0', fontSize: 12 }}>{sub}</p>}
      </div>
      {right || <Icon name="right" size={17} className="flip-x" style={{ color: 'var(--muted)' }} />}
    </button>
  );
}

/* ── Notifications ── */
function NotificationsPage() {
  const { lang, t, pop } = useZafa();
  const [s, setS] = React.useState({ enquiries: true, messages: true, offers: true, saved: false, tips: true, push: true, email: true, sms: false });
  const tg = (k) => setS((p) => ({ ...p, [k]: !p[k] }));
  const groups = [
    [L(lang, 'Activity', 'النشاط'), [
      ['enquiries', 'chat', L(lang, 'Vendor replies', 'ردود المزوّدين'), L(lang, 'When a vendor responds to you', 'عندما يردّ عليك مزوّد')],
      ['messages', 'bell', L(lang, 'New messages', 'رسائل جديدة'), L(lang, 'Chat messages from vendors', 'رسائل الدردشة من المزوّدين')],
      ['saved', 'heart', L(lang, 'Wishlist updates', 'تحديثات المفضلة'), L(lang, 'Price or availability changes', 'تغيّر السعر أو التوفّر')]]],
    [L(lang, 'Marketing', 'العروض'), [
      ['offers', 'spark', L(lang, 'Offers & promotions', 'العروض والتخفيضات'), L(lang, 'Deals from featured vendors', 'عروض من المزوّدين المميّزين')],
      ['tips', 'star', L(lang, 'Planning tips', 'نصائح التخطيط'), L(lang, 'Helpful wedding planning ideas', 'أفكار مفيدة لتخطيط الزفاف')]]],
    [L(lang, 'Channels', 'القنوات'), [
      ['push', 'bell', L(lang, 'Push notifications', 'الإشعارات الفورية'), null],
      ['email', 'mail', L(lang, 'Email', 'البريد الإلكتروني'), null],
      ['sms', 'phone', L(lang, 'SMS', 'الرسائل النصية'), null]]],
  ];
  return (
    <div className="z-scroll no-bar" style={{ background: 'var(--bg)' }}>
      <div style={{ padding: '6px 20px 6px' }}><ScreenHeader title={L(lang, 'Notifications', 'الإشعارات')} onBack={pop} /></div>
      <div style={{ padding: '8px 20px 36px' }}>
        {groups.map(([title, rows]) => (
          <div key={title} style={{ marginBottom: 18 }}>
            <p className="lbl" style={{ marginBottom: 8 }}>{title}</p>
            <div className="z-card" style={{ padding: '2px 16px' }}>
              {rows.map(([k, ic, lbl, sub], i) => (
                <div key={k} style={{ borderBottom: i < rows.length - 1 ? '1px solid var(--line-2)' : 'none' }}>
                  <AcctToggle icon={ic} label={lbl} sub={sub} on={s[k]} onToggle={() => tg(k)} />
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── Payment methods ── */
function PaymentMethodsPage() {
  const { lang, pop } = useZafa();
  const [cards, setCards] = React.useState([
    { id: 'c1', brand: 'Visa', last: '4242', exp: '08/27', primary: true },
    { id: 'c2', brand: 'Mastercard', last: '5588', exp: '03/26', primary: false }]);
  const makePrimary = (id) => setCards((s) => s.map((c) => ({ ...c, primary: c.id === id })));
  const del = (id) => setCards((s) => s.filter((c) => c.id !== id));
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg)' }}>
      <div style={{ padding: '6px 20px 6px' }}><ScreenHeader title={L(lang, 'Payment methods', 'طرق الدفع')} onBack={pop} /></div>
      <div className="z-scroll no-bar" style={{ flex: 1, padding: '8px 20px 28px' }}>
        {cards.filter((c) => c.primary).map((c) => (
          <div key={c.id} style={{ borderRadius: 20, padding: 20, marginBottom: 18, color: '#fff', position: 'relative', overflow: 'hidden', background: 'linear-gradient(135deg,#2A2227,#1B1418)', boxShadow: 'var(--sh)' }}>
            <div style={{ position: 'absolute', width: 180, height: 180, borderRadius: '50%', background: 'radial-gradient(circle,rgba(246,176,198,.4),transparent 70%)', top: -60, insetInlineEnd: -40 }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ width: 38, height: 28, borderRadius: 6, background: 'linear-gradient(135deg,#E7CD8E,#C8A24A)' }} />
              <span style={{ fontWeight: 700, fontSize: 15 }}>{c.brand}</span>
            </div>
            <p style={{ margin: '22px 0 14px', fontSize: 19, letterSpacing: '.12em', fontFamily: 'monospace', direction: 'ltr' }}>•••• •••• •••• {c.last}</p>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: 'rgba(255,255,255,.75)' }}>
              <span>{L(lang, 'Primary card', 'البطاقة الأساسية')}</span><span>{c.exp}</span>
            </div>
          </div>
        ))}
        <p className="lbl" style={{ marginBottom: 10 }}>{L(lang, 'Your cards', 'بطاقاتك')}</p>
        <div className="z-card" style={{ padding: '4px 16px', marginBottom: 16 }}>
          {cards.map((c, i) => (
            <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 0', borderBottom: i < cards.length - 1 ? '1px solid var(--line-2)' : 'none' }}>
              <span style={{ width: 38, height: 26, borderRadius: 6, background: c.brand === 'Visa' ? '#1A1F71' : '#EB001B', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 800, flexShrink: 0 }}>{c.brand === 'Visa' ? 'VISA' : 'MC'}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <p style={{ margin: 0, fontSize: 13.5, fontWeight: 600, direction: 'ltr', textAlign: lang === 'ar' ? 'right' : 'left' }}>•••• {c.last}</p>
                <p className="muted" style={{ margin: '1px 0 0', fontSize: 11.5 }}>{L(lang, 'Expires', 'تنتهي')} {c.exp}</p>
              </div>
              {c.primary
                ? <span className="z-badge z-badge--rose" style={{ fontSize: 9 }}>{L(lang, 'Primary', 'أساسية')}</span>
                : <button onClick={() => makePrimary(c.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--rose-deep)', fontWeight: 600, fontSize: 12.5, fontFamily: 'var(--sans)' }}>{L(lang, 'Set primary', 'تعيين أساسية')}</button>}
              <button onClick={() => del(c.id)} title="remove" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted)', display: 'flex', padding: 2 }}><Icon name="trash" size={16} /></button>
            </div>
          ))}
        </div>
        <Btn variant="outline" icon="plus" onClick={() => {}}>{L(lang, 'Add a new card', 'إضافة بطاقة جديدة')}</Btn>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 18, padding: '11px 14px', borderRadius: 12, background: 'var(--rose-soft)' }}>
          <Icon name="shield" size={17} style={{ color: 'var(--rose-deep)', flexShrink: 0 }} />
          <span style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.4 }}>{L(lang, 'Payments are encrypted and processed securely.', 'تتم معالجة المدفوعات بأمان وتشفير.')}</span>
        </div>
      </div>
    </div>
  );
}

/* ── Privacy & security ── */
function PrivacyPage() {
  const { lang, pop } = useZafa();
  const [s, setS] = React.useState({ twofa: true, biometric: true, activity: false, personalised: true });
  const tg = (k) => setS((p) => ({ ...p, [k]: !p[k] }));
  return (
    <div className="z-scroll no-bar" style={{ background: 'var(--bg)' }}>
      <div style={{ padding: '6px 20px 6px' }}><ScreenHeader title={L(lang, 'Privacy & security', 'الخصوصية والأمان')} onBack={pop} /></div>
      <div style={{ padding: '8px 20px 36px' }}>
        <p className="lbl" style={{ marginBottom: 8 }}>{L(lang, 'Security', 'الأمان')}</p>
        <div className="z-card" style={{ padding: '2px 16px', marginBottom: 18 }}>
          <div style={{ borderBottom: '1px solid var(--line-2)' }}><AcctRow icon="shield" label={L(lang, 'Change password', 'تغيير كلمة المرور')} sub={L(lang, 'Last changed 3 months ago', 'آخر تغيير قبل ٣ أشهر')} /></div>
          <div style={{ borderBottom: '1px solid var(--line-2)' }}><AcctToggle icon="phone" label={L(lang, 'Two-factor authentication', 'المصادقة الثنائية')} sub={L(lang, 'Extra security on sign-in', 'حماية إضافية عند الدخول')} on={s.twofa} onToggle={() => tg('twofa')} /></div>
          <AcctToggle icon="user" label={L(lang, 'Biometric unlock', 'الفتح البيومتري')} sub={L(lang, 'Face ID / fingerprint', 'بصمة الوجه / الإصبع')} on={s.biometric} onToggle={() => tg('biometric')} />
        </div>

        <p className="lbl" style={{ marginBottom: 8 }}>{L(lang, 'Privacy', 'الخصوصية')}</p>
        <div className="z-card" style={{ padding: '2px 16px', marginBottom: 18 }}>
          <div style={{ borderBottom: '1px solid var(--line-2)' }}><AcctToggle icon="globe" label={L(lang, 'Activity status', 'حالة النشاط')} sub={L(lang, 'Let vendors see when you\u2019re active', 'دع المزوّدين يرون نشاطك')} on={s.activity} onToggle={() => tg('activity')} /></div>
          <AcctToggle icon="spark" label={L(lang, 'Personalised recommendations', 'توصيات مخصّصة')} sub={L(lang, 'Use my activity to tailor results', 'استخدم نشاطي لتخصيص النتائج')} on={s.personalised} onToggle={() => tg('personalised')} />
        </div>

        <p className="lbl" style={{ marginBottom: 8 }}>{L(lang, 'Your data', 'بياناتك')}</p>
        <div className="z-card" style={{ padding: '2px 16px' }}>
          <div style={{ borderBottom: '1px solid var(--line-2)' }}><AcctRow icon="share" label={L(lang, 'Download my data', 'تنزيل بياناتي')} /></div>
          <AcctRow icon="trash" label={L(lang, 'Delete account', 'حذف الحساب')} danger />
        </div>
      </div>
    </div>
  );
}

/* ── Help & support ── */
function HelpPage() {
  const { lang, pop } = useZafa();
  const [open, setOpen] = React.useState(null);
  const faqs = [
    [L(lang, 'How do I contact a vendor?', 'كيف أتواصل مع مزوّد؟'), L(lang, 'Open any vendor profile and use the WhatsApp, Call, or Message buttons to reach them directly.', 'افتح ملف أي مزوّد واستخدم أزرار واتساب أو الاتصال أو المراسلة للتواصل مباشرة.')],
    [L(lang, 'What does the vendor level mean?', 'ماذا يعني مستوى المزوّد؟'), L(lang, 'Levels show a vendor\u2019s standing — from Standard to Upper — based on reviews and activity.', 'تعكس المستويات مكانة المزوّد — من الأساسي إلى المتقدّم — بناءً على التقييمات والنشاط.')],
    [L(lang, 'How do payments work?', 'كيف تعمل المدفوعات؟'), L(lang, 'Booking deposits are paid securely in-app. Final payments are arranged directly with the vendor.', 'تُدفع دفعات الحجز بأمان داخل التطبيق. وتُرتّب الدفعات النهائية مع المزوّد مباشرة.')],
    [L(lang, 'Can I get a refund?', 'هل يمكنني استرداد المبلغ؟'), L(lang, 'Refund terms depend on the vendor\u2019s policy. Contact support if you need help with a booking.', 'تعتمد شروط الاسترداد على سياسة المزوّد. تواصل مع الدعم للمساعدة في الحجز.')],
  ];
  const contacts = [
    ['chat', L(lang, 'Live chat', 'الدردشة المباشرة'), L(lang, 'Typically replies in minutes', 'يرد عادة خلال دقائق'), '#25D366'],
    ['mail', L(lang, 'Email us', 'راسلنا'), 'support@zafa.app', 'var(--rose-deep)'],
    ['phone', L(lang, 'Call support', 'اتصل بالدعم'), '+971 800 9232', '#2C3550'],
  ];
  return (
    <div className="z-scroll no-bar" style={{ background: 'var(--bg)' }}>
      <div style={{ padding: '6px 20px 6px' }}><ScreenHeader title={L(lang, 'Help & support', 'المساعدة والدعم')} onBack={pop} /></div>
      <div style={{ padding: '8px 20px 36px' }}>
        {/* search */}
        <div style={{ marginBottom: 18 }}><SearchField value="" onChange={() => {}} readOnly placeholder={L(lang, 'Search help articles', 'ابحث في المقالات')} /></div>

        <p className="lbl" style={{ marginBottom: 8 }}>{L(lang, 'Get in touch', 'تواصل معنا')}</p>
        <div className="z-card" style={{ padding: '2px 16px', marginBottom: 18 }}>
          {contacts.map(([ic, lbl, sub, cl], i) => (
            <div key={lbl} style={{ borderBottom: i < contacts.length - 1 ? '1px solid var(--line-2)' : 'none', display: 'flex', alignItems: 'center', gap: 13, padding: '14px 0' }}>
              <span style={{ width: 34, height: 34, borderRadius: 10, background: cl, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={ic} size={17} /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <p style={{ margin: 0, fontSize: 14.5, fontWeight: 500 }}>{lbl}</p>
                <p className="muted" style={{ margin: '2px 0 0', fontSize: 12 }}>{sub}</p>
              </div>
              <Icon name="right" size={17} className="flip-x" style={{ color: 'var(--muted)' }} />
            </div>
          ))}
        </div>

        <p className="lbl" style={{ marginBottom: 8 }}>{L(lang, 'Frequently asked', 'الأسئلة الشائعة')}</p>
        <div className="z-card" style={{ padding: '2px 16px' }}>
          {faqs.map(([q, a], i) => (
            <div key={i} style={{ borderBottom: i < faqs.length - 1 ? '1px solid var(--line-2)' : 'none' }}>
              <button onClick={() => setOpen(open === i ? null : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: '15px 0', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'start' }}>
                <span style={{ flex: 1, fontSize: 14, fontWeight: 600 }}>{q}</span>
                <Icon name={open === i ? 'up' : 'down'} size={17} style={{ color: 'var(--muted)', flexShrink: 0 }} />
              </button>
              {open === i && <p className="sec fade-up" style={{ margin: '0 0 14px', fontSize: 13, lineHeight: 1.5, textWrap: 'pretty' }}>{a}</p>}
            </div>
          ))}
        </div>
        <p className="muted" style={{ textAlign: 'center', fontSize: 12, marginTop: 18 }}>Version 1.0.0</p>
      </div>
    </div>
  );
}

Object.assign(window, { NotificationsPage, PaymentMethodsPage, PrivacyPage, HelpPage, AcctToggle, AcctRow });