// §22.10 (M3) — the deployment directory at `/`. Renders the caller-visible
// projects (from /api/deployment) as cards linking into each project's
// `/p/<id>/` home. App's DeploymentLanding only mounts this when the N=1
// land-in-corpus redirect does not apply (2+ visible projects, or no readable
// default) so OHM's "land in the corpus" UX is preserved.
//
// §22 S5 — role-aware empty states + the global-Owner create-project action.
// The deployment payload carries a `viewer` block; the directory reads it to
// render:
//   * C3.1: a global Owner sees a "Create your first project" CTA (and a "New
//     project" control when the directory is non-empty), opening the
//     create-project modal (choose id, name, type, visibility).
//   * C3.2: a non-owner (a granted account with no roles) sees the empty
//     directory with no create action and a note that nothing is shared yet.
import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useDeployment } from '../context/DeploymentProvider'
import { entryNoun } from './ProjectLayout.jsx'
import CreateProjectModal from './CreateProjectModal.jsx'

export default function Directory() {
  const { name, tagline, projects, viewer, refresh } = useDeployment()
  const [createOpen, setCreateOpen] = useState(false)
  const canCreate = !!viewer?.can_create_project

  return (
    <main className="chrome-pane">
      <div className="directory">
        <div className="directory-head">
          <h1>{name}</h1>
          <div className="directory-actions">
            {canCreate && projects.length > 0 && (
              <button className="btn-primary" onClick={() => setCreateOpen(true)}>New project</button>
            )}
          </div>
        </div>
        {tagline && <p className="directory-tagline">{tagline}</p>}
        {projects.length === 0 ? (
          // C3.1 / C3.2: role-keyed empty state.
          canCreate ? (
            <div className="directory-empty">
              <p className="directory-tagline">No projects yet.</p>
              <button className="btn-primary" onClick={() => setCreateOpen(true)}>
                Create your first project
              </button>
            </div>
          ) : (
            <p className="directory-tagline">Nothing has been shared with you yet.</p>
          )
        ) : (
          <ul className="directory-list">
            {projects.map(p => (
              <li key={p.id} className="directory-card">
                <Link to={`/p/${p.id}/`}>
                  <span className="directory-card-name">{p.name}</span>
                  <span className="directory-card-type">{entryNoun(p.type)}s</span>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
      {createOpen && (
        <CreateProjectModal
          onClose={() => setCreateOpen(false)}
          onCreated={() => { setCreateOpen(false); refresh?.() }}
        />
      )}
    </main>
  )
}