(() => {
const { PageHeader, FilterBar, SearchField, Field, Select, SegmentedControl, DataTable, Pagination, Button, StatusBadge, StateView, Icon } = window.AmlakPlusDesignSystem_b3aa85;

// List state lives in the parent so "back" restores search, filters, view and page.
function PropertiesScreen({ state, setState, openProperty, openOwner }) {
  const D = window.AP_DATA;
  const [loading, setLoading] = React.useState(false);
  const owner = (id) => D.owners.find((o) => o.id === id);
  const s = state;
  const upd = (k) => (v) => { setLoading(true); setState({ ...s, [k]: v && v.target ? v.target.value : v, page: k === 'page' || k === 'size' ? (k === 'page' ? v : 1) : 1 }); setTimeout(() => setLoading(false), 350); };
  const rows = D.properties.filter((p) => (!s.q || (p.name + p.district + owner(p.ownerId).name).includes(s.q)) && (!s.city || p.city === s.city) && (!s.owner || p.ownerId === s.owner) && (!s.use || p.use === s.use));
  const active = [s.city && { key: 'city', label: 'المدينة', value: s.city }, s.owner && { key: 'owner', label: 'المالك', value: owner(s.owner).name }, s.use && { key: 'use', label: 'الاستخدام', value: s.use }].filter(Boolean);
  const actions = (p) => <div style={{ display: 'flex', gap: 6 }}><Button size="sm" variant="secondary" onClick={() => openProperty(p.id)}>فتح الملف</Button><Button size="sm" variant="ghost" icon="ReceiptText" onClick={() => openProperty(p.id, 'sheet')}>الكشف</Button></div>;
  return (
    <>
      <PageHeader title="العقارات" description={D.properties.length + ' عقارات · 102 وحدة في ' + D.org} actions={<><Button variant="secondary" icon="Upload" onClick={() => window.apOpen('import', { entity: 'العقارات' })}>استيراد</Button><Button icon="Plus" onClick={() => window.apOpen('property')}>إضافة عقار</Button></>} />
      <FilterBar search={<SearchField value={s.q} onChange={upd('q')} placeholder="اسم العقار أو الحي أو المالك" />}
        end={<SegmentedControl label="طريقة العرض" value={s.view} onChange={(v) => setState({ ...s, view: v })} options={[{ value: 'table', label: 'جدول', icon: 'List' }, { value: 'cards', label: 'بطاقات', icon: 'LayoutGrid' }]} />}
        active={active} onRemove={(k) => upd(k)('')} onClear={() => setState({ ...s, city: '', owner: '', use: '', page: 1 })} resultText={rows.length + ' من ' + D.properties.length}>
        <Field label="المالك"><Select value={s.owner} onChange={upd('owner')} placeholder="كل الملاك" options={D.owners.map((o) => ({ value: o.id, label: o.name }))} /></Field>
        <Field label="المدينة"><Select value={s.city} onChange={upd('city')} placeholder="كل المدن" options={['الرياض', 'جدة', 'الدمام']} /></Field>
        <Field label="الاستخدام"><Select value={s.use} onChange={upd('use')} placeholder="الكل" options={['سكني', 'تجاري', 'مختلط']} /></Field>
      </FilterBar>
      <div style={{ marginTop: 14 }}>
        {loading ? <StateView kind="loading" boxed title="جارٍ تحميل العقارات" />
          : !rows.length ? <StateView kind="noResults" boxed actions={<Button variant="secondary" onClick={() => setState({ ...s, q: '', city: '', owner: '', use: '' })}>مسح البحث والفلاتر</Button>} />
          : s.view === 'table' ? <DataTable caption="العقارات" rows={rows} onRowClick={(p) => openProperty(p.id)} columns={[
              { key: 'name', header: 'العقار', render: (p) => <><span className="ap-cell-strong">{p.name}</span><small>{p.city} · {p.district}</small></> },
              { key: 'owner', header: 'المالك', render: (p) => <a href="#" onClick={(e) => { e.preventDefault(); e.stopPropagation(); openOwner(p.ownerId); }}>{owner(p.ownerId).name}</a> },
              { key: 'use', header: 'الاستخدام' },
              { key: 'units', header: 'الوحدات', numeric: true, render: (p) => <bdi className="ap-num">{p.units}</bdi> },
              { key: 'occ', header: 'الإشغال', render: (p) => <>{p.occupied} مؤجرة{p.units - p.occupied > 0 && <small>{p.units - p.occupied} شاغرة</small>}</> },
              { key: 'mgmt', header: 'نوع الإدارة', render: (p) => p.mgmt },
              { key: 'a', header: <span className="ap-sr-only">إجراءات</span>, render: (p) => <span onClick={(e) => e.stopPropagation()}>{actions(p)}</span> }
            ]} />
          : <div className="kit-cards">{rows.map((p) => <article key={p.id} className="kit-card">
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}><div><h3>{p.name}</h3><p><Icon name="MapPin" size={13} /> {p.city} · {p.district}</p></div><StatusBadge tone="outline" showIcon={false} label={p.use} /></div>
              <dl><div><dt>المالك</dt><dd>{owner(p.ownerId).name}</dd></div><div><dt>الوحدات</dt><dd>{p.units} · {p.units - p.occupied} شاغرة</dd></div><div><dt>الإدارة</dt><dd>{p.mgmt}</dd></div></dl>
              {actions(p)}</article>)}</div>}
        <Pagination page={s.page} pageSize={s.size} total={rows.length} onPage={upd('page')} onPageSize={upd('size')} noun="عقار" />
      </div>
    </>
  );
}

Object.assign(window, { PropertiesScreen });

})();