// Checkout — drawer that slides over the page. Reverts to onyx theme during checkout
// per the brand guideline ("discreet from start to finish").
function Checkout({ open, items, onClose, onRemove, onComplete }) {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({
    email:'', name:'', address:'', city:'', state:'', zip:'',
    card:'', exp:'', cvc:'',
  });

  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const total = subtotal;

  React.useEffect(() => { if (!open) setStep(0); }, [open]);

  if (!open) return null;
  return (
    <div style={chkStyles.overlay} onClick={onClose}>
      <div style={chkStyles.drawer} onClick={e => e.stopPropagation()} data-checkout>
        <div style={chkStyles.head}>
          <div className="serif" style={{fontSize: 24}}>Checkout</div>
          <button onClick={onClose} className="mini" style={{color:'var(--ink-mute)'}}>Close ✕</button>
        </div>

        {/* Progress */}
        <div style={chkStyles.steps}>
          {['Information','Shipping','Payment'].map((s, i) => (
            <button key={s} onClick={() => i <= step && setStep(i)} style={{
              ...chkStyles.stepBtn,
              color: i <= step ? 'var(--gold)' : 'var(--ink-mute)',
              borderColor: i === step ? 'var(--gold)' : 'var(--hairline)',
            }} className="mini">
              {String(i+1).padStart(2,'0')} · {s}
            </button>
          ))}
        </div>

        <div style={chkStyles.body}>
          <div style={chkStyles.formCol}>
            {step === 0 && (
              <Step title="Your details">
                <Field label="Email"   v={form.email} onChange={v => setForm({...form, email:v})}/>
                <Field label="Full name" v={form.name} onChange={v => setForm({...form, name:v})}/>
              </Step>
            )}
            {step === 1 && (
              <Step title="Shipping (always discreet)">
                <Field label="Address" v={form.address} onChange={v => setForm({...form, address:v})}/>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 12}}>
                  <Field label="City"  v={form.city} onChange={v => setForm({...form, city:v})}/>
                  <Field label="State" v={form.state} onChange={v => setForm({...form, state:v})}/>
                  <Field label="ZIP"   v={form.zip} onChange={v => setForm({...form, zip:v})}/>
                </div>
                <div style={chkStyles.notice}>
                  <Icon.shield/>
                  <div>
                    <div className="mini" style={{color:'var(--ink)', marginBottom: 4}}>Always discreet</div>
                    <div style={{fontSize: 12, color:'var(--ink-mute)'}}>
                      Plain mailer. No labels. No identifiers. Returned address: "DP Logistics."
                    </div>
                  </div>
                </div>
              </Step>
            )}
            {step === 2 && (
              <Step title="Payment">
                <Field label="Card number" v={form.card} onChange={v => setForm({...form, card:v})}/>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
                  <Field label="Expiry (MM/YY)" v={form.exp} onChange={v => setForm({...form, exp:v})}/>
                  <Field label="CVC" v={form.cvc} onChange={v => setForm({...form, cvc:v})}/>
                </div>
                <div style={chkStyles.notice}>
                  <Icon.lock/>
                  <div>
                    <div className="mini" style={{color:'var(--ink)', marginBottom: 4}}>Secure checkout</div>
                    <div style={{fontSize: 12, color:'var(--ink-mute)'}}>
                      Your information is always protected. Statement appears as "DP Wellness."
                    </div>
                  </div>
                </div>
              </Step>
            )}

            <div style={chkStyles.footRow}>
              {step > 0 && (
                <button className="mini" onClick={() => setStep(step-1)} style={chkStyles.backBtn}>
                  ← Back
                </button>
              )}
              {step < 2 && (
                <button className="mini" onClick={() => setStep(step+1)} style={chkStyles.nextBtn}>
                  Continue →
                </button>
              )}
              {step === 2 && (
                <button className="mini" onClick={() => onComplete()} style={chkStyles.payBtn}>
                  Complete order — ${total}
                </button>
              )}
            </div>
          </div>

          {/* Summary */}
          <div style={chkStyles.summary}>
            <div className="micro" style={{color:'var(--gold)', marginBottom: 20}}>Order summary</div>
            {items.length === 0 && (
              <div style={{color:'var(--ink-mute)', fontSize: 14, padding: '40px 0', textAlign:'center'}}>
                Your cart is empty.
              </div>
            )}
            {items.map(it => (
              <div key={it.id} style={chkStyles.lineItem}>
                <div style={chkStyles.thumb}>
                  <img src={it.image} alt={it.name} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                </div>
                <div style={{flex:1}}>
                  <div className="serif" style={{fontSize: 18}}>{it.name}</div>
                  <div className="micro" style={{color:'var(--ink-mute)', marginTop: 4}}>
                    {it.color}
                  </div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div style={{color:'var(--gold)', fontSize: 14}}>${it.price}</div>
                  <button onClick={() => onRemove(it.id)} className="mini"
                          style={{color:'var(--ink-mute)', marginTop: 4}}>Remove</button>
                </div>
              </div>
            ))}
            {items.length > 0 && (
              <div style={chkStyles.totals}>
                <div style={chkStyles.totalRow}>
                  <span style={{color:'var(--ink-soft)'}}>Subtotal</span><span>${subtotal}</span>
                </div>
                <div style={chkStyles.totalRow}>
                  <span style={{color:'var(--ink-soft)'}}>Shipping</span>
                  <span style={{color:'var(--gold)'}}>Free</span>
                </div>
                <div style={{...chkStyles.totalRow, borderTop:'1px solid var(--hairline)', paddingTop: 16, marginTop: 8}}>
                  <span className="serif" style={{fontSize: 20}}>Total</span>
                  <span className="serif" style={{fontSize: 24, color:'var(--gold)'}}>${total}</span>
                </div>
              </div>
            )}

            <div style={chkStyles.guarantees}>
              <div style={chkStyles.guaranteeRow}>
                <Icon.lock/><span>Secure · 256-bit encrypted</span>
              </div>
              <div style={chkStyles.guaranteeRow}>
                <Icon.shield/><span>30-day quiet returns</span>
              </div>
              <div style={chkStyles.guaranteeRow}>
                <Icon.truck/><span>Discreet shipping included</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Step({ title, children }) {
  return (
    <div>
      <h3 className="serif" style={{fontSize: 32, marginBottom: 28, lineHeight: 1}}>{title}</h3>
      <div style={{display:'flex', flexDirection:'column', gap: 16}}>{children}</div>
    </div>
  );
}

