(() => {
// D4 — office-side help & support: articles, support requests, platform access approvals.
const NS = window.AmlakPlusDesignSystem_b3aa85;
const { PageHeader, Tabs, Button, Icon, Alert, StateView, StatusBadge, Field, TextInput, Select, Dialog, SearchField, Timeline, KeyValueList, Checkbox, DataTable } = NS;

const ARTICLES = [
  { id: 'a1', cat: 'التحصيل', t: 'لماذا تبقى الدفعة «بانتظار التحقق»؟', b: 'الدفعة المسجلة تعني أن الموظف استلمها أو أُبلغ بها. لا تدخل رصيد المالك قبل أن يؤكد المحاسب وصولها في حساب الاستلام. افتح «التحصيل والسندات» ← بانتظار التحقق، وطابق المبلغ مع كشف البنك ثم اضغط «تأكيد الاستلام».' },
  { id: 'a2', cat: 'التحصيل', t: 'كيف توزَّع الدفعة الجزئية على الأقساط؟', b: 'تذهب الدفعة إلى أقدم قسط غير مسدد أولًا، ثم الذي يليه. تظهر معاينة التوزيع قبل التسجيل، ويمكن للمدير تغيير التوزيع يدويًا بسبب مكتوب.' },
  { id: 'a3', cat: 'الملاك', t: 'الفرق بين اعتماد التصفية وتسليمها', b: 'الاعتماد يثبّت المبلغ المستحق للمالك ولا يُعدَّل بعده إلا بقيد عكسي. التسليم خطوة منفصلة تسجل كيف وصل المال للمالك ومتى.' },
  { id: 'a4', cat: 'الاستيراد', t: 'تجهيز ملف Excel للعقود', b: 'نزّل القالب من «استيراد ونسخ البيانات». عمود لكل حقل، وتاريخ بصيغة YYYY-MM-DD، ورقم الوحدة كما في قائمة الوحدات. استورد الملاك ثم العقارات ثم العقود.' },
  { id: 'a5', cat: 'الحساب', t: 'إضافة عضو للفريق وتحديد صلاحيته', b: 'من «الفريق والفروع» ← دعوة عضو. تصل الدعوة إلى بريده، وتحدد دوره: محصل، محاسب، مدير، أو اطلاع.' },
  { id: 'a6', cat: 'الحساب', t: 'ماذا يحدث عند انتهاء الاشتراك؟', b: 'تبدأ مهلة تعمل فيها الخدمة كاملة. بعدها يصبح الحساب للاطلاع والتصدير فقط. لا تُحذف البيانات ولا تتأثر عقود المستأجرين.' }
];
const TOPICS = ['التحصيل والسندات', 'العقود', 'الملاك والتصفيات', 'المحاسبة', 'استيراد البيانات', 'الصلاحيات والفريق', 'الاشتراك', 'أخرى'];
const TK = { open: ['مفتوحة', 'info'], waiting: ['بانتظار ردك', 'warning'], solved: ['محلولة', 'success'] };
const TICKETS = [
  { id: 'SUP-0228', subject: 'استيراد ملف العقود توقف عند 60%', topic: 'استيراد البيانات', status: 'open', at: '22/09/2026', by: 'سارة الغامدي', thread: [['سارة الغامدي', '22/09 10:02', 'رفعنا ملف Excel بـ 420 عقدًا وتوقف الشريط عند 60%.'], ['عمر — دعم أملاك بلس', '23/09 11:05', 'نحتاج الاطلاع على سجل الاستيراد فقط لمعرفة السبب. أرسلنا طلب اطلاع لمدير المنشأة.']] },
  { id: 'SUP-0214', subject: 'تغيير اسم المنشأة في السندات', topic: 'أخرى', status: 'solved', at: '02/09/2026', by: 'منيرة القحطاني', thread: [['منيرة القحطاني', '02/09 09:10', 'نريد تغيير الاسم الظاهر في السند.'], ['ريما — دعم أملاك بلس', '02/09 12:40', 'يُعدّل من إعداد المنشأة ← بيانات المنشأة. يظهر الاسم الجديد في السندات القادمة فقط.']] }
];
const ACCESS = { id: 'ACC-031', ticket: 'SUP-0228', by: 'عمر البقمي — دعم أملاك بلس', scope: 'سجلات الاستيراد فقط', hours: 4, reason: 'فحص سبب توقف استيراد ملف العقود', at: '23/09/2026 11:05' };

function HelpScreen() {
  const [tab, setTab] = React.useState('help');
  const [q, setQ] = React.useState('');
  const [art, setArt] = React.useState(null);
  const [tickets, setTickets] = React.useState(TICKETS);
  const [sel, setSel] = React.useState(null);
  const [form, setForm] = React.useState(null);
  const [acc, setAcc] = React.useState('pending');
  const [accDlg, setAccDlg] = React.useState(null);
  const s = q.trim();
  const found = ARTICLES.filter((a) => !s || (a.t + a.b + a.cat).includes(s));
  const cats = [...new Set(found.map((a) => a.cat))];
  const t = sel && tickets.find((x) => x.id === sel);
  return <>
    <PageHeader title="المساعدة والدعم" description="إجابات سريعة، وطلب دعم من فريق أملاك بلس، ومتابعة طلباتك." actions={<Button icon="LifeBuoy" onClick={() => setForm({ topic: '', subject: '', body: '', shot: false })}>طلب دعم</Button>} />
    {acc === 'pending' && <Alert tone="warning" title="طلب اطلاع من فريق الدعم بانتظار موافقتك" actions={<Button size="sm" onClick={() => { setTab('access'); }}>مراجعة الطلب</Button>} style={{ marginBottom: 14 }}>{ACCESS.by} يطلب {ACCESS.scope} لمدة {ACCESS.hours} ساعات.</Alert>}
    <Tabs label="أقسام المساعدة" value={tab} onChange={(v) => { setTab(v); setSel(null); setArt(null); }} tabs={[{ id: 'help', label: 'مقالات المساعدة' }, { id: 'tickets', label: 'طلبات الدعم', count: tickets.filter((x) => x.status !== 'solved').length }, { id: 'access', label: 'اطلاع فريق الدعم', count: acc === 'pending' ? 1 : undefined }]} />
    <div style={{ marginTop: 14 }}>
      {tab === 'help' && (art ? <article className="kit-panel hp-art"><button type="button" className="kit-src" onClick={() => setArt(null)}>← كل المقالات</button><span className="hp-cat">{art.cat}</span><h2>{art.t}</h2><p>{art.b}</p>
        <div className="hp-useful"><span>هل أجابت عن سؤالك؟</span><Button size="sm" variant="secondary" icon="ThumbsUp" onClick={() => setArt(null)}>نعم</Button><Button size="sm" variant="ghost" onClick={() => setForm({ topic: art.cat === 'التحصيل' ? 'التحصيل والسندات' : '', subject: art.t, body: '', shot: false })}>لا — اطلب دعمًا</Button></div></article>
        : <><SearchField value={q} onChange={setQ} placeholder="ابحث: تحقق، تصفية، استيراد…" label="بحث في المساعدة" style={{ maxWidth: 520 }} />
          {found.length ? cats.map((c) => <section key={c} style={{ marginTop: 18 }}><h2 className="kit-h2" style={{ marginTop: 0 }}>{c}</h2><ul className="hp-list">{found.filter((a) => a.cat === c).map((a) => <li key={a.id}><button type="button" onClick={() => setArt(a)}><Icon name="FileText" size={16} /><span>{a.t}</span><Icon name="ChevronLeft" size={16} /></button></li>)}</ul></section>)
            : <StateView boxed kind="noResults" title={'لا مقالات عن «' + s + '»'} text="اطلب دعمًا وسيرد عليك الفريق." actions={<Button variant="secondary" onClick={() => setForm({ topic: '', subject: s, body: '', shot: false })}>طلب دعم</Button>} style={{ marginTop: 14 }} />}</>)}
      {tab === 'tickets' && (t ? <section className="kit-panel" style={{ display: 'grid', gap: 14 }}>
          <button type="button" className="kit-src" style={{ justifySelf: 'start' }} onClick={() => setSel(null)}>← كل الطلبات</button>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap' }}><div><h2 style={{ margin: 0, fontSize: 19 }}>{t.subject}</h2><p className="kit-scope" style={{ margin: '4px 0 0' }}>{t.id} · {t.topic} · {t.by}</p></div><StatusBadge size="sm" tone={TK[t.status][1]} showIcon={false} label={TK[t.status][0]} /></div>
          <Timeline events={t.thread.map(([who, at, body], i) => ({ key: i, title: who, date: at, body, tone: who.includes('أملاك بلس') ? 'info' : 'neutral' }))} />
          {t.status !== 'solved' ? <Reply onSend={(txt) => setTickets((ts) => ts.map((x) => x.id === t.id ? { ...x, status: 'open', thread: [...x.thread, ['أنت', 'الآن', txt]] } : x))} /> : <Alert tone="neutral">أُغلق الطلب. إن عادت المشكلة أرسل طلبًا جديدًا واذكر {t.id}.</Alert>}
        </section>
        : tickets.length ? <DataTable caption="طلبات الدعم" rows={tickets} onRowClick={(x) => setSel(x.id)} columns={[{ key: 's', header: 'الطلب', render: (x) => <div style={{ display: 'grid' }}><b style={{ fontWeight: 600, fontSize: 14 }}>{x.subject}</b><span style={{ fontSize: 12, color: 'var(--text-3)' }}>{x.id} · {x.topic}</span></div> }, { key: 'b', header: 'أرسله', render: (x) => x.by }, { key: 'd', header: 'التاريخ', render: (x) => <bdi className="ap-num">{x.at}</bdi> }, { key: 'st', header: 'الحالة', render: (x) => <StatusBadge size="sm" tone={TK[x.status][1]} showIcon={false} label={TK[x.status][0]} /> }]} />
        : <StateView boxed kind="empty" icon="LifeBuoy" title="لا طلبات دعم" text="أرسل طلبًا وتابعه من هنا." />)}
      {tab === 'access' && <section className="kit-panel" style={{ display: 'grid', gap: 14, maxWidth: 760 }}>
        <p className="kit-scope" style={{ margin: 0 }}>فريق أملاك بلس لا يرى بيانات منشأتك. إن احتاج الدعم الاطلاع لحل مشكلة، يصلك طلب هنا بنطاق ومدة محددين، ولا يبدأ إلا بموافقة مدير المنشأة.</p>
        <div className={'hp-acc is-' + acc}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, flexWrap: 'wrap' }}><b>{ACCESS.id} — مرتبط بـ {ACCESS.ticket}</b><StatusBadge size="sm" tone={{ pending: 'warning', approved: 'success', declined: 'neutral', ended: 'neutral' }[acc]} showIcon={false} label={{ pending: 'بانتظار موافقتك', approved: 'موافَق — ينتهي 15:05', declined: 'مرفوض', ended: 'انتهى' }[acc]} /></div>
          <KeyValueList columns={2} items={[{ label: 'من', value: ACCESS.by }, { label: 'الوقت', value: <bdi className="ap-num">{ACCESS.at}</bdi> }, { label: 'النطاق', value: ACCESS.scope }, { label: 'المدة', value: ACCESS.hours + ' ساعات' }, { label: 'السبب', value: ACCESS.reason, span: true }]} />
          <ul className="hp-rules"><li><Icon name="Eye" size={14} />قراءة فقط — لا يسجل أو يعدل أي عملية.</li><li><Icon name="EyeOff" size={14} />لا يرى مرفقات المستأجرين أو هوياتهم.</li><li><Icon name="ScrollText" size={14} />كل صفحة يفتحها تظهر لك في سجل الاطلاع.</li></ul>
          {acc === 'pending' && <div style={{ display: 'flex', gap: 8 }}><Button icon="Check" onClick={() => setAccDlg('approve')}>الموافقة</Button><Button variant="secondary" onClick={() => setAccDlg('decline')}>رفض</Button></div>}
          {acc === 'approved' && <><Timeline events={[{ key: 1, title: 'فتح سجل الاستيراد — ملف contracts_sep.xlsx', date: 'اليوم 11:20', actor: 'عمر البقمي', tone: 'info' }, { key: 2, title: 'بدء الجلسة', date: 'اليوم 11:18', actor: 'عمر البقمي', tone: 'neutral' }]} /><div><Button variant="danger" icon="CircleStop" onClick={() => setAcc('ended')}>إنهاء الاطلاع الآن</Button></div></>}
        </div>
      </section>}
    </div>
    {form && <SupportForm init={form} onClose={() => setForm(null)} onSent={(v) => { const id = 'SUP-0' + (232 + tickets.length); setTickets((ts) => [{ id, subject: v.subject, topic: v.topic, status: 'open', at: '24/09/2026', by: 'أنت', thread: [['أنت', 'الآن', v.body]] }, ...ts]); setForm(null); setTab('tickets'); setSel(id); }} />}
    {accDlg && <Dialog open title={accDlg === 'approve' ? 'الموافقة على اطلاع الدعم' : 'رفض طلب الاطلاع'} onClose={() => setAccDlg(null)} width={480} footer={<><Button variant="ghost" onClick={() => setAccDlg(null)}>إلغاء</Button><Button variant={accDlg === 'approve' ? 'primary' : 'secondary'} onClick={() => { setAcc(accDlg === 'approve' ? 'approved' : 'declined'); setAccDlg(null); }}>{accDlg === 'approve' ? 'موافقة لمدة 4 ساعات' : 'رفض'}</Button></>}>
      {accDlg === 'approve' ? <p style={{ margin: 0, fontSize: 14 }}>يطّلع {ACCESS.by} على {ACCESS.scope}، للقراءة فقط، حتى الساعة 15:05. يمكنك إنهاء الاطلاع في أي وقت.</p> : <p style={{ margin: 0, fontSize: 14 }}>يُبلَّغ فريق الدعم بالرفض، ويستمر في طلبك دون اطلاع. قد يطلب منك معلومات إضافية.</p>}
    </Dialog>}
  </>;
}

