/* ───────────────────────── CEMETERY · PRE-NEED PAYMENTS (Stripe-style) ───────────────────────── */
function PaymentModal({contract, onClose, onPaid}){
  const [step,setStep] = useState("amount"); // amount | card | processing | done
  const [amount,setAmount] = useState(()=> {
    const monthly = Math.round((contract.total-contract.paid)/Math.max(1,contract.monthsLeft||10));
    return String(monthly);
  });
  const [card,setCard] = useState(""); const [exp,setExp]=useState(""); const [cvc,setCvc]=useState("");
  const balance = contract.total - contract.paid;

  useEffect(()=>{ if(step!=="processing") return; const t=setTimeout(()=>setStep("done"),1800); return ()=>clearTimeout(t); },[step]);

  const amt = Math.min(balance, Math.max(0, parseInt(amount.replace(/\D/g,""))||0));

  return (
    <div className="overlay" onClick={(e)=>{if(e.target.classList.contains("overlay")&&step!=="processing")onClose();}}>
      <div className="modal" style={{width:"min(460px,100%)"}}>
        <div className="modal-h">
          <div style={{width:34,height:34,borderRadius:9,background:"color-mix(in oklab,var(--ok) 14%,var(--paper))",color:"var(--ok)",display:"grid",placeItems:"center",flex:"none"}}>＄</div>
          <h3>{step==="done"?"Payment received":"Collect payment"}</h3>
          {step!=="processing" && <button className="x" onClick={onClose}>×</button>}
        </div>
        <div className="modal-b">
          {step==="amount" && (
            <div className="fade-in">
              <div className="import-row" style={{marginBottom:16}}>
                <div className="fi">{contract.who[0]}</div>
                <div style={{flex:1}}><div className="fn">{contract.name}</div><div className="fm" style={{fontFamily:"var(--font-body)",letterSpacing:0}}>{contract.plot} · {contract.kind}</div></div>
              </div>
              <div className="rec-rows" style={{borderTop:"none",marginBottom:14}}>
                <div className="r"><span>Total</span><b>${contract.total.toLocaleString()}</b></div>
                <div className="r"><span>Paid to date</span><b>${contract.paid.toLocaleString()}</b></div>
                <div className="r"><span>Balance</span><b style={{color:"var(--brand)"}}>${balance.toLocaleString()}</b></div>
              </div>
              <label className="flbl">Amount to charge</label>
              <div style={{position:"relative",marginBottom:14}}>
                <span style={{position:"absolute",left:13,top:"50%",transform:"translateY(-50%)",color:"var(--faint)",fontWeight:600}}>$</span>
                <input className="finp" style={{paddingLeft:24}} value={amount} onChange={e=>setAmount(e.target.value)} />
              </div>
              <div style={{display:"flex",gap:8,marginBottom:4}}>
                <button className="chip" onClick={()=>setAmount(String(Math.round(balance/Math.max(1,contract.monthsLeft||10))))}>Monthly</button>
                <button className="chip" onClick={()=>setAmount(String(balance))}>Pay in full</button>
              </div>
              <button className="btn primary" style={{width:"100%",justifyContent:"center",marginTop:16,opacity:amt>0?1:.5,pointerEvents:amt>0?"auto":"none"}} onClick={()=>setStep("card")}>Continue · ${amt.toLocaleString()} →</button>
            </div>
          )}

          {step==="card" && (
            <div className="fade-in">
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:14}}>
                <span className="muted" style={{fontSize:13}}>Charging</span>
                <b style={{fontSize:18}}>${amt.toLocaleString()}</b>
              </div>
              <label className="flbl">Card number</label>
              <input className="finp" value={card} onChange={e=>setCard(e.target.value)} placeholder="4242 4242 4242 4242" style={{marginBottom:12}} />
              <div style={{display:"flex",gap:10,marginBottom:16}}>
                <div style={{flex:1}}><label className="flbl">Expiry</label><input className="finp" value={exp} onChange={e=>setExp(e.target.value)} placeholder="MM / YY" /></div>
                <div style={{width:110}}><label className="flbl">CVC</label><input className="finp" value={cvc} onChange={e=>setCvc(e.target.value)} placeholder="123" /></div>
              </div>
              <div style={{display:"flex",alignItems:"center",gap:8,padding:"10px 12px",borderRadius:10,background:"var(--paper)",border:"1px solid var(--line)",marginBottom:16}}>
                <span style={{fontWeight:700,color:"#635BFF",fontFamily:"var(--font-display)"}}>stripe</span>
                <span className="muted" style={{fontSize:12}}>Secured & encrypted · PCI-compliant</span>
              </div>
              <button className="btn primary" style={{width:"100%",justifyContent:"center"}} onClick={()=>setStep("processing")}>Charge ${amt.toLocaleString()}</button>
              <button className="btn ghost" style={{width:"100%",justifyContent:"center",marginTop:8}} onClick={()=>setStep("amount")}>← Back</button>
            </div>
          )}

          {step==="processing" && (
            <div className="fade-in center" style={{padding:"28px 0"}}>
              <div className="spinner" style={{margin:"0 auto 16px"}}></div>
              <b style={{fontSize:15}}>Processing payment…</b>
              <p className="muted" style={{fontSize:13,marginTop:6}}>Charging card via Stripe</p>
            </div>
          )}

          {step==="done" && (
            <div className="fade-in center" style={{padding:"8px 0"}}>
              <div style={{width:58,height:58,borderRadius:"50%",background:"color-mix(in oklab,var(--ok) 16%,var(--paper))",color:"var(--ok)",display:"grid",placeItems:"center",fontSize:28,margin:"0 auto 14px"}}>✓</div>
              <h2 style={{fontSize:22}}>${amt.toLocaleString()} received</h2>
              <p className="muted" style={{fontSize:14,margin:"8px auto 0",maxWidth:320}}>New balance on {contract.name}: <b style={{color:"var(--ink)"}}>${(balance-amt).toLocaleString()}</b>{balance-amt<=0?" — paid in full!":""}. A receipt was emailed to the buyer.</p>
              <button className="btn primary" style={{width:"100%",justifyContent:"center",marginTop:18}} onClick={()=>onPaid(contract,amt)}>Done</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PaymentModal });