(() => {
const { PageHeader, DataTable, StatusBadge, Button, Tabs, Icon, Alert, SummaryStrip } = window.AmlakPlusDesignSystem_b3aa85;
const { Acts, cellTwo, num, upd } = window.APList;

function AccountsScreen() {
  const D = window.AP_DATA;
  const [rows, setRows] = React.useState(D.receiving);
  return (
    <>
      <PageHeader title="حسابات الاستلام" description="أين يمكن أن يصل المال. كل دفعة تُسجل على أحد هذه الحسابات." actions={<Button icon="Plus" onClick={() => window.apOpen('account')}>إضافة حساب</Button>} />
      <DataTable caption="حسابات الاستلام" rows={rows} columns={[
        { key: 'l', header: 'الحساب', render: (a) => cellTwo(a.label, a.kind) },
        { key: 'h', header: 'المسؤول / صاحب الحساب', render: (a) => a.holder },
        { key: 'i', header: 'IBAN', render: (a) => a.iban ? <bdi className="ap-ltr" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{a.iban}</bdi> : '—' },
        { key: 'r', header: 'جهة الاستلام', render: (a) => <StatusBadge size="sm" tone={a.recipient === 'المالك' ? 'info' : 'brand'} showIcon={false} label={a.recipient} /> },
        { key: 's', header: 'الحالة', render: (a) => <StatusBadge size="sm" tone={a.status === 'active' ? 'success' : 'neutral'} showIcon={false} label={a.status === 'active' ? 'نشط' : 'موقوف'} /> },
        { key: 'a', header: <span className="ap-sr-only">إجراءات</span>, render: (a) => <Acts><Button size="sm" variant="secondary" icon="Pencil" onClick={() => window.apOpen('account', a)}>تعديل</Button><Button size="sm" variant="ghost" onClick={() => upd(setRows, a.id, { status: a.status === 'active' ? 'inactive' : 'active' })}>{a.status === 'active' ? 'إيقاف' : 'تفعيل'}</Button></Acts> }
      ]} />
      <Alert tone="info" style={{ marginTop: 14 }}>الحساب الموقوف لا يظهر في «تسجيل دفعة» لكنه يبقى في السجلات السابقة. لا يُحذف حساب عليه حركات.</Alert>
    </>
  );
}

const ROLE_PERMS = [['تسجيل دفعة وتواصل', 1, 1, 1], ['تأكيد وصول الدفعة', 0, 1, 1], ['عكس دفعة مؤكدة', 0, 0, 1], ['المصروفات والقيود', 0, 1, 1], ['اعتماد التصفيات', 0, 0, 1], ['إدارة الفريق', 0, 0, 1]];
function TeamScreen() {
  const D = window.AP_DATA;
  const [tab, setTab] = React.useState('members');
  const [rows, setRows] = React.useState(D.team);
  return (
    <>
      <PageHeader title="الفريق والفروع" description="من يعمل في المكتب، أين، وبأي صلاحية." actions={tab === 'branches' ? <Button icon="Plus" onClick={() => window.apOpen('branch')}>إضافة فرع</Button> : <Button icon="Plus" onClick={() => window.apOpen('member', { onSaved: (v) => setRows((rs) => [...rs, { id: 'm' + Date.now(), name: v.name, role: { col: 'محصل', acc: 'محاسب', mgr: 'مدير', view: 'اطلاع' }[v.role], branch: v.branch, phone: v.phone, status: 'invited', last: '—' }]) })}>دعوة عضو</Button>} />
      <Tabs label="أقسام الفريق" value={tab} onChange={setTab} tabs={[{ id: 'members', label: 'الأعضاء', count: rows.length }, { id: 'roles', label: 'الأدوار والصلاحيات' }, { id: 'branches', label: 'الفروع', count: D.branches.length }]} />
      <div style={{ marginTop: 14 }}>
        {tab === 'members' && <DataTable caption="الأعضاء" rows={rows} columns={[
          { key: 'n', header: 'العضو', render: (m) => cellTwo(m.name, m.role) },
          { key: 'b', header: 'الفرع', render: (m) => m.branch },
          { key: 'p', header: 'الجوال', render: (m) => num(m.phone) },
          { key: 'l', header: 'آخر دخول', render: (m) => m.last },
          { key: 's', header: 'الحالة', render: (m) => <StatusBadge size="sm" tone={m.status === 'active' ? 'success' : m.status === 'invited' ? 'info' : 'neutral'} showIcon={false} label={{ active: 'نشط', invited: 'دعوة مرسلة', disabled: 'موقوف' }[m.status]} /> },
          { key: 'a', header: <span className="ap-sr-only">إجراءات</span>, render: (m) => <Acts><Button size="sm" variant="secondary" icon="Pencil" onClick={() => window.apOpen('member', m)}>تعديل</Button>{m.status === 'invited' ? <Button size="sm" variant="ghost" icon="Send">إعادة الإرسال</Button> : <Button size="sm" variant="ghost" iconOnly icon="Lock" label={m.status === 'active' ? 'إيقاف الحساب' : 'تفعيل'} onClick={() => upd(setRows, m.id, { status: m.status === 'active' ? 'disabled' : 'active' })} />}</Acts> }
        ]} />}
        {tab === 'roles' && <DataTable caption="الصلاحيات" rows={ROLE_PERMS.map((r, i) => ({ id: i, r }))} columns={[
          { key: 'p', header: 'الصلاحية', render: (x) => x.r[0] },
          ...['محصل', 'محاسب', 'مدير'].map((h, j) => ({ key: h, header: h, render: (x) => x.r[j + 1] ? <Icon name="Check" size={16} style={{ color: 'var(--status-success-fg)' }} /> : <span style={{ color: 'var(--text-3)' }}>—</span> }))
        ]} />}
        {tab === 'branches' && <div className="kit-cards">{D.branches.map((b) => <article key={b.id} className="kit-card"><div><h3>{b.name}</h3><p><Icon name="MapPin" size={13} /> {b.city}</p></div><dl><div><dt>الأعضاء</dt><dd>{b.members}</dd></div><div><dt>العقارات</dt><dd>{b.properties}</dd></div></dl><div><Button size="sm" variant="secondary" icon="Pencil" onClick={() => window.apOpen('branch')}>تعديل</Button></div></article>)}</div>}
      </div>
    </>
  );
}

const IMPORTS = [['العقارات', 'Building2'], ['الوحدات', 'DoorOpen'], ['الملاك', 'Landmark'], ['المستأجرون', 'Users'], ['العقود', 'FileText'], ['الأرصدة الافتتاحية', 'CircleDollarSign']];
function DataScreen() {
  const D = window.AP_DATA;
  return (
    <>
      <PageHeader title="استيراد ونسخ البيانات" description="نقل بياناتك من Excel أو نظام سابق، وتصدير نسخة كاملة متى شئت." actions={<Button variant="secondary" icon="Download" onClick={() => window.apData ? window.apData('backup') : window.apOpen('backup')}>النسخ والاستعادة</Button>} />
      {window.DataDialogs && <window.DataDialogs />}
      <h2 className="kit-h2">استيراد</h2>
      <div className="kit-cards">{IMPORTS.map(([e, ic]) => <article key={e} className="kit-card"><div style={{ display: 'flex', gap: 12, alignItems: 'center' }}><span className="kit-card__icon"><Icon name={ic} size={20} /></span><h3>{e}</h3></div>
        <div style={{ display: 'flex', gap: 6 }}><Button size="sm" icon="Upload" onClick={() => { const k = { 'الملاك': 'owners', 'العقارات': 'properties', 'الوحدات': 'units', 'المستأجرون': 'tenants' }[e]; k && window.apData ? window.apData('import', k) : window.apOpen('import', { entity: e }); }}>رفع ملف</Button><Button size="sm" variant="ghost" icon="Download">القالب</Button></div></article>)}</div>
      <h2 className="kit-h2">سجل الاستيراد</h2>
      <DataTable caption="سجل الاستيراد" rows={D.imports} columns={[
        { key: 'd', header: 'التاريخ', render: (i) => num(i.date) },
        { key: 'e', header: 'البيانات', render: (i) => cellTwo(i.entity, <bdi className="ap-ltr">{i.file}</bdi>) },
        { key: 'r', header: 'الصفوف', numeric: true, render: (i) => <>{num(i.ok + ' / ' + i.rows)}{i.errors > 0 && <small style={{ color: 'var(--status-danger-fg)' }}>{i.errors} أخطاء</small>}</> },
        { key: 'b', header: 'بواسطة', render: (i) => i.by },
        { key: 's', header: 'الحالة', render: (i) => <StatusBadge size="sm" status={i.status === 'partial' ? 'partial' : 'confirmed'} label={i.status === 'partial' ? 'جزئي' : 'مكتمل'} /> },
        { key: 'a', header: <span className="ap-sr-only">إجراءات</span>, render: (i) => <Acts>{i.errors > 0 && <Button size="sm" variant="secondary" icon="Download">ملف الأخطاء</Button>}</Acts> }
      ]} />
    </>
  );
}

Object.assign(window, { AccountsScreen, TeamScreen, DataScreen });
})();