import { useState, type FormEvent } from 'react';
import { useCollection } from '@feltdb/core/react';
import { projects } from '../feltdb';
import { useAuth } from '../context/AuthContext';
import { runProjectCreatedWorkflow } from '../../workflows/project-created';

export function Projects() {
  const { user, organization } = useAuth(); const state = useCollection(projects); const [busy, setBusy] = useState(false);
  async function submit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); if (!user || !organization) return; const form = event.currentTarget; setBusy(true); await runProjectCreatedWorkflow({ organization: organization.id, owner: user.id, name: String(new FormData(form).get('name')) }); form.reset(); setBusy(false); }
  return <section className="page"><div className="page-heading"><div><span className="eyebrow">Project workflow</span><h1>Projects</h1><p>Creating a project atomically persists both Project and AuditEvent state.</p></div><span className="count">{state.data.length}</span></div><article className="panel"><form className="project-form" onSubmit={submit}><input name="name" required placeholder="A new project" aria-label="Project name" /><button disabled={busy}>{busy ? 'Running workflow…' : 'Create project'}</button></form><div className="records">{state.data.length ? state.data.slice().reverse().map(project => <div className="record" key={project.id}><span className="record-mark">{project.name.charAt(0).toUpperCase()}</span><div><strong>{project.name}</strong><small>ProjectCreated workflow · {new Date(project.created_at).toLocaleDateString()}</small></div></div>) : <div className="empty"><strong>No projects yet</strong><span>Create one to produce your first workflow state.</span></div>}</div></article></section>;
}