// Promo codes / Coupons
const Coupons = () => {
  const [creating, setCreating] = React.useState(false);

  const coupons = [
    { code:'EARLY20', discount:'20%', scope:'Apparat · Berghain', used: 142, limit: 200, sales: euro(8520), status:'active', expiry:'20. Apr' },
    { code:'FRIENDS10', discount:euro(10)+' off', scope:'All events', used: 28, limit: 50, sales: euro(1412), status:'active', expiry:'Never' },
    { code:'FLASH30', discount:'30%', scope:'Comedy Abend', used: 0, limit: 100, sales: euro(0), status:'scheduled', expiry:'01. Mai → 03. Mai' },
    { code:'JAZZ15', discount:'15%', scope:'Jazz · A-Trane', used: 89, limit: 100, sales: euro(534), status:'active', expiry:'12. Mai' },
    { code:'WELCOME10', discount:'10%', scope:'All events · first-time only', used: 412, limit: '∞', sales: euro(2980), status:'active', expiry:'Never' },
    { code:'STAFF100', discount:'100%', scope:'All events · internal', used: 14, limit: 20, sales: '—', status:'paused', expiry:'Never' },
  ];

  return (
    <div style={{ padding: '24px 36px 60px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 18 }}>
        <div>
          <h1 className="display" style={{ margin: 0, fontSize: 30, fontWeight: 500, letterSpacing:'-0.02em' }}>Promo codes</h1>
          <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 4 }}>Reward loyalty, run flash sales, and track what drives conversion.</div>
        </div>
        <Button variant="primary" icon="plus" onClick={() => setCreating(true)}>New promo code</Button>
      </div>

      {/* Summary cards */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 14, marginBottom: 18 }}>
        <Card pad={18}>
          <div style={{ fontSize: 12, color:'var(--ink-3)', fontWeight: 500 }}>Active codes</div>
          <div className="display" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>4</div>
          <div style={{ fontSize: 11.5, color:'var(--ink-4)' }}>of 6 total</div>
        </Card>
        <Card pad={18}>
          <div style={{ fontSize: 12, color:'var(--ink-3)', fontWeight: 500 }}>Redemptions (30d)</div>
          <div className="display" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>685</div>
          <div style={{ fontSize: 11.5, color:'var(--success)', fontWeight: 600 }}>+34% vs prev</div>
        </Card>
        <Card pad={18}>
          <div style={{ fontSize: 12, color:'var(--ink-3)', fontWeight: 500 }}>Discount given</div>
          <div className="display" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>{euro(6138, { compact: true })}</div>
          <div style={{ fontSize: 11.5, color:'var(--ink-4)' }}>avg 18%</div>
        </Card>
        <Card pad={18}>
          <div style={{ fontSize: 12, color:'var(--ink-3)', fontWeight: 500 }}>Revenue from codes</div>
          <div className="display" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>{euro(13446, { compact: true })}</div>
          <div style={{ fontSize: 11.5, color:'var(--success)', fontWeight: 600 }}>2.19× ROI</div>
        </Card>
      </div>

      {/* Coupons table */}
      <Card pad={0}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background:'var(--bg-sunken)', borderBottom:'1px solid var(--line)' }}>
              {['Code','Discount','Scope','Usage','Sales','Status','Expiry',''].map(h => (
                <th key={h} style={{ padding:'10px 14px', textAlign:'left', fontSize: 11, fontWeight: 600, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.05em' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {coupons.map(c => {
              const pct = c.limit === '∞' ? null : (c.used / c.limit) * 100;
              return (
                <tr key={c.code} style={{ borderBottom:'1px solid var(--line)', height: 56 }}>
                  <td style={{ padding:'0 14px' }}>
                    <span className="mono" style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6,
                      padding: '4px 8px', borderRadius: 6,
                      background: 'var(--bg-muted)', color:'var(--ink)',
                      fontSize: 12.5, fontWeight: 600, letterSpacing: '0.02em',
                    }}>{c.code}<Icon name="copy" size={11} style={{ color:'var(--ink-3)', cursor:'pointer' }}/></span>
                  </td>
                  <td style={{ padding:'0 14px' }}><span className="display" style={{ fontSize: 16, fontWeight: 500 }}>{c.discount}</span></td>
                  <td style={{ padding:'0 14px', color:'var(--ink-2)' }}>{c.scope}</td>
                  <td style={{ padding:'0 14px', minWidth: 150 }}>
                    <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                      <span className="mono" style={{ fontSize: 12, fontWeight: 500, width: 70 }}>{c.used}/{c.limit}</span>
                      {pct != null && <div style={{ flex: 1, height: 4, borderRadius: 99, background: 'var(--bg-muted)' }}>
                        <div style={{ width: `${Math.min(100,pct)}%`, height: '100%', background: pct > 90 ? 'var(--warning)' : 'var(--accent)', borderRadius: 99 }}/>
                      </div>}
                    </div>
                  </td>
                  <td style={{ padding:'0 14px' }}><span className="mono" style={{ fontWeight: 600 }}>{c.sales}</span></td>
                  <td style={{ padding:'0 14px' }}>
                    <Chip tone={c.status === 'active' ? 'success' : c.status === 'scheduled' ? 'indigo' : 'neutral'} size="sm">{c.status}</Chip>
                  </td>
                  <td style={{ padding:'0 14px', color:'var(--ink-3)', fontSize: 12.5 }}>{c.expiry}</td>
                  <td style={{ padding:'0 14px' }}><Icon name="more" size={14} style={{ color:'var(--ink-3)', cursor:'pointer' }}/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>

      {/* Create modal */}
      <Modal open={creating} onClose={() => setCreating(false)} title="New promo code" width={540}>
        <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>
          <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 12 }}>
            <Field label="Code" hint="Uppercase letters and numbers, no spaces">
              <Input defaultValue="SUMMER25" suffix={<Button variant="ghost" size="sm" style={{height:26, padding:'0 8px'}}>Generate</Button>}/>
            </Field>
            <Field label="Discount type">
              <Select value="pct" onChange={()=>{}} options={[
                { value:'pct', label:'Percentage off' },
                { value:'flat', label:'Flat amount off' },
                { value:'free', label:'Free ticket' },
              ]}/>
            </Field>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12 }}>
            <Field label="Amount">
              <Input defaultValue="25" suffix="%"/>
            </Field>
            <Field label="Usage limit" hint="Leave blank for unlimited">
              <Input defaultValue="100"/>
            </Field>
          </div>
          <Field label="Applies to">
            <Select value="events" onChange={()=>{}} options={[
              { value:'all', label:'All current & future events' },
              { value:'events', label:'Specific events…' },
              { value:'tiers', label:'Specific ticket tiers…' },
            ]}/>
          </Field>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12 }}>
            <Field label="Starts"><Input defaultValue="18. Apr 2026"/></Field>
            <Field label="Ends"><Input defaultValue="18. Mai 2026" placeholder="Never"/></Field>
          </div>
          <div style={{ padding: 14, borderRadius: 10, background: 'var(--bg-sunken)', border: '1px solid var(--line)' }}>
            <Toggle checked={true} onChange={()=>{}} label="First-time buyers only" desc="Code only works for customers on their first booking"/>
          </div>
          <div style={{ display:'flex', gap: 8, justifyContent:'flex-end', borderTop: '1px solid var(--line)', paddingTop: 16, margin: '4px -4px 0' }}>
            <Button variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
            <Button variant="primary" icon="sparkle" onClick={() => setCreating(false)}>Create code</Button>
          </div>
        </div>
      </Modal>
    </div>
  );
};

window.Coupons = Coupons;