function Reply({ onSend }) {
  const [v, setV] = React.useState('');
  return <div style={{ display: 'grid', gap: 8 }}><Field label="ردك"><TextInput multiline rows={3} value={v} onChange={(e) => setV(e.target.value)} /></Field><div><Button icon="Send" disabled={!v.trim()} onClick={() => { onSend(v.trim()); setV(''); }}>إرسال</Button></div></div>;
}

function SupportForm({ init, onClose, onSent }) {
  const [v, setV] = React.useState(init);
  const [tried, setTried] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [fail, setFail] = React.useState(false);
  const err = { topic: !v.topic, subject: v.subject.trim().length < 4, body: v.body.trim().length < 10 };
  const send = () => { setTried(true); setFail(false); if (Object.values(err).some(Boolean)) return; setBusy(true); setTimeout(() => { setBusy(false); if (v.subject.includes('فشل')) { setFail(true); return; } onSent(v); }, 900); };
  return <Dialog open title="طلب دعم" subtitle="يصل إلى فريق أملاك بلس، ويرد عليك هنا وعلى بريدك." onClose={onClose} busy={busy} width={560} footer={<><Button variant="ghost" onClick={onClose}>إلغاء</Button><Button loading={busy} onClick={send}>إرسال الطلب</Button></>}>
    <div style={{ display: 'grid', gap: 14 }}>
      {fail && <Alert tone="danger">تعذر الإرسال الآن. ما كتبته محفوظ — حاول مرة أخرى.</Alert>}
      <Field label="الموضوع" error={tried && err.topic ? 'اختر الموضوع.' : null}><Select placeholder="اختر" value={v.topic} onChange={(e) => setV({ ...v, topic: e.target.value })} options={TOPICS} /></Field>
      <Field label="العنوان" error={tried && err.subject ? 'اكتب عنوانًا قصيرًا.' : null}><TextInput value={v.subject} onChange={(e) => setV({ ...v, subject: e.target.value })} placeholder="مثال: لا يظهر زر اعتماد التصفية" /></Field>
      <Field label="التفاصيل" hint="ماذا كنت تفعل، وماذا ظهر لك. اذكر رقم العقد أو السند إن وُجد." error={tried && err.body ? 'اكتب التفاصيل (10 أحرف على الأقل).' : null}><TextInput multiline rows={4} value={v.body} onChange={(e) => setV({ ...v, body: e.target.value })} /></Field>
      <Checkbox label="إرفاق لقطة من الشاشة الحالية" hint="تُرفق صورة الصفحة فقط، دون ملفات أو مرفقات من النظام." checked={v.shot} onChange={(e) => setV({ ...v, shot: e.target.checked })} />
      <Alert tone="neutral" icon="ShieldCheck">لا ترفق هويات المستأجرين أو عقودهم. إن احتاج الفريق الاطلاع، يطلب موافقة مدير المنشأة أولًا.</Alert>
    </div>
  </Dialog>;
}

Object.assign(window, { HelpScreen });
})();