/* Brainstorm X — Invite collaborators + share link. */
(function () {
  const { useState } = React;
  const DS = window.BrainstormXDesignSystem_f2a458;
  const { Button, Card, Input, Textarea, Chip, Avatar, AvatarStack, Badge } = DS;
  const I = window.BXIcons;

  function Invite({ goto, project = 'Pickle Paws', session, addMembers }) {
    const existing = (session && session.members) || window.BXpeople;
    const [emails, setEmails] = useState([]);
    const [val, setVal] = useState('');
    const [sent, setSent] = useState(false);
    const [copied, setCopied] = useState(false);
    const add = (e) => { e.preventDefault(); const v = val.trim(); if (v && !emails.includes(v)) setEmails([...emails, v]); setVal(''); };
    const send = async () => { if (addMembers && emails.length) await addMembers(emails); setSent(true); setEmails([]); };
    const share = 'brainstorm-x.app/s/' + ((session && session.id) || 'pickle-paws-9f3');

    return (
      <div className="bx-nebula-bg" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '44px 24px 110px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 30 }}>
          <img src="../assets/mark-spark.svg" width="28" height="28" alt="" />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--text-1)' }}>Brainstorm<span className="bx-text-nebula"> X</span></span>
        </div>

        <div style={{ width: 'min(640px,100%)', textAlign: 'center', marginBottom: 26 }}>
          <span className="bx-eyebrow"><I.Users size={14} style={{ verticalAlign: 'middle', marginRight: 6 }} />Invite your team</span>
          <h1 style={{ fontSize: 'clamp(30px,4vw,40px)', margin: '12px 0 0' }}>Bring your team into {project}</h1>
          <p style={{ fontSize: 16, color: 'var(--text-2)', marginTop: 12 }}>
            Naming is better when people can react quickly. Invite collaborators so they can vote, comment and help shape the strongest ideas.
          </p>
        </div>

        <Card glass style={{ width: 'min(640px,100%)', padding: '28px 30px', marginBottom: 18 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, color: 'var(--text-2)', fontSize: 14, marginBottom: 10 }}>Already in this session</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9, marginBottom: 20 }}>
            {existing.map((m) => (
              <span key={m.email || m.name} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 11px 5px 5px', borderRadius: 'var(--radius-pill)', background: 'var(--surface-2)', border: '1px solid var(--line-2)' }}>
                <Avatar name={m.name} size={22} ring={m.ring} />
                <span style={{ fontSize: 13, color: 'var(--text-1)', fontWeight: 600 }}>{m.name}</span>
                <Badge tone={m.role === 'Owner' ? 'cyan' : 'neutral'} size="sm">{m.role || 'Editor'}</Badge>
              </span>
            ))}
          </div>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, color: 'var(--text-2)', fontSize: 14, marginBottom: 10 }}>Invite by email</div>
          <form onSubmit={add}><Input placeholder="name@company.co.uk — press enter to add" value={val} onChange={(e) => setVal(e.target.value)} iconLeft={<I.Mail size={18} />} /></form>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9, marginTop: 14 }}>
            {emails.map((em) => (
              <Chip key={em} onRemove={() => setEmails(emails.filter((x) => x !== em))} accent="var(--neon-violet)">
                <Avatar name={em.split('@')[0]} size={18} style={{ marginLeft: -4 }} /> {em}
              </Chip>
            ))}
          </div>
          <div style={{ marginTop: 18 }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, color: 'var(--text-2)', fontSize: 14, marginBottom: 10 }}>Optional invite note</div>
            <Textarea rows={2} placeholder="Help us name the new pet shop — vote on your favourites!" />
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 18 }}>
            <Button onClick={send} disabled={!emails.length} iconLeft={<I.Mail size={18} />}>{sent && !emails.length ? 'Invites sent ✓' : `Send ${emails.length || ''} invite${emails.length === 1 ? '' : 's'}`.trim()}</Button>
          </div>
        </Card>

        <Card style={{ width: 'min(640px,100%)', padding: '22px 24px', marginBottom: 22 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontWeight: 700, color: 'var(--text-1)' }}>
                <I.Link size={16} /> Share link
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--neon-cyan)', marginTop: 6 }}>{share}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <AvatarStack people={existing} max={4} size={32} />
              <Button variant="secondary" size="sm" onClick={() => setCopied(true)} iconLeft={<I.Copy size={16} />}>{copied ? 'Copied' : 'Copy link'}</Button>
            </div>
          </div>
        </Card>

        <Button size="lg" onClick={() => goto('arena')} iconRight={<I.ArrowRight size={18} />}>Enter the Name Arena</Button>
      </div>
    );
  }

  window.BXInvite = Invite;
})();