(() => {
const { Dialog, Field, MoneyInput, Select, TextInput, SegmentedControl, Button, Money, StatusBadge, KeyValueList, Alert, Checkbox, Icon } = window.AmlakPlusDesignSystem_b3aa85;

const METHOD_LABEL = { cash: 'نقدًا', transfer: 'تحويل بنكي', ejar: 'عبر إيجار (يدوي)' };

function PaymentFlow({ payments, onClose, onRecorded, onConfirm, openReceipt, simulateFailure }) {
  const D = window.AP_DATA, L = D.lease;
  const [step, setStep] = React.useState('form');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const [failedOnce, setFailedOnce] = React.useState(false);
  const [f, setF] = React.useState({ amount: '2500', recipient: 'office', method: 'cash', account: 'a1', date: '2026-09-23', ref: '', verified: false });
  const [recorded, setRecorded] = React.useState(null);
  const set = (k) => (v) => setF((s) => ({ ...s, [k]: v && v.target ? (v.target.type === 'checkbox' ? v.target.checked : v.target.value) : v }));
  const charges = allocate(L.charges, payments);
  const outstanding = charges.filter((c) => !c.future).reduce((s, c) => s + c.remaining, 0);
  const amount = Number(f.amount) || 0;
  const prev = previewAllocation(charges, amount);
  const accounts = D.accounts.filter((a) => a.recipient === f.recipient && a.methods.includes(f.method));
  const methods = f.recipient === 'office' ? ['cash', 'transfer'] : ['transfer', 'ejar'];
  const needsRef = f.method !== 'cash';
  const valid = amount > 0 && f.account && (!needsRef || f.ref.trim());
  const acc = D.accounts.find((a) => a.id === f.account);

  const changeRecipient = (r) => { const m = r === 'office' ? 'cash' : 'transfer'; const a = D.accounts.find((x) => x.recipient === r && x.methods.includes(m)); setF((s) => ({ ...s, recipient: r, method: m, account: a ? a.id : '' })); };
  const changeMethod = (e) => { const m = e.target.value; const a = D.accounts.find((x) => x.recipient === f.recipient && x.methods.includes(m)); setF((s) => ({ ...s, method: m, account: a ? a.id : '' })); };

  const submit = () => {
    setBusy(true); setError('');
    setTimeout(() => {
      setBusy(false);
      if (simulateFailure && !failedOnce) { setFailedOnce(true); setError('انقطع الاتصال قبل حفظ الدفعة. لم تُسجل أي عملية، والقيم المدخلة ما زالت كما هي.'); return; }
      const p = { id: 'p' + Date.now(), leaseId: L.id, amount, status: 'pending', method: METHOD_LABEL[f.method], recipientLabel: acc.label, recipient: f.recipient, date: '23/09/2026', ref: f.ref, by: D.user.name, preview: prev };
      setRecorded(p); onRecorded(p); setStep('result');
    }, 1100);
  };
  const confirm = () => { setBusy(true); setTimeout(() => { setBusy(false); const r = onConfirm(recorded.id); setRecorded(r); setStep('confirmed'); }, 900); };
  const remainingAfter = outstanding - amount;

  if (step === 'result' || step === 'confirmed') {
    const done = step === 'confirmed';
    return (
      <Dialog title={done ? 'تأكد الاستلام' : 'سُجلت الدفعة'} subtitle={L.tenant + ' · ' + L.property + ' / ' + L.unit} onClose={onClose} busy={busy} width={560}
        footer={<><Button variant="ghost" onClick={onClose}>إغلاق</Button><div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {done ? <Button icon="Printer" onClick={() => openReceipt(recorded)}>عرض السند {recorded.receipt} وطباعته</Button>
            : <><Button variant="secondary" icon="CalendarClock" onClick={() => { onClose(); setTimeout(() => window.apOpen('followup', { tenant: L.tenant, property: L.property, unit: L.unit }), 50); }}>متابعة للمتبقي</Button><Button icon="ShieldCheck" loading={busy} onClick={confirm}>تأكيد الاستلام</Button></>}
        </div></>}>
        <div className="kit-result">
          <span className={'kit-result__icon' + (done ? ' is-done' : '')}><Icon name={done ? 'ShieldCheck' : 'Hourglass'} size={26} /></span>
          <div><div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}><Money value={recorded.amount} size="lg" /><StatusBadge status={done ? 'confirmed' : 'pending'} /></div>
            <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--text-2)' }}>{recorded.method} · {recorded.recipientLabel}</p></div>
        </div>
        <KeyValueList layout="rows" style={{ marginTop: 16 }} items={[
          { label: 'المتأخر قبل الدفعة', value: <Money value={outstanding + (done ? recorded.amount : 0)} /> },
          { label: done ? 'خُصم بعد التأكيد' : 'سيُخصم بعد التأكيد', value: <Money value={recorded.amount} /> },
          { label: done ? 'المتبقي المتأخر الآن' : 'المتبقي بعد التأكيد', value: <Money value={done ? outstanding : remainingAfter} tone="danger" size="md" />, strong: true }
        ]} />
        <div className="kit-alloc" style={{ marginTop: 14 }}><h3>{done ? 'التوزيع المنفذ (الأقدم أولًا)' : 'التوزيع المتوقع عند التأكيد (الأقدم أولًا)'}</h3>
          {recorded.preview.rows.map((r) => <div key={r.period}><span>{r.period}</span><span><Money value={r.take} /> {r.after ? <small>· يبقى <Money value={r.after} /></small> : <small>· يُغلق</small>}</span></div>)}</div>
        {!done && <Alert tone="info" style={{ marginTop: 14 }}>الدفعة مسجلة ولم تُخصم من المديونية بعد. التأكيد يخص وصول المال فعليًا ويتم بصلاحية المحاسب أو المدير. {recorded.recipient === 'owner' && 'الاستلام مباشرة للمالك لا يدخل صندوق المكتب.'}</Alert>}
        {done && <Alert tone="success" style={{ marginTop: 14 }}>صدر السند رقم {recorded.receipt}. العملية المؤكدة لا تُعدل ولا تُحذف؛ التصحيح عبر «عكس الدفعة» بصلاحية المدير مع حفظ الأثر.</Alert>}
      </Dialog>
    );
  }

  return (
    <Dialog title={step === 'review' ? 'مراجعة قبل التسجيل' : 'تسجيل دفعة'} subtitle={L.tenant + ' · ' + L.property + ' / وحدة ' + L.unit} onClose={onClose} busy={busy} width={780}
      footer={step === 'form'
        ? <><Button variant="secondary" onClick={onClose}>إلغاء</Button><Button iconEnd="ChevronLeft" disabled={!valid} onClick={() => setStep('review')}>معاينة التسجيل</Button></>
        : <><Button variant="secondary" icon="ChevronRight" onClick={() => setStep('form')} disabled={busy}>تعديل</Button><Button icon="Check" loading={busy} onClick={submit}>{busy ? 'جارٍ التسجيل' : 'تسجيل الدفعة'}</Button></>}>
      {error && <Alert tone="danger" title="لم تُسجل الدفعة" style={{ marginBottom: 14 }} actions={<Button size="sm" variant="secondary" icon="RotateCcw" onClick={submit}>إعادة المحاولة</Button>}>{error}</Alert>}
      {step === 'form' ? (
        <div className="kit-pay">
          <div style={{ display: 'grid', gap: 14 }}>
            <div className="kit-due-banner"><span>المتأخر على العقد حتى اليوم</span><Money value={outstanding} size="md" /></div>
            <Field label="المبلغ المدفوع" required hint={amount > outstanding ? 'المبلغ أكبر من المتأخر — الزيادة قد تُوزع على أقساط قادمة.' : 'دفعة جزئية مقبولة؛ المتبقي يبقى للمتابعة.'}><MoneyInput value={f.amount} onChange={set('amount')} /></Field>
            <Field label="جهة الاستلام"><div><SegmentedControl label="جهة الاستلام" value={f.recipient} onChange={changeRecipient} options={[{ value: 'office', label: 'المكتب / الموظف' }, { value: 'owner', label: 'المالك مباشرة' }]} /></div></Field>
            {f.recipient === 'owner' && <Alert tone="warning">تحويل مباشر لحساب المالك — ليس قبضًا في صندوق المكتب، ويحتاج تأكيد وصوله.</Alert>}
            <div className="kit-2col">
              <Field label="طريقة الدفع"><Select value={f.method} onChange={changeMethod} options={methods.map((m) => ({ value: m, label: METHOD_LABEL[m] }))} /></Field>
              <Field label="تاريخ الدفع" required><TextInput type="date" value={f.date} onChange={set('date')} /></Field>
            </div>
            <Field label="الحساب المستلِم" required hint={acc && acc.iban ? <bdi className="ap-ltr" style={{ fontFamily: 'var(--font-mono)' }}>{acc.iban}</bdi> : null}><Select value={f.account} onChange={set('account')} placeholder="اختر الحساب" options={accounts.map((a) => ({ value: a.id, label: a.label }))} /></Field>
            <Field label="رقم المرجع" required={needsRef} optional={!needsRef}><TextInput ltr value={f.ref} onChange={set('ref')} placeholder={needsRef ? 'مرجع التحويل' : ''} /></Field>
            {f.method !== 'cash' && <Field label="مرفق الإثبات" optional hint="صورة التحويل تساعد المراجعة لكنها لا تؤكد وصول المال."><label className="ap-btn ap-btn--secondary" style={{ cursor: 'pointer', width: 'fit-content' }}><Icon name="Paperclip" size={16} /><span>{f.file || 'إرفاق ملف'}</span><input type="file" hidden onChange={(e) => set('file')(e.target.files[0] ? e.target.files[0].name : '')} /></label></Field>}
          </div>
          <aside className="kit-alloc" aria-live="polite">
            <h3>معاينة التوزيع</h3>
            <p style={{ margin: '0 0 10px', fontSize: 12, color: 'var(--text-3)' }}>يُوزع بعد التأكيد على الأقدم أولًا.</p>
            {charges.filter((c) => c.remaining > 0).slice(0, 4).map((c) => { const r = prev.rows.find((x) => x.period === c.period); return (
              <div key={c.id}><span>{c.period}{c.future && <small> · قادم</small>}</span><span>{r ? <><Money value={r.take} /> <small>{r.after ? '· يبقى ' + r.after.toLocaleString('en-US') : '· يُغلق'}</small></> : <small>لا يتأثر</small>}</span></div>); })}
            <div className="kit-alloc__total"><span>المتأخر بعد التأكيد</span><Money value={Math.max(0, remainingAfter)} tone={remainingAfter > 0 ? 'danger' : 'success'} size="md" /></div>
          </aside>
        </div>
      ) : (
        <div style={{ display: 'grid', gap: 14 }}>
          <KeyValueList layout="rows" items={[{ label: 'المبلغ', value: <Money value={amount} size="md" />, strong: true }, { label: 'كتابةً', value: window.amountToArabicWords(amount) }, { label: 'جهة الاستلام', value: f.recipient === 'office' ? 'المكتب / الموظف' : 'المالك مباشرة' }, { label: 'الطريقة والحساب', value: METHOD_LABEL[f.method] + ' · ' + (acc ? acc.label : '') }, { label: 'تاريخ الدفع', value: <bdi className="ap-num">{f.date.split('-').reverse().join('/')}</bdi> }, { label: 'المرجع', value: f.ref ? <bdi className="ap-ltr">{f.ref}</bdi> : null }, { label: 'المتأخر بعد التأكيد', value: <Money value={Math.max(0, remainingAfter)} tone="danger" /> }]} />
          <Alert tone="neutral">ستُسجل الدفعة بحالة «بانتظار التحقق». لا تُخصم من المديونية ولا يصدر سند قبض حتى يتأكد وصول المبلغ.</Alert>
        </div>
      )}
    </Dialog>
  );
}

Object.assign(window, { PaymentFlow });

})();