(() => {
// D6 — publishing inside the office: listings, inquiries, public office page settings.
const NS = window.AmlakPlusDesignSystem_b3aa85;
const { PageHeader, Tabs, Button, Icon, Alert, StateView, StatusBadge, Field, TextInput, Select, Dialog, DataTable, KeyValueList, Checkbox, SegmentedControl, Timeline, SummaryStrip } = NS;
const PUB = window.PUB;
const LS = { draft: ['مسودة', 'neutral'], review: ['بانتظار الاعتماد', 'warning'], published: ['منشور', 'success'], hidden: ['مخفي', 'neutral'], suspended: ['موقوف من المنصة', 'danger'], expired: ['منتهٍ', 'neutral'] };
const b = (m, k) => <StatusBadge size="sm" tone={m[k][1]} showIcon={false} label={m[k][0]} />;
const two = (a, c) => <div style={{ display: 'grid', gap: 2 }}><strong style={{ fontSize: 14, fontWeight: 600 }}>{a}</strong>{c && <span style={{ fontSize: 12, color: 'var(--text-3)' }}>{c}</span>}</div>;
const seed = () => [...PUB.listings.filter((l) => l.office === 'alnada'), { id: 'l106', office: 'alnada', deal: 'rent', type: 'شقة', title: 'شقة 2 غرف — عمارة الروضة، وحدة 7', city: 'الرياض', district: 'الروضة', price: 34000, period: 'سنويًا', rooms: 2, baths: 1, area: 98, photos: 0, status: 'draft', published: '—', views: 0, feats: [] }, { id: 'l107', office: 'alnada', deal: 'rent', type: 'شقة', title: 'شقة 3 غرف — عمارة النخيل، وحدة 12', city: 'الرياض', district: 'الملقا', price: 39000, period: 'سنويًا', rooms: 3, baths: 2, area: 132, photos: 4, status: 'review', published: '—', views: 0, feats: [], by: 'خالد — موظف' }, { id: 'l108', office: 'alnada', deal: 'rent', type: 'شقة', title: 'شقة غرفتين — حي الربيع', city: 'الرياض', district: 'الربيع', price: 31000, period: 'سنويًا', rooms: 2, baths: 1, area: 90, photos: 3, status: 'suspended', published: '2026-09-02', views: 61, feats: [], reason: 'بلاغات متكررة: العقار مؤجر والإعلان ما زال ظاهرًا.' }];
const INQ0 = [
  { id: 'INQ-58231', l: 'l101', kind: 'visit', name: 'عبدالرحمن الشهري', phone: '0501234987', msg: 'هل يمكن المعاينة يوم السبت؟', at: 'اليوم 10:14', status: 'new' },
  { id: 'INQ-58219', l: 'l104', kind: 'ask', name: 'هند العنزي', phone: '0569988776', msg: 'هل السعر قابل للتفاوض؟', at: 'أمس 21:03', status: 'new' },
  { id: 'INQ-58190', l: 'l102', kind: 'ask', name: 'ماجد', phone: '0533344556', msg: '', at: '21/09', status: 'contacted', owner: 'سارة' },
  { id: 'INQ-58188', l: 'l102', kind: 'ask', name: 'ماجد', phone: '0533344556', msg: 'تكرار', at: '21/09', status: 'dup' },
  { id: 'INQ-58102', l: 'l105', kind: 'visit', name: 'ريم', phone: '0551112299', msg: '', at: '12/09', status: 'closed', owner: 'سارة' }
];
const IS = { new: ['جديد', 'info'], contacted: ['تم التواصل', 'success'], dup: ['مكرر', 'neutral'], closed: ['مغلق', 'neutral'] };

function ListingsScreen() {
  const [tab, setTab] = React.useState('listings');
  const [rows, setRows] = React.useState(seed);
  const [inq, setInq] = React.useState(INQ0);
  const [wiz, setWiz] = React.useState(null);
  const [view, setView] = React.useState(null);
  const [st, setSt] = React.useState('');
  const up = (id, p) => setRows((rs) => rs.map((r) => r.id === id ? { ...r, ...p } : r));
  const cnt = (s) => rows.filter((r) => r.status === s).length;
  const shown = rows.filter((r) => !st || r.status === st);
  const v = view && rows.find((r) => r.id === view);
  return <>
    <PageHeader title="النشر" description="إعلانات عامة تظهر في صفحة المكتب وفي السوق من نفس المصدر. الإعلان نسخة عامة منفصلة عن بيانات الوحدة والعقد." actions={<div style={{ display: 'flex', gap: 8 }}><Button variant="secondary" icon="ExternalLink" href="../public/office.html?o=alnada">صفحة المكتب</Button><Button icon="Plus" onClick={() => setWiz({ step: 0 })}>إعلان جديد</Button></div>} />
    <Tabs label="أقسام النشر" value={tab} onChange={setTab} tabs={[{ id: 'listings', label: 'الإعلانات', count: rows.length }, { id: 'inq', label: 'الاستفسارات', count: inq.filter((i) => i.status === 'new').length }, { id: 'page', label: 'صفحة المكتب' }]} />
    <div style={{ marginTop: 14 }}>
      {tab === 'listings' && <>
        <SummaryStrip items={[{ key: 'p', label: 'منشورة', value: cnt('published'), tone: 'success', onClick: () => setSt(st === 'published' ? '' : 'published'), selected: st === 'published' }, { key: 'r', label: 'بانتظار الاعتماد', value: cnt('review'), tone: 'warning', onClick: () => setSt(st === 'review' ? '' : 'review'), selected: st === 'review' }, { key: 'd', label: 'مسودات', value: cnt('draft'), tone: 'neutral', onClick: () => setSt(st === 'draft' ? '' : 'draft'), selected: st === 'draft' }, { key: 's', label: 'موقوفة من المنصة', value: cnt('suspended'), tone: 'danger', onClick: () => setSt(st === 'suspended' ? '' : 'suspended'), selected: st === 'suspended' }]} />
        <div style={{ marginTop: 12 }}><DataTable caption="الإعلانات" rows={shown} onRowClick={(r) => setView(r.id)} columns={[
          { key: 't', header: 'الإعلان', render: (r) => two(r.title, (r.deal === 'sale' ? 'بيع' : 'إيجار') + ' · ' + r.district + (r.photos ? '' : ' · بلا صور')) },
          { key: 'p', header: 'السعر', render: (r) => <bdi className="ap-num" style={{ fontSize: 13 }}>{PUB.priceText(r)}</bdi> },
          { key: 'v', header: 'المشاهدات', render: (r) => <bdi className="ap-num">{r.views}</bdi> },
          { key: 'd', header: 'نُشر', render: (r) => <bdi className="ap-num" style={{ fontSize: 13 }}>{r.published}</bdi> },
          { key: 's', header: 'الحالة', render: (r) => b(LS, r.status) }
        ]} /></div>
        <p className="kit-scope" style={{ marginTop: 10 }}>تأجير الوحدة لا يخفي الإعلان تلقائيًا — ننبهك لإخفائه عند توقيع العقد. تعديل بيانات الوحدة لا ينشر تلقائيًا.</p>
      </>}
      {tab === 'inq' && <Inquiries inq={inq} setInq={setInq} rows={rows} />}
      {tab === 'page' && <PageSettings />}
    </div>
    {v && <ListingPanel l={v} onClose={() => setView(null)} up={(p) => up(v.id, p)} />}
    {wiz && <Wizard onClose={() => setWiz(null)} onSave={(l) => { setRows((rs) => [l, ...rs]); setWiz(null); setView(l.id); }} />}
  </>;
}

function ListingPanel({ l, onClose, up }) {
  const [lift, setLift] = React.useState(false);
  const [why, setWhy] = React.useState('');
  const acts = { draft: [['إرسال للاعتماد', () => up({ status: 'review' })], ['اعتماد ونشر', () => up({ status: 'published', published: '2026-09-24' }), 'primary']], review: [['اعتماد ونشر', () => up({ status: 'published', published: '2026-09-24' }), 'primary'], ['إرجاع للمسودة', () => up({ status: 'draft' })]], published: [['إخفاء', () => up({ status: 'hidden' })], ['إنهاء الإعلان', () => up({ status: 'expired' })]], hidden: [['إعادة النشر', () => up({ status: 'published' }), 'primary']], expired: [['نسخ كإعلان جديد', () => {}]], suspended: [] }[l.status];
  return <Dialog open title={l.title} subtitle={<>{b(LS, l.status)} {l.id}</>} onClose={onClose} width={640} footer={<><Button variant="ghost" onClick={onClose}>إغلاق</Button>{l.status === 'published' && <Button variant="secondary" icon="ExternalLink" href={'../public/listing.html?id=' + l.id + '&from=office'}>عرض الصفحة العامة</Button>}{acts.map(([t, fn, v]) => <Button key={t} variant={v || 'secondary'} onClick={() => { fn(); onClose(); }}>{t}</Button>)}</>}>
    <div style={{ display: 'grid', gap: 14 }}>
      {l.status === 'suspended' && <Alert tone="danger" title="أوقفت إدارة أملاك بلس هذا الإعلان">{l.reason} لا يظهر في صفحة المكتب أو السوق. إعادة النشر تحتاج طلب رفع الإيقاف.</Alert>}
      {l.status === 'suspended' && (lift ? <Alert tone="info">أُرسل طلب رفع الإيقاف. تصلك النتيجة في الإشعارات.</Alert> : <div style={{ display: 'grid', gap: 8 }}><Field label="طلب رفع الإيقاف" hint="اشرح ما صححته — مثلًا: حدّثنا التوفر أو أخفينا الوحدة المؤجرة."><TextInput multiline rows={2} value={why} onChange={(e) => setWhy(e.target.value)} /></Field><div><Button disabled={why.trim().length < 10} onClick={() => setLift(true)}>إرسال الطلب</Button></div></div>)}
      {l.status === 'review' && <Alert tone="warning">جهّزه {l.by}. الاعتماد لمدير المكتب أو من يملك صلاحية النشر.</Alert>}
      {!l.photos && l.status !== 'suspended' && <Alert tone="warning">لا صور. الإعلانات بلا صور تظهر بصورة بديلة ويقل التواصل عليها.</Alert>}
      <KeyValueList columns={2} items={[{ label: 'النوع', value: (l.deal === 'sale' ? 'بيع — ' : 'إيجار — ') + l.type }, { label: 'السعر', value: <bdi className="ap-num">{PUB.priceText(l)}</bdi> }, { label: 'الموقع المعروض', value: 'حي ' + l.district + ' (دون الموقع الدقيق)' }, { label: 'المساحة', value: l.area + ' م²' }, { label: 'الصور', value: l.photos || 'لا يوجد' }, { label: 'المشاهدات', value: l.views }]} />
      <div className="pub-excl"><h3>لا يُنشر أبدًا</h3><p>اسم المستأجر، العقد، المديونية، IBAN، الصك، المرفقات الخاصة، رقم الوحدة الداخلي.</p></div>
      <Timeline events={[l.status !== 'draft' && { key: 1, title: l.status === 'suspended' ? 'إيقاف من المنصة' : l.status === 'review' ? 'أُرسل للاعتماد' : 'نُشر', date: l.published, actor: l.status === 'suspended' ? 'فريق أملاك بلس' : 'منيرة القحطاني — مديرة', tone: l.status === 'suspended' ? 'danger' : 'success' }, { key: 0, title: 'أُنشئت المسودة', date: '—', actor: l.by || 'سارة الغامدي', tone: 'neutral' }].filter(Boolean)} />
    </div>
  </Dialog>;
}

const UNITS = [{ value: 'u7', label: 'عمارة الروضة — وحدة 7 (شاغرة)' }, { value: 'u12', label: 'عمارة النخيل — وحدة 12 (تنتهي 31/10)' }, { value: 'u3', label: 'عمارة الياسمين — وحدة 3 (مؤجرة)' }];
function Wizard({ onClose, onSave }) {
  const [step, setStep] = React.useState(0);
  const [v, setV] = React.useState({ unit: '', deal: 'rent', title: '', price: '', period: 'سنويًا', photos: 0, video: '', loc: 'district', avail: 'متاحة الآن' });
  const [tried, setTried] = React.useState(false);
  const set = (k) => (e) => setV({ ...v, [k]: e && e.target ? e.target.value : e });
  const errs = [{ unit: !v.unit }, { title: v.title.trim().length < 8, price: !(+v.price > 0) }, {}][step];
  const next = () => { setTried(true); if (Object.values(errs).some(Boolean)) return; setTried(false); if (v.unit && !v.title) setV((x) => ({ ...x, title: x.unit === 'u7' ? 'شقة 2 غرف — حي الروضة' : 'شقة 3 غرف — حي الملقا' })); setStep(step + 1); };
  const save = (status) => onSave({ id: 'l' + Date.now(), office: 'alnada', deal: v.deal, type: 'شقة', title: v.title, city: 'الرياض', district: v.unit === 'u7' ? 'الروضة' : 'الملقا', price: +v.price, period: v.period, rooms: 2, baths: 1, area: 98, photos: v.photos, status, published: status === 'published' ? '2026-09-24' : '—', views: 0, feats: [] });
  return <Dialog open title="إعلان جديد" subtitle={['1. اختر الوحدة', '2. النسخة العامة', '3. المعاينة والنشر'][step]} onClose={onClose} width={620} footer={<>{step > 0 && <Button variant="ghost" onClick={() => setStep(step - 1)}>السابق</Button>}{step < 2 ? <Button onClick={next}>التالي</Button> : <><Button variant="secondary" onClick={() => save('draft')}>حفظ كمسودة</Button><Button variant="secondary" onClick={() => save('review')}>إرسال للاعتماد</Button><Button onClick={() => save('published')}>اعتماد ونشر</Button></>}</>}>
    {step === 0 && <div style={{ display: 'grid', gap: 12 }}>
      <Field label="الوحدة" error={tried && errs.unit ? 'اختر الوحدة.' : null}><Select placeholder="اختر وحدة" value={v.unit} onChange={set('unit')} options={UNITS} /></Field>
      {v.unit === 'u3' && <Alert tone="warning">الوحدة مؤجرة حاليًا. يمكنك النشر مسبقًا بتاريخ توفر لاحق، ولن يظهر المستأجر الحالي أو عقده.</Alert>}
      <Field label="نوع العرض"><SegmentedControl label="نوع العرض" value={v.deal} onChange={set('deal')} options={[{ value: 'rent', label: 'إيجار' }, { value: 'sale', label: 'بيع' }]} /></Field>
      <p className="kit-scope" style={{ margin: 0 }}>نأخذ المساحة والغرف والحي من بيانات الوحدة، ويمكنك تعديلها في النسخة العامة دون تغيير الوحدة.</p></div>}
    {step === 1 && <div className="kit-form">
      <Field label="عنوان الإعلان" className="is-full" error={tried && errs.title ? 'عنوان من 8 أحرف على الأقل.' : null}><TextInput value={v.title} onChange={set('title')} placeholder="مثال: شقة 2 غرف — حي الروضة" /></Field>
      <Field label={v.deal === 'sale' ? 'سعر البيع' : 'الإيجار'} error={tried && errs.price ? 'أدخل السعر.' : null} hint="لا يغيّر سعر العقد الحالي أو السابق."><TextInput ltr inputMode="numeric" value={v.price} onChange={set('price')} placeholder="34000" /></Field>
      {v.deal === 'rent' && <Field label="الدورية"><Select value={v.period} onChange={set('period')} options={['سنويًا', 'شهريًا']} /></Field>}
      <Field label="التوفر"><TextInput value={v.avail} onChange={set('avail')} /></Field>
      <Field label="دقة الموقع"><Select value={v.loc} onChange={set('loc')} options={[{ value: 'district', label: 'الحي فقط' }, { value: 'street', label: 'الشارع (يحتاج سياسة)', disabled: true }]} /></Field>
      <div className="is-full kit-file"><Button size="sm" variant="secondary" icon="ImagePlus" onClick={() => setV({ ...v, photos: v.photos + 3 })}>إضافة صور</Button><span className="kit-file__hint">{v.photos ? v.photos + ' صور مرفوعة' : 'لا صور بعد — JPG أو PNG حتى 5 م.ب'}</span></div>
      <Field label="رابط فيديو" optional className="is-full" hint="رابط خارجي (يوتيوب مثلًا). لا يُرفع ملف فيديو."><TextInput ltr value={v.video} onChange={set('video')} placeholder="https://" /></Field>
    </div>}
    {step === 2 && <div style={{ display: 'grid', gap: 12 }}>
      <div className="pub-prev"><div className="pub-prev__ph">{v.photos ? 'صورة العقار' : 'لا صور'}</div><div><b>{v.title}</b><span>حي {v.unit === 'u7' ? 'الروضة' : 'الملقا'}، الرياض</span><strong className="ap-num">{(+v.price).toLocaleString('en-US')} ر.س{v.deal === 'rent' ? ' / ' + (v.period === 'شهريًا' ? 'شهر' : 'سنة') : ''}</strong></div></div>
      <KeyValueList layout="rows" items={[{ label: 'يظهر في', value: 'صفحة المكتب + السوق' }, { label: 'الناشر الظاهر', value: 'مكتب الندى لإدارة الأملاك' }, { label: 'الاستفسارات تصل إلى', value: 'النشر ← الاستفسارات' }]} />
      <div className="pub-excl"><h3>لن يُنشر</h3><p>المستأجر الحالي، العقد، المديونية، IBAN، الصك، المرفقات الخاصة، رقم الوحدة الداخلي.</p></div>
    </div>}
  </Dialog>;
}

function Inquiries({ inq, setInq, rows }) {
  const [sel, setSel] = React.useState(inq[0].id);
  const i = inq.find((x) => x.id === sel);
  const l = rows.find((r) => r.id === i.l) || PUB.listings.find((r) => r.id === i.l);
  const up = (p) => setInq((xs) => xs.map((x) => x.id === sel ? { ...x, ...p } : x));
  return <div className="pub-inbox">
    <div className="kit-group" style={{ margin: 0 }}><ul className="pub-list">{inq.map((x) => <li key={x.id}><button type="button" aria-current={x.id === sel || undefined} onClick={() => setSel(x.id)}>{two(x.name, (x.kind === 'visit' ? 'طلب معاينة' : 'استفسار') + ' · ' + x.at)}{b(IS, x.status)}</button></li>)}</ul></div>
    <section className="kit-panel" style={{ display: 'grid', gap: 14, alignContent: 'start' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, flexWrap: 'wrap' }}><div><h2 style={{ margin: 0, fontSize: 18 }}>{i.kind === 'visit' ? 'طلب معاينة' : 'استفسار'} — {i.name}</h2><p className="kit-scope" style={{ margin: '4px 0 0' }}>{i.id} · {i.at}</p></div>{b(IS, i.status)}</div>
      {i.status === 'dup' && <Alert tone="neutral">نفس الجوال أرسل INQ-58190 عن الإعلان نفسه. لا حاجة للرد مرتين.</Alert>}
      <KeyValueList columns={2} items={[{ label: 'الجوال', value: <bdi className="ap-num">{i.phone}</bdi> }, { label: 'الإعلان', value: l ? l.title : '—' }, { label: 'الرسالة', value: i.msg || '—', span: true }, i.owner && { label: 'المسؤول', value: i.owner }]} />
      {l && l.status !== 'published' && <Alert tone="warning">الإعلان لم يعد منشورًا ({LS[l.status][0]}).</Alert>}
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <Button variant="secondary" icon="Phone" href={'tel:' + i.phone}>اتصال</Button>
        {i.status === 'new' && <Button icon="Check" onClick={() => up({ status: 'contacted', owner: 'أنت' })}>تعليم «تم التواصل»</Button>}
        {i.status !== 'closed' && i.status !== 'dup' && <Button variant="ghost" onClick={() => up({ status: 'closed' })}>إغلاق</Button>}
      </div>
      <p className="kit-scope" style={{ margin: 0 }}>بيانات المستفسر تُستخدم للرد على طلبه فقط، ولا تُضاف تلقائيًا إلى المستأجرين.</p>
    </section>
  </div>;
}

function PageSettings() {
  const o = PUB.offices.alnada;
  const [on, setOn] = React.useState(true);
  const [lay, setLay] = React.useState(() => { try { return localStorage.getItem('ap-office-layout-' + o.slug) || 'classic'; } catch (e) { return 'classic'; } });
  const pickLay = (v) => { setLay(v); try { localStorage.setItem('ap-office-layout-' + o.slug, v); } catch (e) {} };
  const prev = '../public/' + (lay === '3d' ? 'office-3d.html' : 'office.html') + '?o=' + o.slug;
  return <div className="pub-2col">
    <section className="kit-panel" style={{ display: 'grid', gap: 14 }}>
      <Checkbox label="صفحة المكتب العامة مفعّلة" hint="عند الإيقاف تختفي الصفحة، وتبقى إعلاناتك في السوق." checked={on} onChange={(e) => setOn(e.target.checked)} />
      <Field label="رابط الصفحة" hint="مستضاف على أملاك بلس. النطاق الخاص مرحلة لاحقة."><div style={{ display: 'flex', gap: 0, direction: 'ltr' }}><span className="pub-pre">amlakplus.sa/offices/</span><TextInput ltr value={o.slug} onChange={() => {}} /></div></Field>
      <Field label="طريقة عرض الصفحة" hint={lay === '3d' ? 'مشهد ثلاثي الأبعاد للأحياء ومخطط تفاعلي لكل وحدة. يعرض الشكل الكلاسيكي تلقائيًا على الأجهزة التي لا تدعمه.' : 'قائمة إعلانات بالصور والتصفية. أخف وأسرع تحميلًا.'}><SegmentedControl label="طريقة عرض الصفحة" value={lay} onChange={pickLay} options={[{ value: 'classic', label: 'كلاسيكي' }, { value: '3d', label: 'تفاعلي ثلاثي الأبعاد' }]} /></Field>
      <div className="kit-file"><span className="pub-logo">{o.initials}</span><Button size="sm" variant="secondary" icon="Upload">رفع الشعار</Button><span className="kit-file__hint">مربع، PNG أو SVG</span></div>
      <Field label="نبذة"><TextInput multiline rows={3} value={o.about} onChange={() => {}} /></Field>
      <div className="kit-form"><Field label="هاتف التواصل"><TextInput ltr value={o.phone} onChange={() => {}} /></Field><Field label="واتساب" optional><TextInput ltr value={o.whatsapp} onChange={() => {}} /></Field><Field label="البريد" optional><TextInput ltr value={o.email} onChange={() => {}} /></Field><Field label="أوقات العمل"><TextInput value={o.hours} onChange={() => {}} /></Field></div>
      <Field label="رخصة فال" hint="تظهر في الصفحة وكل إعلان."><TextInput ltr value={o.fal} onChange={() => {}} /></Field>
      <div style={{ display: 'flex', gap: 8 }}><Button>حفظ</Button><Button variant="secondary" icon="ExternalLink" href={prev}>معاينة</Button></div>
    </section>
    <Alert tone="neutral" title="ما يظهر للزوار">اسم المكتب وشعاره ونبذته ووسائل التواصل أعلاه، والإعلانات المنشورة فقط. لا يظهر الملاك أو المستأجرون أو أي رقم مالي.</Alert>
  </div>;
}

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