// ProjectCard primitive — the one way a project renders as a card (overview,
// future dashboards/switcher). Pure renderer: no fetching, no navigation — the
// parent decides what "open" and the draft action mean. See COMPONENTS.md.
//
// A container <div> (NOT a <button>) so the footer actions can be real,
// side-by-side <button>s with no nesting. Drafts carry a `draftStatus`
// (six-state, from window.DraftStatus) → a status badge + a secondary action;
// non-drafts render neither. `reentryAction` is an optional third button
// (the parent supplies { label, onClick }) — used for a planning-phase draft
// whose create-session is still stranded pre-approval.
//
// A REMOTE project (shared-project-registry: `remote: true`, owned by another
// environment) is read-only here: its badge is "<ownerEnv> · <registryStatus>",
// it offers no draft action (it cannot be resumed on this machine), and Open
// leads to the registry-backed board (review decisions only).
function ProjectCard({ project, onOpen, onAction, reentryAction }) {
  const DS = window.DraftStatus || {};
  const status = project.draftStatus;
  const badge = status && DS.DRAFT_BADGE ? DS.DRAFT_BADGE[status] : null;
  const actionLabel = status && DS.DRAFT_ACTION ? DS.DRAFT_ACTION[status] : null;
  const isDraft = project.status === 'draft' && !!status && !project.remote;
  return (
    <div className="h-full flex flex-col text-left bg-white border border-neutral-200 rounded-2xl p-5 shadow-sm hover:shadow-md hover:border-indigo-300 transition-all">
      <div className="flex items-start justify-between gap-2 mb-2">
        <div className="font-bold text-neutral-800">
          {/* user-roles-project-visibility: a private (experimental) project is seen
              only by its owner and admins — the lock says why others don't list it. */}
          {project.visibility === 'private' && (
            <span className="mr-1.5 text-neutral-400" title={`Private — visible to ${project.ownerEmail || 'its owner'} and admins`} aria-label="private project" data-testid="private-lock">🔒</span>
          )}
          {project.name}
        </div>
        {project.remote ? (
          <span className="shrink-0 rounded-full text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-sky-50 text-sky-700 border border-sky-200" title={`Owned by the ${project.ownerEnv} environment — read-only here`}>
            {project.ownerEnv} · {project.registryStatus}
          </span>
        ) : badge && (
          <span className={`shrink-0 rounded-full text-[10px] font-bold uppercase tracking-widest px-2 py-1 ${badge.cls}`}>
            {badge.label}
          </span>
        )}
      </div>
      <div className="text-xs text-neutral-400 font-mono">
        PM {project.pmProjectId ?? "—"} · AL {project.alProjectId ?? "—"}
        {project.remote && <span> · owned by {project.ownerEnv} · read-only</span>}
      </div>
      {/* mt-auto pins the actions to the card's bottom edge, so every card in a
          row bottom-aligns its Open link regardless of how many lines the title
          wraps to. h-full above lets the card fill the grid row (items stretch by
          default), which is what gives mt-auto something to push against. */}
      <div className="mt-auto pt-4 flex items-center gap-4">
        <button
          onClick={() => onOpen(project.slug)}
          className="text-sm font-semibold text-indigo-600 hover:text-indigo-700"
        >Open →</button>
        {isDraft && actionLabel && (
          <button
            onClick={() => onAction && onAction(project)}
            className="text-sm font-semibold text-neutral-500 hover:text-neutral-800"
          >{actionLabel} →</button>
        )}
        {reentryAction && (
          <button
            onClick={reentryAction.onClick}
            className="text-sm font-semibold text-neutral-500 hover:text-neutral-800"
          >{reentryAction.label} →</button>
        )}
      </div>
    </div>
  );
}

window.ProjectCard = ProjectCard;