(() => {
// D3 — email+password login, forgot/reset password, trial activation, subscription status inside the office app.
const NS = window.AmlakPlusDesignSystem_b3aa85;
const { Logo, Field, TextInput, Button, Alert, Icon, StateView, PageHeader, KeyValueList, DataTable, StatusBadge, Checkbox, SegmentedControl } = NS;
const card = (children, demo) => <div className="kit-login"><section className="kit-login__card"><Logo base="../../" width={150} tagline />{children}</section>{demo}</div>;
const okEmail = (e) => /^\S+@\S+\.\S+$/.test(e.trim());
const pwRules = (p) => [[p.length >= 8, '8 أحرف على الأقل'], [/\d/.test(p), 'رقم واحد على الأقل'], [/[A-Za-z\u0600-\u06FF]/.test(p), 'حرف واحد على الأقل']];
const Rules = ({ pw }) => <ul className="acc-rules">{pwRules(pw).map(([ok, l]) => <li key={l} className={ok ? 'is-ok' : ''}><Icon name={ok ? 'CircleCheck' : 'Circle'} size={14} />{l}</li>)}</ul>;
const Demo = ({ opts, value, set }) => <div className="kit-dev ap-no-print" style={{ flexWrap: 'wrap', justifyContent: 'center' }}>نموذج أولي: {opts.map(([k, l]) => <button key={k} type="button" className="kit-src" style={value === k ? { fontWeight: 700 } : null} onClick={() => set(k)}>{l}</button>)}</div>;

// ---------- Login (replaces phone/OTP) ----------
function LoginScreen({ onLogin }) {
  const [step, setStep] = React.useState('auth');
  const [v, setV] = React.useState({ email: 'sara@alnada.sa', pw: '' });
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [fails, setFails] = React.useState(0);
  const submit = (e) => { e.preventDefault(); setErr(''); if (!okEmail(v.email)) return setErr('أدخل بريدًا صحيحًا.'); if (!v.pw) return setErr('أدخل كلمة المرور.');
    setBusy(true); setTimeout(() => { setBusy(false); if (v.pw.length < 8) { const f = fails + 1; setFails(f); setErr(f >= 5 ? 'أوقفنا المحاولات مؤقتًا لحماية حسابك. حاول بعد 15 دقيقة أو أعد تعيين كلمة المرور.' : 'البريد أو كلمة المرور غير صحيحة.'); return; } setStep('org'); }, 700); };
  if (step === 'org') return card(<><h1>اختر المنشأة</h1><p>حسابك مرتبط بأكثر من منشأة. يمكنك التبديل لاحقًا من الشريط العلوي.</p>
    <div style={{ display: 'grid', gap: 8 }}>{window.AP_DATA.orgs.map((o, n) => <button key={o} type="button" className="kit-choice" style={{ background: '#fff' }} onClick={onLogin}><Icon name="Building" size={18} /><span><b>{o}</b><small>{n ? 'مالك · إدارة ذاتية' : 'محصلة · الرياض — الرئيسي'}</small></span></button>)}</div></>);
  return card(<form onSubmit={submit} noValidate style={{ display: 'grid', gap: 16 }}>
    <h1>تسجيل الدخول</h1><p style={{ margin: '-8px 0 0', fontSize: 13, color: 'var(--text-3)' }}>بالبريد وكلمة المرور التي عيّنتها عند تفعيل حسابك.</p>
    {err && <Alert tone="danger">{err}</Alert>}
    <Field label="البريد الإلكتروني"><TextInput ltr type="email" autoComplete="username" value={v.email} onChange={(e) => setV({ ...v, email: e.target.value })} /></Field>
    <Field label={<span style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>كلمة المرور <button type="button" className="kit-src" onClick={() => window.apGo('forgot')}>نسيت كلمة المرور؟</button></span>}><TextInput ltr type="password" autoComplete="current-password" value={v.pw} onChange={(e) => setV({ ...v, pw: e.target.value })} placeholder="للتجربة: 8 أحرف أو أكثر" /></Field>
    <Button type="submit" size="lg" block loading={busy} disabled={fails >= 5}>دخول</Button>
    <p className="kit-login__foot">ليس لديك حساب؟ <a href="../website/contact.html">اطلب تجربة</a> · وصلك رابط دعوة؟ <button type="button" className="kit-src" onClick={() => window.apGo('join')}>افتح الدعوة</button></p>
  </form>);
}

// ---------- Forgot + reset ----------
function ForgotScreen() {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('form');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [left, setLeft] = React.useState(0);
  React.useEffect(() => { if (left > 0) { const t = setTimeout(() => setLeft(left - 1), 1000); return () => clearTimeout(t); } }, [left]);
  const send = (e) => { e && e.preventDefault(); if (!okEmail(email)) return setErr('أدخل بريدًا صحيحًا.'); setErr(''); setBusy(true); setTimeout(() => { setBusy(false); setState('sent'); setLeft(60); }, 700); };
  if (state === 'sent') return card(<><span className="acc-ic"><Icon name="MailCheck" size={26} /></span><h1>تحقق من بريدك</h1>
    <p>إن كان <bdi className="ap-ltr">{email}</bdi> مسجلًا لدينا، فستصله رسالة فيها رابط لتعيين كلمة مرور جديدة. الرابط صالح لمدة ساعة واحدة.</p>
    <Alert tone="neutral">لم تصلك؟ راجع مجلد الرسائل غير المرغوبة، أو تأكد من البريد الذي فُعّل به حسابك.</Alert>
    <Button variant="secondary" block disabled={left > 0} onClick={() => send()}>{left > 0 ? 'إعادة الإرسال بعد 0:' + String(left).padStart(2, '0') : 'إعادة الإرسال'}</Button>
    <Button variant="ghost" block onClick={() => window.apGo('reset')}>نموذج أولي: فتح الرابط من البريد</Button>
    <p className="kit-login__foot"><button type="button" className="kit-src" onClick={() => window.apGo('login')}>العودة إلى الدخول</button></p></>);
  return card(<form onSubmit={send} noValidate style={{ display: 'grid', gap: 16 }}><h1>نسيت كلمة المرور</h1><p style={{ margin: '-8px 0 0', fontSize: 13, color: 'var(--text-3)' }}>أدخل بريدك، ونرسل لك رابطًا لتعيين كلمة مرور جديدة.</p>
    <Field label="البريد الإلكتروني" error={err}><TextInput ltr type="email" autoComplete="email" value={email} onChange={(e) => { setEmail(e.target.value); setErr(''); }} /></Field>
    <Button type="submit" size="lg" block loading={busy}>إرسال الرابط</Button>
    <p className="kit-login__foot"><button type="button" className="kit-src" onClick={() => window.apGo('login')}>العودة إلى الدخول</button></p></form>);
}

function SetPassword({ title, lead, cta, extra, onDone }) {
  const [pw, setPw] = React.useState(''); const [rep, setRep] = React.useState(''); const [tried, setTried] = React.useState(false); const [busy, setBusy] = React.useState(false);
  const ok = pwRules(pw).every(([x]) => x) && pw === rep && (!extra || extra.ok);
  return <form noValidate style={{ display: 'grid', gap: 16 }} onSubmit={(e) => { e.preventDefault(); setTried(true); if (!ok) return; setBusy(true); setTimeout(() => { setBusy(false); onDone(); }, 800); }}>
    <h1>{title}</h1>{lead}
    <Field label="كلمة المرور الجديدة"><TextInput ltr type="password" autoComplete="new-password" value={pw} onChange={(e) => setPw(e.target.value)} /></Field>
    <Rules pw={pw} />
    <Field label="تأكيد كلمة المرور" error={tried && pw !== rep ? 'كلمتا المرور غير متطابقتين.' : null}><TextInput ltr type="password" autoComplete="new-password" value={rep} onChange={(e) => setRep(e.target.value)} /></Field>
    {extra && extra.node(tried)}
    <Button type="submit" size="lg" block loading={busy}>{cta}</Button>
  </form>;
}

function ResetScreen() {
  const [s, setS] = React.useState('form');
  const demo = <Demo value={s} set={setS} opts={[['form', 'رابط سليم'], ['expired', 'منتهٍ'], ['used', 'مستخدم'], ['done', 'تم']]} />;
  if (s === 'expired' || s === 'used') return card(<><h1>{s === 'expired' ? 'انتهت صلاحية الرابط' : 'استُخدم هذا الرابط من قبل'}</h1><p>{s === 'expired' ? 'روابط إعادة التعيين صالحة ساعة واحدة.' : 'كل رابط يُستخدم مرة واحدة. إن لم تكن أنت من غيّر كلمة المرور، أعد تعيينها الآن.'}</p><Button size="lg" block onClick={() => window.apGo('forgot')}>طلب رابط جديد</Button></>, demo);
  if (s === 'done') return card(<><span className="acc-ic is-ok"><Icon name="Check" size={26} /></span><h1>تغيرت كلمة المرور</h1><p>سجّلنا خروجك من الأجهزة الأخرى. ادخل بكلمة المرور الجديدة.</p><Button size="lg" block onClick={() => window.apGo('login')}>تسجيل الدخول</Button></>, demo);
  return card(<SetPassword title="تعيين كلمة مرور جديدة" lead={<p style={{ margin: '-8px 0 0', fontSize: 13, color: 'var(--text-3)' }}>للحساب <bdi className="ap-ltr">sara@alnada.sa</bdi></p>} cta="حفظ كلمة المرور" onDone={() => setS('done')} />, demo);
}

// ---------- Activation from approved trial (platform admin → email) ----------
const ACT = { org: 'مكتب الأمانة للعقار', name: 'محمد الزهراني', email: 'm.zahrani@alamanah.sa', plan: 'المكتب', trialEnd: '08/10/2026', by: 'فريق أملاك بلس' };
function ActivateScreen() {
  const [s, setS] = React.useState('form');
  const [terms, setTerms] = React.useState(false);
  const demo = <Demo value={s} set={setS} opts={[['form', 'رابط سليم'], ['expired', 'منتهٍ'], ['already', 'مفعّل سابقًا'], ['done', 'تم']]} />;
  if (s === 'expired') return card(<><h1>انتهت صلاحية رابط التفعيل</h1><p>روابط التفعيل صالحة 7 أيام. تواصل معنا ونرسل لك رابطًا جديدًا على نفس البريد.</p><Button size="lg" block href="../website/contact.html#message">تواصل مع أملاك بلس</Button></>, demo);
  if (s === 'already') return card(<><h1>الحساب مفعّل</h1><p>فُعّل هذا الحساب من قبل. ادخل بالبريد وكلمة المرور.</p><Button size="lg" block onClick={() => window.apGo('login')}>تسجيل الدخول</Button><Button variant="ghost" block onClick={() => window.apGo('forgot')}>نسيت كلمة المرور</Button></>, demo);
  if (s === 'done') return card(<><span className="acc-ic is-ok"><Icon name="Check" size={26} /></span><h1>حسابك جاهز</h1><p>فعّلنا {ACT.org}. نبدأ بخمس خطوات قصيرة لتجهيز المنشأة، ويمكنك تخطيها.</p><Button size="lg" block icon="ArrowLeft" onClick={() => window.apGo('welcome')}>ابدأ التجهيز</Button></>, demo);
  return card(<SetPassword title="تفعيل حسابك" cta="تفعيل الحساب"
    lead={<><p style={{ margin: '-8px 0 0', fontSize: 13, color: 'var(--text-3)' }}>راجع {ACT.by} طلبك وجهّز مساحة العمل. عيّن كلمة المرور للمتابعة.</p>
      <div className="kit-f-summary"><div><span>المنشأة</span><b>{ACT.org}</b></div><div><span>مدير المنشأة</span><b>{ACT.name}</b></div><div><span>البريد</span><b><bdi className="ap-ltr">{ACT.email}</bdi></b></div><div><span>تجربة باقة {ACT.plan} حتى</span><b><bdi className="ap-num">{ACT.trialEnd}</bdi></b></div></div></>}
    extra={{ ok: terms, node: (tried) => <div style={{ display: 'grid', gap: 4 }}><Checkbox label={<>أوافق على <a href="../website/legal.html#terms" target="_blank">الشروط</a> و<a href="../website/legal.html#privacy" target="_blank">سياسة الخصوصية</a></>} checked={terms} onChange={(e) => setTerms(e.target.checked)} />{tried && !terms && <span className="kit-f-missing">الموافقة مطلوبة.</span>}</div> }}
    onDone={() => setS('done')} />, demo);
}

// ---------- Subscription status inside the office ----------
const SUBS = {
  trial: { tone: 'info', label: 'تجربة', bar: 'info', text: 'تجربتك تنتهي بعد 6 أيام (30/09/2026). تواصل معنا لتفعيل الاشتراك — بياناتك تبقى كما هي.', end: '30/09/2026' },
  active: { tone: 'success', label: 'نشط', text: null, end: '28/02/2027' },
  past_due: { tone: 'warning', label: 'متأخر سداد', bar: 'warning', text: 'فاتورة التجديد INV-2026-0088 متأخرة منذ 19/09/2026. الخدمة مستمرة — نرجو السداد لتجنب التقييد.', end: '19/09/2026' },
  grace: { tone: 'warning', label: 'مهلة', bar: 'warning', text: 'انتهى الاشتراك في 14/09/2026، وأنت في مهلة حتى 28/09/2026. بعدها يصبح الحساب للاطلاع فقط.', end: '14/09/2026' },
  restricted: { tone: 'danger', label: 'مقيد', bar: 'danger', text: 'الحساب للاطلاع والتصدير فقط منذ 15/09/2026. لا يمكن تسجيل دفعات أو عقود جديدة. بياناتك وأرصدة الملاك محفوظة.', end: '30/06/2026' }
};
window.apSub = window.apSub || localStorage.getItem('amlak-kit-sub') || 'trial';
function SubBanner({ go }) {
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => { window.apSubRefresh = force; }, []);
  const s = SUBS[window.apSub];
  if (!s.bar) return null;
  const [hidden, setHidden] = [sessionStorage.getItem('amlak-sub-hide') === window.apSub, () => { sessionStorage.setItem('amlak-sub-hide', window.apSub); force(); }];
  if (hidden && s.bar !== 'danger') return null;
  return <div className={'acc-bar is-' + s.bar} role={s.bar === 'danger' ? 'alert' : 'status'}><Icon name={s.bar === 'danger' ? 'Lock' : s.bar === 'info' ? 'Clock' : 'TriangleAlert'} size={16} /><span>{s.text}</span><button type="button" className="acc-bar__link" onClick={() => go('subscription')}>تفاصيل الاشتراك</button>{s.bar !== 'danger' && <button type="button" className="acc-bar__x" aria-label="إخفاء حتى الجلسة القادمة" onClick={setHidden}><Icon name="X" size={15} /></button>}</div>;
}

const Meter = ({ label, v, max, unit = '' }) => { const p = Math.min(100, Math.round(v / max * 100)); return <div className="acc-meter"><div><span>{label}</span><b><bdi className="ap-num">{v}{unit}</bdi> <small>من <bdi className="ap-num">{max}{unit}</bdi></small></b></div><i><em style={{ width: p + '%', background: p >= 90 ? 'var(--status-warning-fg)' : undefined }} /></i>{p >= 90 && <small className="acc-meter__w">اقتربت من الحد ({p}%). الترقية تتم بالتواصل معنا.</small>}</div>; };
function SubscriptionScreen() {
  const [st, setSt] = React.useState(window.apSub);
  const change = (v) => { setSt(v); window.apSub = v; localStorage.setItem('amlak-kit-sub', v); sessionStorage.removeItem('amlak-sub-hide'); window.apSubRefresh && window.apSubRefresh(); };
  const s = SUBS[st];
  const inv = [{ id: 'INV-2026-0088', period: 'سبتمبر 2026 – أغسطس 2027', amount: 4490, status: st === 'past_due' ? 'overdue' : st === 'trial' ? 'none' : 'paid' }, { id: 'INV-2025-0041', period: 'سبتمبر 2025 – أغسطس 2026', amount: 4490, status: 'paid' }].filter((i) => i.status !== 'none');
  return <>
    <PageHeader title="الاشتراك" description="باقة المنشأة وحدودها وفواتير أملاك بلس. يظهر لمدير المنشأة فقط." actions={<Button variant="secondary" icon="MessageCircle" href="../website/contact.html#message">تواصل بخصوص الاشتراك</Button>} />
    {s.bar && <Alert tone={s.tone === 'info' ? 'info' : s.tone} style={{ marginBottom: 14 }}>{s.text}</Alert>}
    <div className="acc-grid">
      <section className="kit-panel"><h2 className="kit-h2" style={{ marginTop: 0 }}>الباقة</h2>
        <KeyValueList layout="rows" items={[{ label: 'الباقة', value: st === 'trial' ? 'المكتب (تجربة)' : 'المكتب' }, { label: 'الحالة', value: <StatusBadge size="sm" tone={s.tone} showIcon={false} label={s.label} /> }, { label: st === 'trial' ? 'نهاية التجربة' : st === 'grace' || st === 'restricted' || st === 'past_due' ? 'انتهى في' : 'التجديد القادم', value: <bdi className="ap-num">{s.end}</bdi> }, { label: 'التجديد', value: 'يدوي — يتواصل معك فريق أملاك بلس قبل الموعد' }]} />
        {st === 'restricted' && <div className="acc-can"><h3>ما يعمل الآن</h3><ul><li className="is-ok"><Icon name="Check" size={14} />الاطلاع على كل البيانات والتقارير</li><li className="is-ok"><Icon name="Check" size={14} />تصدير نسخة كاملة</li><li className="is-ok"><Icon name="Check" size={14} />بوابات المستأجرين والملاك للاطلاع</li><li><Icon name="X" size={14} />تسجيل دفعات أو عقود أو مصروفات</li><li><Icon name="X" size={14} />إرسال تذكيرات للمستأجرين</li></ul></div>}
      </section>
      <section className="kit-panel" style={{ display: 'grid', gap: 16, alignContent: 'start' }}><h2 className="kit-h2" style={{ margin: 0 }}>الاستخدام</h2>
        <Meter label="الوحدات" v={276} max={300} /><Meter label="المستخدمون" v={6} max={8} /><Meter label="التخزين" v={2.1} max={10} unit=" غ.ب" />
        <p className="kit-scope" style={{ margin: 0 }}>تجاوز الحد لا يوقف التحصيل؛ ننبهك قبل الوصول إليه.</p></section>
    </div>
    <h2 className="kit-h2">فواتير أملاك بلس</h2>
    {inv.length ? <DataTable caption="فواتير الاشتراك" rows={inv} columns={[{ key: 'i', header: 'الفاتورة', render: (i) => <div style={{ display: 'grid' }}><b style={{ fontWeight: 600, fontSize: 14 }}>{i.id}</b><span style={{ fontSize: 12, color: 'var(--text-3)' }}>{i.period}</span></div> }, { key: 'm', header: 'المبلغ', numeric: true, render: (i) => <NS.Money value={i.amount} size="sm" /> }, { key: 's', header: 'الحالة', render: (i) => <StatusBadge size="sm" tone={i.status === 'paid' ? 'success' : 'danger'} showIcon={false} label={i.status === 'paid' ? 'مسددة' : 'متأخرة'} /> }, { key: 'a', header: <span className="ap-sr-only">إجراءات</span>, render: () => <Button size="sm" variant="ghost" icon="Download">PDF</Button> }]} />
      : <StateView boxed kind="empty" icon="ReceiptText" title="لا فواتير خلال التجربة" text="تصدر أول فاتورة عند تفعيل الاشتراك." />}
    <p className="kit-scope" style={{ marginTop: 10 }}>هذه فواتير اشتراكك في أملاك بلس، وهي منفصلة عن سندات الإيجار التي تصدرها لمستأجريك. السداد بتحويل بنكي؛ الدفع الإلكتروني غير متاح حاليًا.</p>
    <div className="kit-dev ap-no-print">نموذج أولي — حالة الاشتراك: <SegmentedControl size="sm" label="حالة الاشتراك" value={st} onChange={change} options={Object.entries(SUBS).map(([value, x]) => ({ value, label: x.label }))} /></div>
  </>;
}

Object.assign(window, { LoginScreen, ForgotScreen, ResetScreen, ActivateScreen, SubscriptionScreen, SubBanner });
})();