(() => {
const { Logo, Button, Money, StatusBadge, SummaryStrip, Alert, Icon, SegmentedControl, DataTable, Timeline } = window.AmlakPlusDesignSystem_b3aa85;
const D = window.AP_DATA;

Object.assign(window.AP_FORMS, {
  ownerDecision: { title: 'قرار على مصروف', sub: (c) => c && (c.desc + ' · ' + c.property), width: 560, fields: [
    { t: 'summary', rows: (c) => [['المبلغ', c.amount, 'money'], ['المنفذ', c.vendor], ['التمويل', c.funding], ['حد الصرف في اتفاقك', 1000, 'money']] },
    { k: 'd', l: 'قرارك', t: 'radio', def: 'yes', o: [{ value: 'yes', label: 'أوافق على البيانات والمبلغ المعروضين', hint: 'الموافقة لا تعني تنفيذ دفع، وترتبط بهذه النسخة فقط.' }, { value: 'no', label: 'لا أوافق', hint: 'يعود المصروف للمكتب مع سببك.' }] },
    { k: 'note', l: 'سبب القرار', t: 'area', req: true, ph: 'مثال: موافق مع إرفاق فاتورة الفني' }
  ], submit: 'إرسال القرار', done: { title: (v) => v.d === 'yes' ? 'وصلت موافقتك للمكتب' : 'وصل رفضك للمكتب', tone: (v) => v.d === 'yes' ? 'success' : 'warning', text: 'يُوثق باسمك ووقته. أي تعديل على المبلغ يحتاج موافقة جديدة منك.' } },
  ownerSettlementDecision: { title: 'قرار على تصفية', sub: (c) => c && c.desc, width: 600, fields: [
    { t: 'summary', rows: (c) => [['المبلغ المخصص', c.amount, 'money'], ['خصم تمويل مقدم', c.offset, 'money'], ['أتعاب الإدارة', c.fee, 'money'], ['الصافي لك', c.amount - c.offset - c.fee, 'money']] },
    { t: 'note', tone: 'neutral', text: 'التحويل: من حساب المكتب — الراجحي إلى حسابك لدى الأهلي. المصروفات المدفوعة مخصومة مسبقًا من المخصص.' },
    { k: 'd', l: 'قرارك', t: 'radio', def: 'yes', o: [{ value: 'yes', label: 'أوافق على التصفية بهذه الأرقام', hint: 'الموافقة لا تعني التسليم — يسجل المكتب التحويل لاحقًا.' }, { value: 'no', label: 'لا أوافق', hint: 'يعيد المكتب مراجعة التصفية ثم يرسلها من جديد.' }] },
    { k: 'note', l: 'سبب القرار', t: 'area', req: true }
  ], submit: 'إرسال القرار', done: { title: 'وصل قرارك للمكتب', text: 'يظهر في «قراراتي». التسليم يُسجل منفصلًا ويصلك إشعار به.' } },
  ownerMessage: { title: 'رسالة للمكتب', width: 520, fields: [
    { k: 'topic', l: 'الموضوع', t: 'select', o: ['استفسار عن كشف', 'طلب تسليم مستحقات', 'ملاحظة على عقار', 'أخرى'], def: 'استفسار عن كشف' },
    { k: 'msg', l: 'الرسالة', t: 'area', req: true }
  ], submit: 'إرسال', done: { title: 'أُرسلت الرسالة', text: 'يرد المكتب عادة خلال يوم عمل.' } },
  tenantPay: { title: 'سداد الإيجار', sub: () => 'عمارة الندى 3 · وحدة 204', width: 620, intro: { tone: 'info', text: 'حوّل المبلغ إلى الحساب أدناه ثم أرفق الإيصال. يصدر السند بعد تأكد المكتب من الوصول.' }, fields: [
    { t: 'summary', rows: () => [['المستفيد', 'مكتب الندى لإدارة الأملاك'], ['البنك', 'مصرف الراجحي'], ['IBAN', 'SA44 8000 0000 6080 1234 5678']] },
    { k: 'amount', l: 'المبلغ المحوَّل', t: 'money', req: true, half: true, def: '3000', hint: 'يمكن السداد الجزئي.' },
    { k: 'date', l: 'تاريخ التحويل', t: 'date', half: true, def: '2026-09-23' },
    { k: 'ref', l: 'رقم العملية', t: 'ltr', req: true },
    { k: 'proof', l: 'صورة الإيصال', t: 'file', req: true }
  ], submit: 'إرسال للتحقق', done: { title: 'استلمنا إشعار التحويل', tone: 'warning', text: 'الحالة: بانتظار التحقق. لن يُخصم المبلغ من المتأخر حتى يؤكد المكتب وصوله — عادة خلال يوم عمل.' } },
  tenantMaint: { title: 'طلب صيانة', sub: () => 'عمارة الندى 3 · وحدة 204', width: 560, fields: [
    { k: 'cat', l: 'نوع المشكلة', t: 'select', o: ['تكييف', 'سباكة', 'كهرباء', 'أبواب ونوافذ', 'أخرى'], def: 'سباكة' },
    { k: 'urgent', l: 'الأولوية', t: 'seg', o: ['عادي', 'عاجل — تسريب أو خطر'], def: 'عادي' },
    { k: 'desc', l: 'اشرح المشكلة', t: 'area', req: true },
    { k: 'time', l: 'أنسب وقت للزيارة', t: 'select', o: ['صباحًا', 'بعد العصر', 'مساءً'], def: 'بعد العصر' },
    { k: 'photo', l: 'صورة', t: 'file', opt: true }
  ], submit: 'إرسال الطلب', done: { title: 'وصل طلبك — MR-0414', text: 'سيتواصل معك المكتب لتحديد موعد. تكاليف الصيانة حسب عقدك.' } }
});

function PanelH({ title, action }) { return <div className="pt-panel-h"><h2>{title}</h2>{action}</div>; }

function OwnerPortal() {
  const o = D.owners[0];
  const props = D.properties.filter((p) => p.ownerId === o.id);
  const sets = D.settlements.filter((s) => s.ownerId === o.id);
  const [pending, setPending] = React.useState([
    { id: 'x9', kind: 'expense', desc: 'تغيير ضاغط مكيف — وحدة 201', property: 'عمارة الندى 3', amount: 1850, vendor: 'مؤسسة برودة للصيانة', funding: 'خصم من رصيدك', date: '22/09/2026', why: 'المبلغ أعلى من حد الصرف في اتفاقك (1,000 ر.س).' },
    { id: 'x10', kind: 'settlement', desc: 'تصفية سبتمبر 2026', property: 'عمارة الندى 3 · عمارة الياسمين 7', amount: 12000, offset: 800, fee: 300, date: '23/09/2026', why: 'أرسلها المكتب لموافقتك قبل الاعتماد.' }
  ]);
  const [decided, setDecided] = React.useState([{ id: 'h1', desc: 'تصفية أغسطس 2026', amount: 18400, d: 'yes', note: 'موافق.', at: '04/09/2026 · 21:10' }, { id: 'h2', desc: 'دهان مدخل عمارة الياسمين 7', amount: 2600, d: 'no', note: 'أفضّل تأجيله للشتاء.', at: '28/08/2026 · 18:02' }]);
  const decide = (x) => window.apOpen(x.kind === 'settlement' ? 'ownerSettlementDecision' : 'ownerDecision', { ...x, onSaved: (v) => { setPending((p) => p.filter((y) => y.id !== x.id)); setDecided((h) => [{ id: x.id, desc: x.desc, amount: x.amount, d: v.d, note: v.note, at: D.today + ' · الآن' }, ...h]); } });
  const held = sets.filter((s) => s.status !== 'draft').reduce((a, s) => a + s.net - s.delivered, 0);
  return (
    <>
      <div className="pt-hello"><h1>مرحبًا، {o.name.split(' ')[0]}</h1><p>ملخص أملاكك لدى {D.org} حتى {D.today}. اطلاع فقط — التعديل يتم عبر المكتب.</p></div>
      <SummaryStrip items={[
        { label: 'مستحق لك بحوزة المكتب', amount: held, tone: 'warning', note: 'تصفية أغسطس معتمدة — لم تُسلَّم' },
        { label: 'تحصيل سبتمبر المؤكد', amount: 29583.33, tone: 'success', note: 'حتى اليوم' },
        { label: 'تحويلات مباشرة لحسابك', amount: 3333.33, tone: 'info', note: 'سبتمبر — للعلم' },
        { label: 'الإشغال', value: '35 / 38', tone: 'brand', note: '3 وحدات شاغرة' }
      ]} />
      {pending.map((x) => <section key={x.id} className="pt-approve" aria-label="بانتظار موافقتك">
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}><h3>بانتظار موافقتك: {x.desc}</h3><Money value={x.amount} size="md" /></div>
        <p>{x.property}{x.vendor ? ' · ' + x.vendor : ''} · أُرسلت {x.date}. {x.why}</p>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}><Button icon="Check" onClick={() => decide(x)}>مراجعة واتخاذ قرار</Button>{x.kind === 'expense' ? <Button variant="secondary" icon="Paperclip" onClick={() => window.apOpen('attachments', { name: 'عرض السعر — ' + x.vendor })}>عرض السعر</Button> : <Button variant="secondary" icon="FileText" onClick={() => window.apDoc && window.apDoc('settlement', { owner: o.id, period: 'سبتمبر 2026' })}>معاينة الكشف</Button>}</div>
      </section>)}
      <div className="pt-grid">
        <section className="kit-panel"><PanelH title="التصفيات والكشوف" action={<Button size="sm" variant="secondary" icon="FileText" onClick={() => window.apOpen('ownerStatement', o)}>كشف لفترة</Button>} />
          <ul className="pt-list">{sets.map((s) => <li key={s.id}><div><strong>تصفية {s.period}</strong><small>صافي <Money value={s.net} /> · سُلّم <Money value={s.delivered} /></small></div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}><StatusBadge size="sm" status={s.status === 'paid' ? 'paid' : s.status === 'approved' ? 'due' : 'draft'} label={s.status === 'paid' ? 'سُلّمت' : s.status === 'approved' ? 'معتمدة — لم تُسلَّم' : 'قيد الإعداد'} />{s.status !== 'draft' && <Button size="sm" variant="ghost" iconOnly icon="Download" label="تنزيل الكشف" onClick={() => window.apDoc('settlement', { owner: o.id, period: s.period })} />}</div></li>)}</ul></section>
        <section className="kit-panel"><PanelH title="عقاراتي" />
          <ul className="pt-list">{props.map((p) => <li key={p.id}><div><strong>{p.name}</strong><small>{p.city} · {p.district}</small></div><div style={{ textAlign: 'end' }}><strong>{p.occupied} / {p.units}</strong><small>مؤجرة</small></div></li>)}</ul></section>
      </div>
      <div className="pt-grid">
        <section className="kit-panel"><PanelH title="آخر الأحداث" /><Timeline events={[
          { title: 'تأكدت دفعة 3,000 ر.س — وحدة 101', date: '18/09/2026', actor: 'المكتب', tone: 'success', icon: 'ShieldCheck' },
          { title: 'تحويل مباشر لحسابك 3,333.33 ر.س — وحدة 301', date: '15/09/2026', actor: 'ياسر المالكي', icon: 'Banknote', body: 'وصل لحسابك مباشرة؛ لا يدخل صندوق المكتب.' },
          { title: 'اعتُمدت تصفية أغسطس', date: '05/09/2026', actor: 'مدير المكتب', tone: 'success', icon: 'Check' }
        ]} /></section>
        <section className="kit-panel"><PanelH title="قراراتي" /><ul className="pt-list">{decided.map((h) => <li key={h.id}><div><strong>{h.desc}</strong><small>«{h.note}» · {h.at}</small></div><div style={{ display: 'grid', gap: 4, justifyItems: 'end' }}><Money value={h.amount} /><StatusBadge size="sm" tone={h.d === 'yes' ? 'success' : 'danger'} label={h.d === 'yes' ? 'وافقت' : 'رفضت'} /></div></li>)}</ul></section>
      </div>
      <div className="pt-grid">
        <section className="kit-panel"><PanelH title="تواصل مع المكتب" /><p style={{ margin: '0 0 12px', fontSize: 13, color: 'var(--text-2)' }}>مديرة حسابك: منيرة القحطاني</p><div style={{ display: 'grid', gap: 8 }}><Button variant="secondary" icon="MessageSquare" onClick={() => window.apOpen('ownerMessage')}>إرسال رسالة</Button><Button variant="ghost" icon="Phone" href="tel:0551110004">0551110004</Button></div></section>
      </div>
    </>
  );
}

