// CreateScreen — "New Social". A live preview card at top that updates as the
// host fills the form: title, category chips, when, location, seats stepper.
function CreateScreen({ onBack, onPublish }) {
  const { SocialCard, Input, CategoryChip, Button } = window.PraigoDesignSystem_290071;
  const { useState } = React;
  const CATS = ['board-games', 'running', 'food', 'music', 'sports', 'outdoors', 'art', 'study', 'gaming', 'coffee'];
  const [title, setTitle] = useState('Catan Board Game Night');
  const [cat, setCat] = useState('board-games');
  const [seats, setSeats] = useState(6);
  const [when, setWhen] = useState('Tonight 7:00');
  const [loc, setLoc] = useState('Leavey Library');

  return (
    <div>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px' }}>
        <button onClick={onBack} aria-label="Back" style={{ width: 40, height: 40, borderRadius: '50%', border: 'none', background: 'transparent', color: 'var(--text-primary)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span className="material-symbols-rounded">arrow_back</span>
        </button>
        <div style={{ fontSize: 20, fontWeight: 800 }}>New Social</div>
      </div>

      <div style={{ padding: '4px 16px 100px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        {/* live preview */}
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-secondary)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '.05em' }}>Live preview</div>
          <SocialCard
            title={title || 'Your Social'}
            category={cat}
            whenLabel={when}
            distanceLabel="0.4 km"
            goingCount={1}
            capacity={seats}
            hostName="You" hostTier={3}
            going={true} onToggleGoing={() => {}} />
        </div>

        <Input label="Title" defaultValue={title} onChange={e => setTitle(e.target.value)} />

        {/* category */}
        <div>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 8 }}>Category</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {CATS.map(c => <CategoryChip key={c} slug={c} selected={cat === c} onClick={() => setCat(c)} />)}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Input label="When" defaultValue={when} onChange={e => setWhen(e.target.value)} leadingIcon="schedule" />
          <Input label="Location" defaultValue={loc} onChange={e => setLoc(e.target.value)} leadingIcon="place" />
        </div>

        {/* seats stepper */}
        <div>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 8 }}>Seats</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'var(--surface-raised)', border: '1px solid var(--border)', borderRadius: 'var(--radius-control)', padding: 8, width: 'fit-content' }}>
            <button onClick={() => setSeats(s => Math.max(2, s - 1))} aria-label="Fewer seats" style={stepBtn}><span className="material-symbols-rounded">remove</span></button>
            <span style={{ fontSize: 20, fontWeight: 800, minWidth: 28, textAlign: 'center' }}>{seats}</span>
            <button onClick={() => setSeats(s => Math.min(20, s + 1))} aria-label="More seats" style={stepBtn}><span className="material-symbols-rounded">add</span></button>
          </div>
        </div>
      </div>

      {/* pinned publish */}
      <div style={{ position: 'sticky', bottom: 0, padding: 16, background: 'linear-gradient(transparent, var(--bg) 28%)' }}>
        <Button fullWidth size="lg" leadingIcon="campaign" onClick={onPublish}>Publish Social</Button>
      </div>
    </div>
  );
}

const stepBtn = {
  width: 40, height: 40, borderRadius: 10, border: 'none', cursor: 'pointer',
  background: 'var(--surface)', color: 'var(--text-primary)',
  display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-xs)',
};

Object.assign(window, { CreateScreen });