// rsvp.jsx — RSVP manager (mom view) and guest view simulation
const { useState: useStateR } = React;

const FAKE_RSVPS_INITIAL = [
  { id: 1, parent: 'Mamma di Sofia', kids: [{ name: 'Sofia', age: 4 }], status: 'yes', when: 'oggi 14:32' },
  { id: 2, parent: 'Mamma di Leo',   kids: [{ name: 'Leo', age: 5 }, { name: 'Mia', age: 3 }], status: 'yes', when: 'oggi 12:08' },
  { id: 3, parent: 'Papà di Tommaso',kids: [{ name: 'Tommaso', age: 4 }], status: 'maybe', when: 'ieri' },
  { id: 4, parent: 'Mamma di Aurora',kids: [{ name: 'Aurora', age: 4 }], status: 'no',  when: 'ieri' },
  { id: 5, parent: 'Mamma di Diego', kids: [{ name: 'Diego', age: 5 }], status: 'pending', when: '—' },
  { id: 6, parent: 'Mamma di Bianca',kids: [{ name: 'Bianca', age: 4 }], status: 'pending', when: '—' },
];

function RsvpManagerScreen({ state, back }) {
  const [rsvps] = useStateR(FAKE_RSVPS_INITIAL);
  const yes = rsvps.filter(r => r.status === 'yes');
  const maybe = rsvps.filter(r => r.status === 'maybe');
  const no = rsvps.filter(r => r.status === 'no');
  const pending = rsvps.filter(r => r.status === 'pending');
  const totalKids = yes.reduce((s, r) => s + r.kids.length, 0);

  const link = `invitino.app/r/${(state.nome || 'invito').toLowerCase()}-${state.eta || 4}anni`;

  const copyLink = () => {
    if (navigator.clipboard) navigator.clipboard.writeText('https://' + link);
    alert('Link copiato! Mandalo su WhatsApp ai genitori.');
  };

  return (
    <div className="app-shell fade-step" style={{ background: 'var(--bg)' }}>
      <div style={{ padding: '14px 20px 6px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <button onClick={back} className="iconbtn" aria-label="indietro" style={{ width: 36, height: 36, background: '#fff' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M15 18 L 9 12 L 15 6"/>
          </svg>
        </button>
        <div style={{ flex: 1, textAlign: 'center', fontSize: 14, fontWeight: 700, color: 'var(--ink-2)' }}>
          Conferme
        </div>
        <div style={{ width: 36 }} />
      </div>

      <div className="app-scroll" style={{ padding: '8px 20px 20px' }}>
        {/* Headline counter */}
        <div style={{
          background: 'var(--ink)', color: '#fff',
          borderRadius: 18, padding: '20px 18px',
          marginBottom: 16,
        }}>
          <div style={{ fontSize: 12, opacity: 0.7, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' }}>
            Festa di {state.nome}
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
            <span style={{ fontFamily: 'DM Serif Display, serif', fontSize: 44, lineHeight: 1 }}>{totalKids}</span>
            <span style={{ fontSize: 14, opacity: 0.85 }}>bambini confermati</span>
          </div>
          <div style={{
            display: 'flex', gap: 14, marginTop: 14, fontSize: 12, opacity: 0.85,
          }}>
            <span>✓ {yes.length} sì</span>
            <span>? {maybe.length} forse</span>
            <span>✕ {no.length} no</span>
            <span>· {pending.length} in attesa</span>
          </div>
        </div>

        {/* Link share card */}
        <div style={{
          background: '#fff', border: '1px solid var(--line)',
          borderRadius: 14, padding: 14, marginBottom: 18,
        }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            Link RSVP
          </div>
          <div style={{ marginTop: 8, display: 'flex', gap: 8, alignItems: 'center' }}>
            <div style={{
              flex: 1, fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
              padding: '10px 12px', background: 'var(--bg-2)', borderRadius: 10,
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>{link}</div>
            <button onClick={copyLink} style={{
              padding: '10px 14px', background: 'var(--ink)', color: '#fff',
              borderRadius: 10, fontSize: 12, fontWeight: 700,
            }}>Copia</button>
          </div>
        </div>

        {/* Lists */}
        {yes.length > 0 && <RsvpList title="Confermati" color="var(--green)" rows={yes} />}
        {maybe.length > 0 && <RsvpList title="Forse" color="#E8A33A" rows={maybe} />}
        {pending.length > 0 && <RsvpList title="Non hanno ancora risposto" color="var(--ink-3)" rows={pending} />}
        {no.length > 0 && <RsvpList title="Non possono venire" color="var(--ink-3)" rows={no} muted />}
      </div>
    </div>
  );
}

function RsvpList({ title, color, rows, muted }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{
        fontSize: 12, fontWeight: 700, color: 'var(--ink-2)',
        letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 8,
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: color }} />
        {title} ({rows.length})
      </div>
      <div style={{ background: '#fff', borderRadius: 14, border: '1px solid var(--line)', overflow: 'hidden' }}>
        {rows.map((r, i) => (
          <div key={r.id} style={{
            padding: '12px 14px',
            borderTop: i === 0 ? 'none' : '1px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 10,
            opacity: muted ? 0.6 : 1,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 999, background: 'var(--bg-2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 700, color: 'var(--ink-2)',
            }}>{r.parent.split(' ').slice(-1)[0][0]}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.2 }}>{r.parent}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>
                {r.kids.map(k => `${k.name} (${k.age})`).join(' · ')}
              </div>
            </div>
            <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{r.when}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { RsvpManagerScreen });