function TenantPortal() {
  const L = D.lease;
  const [sent, setSent] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  const [reqs, setReqs] = React.useState([{ id: 'q1', amount: 3000, date: '03/07/2026', ref: 'TRX-55102', st: 'ACCEPTED', note: 'تأكد الوصول — سند 000118' }, { id: 'q2', amount: 2000, date: '18/09/2026', ref: 'TRX-0000', st: 'REJECTED', note: 'المرجع غير موجود في كشف الحساب. أرسل إيصالًا يظهر فيه رقم العملية.' }]);
  const RQ = { PENDING: ['warning', 'بانتظار تحقق المكتب'], ACCEPTED: ['success', 'تأكد الوصول'], REJECTED: ['danger', 'رُفض'] };
  const pay = () => window.apOpen('tenantPay', { onSaved: (v) => { setSent(true); setReqs((r) => [{ id: 'q' + Date.now(), amount: Number(v.amount), date: v.date.split('-').reverse().join('/'), ref: v.ref, st: 'PENDING' }, ...r]); } });
  return (
    <>
      <div className="pt-hello"><h1>مرحبًا، خالد</h1><p>عقدك في عمارة الندى 3 · وحدة 204 · {L.start} – {L.end}</p></div>
      <section className="pt-due">
        <div className="pt-due__row"><div style={{ display: 'grid', gap: 4 }}><span>المتأخر عليك حتى اليوم</span><Money value={6000} size="lg" /></div><div style={{ display: 'grid', gap: 4, textAlign: 'end' }}><span>القسط القادم 01/10/2026</span><Money value={3000} size="md" /></div></div>
        {sent ? <Alert tone="info">أرسلت إشعار تحويل — بانتظار تحقق المكتب. سيظهر السند هنا بعد التأكيد.</Alert> : <span>شهرا أغسطس وسبتمبر. سجّلنا وعدك بسداد 4,000 ر.س اليوم.</span>}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}><Button variant="onbrand" icon="Banknote" onClick={pay}>إرسال إثبات تحويل</Button><Button variant="onbrand" icon={copied ? 'Check' : 'Copy'} onClick={() => { try { navigator.clipboard.writeText('SA4480000000608012345678'); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 2500); }}>{copied ? 'نُسخ رقم الآيبان' : 'نسخ IBAN'}</Button></div>
      </section>
      <div className="pt-grid">
        <section className="kit-panel"><PanelH title="الأقساط" />
          <DataTable caption="أقساط العقد" rows={L.charges.map((c) => ({ ...c, st: c.paid >= c.amount ? 'paid' : c.future ? 'future' : 'overdue' }))} columns={[
            { key: 'p', header: 'الفترة', render: (c) => <><span className="ap-cell-strong">{c.period}</span><small>{c.due}</small></> },
            { key: 'a', header: 'القيمة', numeric: true, render: (c) => <Money value={c.amount} /> },
            { key: 's', header: 'الحالة', render: (c) => <StatusBadge size="sm" status={c.st} /> }
          ]} /></section>
        <div style={{ display: 'grid', gap: 16 }}>
          <section className="kit-panel"><PanelH title="إثباتات التحويل" action={<Button size="sm" variant="secondary" icon="Upload" onClick={pay}>إرسال إثبات</Button>} />
            {!reqs.length ? <p style={{ margin: 0, fontSize: 13, color: 'var(--text-3)' }}>لم ترسل إثباتات بعد.</p> : <ul className="pt-list">{reqs.map((r) => <li key={r.id}><div><strong><Money value={r.amount} /> · {r.date}</strong><small><bdi className="ap-ltr">{r.ref}</bdi>{r.note ? ' — ' + r.note : r.st === 'PENDING' ? ' — لا يُخصم من المتأخر حتى التأكيد' : ''}</small></div><StatusBadge size="sm" tone={RQ[r.st][0]} label={RQ[r.st][1]} /></li>)}</ul>}
            {reqs.some((r) => r.st === 'REJECTED') && <Button size="sm" variant="ghost" icon="Upload" style={{ marginTop: 8 }} onClick={pay}>إرسال إثبات جديد بدل المرفوض</Button>}
          </section>
          <section className="kit-panel"><PanelH title="السندات" /><ul className="pt-list"><li><div><strong>سند 000118</strong><small>03/07/2026 · يوليو 2026</small></div><div style={{ display: 'flex', gap: 6, alignItems: 'center' }}><Money value={3000} /><Button size="sm" variant="ghost" iconOnly icon="Download" label="تنزيل السند" /></div></li></ul></section>
          <section className="kit-panel"><PanelH title="الصيانة" action={<Button size="sm" icon="Wrench" onClick={() => window.apOpen('tenantMaint')}>طلب جديد</Button>} /><ul className="pt-list"><li><div><strong>تغيير خلاط المطبخ</strong><small>MR-0395 · 02/09/2026</small></div><StatusBadge size="sm" status="paid" label="مكتمل" /></li></ul></section>
          <section className="kit-panel"><PanelH title="العقد" /><ul className="pt-list"><li><div><strong>عقد إيجار موثق</strong><small>إيجار · {L.ejar}</small></div><Button size="sm" variant="ghost" iconOnly icon="Download" label="تنزيل العقد" /></li></ul></section>
        </div>
      </div>
    </>
  );
}

