const { EntityRow, Badge, Dialog, Button } = window.EquestrianismDesignSystem_6b57f9;

function Connections() {
  const [revoking, setRevoking] = React.useState(null);
  const [gone, setGone] = React.useState([]);
  const conns = [
    { id: 'groceries', name: 'groceries.example.co.uk', meta: 'connected 12 May · used by Weekly shop' },
    { id: 'calendar', name: 'Family calendar', meta: 'connected 3 March · used by 4 routines' },
    { id: 'email', name: 'household@example.co.uk', meta: 'connected 3 March · send always gated' },
  ].filter((c) => !gone.includes(c.id));
  return (
    <div className="stack">
      <window.PageHead title="Connections"
        sub="Accounts the household has granted to agents. Revoking one is immediate." />
      <div className="stack" style={{ gap: 8 }}>
        {conns.map((c) => (
          <EntityRow key={c.id} title={c.name} meta={c.meta}
            end={<Button variant="quiet" size="sm" onClick={() => setRevoking(c)}>Revoke</Button>} />
        ))}
        <EntityRow title="library.example.gov.uk" meta="card expired · reconnect to resume renewals" completed
          completedLabel="Lapsed" end={<Button variant="ghost" size="sm">Reconnect</Button>} />
      </div>
      <Dialog open={!!revoking} onClose={() => setRevoking(null)} destructive
        title={`Revoke ${revoking ? revoking.name : ''}?`}
        actions={<React.Fragment>
          <Button variant="secondary" onClick={() => { setGone([...gone, revoking.id]); setRevoking(null); }}>Revoke</Button>
          <Button variant="quiet" onClick={() => setRevoking(null)}>Keep it</Button>
        </React.Fragment>}>
        <p>Running sessions that use it will fail, and reconnecting requires signing in again. Nothing else is deleted.</p>
      </Dialog>
    </div>
  );
}
window.Connections = Connections;