(() => {
const { Button } = window.AmlakPlusDesignSystem_b3aa85;
// React port of print/ap-print.js shell — every in-app print preview uses this; styles come from print/ap-print.css only.
const A = '../../assets/brand/';
const nf = (v, d) => Number(v).toLocaleString('en-US', d == null ? { maximumFractionDigits: 2 } : { minimumFractionDigits: d, maximumFractionDigits: d });
const Sar = ({ v, d }) => <><bdi>{nf(v, d)}</bdi> <small>ر.س</small></>;
const ICON = { ok: '✓', warn: '◷', bad: '!' };

function ApdDoc({ kind, title, ids = [], meta = [], status, stamp, landscape, signed, foot, sign, label, actions, onClose, children }) {
  return (
    <div className="kit-doc-overlay" role="dialog" aria-label={label || title}>
      {landscape && <style>{'@media print{@page{size:A4 landscape;margin:8mm}}'}</style>}
      <div className="kit-doc-bar ap-no-print" style={{ maxWidth: landscape ? '297mm' : '210mm' }}><Button variant="onbrand" icon="ArrowRight" onClick={onClose}>رجوع</Button><span>معاينة الطباعة · A4{landscape ? ' أفقي' : ''}</span><div style={{ display: 'flex', gap: 8 }}>{actions}<Button variant="secondary" icon="Printer" onClick={() => window.print()}>طباعة</Button></div></div>
      <article className={'apd kit-print-doc' + (landscape ? ' apd--landscape' : '')}>
        <img className="apd-wm" src={A + 'mark-dark.svg'} alt="" aria-hidden="true" />
        {stamp && <div className={'apd-stamp is-' + stamp.tone} aria-hidden="true">{stamp.text}</div>}
        <header className="apd-head"><img src={A + 'logo-dark.svg'} alt="أملاك بلس" /><div className="apd-title"><span className="apd-kind">{kind}</span><h1>{title}</h1><dl>{ids.map(([l, v]) => <div key={l}><dt>{l}</dt><dd dir="ltr">{v}</dd></div>)}</dl></div></header>
        {meta.length > 0 && <p className="apd-meta">{meta.map(([l, v]) => <span key={l}>{l}: <b>{v}</b></span>)}</p>}
        {status && <p className={'apd-status is-' + status.tone}><span aria-hidden="true">{ICON[status.tone]}</span> {status.text}</p>}
        {children}
        {sign && <footer className="apd-sign" style={{ '--cols': sign.length }}>{sign.map((l) => <div key={l}><span>{l}</span><i></i></div>)}</footer>}
        <footer className={'apd-foot' + (sign ? '' : ' apd-foot--auto')}><p>{foot || 'مستند تشغيلي وليس فاتورة ضريبية. الحالة بتاريخ فتح المستند؛ أعد فتح الرابط للتحقق من أي عكس لاحق.'}</p><span><img src={A + 'mark-dark.svg'} alt="" />أملاك بلس — إدارة واضحة. تفاصيل محفوظة.</span></footer>
      </article>
    </div>
  );
}

const ApdAmount = ({ label, value, words }) => <div className="apd-amount"><span>{label}</span><div className="apd-money"><Sar v={value} d={2} /></div>{words && <p>{words}</p>}</div>;
const ApdFields = ({ rows }) => <dl className="apd-grid">{rows.filter(Boolean).map(([l, v, wide]) => <div key={l} className={wide ? 'apd-wide' : ''}><dt>{l}</dt><dd>{v ?? '—'}</dd></div>)}</dl>;
const ApdSums = ({ items }) => <div className="apd-sums">{items.map(([l, v, tone]) => <div key={l} className={tone ? 'is-' + tone : ''}><span>{l}</span><b>{typeof v === 'number' ? <Sar v={v} /> : v}</b></div>)}</div>;
const ApdH2 = ({ t, sub }) => <h2 className="apd-h2">{t}{sub && <> <small>{sub}</small></>}</h2>;
// cols: [{l, n}] · cells: number | string | {v, sub, tone} | null
function ApdTable({ cols, rows, foot }) {
  const td = (v, c, i) => {
    if (v == null) return <td key={i} className={c.n ? 'n' : ''}></td>;
    const o = typeof v === 'object' && !React.isValidElement(v) ? v : { v };
    const val = typeof o.v === 'number' && c.n ? (o.v ? nf(o.v) : '—') : (o.v === '' || o.v == null ? '—' : o.v);
    return <td key={i} className={[c.n ? 'n' : '', o.tone ? 'is-' + o.tone : ''].join(' ').trim()}>{val}{o.sub && <small>{o.sub}</small>}</td>;
  };
  return <table className="apd-table"><thead><tr>{cols.map((c) => <th key={c.l} className={c.n ? 'n' : ''}>{c.l}</th>)}</tr></thead>
    <tbody>{rows.map((r, i) => <tr key={i}>{r.map((v, j) => td(v, cols[j], j))}</tr>)}</tbody>
    {foot && <tfoot><tr>{foot.map((v, j) => td(v, cols[j], j))}</tr></tfoot>}</table>;
}
const ApdNote = ({ children }) => <p className="apd-note">{children}</p>;
const ApdContext = ({ children }) => <p className="apd-context">{children}</p>;

Object.assign(window, { ApdDoc, ApdAmount, ApdFields, ApdSums, ApdH2, ApdTable, ApdNote, ApdContext, apdNum: nf });
})();
