// payments.jsx — מעקב תשלומים: לקוח → YBP + YBP → ספקים (מהענן)
(function(){
const { useState, useEffect, useCallback, useMemo } = React;

// ─── Store ────────────────────────────────────────────────────────────────────
const PAY_KEY = 'ybp_payments_store';
const getPayments = () => { try { return JSON.parse(localStorage.getItem(PAY_KEY) || '{}'); } catch { return {}; } };
const savePayments = (data) => { localStorage.setItem(PAY_KEY, JSON.stringify(data)); window.dispatchEvent(new CustomEvent('ybp-payments-change')); };

const getProjectPayments = (projectId) => {
  const all = getPayments();
  return all[projectId] || { clientMilestones: [], supplierPayments: [] };
};
const saveProjectPayments = (projectId, data) => {
  const all = getPayments();
  all[projectId] = data;
  savePayments(all);
};

// ─── Demo data ────────────────────────────────────────────────────────────────
const DEMO_CLIENT_MILESTONES = [
  { id:'CM-001', label:'חתימה על חוזה',        pct:20, amount:280000, dueDate:'2026-03-01', paidDate:'2026-03-03', status:'paid',    note:'שולם בהעברה בנקאית' },
  { id:'CM-002', label:'השלמת שלב שלד',         pct:20, amount:280000, dueDate:'2026-04-15', paidDate:'2026-04-18', status:'paid',    note:'' },
  { id:'CM-003', label:'השלמת גמרים — 50%',     pct:20, amount:280000, dueDate:'2026-05-20', paidDate:null,         status:'pending', note:'ממתין לאישור לקוח' },
  { id:'CM-004', label:'מסירה זמנית',           pct:20, amount:280000, dueDate:'2026-06-30', paidDate:null,         status:'future',  note:'' },
  { id:'CM-005', label:'מסירה סופית + ליקויים', pct:20, amount:280000, dueDate:'2026-08-01', paidDate:null,         status:'future',  note:'' },
];

const fmtMoney = v => v ? Number(v).toLocaleString('he-IL') + ' ₪' : '—';
const fmtDate  = iso => { if(!iso) return '—'; const d=new Date(iso); return String(d.getDate()).padStart(2,'0')+'/'+String(d.getMonth()+1).padStart(2,'0')+'/'+d.getFullYear(); };
const isOverdue = (iso) => iso && !iso.startsWith('paid') && new Date(iso) < new Date();

const STATUS_STYLES = {
  paid:    { label:'שולם',    color:'#10b981', bg:'#d1fae5', icon:'✓' },
  pending: { label:'ממתין',   color:'#f59e0b', bg:'#fef3c7', icon:'⏳' },
  future:  { label:'עתידי',   color:'var(--ybp-ink-soft)', bg:'var(--ybp-row-hover)', icon:'📅' },
  overdue: { label:'באיחור',  color:'#ef4444', bg:'#fee2e2', icon:'⚠️' },
};
const getStatus = (row) => {
  if (row.status === 'paid') return 'paid';
  if (row.status === 'future') return 'future';
  if (isOverdue(row.dueDate)) return 'overdue';
  return 'pending';
};

// ═══════════════════════════════════════════════════════════════════════════════
//  PaymentsScreen
// ═══════════════════════════════════════════════════════════════════════════════
const PaymentsScreen = ({ projectId, onBack }) => {
  const project = (typeof YBP_DATA !== 'undefined' && YBP_DATA.projects.find(p=>p.id===projectId)) || { name:'פרויקט', budget:1400000 };
  const [tab, setTab] = useState('client');
  const [data, setData] = useState(() => {
    const d = getProjectPayments(projectId);
    return {
      clientMilestones: d.clientMilestones?.length ? d.clientMilestones : DEMO_CLIENT_MILESTONES,
    };
  });
  // ── Supplier payments מענן (v3.9.0.56) ──
  const [supPayments, setSupPayments]   = useState([]);
  const [supLoading, setSupLoading]     = useState(true);
  const [budgetLines, setBudgetLines]   = useState([]);
  const [showAddPayment, setShowAddPayment] = useState(false);
  const [editingPayment, setEditingPayment] = useState(null);

  const [showAddClient, setShowAddClient] = useState(false);
  const [showMarkPaid, setShowMarkPaid] = useState(null); // { type:'client', id }
  const [toast, setToast] = useState(null);

  useEffect(() => {
    const h = () => { const d=getProjectPayments(projectId); if(d.clientMilestones) setData(d); };
    window.addEventListener('ybp-payments-change', h);
    return () => window.removeEventListener('ybp-payments-change', h);
  }, [projectId]);

  const loadSupplier = useCallback(async () => {
    if (!window.PaymentsStore) return;
    setSupLoading(true);
    try { setSupPayments(await window.PaymentsStore.listForProject(projectId)); }
    catch (e) { console.warn('[payments] load:', e); }
    finally { setSupLoading(false); }
  }, [projectId]);
  useEffect(() => { loadSupplier(); }, [loadSupplier]);
  useEffect(() => {
    if (!window.BudgetStore) return;
    window.BudgetStore.getForProject(projectId)
      .then(r => setBudgetLines(r.lines || [])).catch(()=>{});
  }, [projectId]);

  const lineLabel = useMemo(() => {
    const map = new Map(budgetLines.map(l => [l.id, l]));
    return (id) => {
      const l = map.get(id);
      if (!l) return '—';
      const cat = l.category || '';
      const nm  = l.name || '';
      return cat && nm ? `${cat} – ${nm}` : (cat || nm || '—');
    };
  }, [budgetLines]);

  // ── listener לאישור לקוח מפורטל ──
  useEffect(() => {
    const h = () => {
      const d = getProjectPayments(projectId);
      if (d.clientMilestones?.length) {
        setData(prev => ({ ...prev, clientMilestones: d.clientMilestones }));
      }
    };
    window.addEventListener('storage', h);
    return () => window.removeEventListener('storage', h);
  }, [projectId]);

  const persist = (updated) => { saveProjectPayments(projectId, updated); setData(updated); };
  const showToast = (msg) => { setToast(msg); setTimeout(()=>setToast(null),3000); };

  // ── Client stats ──
  const totalContract = data.clientMilestones.reduce((s,m)=>s+(m.amount||0),0);
  const totalPaid     = data.clientMilestones.filter(m=>m.status==='paid').reduce((s,m)=>s+(m.amount||0),0);
  const pctCollected  = totalContract ? Math.round(totalPaid/totalContract*100) : 0;
  const nextDue       = data.clientMilestones.find(m=>m.status==='pending'||m.status==='future');

  // ── Supplier stats — מחושב מהענן (amount_net) ──
  const supplierPaid    = supPayments.filter(p=>p.status==='paid')   .reduce((s,p)=>s+(Number(p.amount_net)||0),0);
  const supplierPending = supPayments.filter(p=>p.status==='pending').reduce((s,p)=>s+(Number(p.amount_net)||0),0);
  const supplierGross   = supPayments                                .reduce((s,p)=>s+(Number(p.amount_gross)||0),0);

  const markClientPaid = (id) => {
    const upd = { ...data, clientMilestones: data.clientMilestones.map(m=>
      m.id===id ? {...m, status:'paid', paidDate: new Date().toISOString().slice(0,10)} : m
    )};
    persist(upd); setShowMarkPaid(null); showToast('✓ תשלום סומן כשולם');
  };

  // ── Supplier payment actions ──
  const handleDeletePayment = async (id) => {
    if (!window.confirm('למחוק את התשלום? פעולה זו לא ניתנת לביטול.')) return;
    try {
      await window.PaymentsStore.remove(id);
      await loadSupplier();
      showToast('✓ תשלום נמחק');
    } catch (e) { alert('שגיאה במחיקה: ' + (e?.message || e)); }
  };
  const handleSavePayment = async (form, editingId) => {
    try {
      if (editingId) {
        await window.PaymentsStore.update(editingId, form);
        showToast('✓ תשלום עודכן');
      } else {
        await window.PaymentsStore.create(projectId, form);
        showToast('✓ תשלום נוסף');
      }
      await loadSupplier();
      setShowAddPayment(false);
      setEditingPayment(null);
    } catch (e) { alert('שגיאה בשמירה: ' + (e?.message || e)); }
  };

  return (
    <div style={{ minHeight:'100%', background:'#f5f6f8', fontFamily:'Assistant,sans-serif', direction:'rtl', display:'flex', flexDirection:'column' }}>

      {toast && (
        <div style={{ position:'fixed', top:16, left:'50%', transform:'translateX(-50%)', zIndex:9999,
          background:'var(--ybp-navy)', color:'#fff', padding:'10px 20px', borderRadius:8,
          fontSize:14, fontWeight:600, boxShadow:'0 4px 16px rgba(0,0,0,0.2)' }}>{toast}</div>
      )}

      {/* Header */}
      <div style={{ background:'var(--ybp-panel)', color:'var(--ybp-ink)', paddingBottom:0, borderBottom:'1px solid var(--ybp-border)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:10, padding:'12px 16px' }}>
          <button onClick={onBack} style={{ background:'var(--ybp-row-hover)', border:'none', color:'var(--ybp-ink)',
            width:34, height:34, borderRadius:8, display:'flex', alignItems:'center',
            justifyContent:'center', cursor:'pointer', flexShrink:0 }}>
            <Icon name="chevron" size={18}/>
          </button>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:11, color:'var(--ybp-ink-soft)' }}>מעקב תשלומים</div>
            <div style={{ fontSize:15, fontWeight:700, color:'var(--ybp-ink)' }}>{project.name}</div>
          </div>
        </div>

        {/* Summary bar */}
        <div style={{ padding:'0 16px 16px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
          <div style={{ background:'var(--ybp-row-hover)', borderRadius:10, padding:'10px 12px' }}>
            <div style={{ fontSize:10, color:'var(--ybp-ink-soft)', marginBottom:3 }}>התקבל מלקוח</div>
            <div style={{ fontSize:18, fontWeight:800, color:'var(--ybp-ink)' }}>{fmtMoney(totalPaid)}</div>
            <div style={{ fontSize:11, color:'var(--ybp-ink-soft)' }}>{pctCollected}% מהחוזה</div>
            <div style={{ height:4, background:'var(--ybp-border)', borderRadius:2, marginTop:6, overflow:'hidden' }}>
              <div style={{ height:'100%', width:`${pctCollected}%`, background:'#10b981', borderRadius:2 }}/>
            </div>
          </div>
          <div style={{ background:'var(--ybp-row-hover)', borderRadius:10, padding:'10px 12px' }}>
            <div style={{ fontSize:10, color:'var(--ybp-ink-soft)', marginBottom:3 }}>שולם לספקים</div>
            <div style={{ fontSize:18, fontWeight:800, color:'var(--ybp-ink)' }}>{fmtMoney(supplierPaid)}</div>
            {supplierPending > 0 && <div style={{ fontSize:11, color:'#b45309' }}>⚠️ {fmtMoney(supplierPending)} ממתין</div>}
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display:'flex', borderTop:'1px solid var(--ybp-border)' }}>
          {[['client','💼 תשלומי לקוח'],['supplier','🔧 תשלומי ספקים']].map(([k,label])=>(
            <button key={k} onClick={()=>setTab(k)} style={{ flex:1, padding:'10px 4px 8px', border:'none',
              cursor:'pointer', background:'transparent', fontFamily:'inherit',
              borderBottom: tab===k?'2px solid var(--ybp-navy)':'2px solid transparent',
              color: tab===k?'var(--ybp-navy)':'var(--ybp-ink-soft)',
              fontSize:13, fontWeight: tab===k?700:400 }}>{label}</button>
          ))}
        </div>
      </div>

      {/* Content */}
      <div style={{ flex:1, overflowY:'auto', padding:'14px 16px 80px' }}>

        {/* ── CLIENT TAB ── */}
        {tab === 'client' && (
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {/* Next payment alert */}
            {nextDue && (
              <div style={{ background: getStatus(nextDue)==='overdue'?'#fee2e2':'#fef3c7',
                border:`1px solid ${getStatus(nextDue)==='overdue'?'#fca5a5':'#fcd34d'}`,
                borderRadius:10, padding:'12px 14px', display:'flex', gap:10, alignItems:'center' }}>
                <span style={{ fontSize:22 }}>{getStatus(nextDue)==='overdue'?'⚠️':'📅'}</span>
                <div>
                  <div style={{ fontSize:13, fontWeight:700, color:'var(--ybp-ink)' }}>{nextDue.label}</div>
                  <div style={{ fontSize:12, color:'var(--ybp-ink-soft)' }}>
                    {fmtMoney(nextDue.amount)} · {getStatus(nextDue)==='overdue'?'⚠️ עבר תאריך —':''} {fmtDate(nextDue.dueDate)}
                  </div>
                </div>
                {nextDue.status !== 'paid' && (
                  <button onClick={()=>setShowMarkPaid({type:'client', id:nextDue.id})} style={{
                    marginRight:'auto', padding:'6px 12px', borderRadius:6, border:'none',
                    background:'var(--ybp-navy)', color:'#fff', fontSize:12, fontWeight:700,
                    cursor:'pointer', fontFamily:'inherit', flexShrink:0 }}>סמן שולם</button>
                )}
              </div>
            )}

            {/* Milestones timeline */}
            <div style={{ background:'var(--ybp-panel)', borderRadius:10, border:'1px solid var(--ybp-border)', overflow:'hidden' }}>
              <div style={{ padding:'12px 14px', borderBottom:'1px solid var(--ybp-border-soft)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div style={{ fontSize:13, fontWeight:700, color:'var(--ybp-ink)' }}>לוח תשלומים</div>
                <div style={{ fontSize:12, color:'var(--ybp-ink-soft)' }}>סה"כ: {fmtMoney(totalContract)}</div>
              </div>
              {data.clientMilestones.map((m, i) => {
                const st = STATUS_STYLES[getStatus(m)];
                return (
                  <div key={m.id} style={{ padding:'12px 14px', borderBottom: i<data.clientMilestones.length-1?'1px solid #f9fafb':'none',
                    display:'flex', gap:10, alignItems:'flex-start' }}>
                    {/* Timeline dot */}
                    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', paddingTop:2 }}>
                      <div style={{ width:28, height:28, borderRadius:14, background:st.bg,
                        display:'flex', alignItems:'center', justifyContent:'center',
                        fontSize:13, flexShrink:0 }}>{st.icon}</div>
                      {i < data.clientMilestones.length-1 && (
                        <div style={{ width:2, flex:1, minHeight:16, background:'var(--ybp-row-hover)', marginTop:4 }}/>
                      )}
                    </div>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:8 }}>
                        <div style={{ fontSize:13, fontWeight:600, color:'var(--ybp-ink)' }}>{m.label}</div>
                        <div style={{ fontSize:14, fontWeight:800, color:'var(--ybp-navy)', flexShrink:0 }}>{fmtMoney(m.amount)}</div>
                      </div>
                      <div style={{ display:'flex', gap:10, marginTop:3, flexWrap:'wrap' }}>
                        <span style={{ fontSize:11, color:'var(--ybp-ink-soft)' }}>יעד: {fmtDate(m.dueDate)}</span>
                        {m.paidDate && <span style={{ fontSize:11, color:'#10b981', fontWeight:600 }}>שולם: {fmtDate(m.paidDate)}</span>}
                        <span style={{ fontSize:11, fontWeight:700, color:st.color }}>{st.label}</span>
                        <span style={{ fontSize:11, color:'var(--ybp-ink-faint)' }}>{m.pct}%</span>
                        {m.clientApproved && <span style={{ fontSize:10, fontWeight:700, color:'#6366f1', background:'#ede9fe', padding:'1px 7px', borderRadius:8 }}>✓ אושר ע"י לקוח</span>}
                      </div>
                      {m.note && <div style={{ fontSize:11, color:'var(--ybp-ink-soft)', marginTop:3 }}>{m.note}</div>}
                    </div>
                    {m.status !== 'paid' && (
                      <button onClick={()=>setShowMarkPaid({type:'client',id:m.id})} style={{
                        padding:'5px 10px', borderRadius:6, border:'1px solid var(--ybp-border)',
                        background:'var(--ybp-panel)', color:'var(--ybp-ink-soft)', fontSize:11, fontWeight:600,
                        cursor:'pointer', fontFamily:'inherit', flexShrink:0 }}>סמן שולם</button>
                    )}
                  </div>
                );
              })}
            </div>

            <button onClick={()=>setShowAddClient(true)} style={{ width:'100%', padding:'11px',
              borderRadius:8, border:'2px dashed var(--ybp-border)', background:'var(--ybp-panel)', color:'var(--ybp-ink-soft)',
              fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>+ הוסף אבן דרך</button>
          </div>
        )}

        {/* ── SUPPLIER TAB ── */}
        {tab === 'supplier' && (
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>

            {/* Supplier KPIs */}
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8 }}>
              <div style={{ background:'var(--ybp-panel)', border:'1px solid var(--ybp-border)', borderRadius:10, padding:'10px 12px' }}>
                <div style={{ fontSize:10, color:'var(--ybp-ink-soft)', marginBottom:3 }}>שולם (נטו)</div>
                <div style={{ fontSize:16, fontWeight:800, color:'var(--ybp-navy)' }}>{fmtMoney(supplierPaid)}</div>
              </div>
              <div style={{ background:'var(--ybp-panel)', border:'1px solid var(--ybp-border)', borderRadius:10, padding:'10px 12px' }}>
                <div style={{ fontSize:10, color:'var(--ybp-ink-soft)', marginBottom:3 }}>ממתין</div>
                <div style={{ fontSize:16, fontWeight:800, color:'#b45309' }}>{fmtMoney(supplierPending)}</div>
              </div>
              <div style={{ background:'var(--ybp-panel)', border:'1px solid var(--ybp-border)', borderRadius:10, padding:'10px 12px' }}>
                <div style={{ fontSize:10, color:'var(--ybp-ink-soft)', marginBottom:3 }}>סה"כ ברוטו</div>
                <div style={{ fontSize:16, fontWeight:800, color:'var(--ybp-ink)' }}>{fmtMoney(supplierGross)}</div>
              </div>
            </div>

            {/* Add payment button */}
            <button onClick={() => { setEditingPayment(null); setShowAddPayment(true); }} style={{
              padding:'10px 14px', borderRadius:8, border:'none',
              background:'var(--ybp-navy)', color:'#fff', fontSize:13, fontWeight:700,
              cursor:'pointer', fontFamily:'inherit', alignSelf:'flex-start',
              display:'flex', alignItems:'center', gap:6,
            }}>+ הוסף תשלום</button>

            {/* Payments table */}
            <div style={{ background:'var(--ybp-panel)', borderRadius:10, border:'1px solid var(--ybp-border)', overflow:'hidden' }}>
              <div style={{ overflowX:'auto' }}>
                <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12, direction:'rtl' }}>
                  <thead>
                    <tr style={{ background:'var(--ybp-row-hover)', color:'var(--ybp-ink-soft)' }}>
                      {['ספק','תיאור','שורת תקציב','ברוטו','נטו','מע"מ','תאריך','סטטוס',''].map(h => (
                        <th key={h} style={{ padding:'10px 12px', textAlign:'right', fontWeight:700,
                          fontSize:11, letterSpacing:0.3, borderBottom:'1px solid var(--ybp-border)',
                          whiteSpace:'nowrap' }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {supLoading && (
                      <tr><td colSpan={9} style={{ padding:24, textAlign:'center', color:'var(--ybp-ink-soft)' }}>טוען תשלומים…</td></tr>
                    )}
                    {!supLoading && supPayments.length === 0 && (
                      <tr><td colSpan={9} style={{ padding:24, textAlign:'center', color:'var(--ybp-ink-faint)' }}>אין תשלומים עדיין</td></tr>
                    )}
                    {!supLoading && supPayments.map(p => {
                      const stKey = p.status === 'paid' ? 'paid' : p.status === 'cancelled' ? 'future' : 'pending';
                      const st = STATUS_STYLES[stKey] || STATUS_STYLES.pending;
                      const stLabel = p.status === 'cancelled' ? 'בוטל' : st.label;
                      return (
                        <tr key={p.id} style={{ borderBottom:'1px solid var(--ybp-border-soft)' }}>
                          <td style={{ padding:'10px 12px', fontWeight:600, color:'var(--ybp-ink)' }}>{p.supplier_name || '—'}</td>
                          <td style={{ padding:'10px 12px', color:'var(--ybp-ink-soft)' }}>{p.description || '—'}</td>
                          <td style={{ padding:'10px 12px', color:'var(--ybp-ink-soft)', fontSize:11 }}>{lineLabel(p.budget_line_id)}</td>
                          <td style={{ padding:'10px 12px', whiteSpace:'nowrap' }}>{fmtMoney(p.amount_gross)}</td>
                          <td style={{ padding:'10px 12px', whiteSpace:'nowrap', color:'var(--ybp-navy)', fontWeight:700 }}>{fmtMoney(p.amount_net)}</td>
                          <td style={{ padding:'10px 12px', whiteSpace:'nowrap', color:'var(--ybp-ink-soft)' }}>{fmtMoney(p.vat_amount)}</td>
                          <td style={{ padding:'10px 12px', whiteSpace:'nowrap', color:'var(--ybp-ink-soft)' }}>{fmtDate(p.payment_date)}</td>
                          <td style={{ padding:'10px 12px' }}>
                            <span style={{ padding:'2px 8px', borderRadius:10, fontSize:10, fontWeight:700, background:st.bg, color:st.color, whiteSpace:'nowrap' }}>{stLabel}</span>
                          </td>
                          <td style={{ padding:'8px 10px', whiteSpace:'nowrap' }}>
                            <button onClick={() => { setEditingPayment(p); setShowAddPayment(true); }}
                              title="עריכה"
                              style={{ background:'transparent', border:'none', cursor:'pointer', fontSize:14, padding:'2px 6px', color:'var(--ybp-ink-soft)', fontFamily:'inherit' }}>✏️</button>
                            <button onClick={() => handleDeletePayment(p.id)}
                              title="מחיקה"
                              style={{ background:'transparent', border:'none', cursor:'pointer', fontSize:14, padding:'2px 6px', color:'var(--ybp-danger,#dc2626)', fontFamily:'inherit' }}>🗑</button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Mark Paid Confirm — client only */}
      {showMarkPaid && (
        <MarkPaidModal
          type={showMarkPaid.type}
          onClose={()=>setShowMarkPaid(null)}
          onConfirm={()=>markClientPaid(showMarkPaid.id)}
        />
      )}

      {/* Add Client Milestone Modal */}
      {showAddClient && (
        <AddMilestoneModal onClose={()=>setShowAddClient(false)}
          onSave={(m)=>{ const upd={...data, clientMilestones:[...data.clientMilestones,m]}; persist(upd); setShowAddClient(false); showToast('✓ אבן דרך נוספה'); }}
        />
      )}

      {/* Add / Edit Supplier Payment Modal (cloud) */}
      {showAddPayment && (
        <AddPaymentModal
          payment={editingPayment}
          budgetLines={budgetLines}
          onClose={() => { setShowAddPayment(false); setEditingPayment(null); }}
          onSave={(form) => handleSavePayment(form, editingPayment?.id)}
        />
      )}
    </div>
  );
};

// ─── Mark Paid Modal ─────────────────────────────────────────────────────────
const MarkPaidModal = ({ type, onClose, onConfirm }) => {
  const [invoice, setInvoice] = useState('');
  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.4)', zIndex:500,
      display:'flex', alignItems:'center', justifyContent:'center' }} onClick={onClose}>
      <div style={{ background:'var(--ybp-panel)', borderRadius:12, padding:24, width:340, maxWidth:'90vw',
        boxShadow:'0 20px 60px rgba(0,0,0,0.3)' }} onClick={e=>e.stopPropagation()}>
        <div style={{ fontSize:16, fontWeight:700, color:'var(--ybp-ink)', marginBottom:8 }}>✓ סמן תשלום כשולם</div>
        <div style={{ fontSize:13, color:'var(--ybp-ink-soft)', marginBottom:16 }}>תאריך התשלום יעודכן להיום.</div>
        {type === 'supplier' && (
          <div style={{ marginBottom:16 }}>
            <label style={{ fontSize:12, fontWeight:700, color:'var(--ybp-ink-soft)', display:'block', marginBottom:6 }}>
              מספר חשבונית <span style={{ color:'var(--ybp-ink-faint)', fontWeight:400 }}>(אופציונלי)</span>
            </label>
            <input
              value={invoice}
              onChange={e=>setInvoice(e.target.value)}
              placeholder="למשל: INV-2026-042"
              style={{ width:'100%', padding:'9px 10px', borderRadius:8, border:'1px solid var(--ybp-border)',
                fontFamily:'inherit', fontSize:13, direction:'ltr', boxSizing:'border-box' }}
            />
            <div style={{ fontSize:11, color:'var(--ybp-ink-faint)', marginTop:4 }}>החשבונית תוצג ברשומת התשלום ותסונכרן לתקציב</div>
          </div>
        )}
        <div style={{ display:'flex', gap:8 }}>
          <button onClick={onClose} style={{ flex:1, padding:'10px', borderRadius:8,
            border:'1px solid var(--ybp-border)', background:'var(--ybp-panel)', color:'var(--ybp-ink-soft)', fontSize:13,
            fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>ביטול</button>
          <button onClick={()=>onConfirm(invoice)} style={{ flex:2, padding:'10px', borderRadius:8,
            border:'none', background:'#10b981', color:'#fff', fontSize:13, fontWeight:700,
            cursor:'pointer', fontFamily:'inherit' }}>✓ אישור — שולם</button>
        </div>
      </div>
    </div>
  );
};

// ─── Add Milestone Modal ──────────────────────────────────────────────────────
const AddMilestoneModal = ({ onClose, onSave }) => {
  const [f, setF] = useState({ label:'', pct:0, amount:'', dueDate:'', note:'' });
  const set = (k,v) => setF(p=>({...p,[k]:v}));
  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.5)', zIndex:500,
      display:'flex', alignItems:'flex-end', justifyContent:'center' }} onClick={onClose}>
      <div style={{ background:'var(--ybp-panel)', borderRadius:'16px 16px 0 0', width:'100%', maxWidth:480,
        padding:'20px 16px 32px' }} onClick={e=>e.stopPropagation()}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
          <div style={{ fontSize:16, fontWeight:700, color:'var(--ybp-ink)' }}>הוסף אבן דרך</div>
          <button onClick={onClose} style={{ background:'none', border:'none', fontSize:20, cursor:'pointer', color:'var(--ybp-ink-soft)' }}>×</button>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {[['label','תיאור','text'],['pct','אחוז מהחוזה (%)','number'],['amount','סכום ₪','number'],['dueDate','תאריך יעד','date'],['note','הערה','text']].map(([k,label,type])=>(
            <div key={k}>
              <label style={{ fontSize:12, fontWeight:700, color:'var(--ybp-ink-soft)', display:'block', marginBottom:4 }}>{label}</label>
              <input type={type} value={f[k]} onChange={e=>set(k,e.target.value)}
                style={{ width:'100%', padding:'9px 10px', borderRadius:8, border:'1px solid var(--ybp-border)',
                  fontFamily:'inherit', fontSize:13, direction:'rtl', boxSizing:'border-box' }}/>
            </div>
          ))}
        </div>
        <button onClick={()=>{
          if(!f.label||!f.amount){alert('חובה: תיאור + סכום');return;}
          onSave({id:'CM-'+Date.now(), ...f, amount:Number(String(f.amount).replace(/\D/g,'')), status:'future', paidDate:null});
        }} style={{ width:'100%', marginTop:14, padding:'12px', borderRadius:8, border:'none',
          background:'var(--ybp-navy)', color:'#fff', fontSize:14, fontWeight:700, cursor:'pointer', fontFamily:'inherit' }}>
          שמור
        </button>
      </div>
    </div>
  );
};

// ─── Add / Edit Payment Modal (cloud, v3.9.0.56) ──────────────────────────────
const AddPaymentModal = ({ payment, budgetLines, onClose, onSave }) => {
  const today = new Date().toISOString().slice(0,10);
  const [form, setForm] = useState(() => ({
    budget_line_id: payment?.budget_line_id || '',
    supplier_name:  payment?.supplier_name  || '',
    description:    payment?.description    || '',
    amount_gross:   payment?.amount_gross   ?? '',
    vat_rate:       payment?.vat_rate       ?? 0.18,
    payment_date:   payment?.payment_date   || today,
    status:         payment?.status         || 'paid',
    invoice_number: payment?.invoice_number || '',
    invoice_url:    payment?.invoice_url    || '',
    notes:          payment?.notes          || '',
  }));
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  const live = (window.PaymentsStore && window.PaymentsStore.computeAmounts)
    ? window.PaymentsStore.computeAmounts(Number(form.amount_gross) || 0, Number(form.vat_rate))
    : { amount_net: 0, vat_amount: 0 };

  const labelSt = { fontSize:12, fontWeight:700, color:'var(--ybp-ink-soft)', display:'block', marginBottom:4 };
  const inputSt = { width:'100%', padding:'9px 10px', borderRadius:8, border:'1px solid var(--ybp-border)',
    fontFamily:'inherit', fontSize:13, direction:'rtl', boxSizing:'border-box', background:'var(--ybp-panel)', color:'var(--ybp-ink)' };

  const handleSubmit = () => {
    const gross = Number(form.amount_gross) || 0;
    if (gross <= 0) { alert('סכום ברוטו חייב להיות גדול מאפס'); return; }
    if (!form.payment_date)  { alert('חובה לבחור תאריך תשלום'); return; }
    onSave({ ...form, amount_gross: gross, vat_rate: Number(form.vat_rate) });
  };

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.5)', zIndex:500,
      display:'flex', alignItems:'flex-end', justifyContent:'center' }} onClick={onClose}>
      <div style={{ background:'var(--ybp-panel)', borderRadius:'16px 16px 0 0', width:'100%', maxWidth:520,
        maxHeight:'92vh', overflowY:'auto', padding:'20px 16px 32px', direction:'rtl' }} onClick={e=>e.stopPropagation()}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14 }}>
          <div style={{ fontSize:16, fontWeight:700, color:'var(--ybp-ink)' }}>
            {payment ? '✏️ עריכת תשלום' : '+ הוסף תשלום'}
          </div>
          <button onClick={onClose} style={{ background:'none', border:'none', fontSize:20, cursor:'pointer', color:'var(--ybp-ink-soft)' }}>×</button>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          <div style={{ gridColumn:'1 / -1' }}>
            <label style={labelSt}>שורת תקציב <span style={{ color:'var(--ybp-ink-faint)', fontWeight:400 }}>(אופציונלי — נדרש לסנכרון התקציב)</span></label>
            <select value={form.budget_line_id} onChange={e=>set('budget_line_id', e.target.value)} style={inputSt}>
              <option value="">— ללא שיוך —</option>
              {budgetLines.map(l => (
                <option key={l.id} value={l.id}>
                  {(l.category || '') + (l.category && l.name ? ' – ' : '') + (l.name || '')}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label style={labelSt}>ספק</label>
            <input value={form.supplier_name} onChange={e=>set('supplier_name', e.target.value)} style={inputSt} placeholder="שם ספק"/>
          </div>
          <div>
            <label style={labelSt}>תיאור</label>
            <input value={form.description} onChange={e=>set('description', e.target.value)} style={inputSt} placeholder="תיאור התשלום"/>
          </div>

          <div>
            <label style={labelSt}>סכום ברוטו ₪</label>
            <input type="number" value={form.amount_gross} onChange={e=>set('amount_gross', e.target.value)} style={inputSt} placeholder="0"/>
          </div>
          <div>
            <label style={labelSt}>מע"מ</label>
            <select value={form.vat_rate} onChange={e=>set('vat_rate', e.target.value)} style={inputSt}>
              <option value={0.18}>18%</option>
              <option value={0}>0%</option>
            </select>
          </div>

          <div style={{ gridColumn:'1 / -1', display:'grid', gridTemplateColumns:'1fr 1fr', gap:10,
            background:'var(--ybp-row-hover)', borderRadius:8, padding:'10px 12px' }}>
            <div>
              <div style={{ fontSize:11, color:'var(--ybp-ink-soft)' }}>נטו</div>
              <div style={{ fontSize:15, fontWeight:800, color:'var(--ybp-navy)' }}>{fmtMoney(live.amount_net)}</div>
            </div>
            <div>
              <div style={{ fontSize:11, color:'var(--ybp-ink-soft)' }}>מע"מ</div>
              <div style={{ fontSize:15, fontWeight:800, color:'var(--ybp-ink)' }}>{fmtMoney(live.vat_amount)}</div>
            </div>
          </div>

          <div>
            <label style={labelSt}>תאריך תשלום</label>
            <input type="date" value={form.payment_date} onChange={e=>set('payment_date', e.target.value)} style={inputSt}/>
          </div>
          <div>
            <label style={labelSt}>סטטוס</label>
            <select value={form.status} onChange={e=>set('status', e.target.value)} style={inputSt}>
              <option value="paid">שולם</option>
              <option value="pending">ממתין</option>
              <option value="cancelled">בוטל</option>
            </select>
          </div>

          <div>
            <label style={labelSt}>מס' חשבונית</label>
            <input value={form.invoice_number} onChange={e=>set('invoice_number', e.target.value)} style={{...inputSt, direction:'ltr'}} placeholder="INV-…"/>
          </div>
          <div>
            <label style={labelSt}>קישור חשבונית</label>
            <input value={form.invoice_url} onChange={e=>set('invoice_url', e.target.value)} style={{...inputSt, direction:'ltr'}} placeholder="https://…"/>
          </div>

          <div style={{ gridColumn:'1 / -1' }}>
            <label style={labelSt}>הערות</label>
            <input value={form.notes} onChange={e=>set('notes', e.target.value)} style={inputSt} placeholder="הערות"/>
          </div>
        </div>

        <div style={{ display:'flex', gap:8, marginTop:16 }}>
          <button onClick={onClose} style={{ flex:1, padding:'12px', borderRadius:8,
            border:'1px solid var(--ybp-border)', background:'var(--ybp-panel)', color:'var(--ybp-ink-soft)',
            fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>ביטול</button>
          <button onClick={handleSubmit} style={{ flex:2, padding:'12px', borderRadius:8, border:'none',
            background:'var(--ybp-navy)', color:'#fff', fontSize:14, fontWeight:700, cursor:'pointer', fontFamily:'inherit' }}>
            {payment ? '💾 שמור שינויים' : '+ הוסף תשלום'}
          </button>
        </div>
      </div>
    </div>
  );
};

window.PaymentsScreen = PaymentsScreen;
window.getPayments = getPayments;
window.savePayments = savePayments;
})();