import { useState, type FormEvent } from 'react';
import { useCollection } from '@feltdb/core/react';
import { invitations } from '../feltdb';
import { useAuth } from '../context/AuthContext';
import { runAcceptInvitationWorkflow, runInviteMemberWorkflow } from '../../workflows/invitation';

export function Invitations() {
  const { user, organization } = useAuth(); const state = useCollection(invitations); const [message, setMessage] = useState('');
  async function invite(event: FormEvent<HTMLFormElement>) { event.preventDefault(); if (!user || !organization) return; const form = event.currentTarget; setMessage(''); try { await runInviteMemberWorkflow({ organization: organization.id, actor: user.id, email: String(new FormData(form).get('email')), role: 'member' }); form.reset(); } catch (error) { setMessage(error instanceof Error ? error.message : 'Invitation failed.'); } }
  return <section className="page"><div className="page-heading"><div><span className="eyebrow">Invitation workflow</span><h1>Invitations</h1><p>Invitation visibility combines <code>self(user) | member</code>.</p></div><span className="count">{state.data.filter(item => item.status === 'pending').length}</span></div><article className="panel"><form className="project-form" onSubmit={invite}><input name="email" type="email" required placeholder="Existing user email" aria-label="Invite email" /><button>Invite member</button></form>{message && <p className="error">{message}</p>}<div className="records">{state.data.length ? state.data.slice().reverse().map(invitation => <div className="record spread" key={invitation.id}><div><strong>{invitation.email}</strong><small>{invitation.role} · {invitation.status}</small></div>{invitation.user === user?.id && invitation.status === 'pending' && <button onClick={() => void runAcceptInvitationWorkflow(invitation, user.id)}>Accept</button>}</div>) : <div className="empty"><strong>No invitations yet</strong><span>For this starter, invite another user who has already signed up.</span></div>}</div></article></section>;
}