(() => {
const { EntityHeader, Tabs, DataTable, Money, StatusBadge, Button, KeyValueList, Timeline, Alert } = window.AmlakPlusDesignSystem_b3aa85;

function OwnerScreen({ ownerId, go, openProperty }) {
  const D = window.AP_DATA;
  const o = D.owners.find((x) => x.id === ownerId) || D.owners[0];
  const props = D.properties.filter((p) => p.ownerId === o.id);
  const S = D.settlement;
  const [tab, setTab] = React.useState('properties');
  const collected = S.collected.filter((c) => !c.info).reduce((s, c) => s + c.amount, 0);
  const ded = S.deductions.reduce((s, d) => s + d.amount, 0);
  const net = collected - ded - S.fee.amount;
  const line = (label, amount, opts = {}) => <div className={'kit-ledger-row' + (opts.total ? ' is-total' : '') + (opts.info ? ' is-info' : '')}><span>{label}{opts.src && <button type="button" className="kit-src" onClick={() => go('collection')}>المصدر</button>}</span><Money value={amount} showSign={opts.sign} tone={opts.tone} size={opts.total ? 'md' : 'sm'} /></div>;
  return (
    <>
      <EntityHeader back={{ label: 'العودة إلى الملاك', onClick: (e) => { e.preventDefault(); go('owners'); } }} kind={'مالك · ' + o.kind} kindIcon="Landmark" title={o.name}
        subtitle={<bdi className="ap-num">{o.phone}</bdi>}
        facts={[{ label: 'العقارات', value: props.length }, { label: 'الوحدات', value: props.reduce((s, p) => s + p.units, 0) }, { label: 'اتفاق الإدارة', value: o.agreement }]}
        actions={<><Button variant="secondary" icon="Pencil" onClick={() => window.apOpen('owner', o)}>تعديل</Button><Button variant="secondary" icon="FileText" onClick={() => window.apOpen('ownerStatement', o)}>كشف المالك</Button><Button icon="Plus" onClick={() => window.apOpen('property', { presetOwner: o.id })}>إضافة عقار للمالك</Button></>} />
      <Tabs style={{ marginTop: 18 }} label="أقسام المالك" value={tab} onChange={setTab} tabs={[{ id: 'properties', label: 'العقارات', count: props.length }, { id: 'settlement', label: 'الحساب والتصفيات' }, { id: 'info', label: 'البيانات' }]} />
      <div style={{ marginTop: 16 }}>
        {tab === 'properties' && <DataTable caption="عقارات المالك" rows={props} 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: 'units', header: 'الوحدات', numeric: true }, { key: 'vac', header: 'شاغرة', numeric: true, render: (p) => p.units - p.occupied },
          { key: 'a', header: '', render: (p) => <div style={{ display: 'flex', gap: 6 }} onClick={(e) => e.stopPropagation()}><Button size="sm" variant="secondary" onClick={() => openProperty(p.id)}>فتح الملف</Button><Button size="sm" variant="ghost" icon="ReceiptText" onClick={() => openProperty(p.id, 'sheet')}>الكشف</Button></div> }
        ]} />}
        {tab === 'settlement' && <div className="kit-settle">
          <section className="kit-panel">
            <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, marginBottom: 12 }}><h2 style={{ margin: 0, fontSize: 18 }}>تصفية {S.period}</h2><div style={{ display: 'flex', gap: 6 }}><StatusBadge status="approved" label="معتمدة" /><StatusBadge status="due" label="لم تُسلَّم بعد" /></div></header>
            <h3 className="kit-ledger-h">التحصيل</h3>
            {S.collected.map((c) => line(c.label, c.amount, { info: c.info, src: !c.info }))}
            <h3 className="kit-ledger-h">الخصومات المعتمدة</h3>
            {S.deductions.map((d) => line(d.label, -d.amount, { src: true }))}
            {line(S.fee.label, -S.fee.amount, { src: true })}
            {line('صافي المستحق للمالك (بحوزة المكتب)', net, { total: true })}
            {line('المسلَّم فعليًا', S.delivered, { tone: 'muted' })}
            {line('المتبقي للتسليم', net - S.delivered, { total: true, tone: 'danger' })}
            <Alert tone="warning" style={{ marginTop: 12 }}>اعتماد التصفية لا يعني استلام المالك للمبلغ. سجّل التسليم (تحويل/نقد) كحدث مستقل بمرجعه.</Alert>
            <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}><Button icon="Send" onClick={() => window.apOpen('ownerDelivery', { owner: o.name, net: net, delivered: S.delivered })}>تسجيل تسليم للمالك</Button><Button variant="secondary" icon="Printer" onClick={() => window.apDoc('settlement', { owner: o.id, period: S.period })}>طباعة كشف التصفية</Button></div>
          </section>
          <section className="kit-panel"><h3 style={{ margin: '0 0 12px', fontSize: 15 }}>سجل القرارات</h3><Timeline events={[
            { title: 'اعتمد المدير التصفية', date: '05/09/2026', actor: 'مدير المكتب', tone: 'success', icon: 'Check' },
            { title: 'وافق المالك على صيانة المكيف 850 ر.س', date: '14/08/2026', actor: 'المالك — عبر الهاتف، وثقه ماجد', tone: 'success', icon: 'Handshake', body: 'تمويل: خصم من الأموال التي بحوزة المكتب.' },
            { title: 'تسليم المبلغ للمالك', tone: 'proposed', icon: 'Send', body: 'لم يتم بعد.' }
          ]} /></section>
        </div>}
        {tab === 'info' && <div className="kit-panel"><KeyValueList items={[{ label: 'الاسم', value: o.name }, { label: 'النوع', value: o.kind }, { label: 'الجوال', value: <bdi className="ap-num">{o.phone}</bdi> }, { label: 'IBAN', value: <bdi className="ap-ltr" style={{ fontFamily: 'var(--font-mono)', fontSize: 13 }}>SA03 1000 0000 1234 5678 9012</bdi> }, { label: 'البريد', value: <bdi className="ap-ltr">owner@example.sa</bdi> }]} /></div>}
      </div>
    </>
  );
}

Object.assign(window, { OwnerScreen });

})();