import { useState } from 'react';
import { useCollection } from '@feltdb/core/react';
import { auditEvents, invitations, projects, teams } from '../feltdb';
import { useAuth } from '../context/AuthContext';
import { Projects } from './Projects';
import { Invitations } from './Invitations';
import { Activity } from './Activity';
import { Agents } from './Agents';

type View = 'overview' | 'projects' | 'invitations' | 'activity' | 'agents';

export function Dashboard() {
  const { user, organization, signOut } = useAuth(); const [view, setView] = useState<View>('overview');
  const projectState = useCollection(projects); const teamState = useCollection(teams); const invitationState = useCollection(invitations); const activityState = useCollection(auditEvents);
  const stats = [{ label: 'Projects', value: projectState.data.length }, { label: 'Teams', value: teamState.data.length }, { label: 'Invitations', value: invitationState.data.filter(item => item.status === 'pending').length }, { label: 'Activity', value: activityState.data.length }];
  return <main className="dashboard"><header><a className="brand" href="https://feltdb.com">FeltDB</a><nav>{(['overview', 'projects', 'invitations', 'activity', 'agents'] as View[]).map(item => <button className={view === item ? 'nav-active' : 'quiet'} onClick={() => setView(item)} key={item}>{item}</button>)}</nav><div><span>{user?.name}</span><button className="quiet" onClick={() => void signOut()}>Sign out</button></div></header>{view === 'overview' && <><section className="hero"><div><span className="eyebrow">{organization?.name}</span><h1>Welcome, {user?.name.split(' ')[0]}.</h1><p>State, workflows, and agents share one authorization boundary.</p></div><code>member · {organization?.id.slice(0, 12)}…</code></section><section className="stats">{stats.map(stat => <article key={stat.label}><span>{stat.label}</span><strong>{stat.value}</strong></article>)}</section><section className="grid"><article className="panel"><span className="eyebrow">Start here</span><h2>One application, visible in Studio</h2><div className="journey"><button onClick={() => setView('projects')}>1 <span>Create a project<small>Atomic Project + AuditEvent workflow</small></span></button><button onClick={() => setView('invitations')}>2 <span>Invite a member<small>Identity and relational authorization</small></span></button><button onClick={() => setView('agents')}>3 <span>Run an assistant<small>Bounded capabilities over authorized state</small></span></button></div></article><aside className="panel"><span className="eyebrow">Runtime</span><h2>One state boundary</h2><div className="stack"><div><i className="online" /><span>Application connected</span></div><div><i /><span>Authorization in FeltDB</span></div><div><i /><span>Workflows and agents persisted</span></div></div><p className="hint">Run <code>npm run feltdb:studio</code> to inspect the same records.</p></aside></section></>}{view === 'projects' && <Projects />}{view === 'invitations' && <Invitations />}{view === 'activity' && <Activity />}{view === 'agents' && <Agents />}</main>;
}