function App() {
  const [who, setWho] = React.useState(() => new URLSearchParams(location.search).get('as') || localStorage.getItem('amlak-portal') || 'owner');
  const set = (w) => { setWho(w); localStorage.setItem('amlak-portal', w); window.scrollTo(0, 0); };
  const name = who === 'owner' ? D.owners[0].name : D.lease.tenant;
  return (
    <>
      <header className="pt-top"><div className="pt-top__in"><Logo base="../../" width={110} /><div className="pt-who"><div style={{ textAlign: 'end' }}><strong style={{ display: 'block' }}>{name}</strong><span style={{ fontSize: 12, color: 'var(--text-3)' }}>{who === 'owner' ? 'بوابة المالك' : 'بوابة المستأجر'} · {D.org}</span></div><span className="kit-avatar" aria-hidden="true">{name[0]}</span><Button size="sm" variant="ghost" iconOnly icon="LogOut" label="تسجيل الخروج" /></div></div></header>
      <main className="pt-main">{who === 'owner' ? <OwnerPortal /> : <TenantPortal />}</main>
      <div className="pt-switch ap-no-print"><span>نموذج أولي:</span><SegmentedControl label="البوابة" value={who} onChange={set} options={[{ value: 'owner', label: 'المالك' }, { value: 'tenant', label: 'المستأجر' }]} /></div>
      <FormHost />
    </>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
})();