// Cart.jsx — slide-out cart drawer + Stripe checkout
const CartDrawer = ({ open, cart, onClose, onRemove }) => {
  const [loading, setLoading] = React.useState(false);
  const [error, setError]     = React.useState('');

  // Lock body scroll when open
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const subtotal = cart.reduce((sum, i) => sum + (i.work.price || 0) * i.qty, 0);

  const checkout = async () => {
    if (!cart.length) return;
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          items: cart.map(i => ({
            amountCents: i.work.price * 100,
            description: i.work.title,
            qty: i.qty,
          })),
        }),
      });
      const data = await res.json();
      if (!res.ok || !data.url) throw new Error(data.error || 'Checkout failed');
      window.location.href = data.url;
    } catch (e) {
      setError(e.message);
      setLoading(false);
    }
  };

  return (
    <>
      {/* backdrop */}
      {open && (
        <div onClick={onClose}
             style={{position:'fixed',inset:0,background:'rgba(10,10,10,0.55)',zIndex:400,animation:'fade .25s ease'}} />
      )}

      {/* drawer */}
      <div style={{
        position:'fixed', top:0, right:0, bottom:0, width:'min(440px,100vw)',
        background:'var(--veil)', zIndex:401, display:'flex', flexDirection:'column',
        transform: open ? 'translateX(0)' : 'translateX(100%)',
        transition:'transform .35s cubic-bezier(.4,0,.2,1)',
        boxShadow: open ? '-8px 0 40px rgba(0,0,0,0.18)' : 'none',
      }}>
        {/* header */}
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',
                     padding:'22px 28px',borderBottom:'1px solid var(--ink-line)'}}>
          <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:13,
                       letterSpacing:'0.12em',textTransform:'uppercase'}}>
            Cart {cart.length > 0 && <span style={{color:'var(--flare)'}}>({cart.length})</span>}
          </div>
          <button onClick={onClose} aria-label="Close cart"
                  style={{fontFamily:'var(--font-display)',fontSize:18,color:'var(--smoke)',
                          padding:'4px 8px',lineHeight:1}}>
            &#x2715;
          </button>
        </div>

        {/* items */}
        <div style={{flex:1,overflowY:'auto',padding:'0 28px'}}>
          {cart.length === 0 ? (
            <div style={{paddingTop:56,textAlign:'center'}}>
              <p className="body dim">Your cart is empty.</p>
            </div>
          ) : (
            cart.map(({ work }) => (
              <div key={work.id} style={{display:'flex',gap:18,padding:'24px 0',
                                         borderBottom:'1px solid var(--ink-line)'}}>
                {/* thumbnail */}
                <div style={{width:72,height:72,flexShrink:0,background:'var(--studio-ink)',overflow:'hidden'}}>
                  {work.img
                    ? <img src={work.img} alt={work.title} style={{width:'100%',height:'100%',objectFit:'cover'}} />
                    : <div style={{width:'100%',height:'100%',display:'flex',alignItems:'center',
                                   justifyContent:'center',padding:8}}>
                        <span style={{fontFamily:'var(--font-display)',fontSize:9,letterSpacing:'0.1em',
                                      textTransform:'uppercase',color:'var(--veil)',textAlign:'center',lineHeight:1.4}}>
                          {work.title}
                        </span>
                      </div>}
                </div>
                {/* info */}
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:13,
                               letterSpacing:'0.04em',textTransform:'uppercase',marginBottom:4}}>
                    {work.title}
                  </div>
                  <div className="meta" style={{marginBottom:6}}>{work.size} &middot; {work.year}</div>
                  <div style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--studio-ink)'}}>
                    ${work.price.toLocaleString('en-US')}
                  </div>
                </div>
                <button onClick={() => onRemove(work.id)} aria-label="Remove"
                        style={{alignSelf:'flex-start',color:'var(--smoke)',fontSize:16,
                                padding:'2px 6px',lineHeight:1,flexShrink:0}}>
                  &times;
                </button>
              </div>
            ))
          )}
        </div>

        {/* footer */}
        {cart.length > 0 && (
          <div style={{padding:'24px 28px',borderTop:'1px solid var(--ink-line)'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',
                         marginBottom:20}}>
              <span className="eyebrow">Subtotal</span>
              <span style={{fontFamily:'var(--font-mono)',fontSize:15,fontWeight:600}}>
                ${subtotal.toLocaleString('en-US')}
              </span>
            </div>
            {error && (
              <p style={{color:'var(--flare)',fontSize:12,marginBottom:12,fontFamily:'var(--font-mono)'}}>
                {error}
              </p>
            )}
            <button className="btn btn-ink" onClick={checkout} disabled={loading}
                    style={{width:'100%',justifyContent:'center',opacity:loading?0.65:1}}>
              {loading ? 'Redirecting to checkout...' : 'Checkout →'}
            </button>
            <p className="meta" style={{marginTop:14,textAlign:'center',lineHeight:1.7}}>
              Secure checkout via Stripe &middot; No deposit held until confirmed
            </p>
          </div>
        )}
      </div>
    </>
  );
};

Object.assign(window, { CartDrawer });