function Field({ label, v, onChange }) {
  return (
    <label style={{display:'flex', flexDirection:'column', gap: 6}}>
      <span className="mini" style={{color:'var(--ink-mute)'}}>{label}</span>
      <input value={v} onChange={e => onChange(e.target.value)} style={chkStyles.input}/>
    </label>
  );
}

const chkStyles = {
  overlay: {
    position: 'fixed', inset: 0, zIndex: 150,
    background: 'rgba(0,0,0,0.6)', backdropFilter:'blur(8px)',
    WebkitBackdropFilter: 'blur(8px)',
    display: 'flex', justifyContent: 'flex-end',
    animation: 'fadeIn 300ms',
  },
  drawer: {
    width: 'min(960px, 92vw)', height: '100vh',
    background: 'var(--bg)',
    borderLeft: '1px solid var(--hairline-strong)',
    overflowY: 'auto',
    animation: 'slideIn 500ms cubic-bezier(.65,.05,.36,1)',
  },
  head: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '32px 40px', borderBottom: '1px solid var(--hairline)',
  },
  steps: {
    display: 'flex', gap: 0, padding: '20px 40px',
    borderBottom: '1px solid var(--hairline)',
  },
  stepBtn: {
    flex: 1, padding: '12px 16px', textAlign: 'left',
    borderBottom: '2px solid', cursor: 'pointer',
    transition: 'all 300ms',
  },
  body: {
    display: 'grid', gridTemplateColumns: '1.2fr 1fr',
    minHeight: 'calc(100vh - 180px)',
  },
  formCol: { padding: '40px', borderRight: '1px solid var(--hairline)' },
  input: {
    background: 'transparent',
    border: 0, borderBottom: '1px solid var(--hairline-strong)',
    color: 'var(--ink)', fontSize: 16, padding: '10px 0',
    outline: 'none',
  },
  notice: {
    display: 'flex', gap: 14, padding: '20px',
    border: '1px solid var(--hairline)', marginTop: 20,
    color: 'var(--gold)',
  },
  footRow: {
    display: 'flex', justifyContent: 'space-between',
    marginTop: 40, paddingTop: 28, borderTop:'1px solid var(--hairline)',
  },
  backBtn: { color:'var(--ink-mute)', padding:'14px 0' },
  nextBtn: {
    marginLeft:'auto',
    padding:'16px 32px',
    background:'var(--accent)', color:'#0a0807',
    fontWeight: 500,
  },
  payBtn: {
    marginLeft:'auto',
    padding:'16px 32px',
    background:'var(--gold)', color:'#0a0807',
    fontWeight: 500,
  },
  summary: {
    padding: '40px',
    background: 'color-mix(in oklab, var(--bg-soft) 60%, transparent)',
  },
  lineItem: {
    display: 'flex', gap: 16, alignItems: 'center',
    padding: '16px 0', borderBottom: '1px solid var(--hairline)',
  },
  thumb: {
    width: 56, height: 56,
    background: 'var(--bg-elev)',
    display:'flex', alignItems:'center', justifyContent:'center',
    border: '1px solid var(--hairline)',
  },
  totals: { marginTop: 20 },
  totalRow: {
    display:'flex', justifyContent:'space-between',
    padding: '6px 0', fontSize: 14,
  },
  guarantees: {
    marginTop: 32, paddingTop: 24, borderTop:'1px solid var(--hairline)',
    display:'flex', flexDirection:'column', gap: 12,
    fontSize: 12, color:'var(--ink-mute)',
  },
  guaranteeRow: {
    display:'flex', alignItems:'center', gap: 10,
  },
};

if (!document.getElementById('chk-kf')) {
  const s = document.createElement('style'); s.id='chk-kf';
  s.textContent = `
    @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  `;
  document.head.appendChild(s);
}

window.Checkout = Checkout;