// BriefSection — the project brief rendered INSIDE the assembly canvas world
// layer, a card sibling of TimelineSection/StationGraphSection (same absolute
// positioning wrapper + station-strip label chrome). Pure render: the create
// page owns the markdown + stale/regenerating flags; AssemblyCanvas picks the
// origin. Clicking the card targets the chat at the brief step (onTargetChat,
// wired by the composer in a later task) unless readOnly.
//
// Props: { markdown, stale, regenerating, readOnly, onTargetChat, origin {x,y} }

const BRIEF_SECTION_W = 480;

const BriefSection = ({ markdown, stale = false, regenerating = false, readOnly = false, onTargetChat, origin }) => {
  const clickable = !readOnly && typeof onTargetChat === 'function';

  const label = (
    <div
      style={{ position: 'absolute', transform: `translate3d(${origin.x}px, ${origin.y - 36}px, 0)`, width: BRIEF_SECTION_W }}
      className="px-3 py-1.5 text-[10px] uppercase font-bold tracking-widest text-neutral-500 select-none flex items-center gap-2 whitespace-nowrap"
    >
      Brief · what we're building
      <window.StaleBadge stale={stale} regenerating={regenerating} label="Rewriting the brief…" />
    </div>
  );

  return (
    <>
      {label}
      <div
        onClick={clickable ? (e) => { e.stopPropagation(); onTargetChat('brief'); } : undefined}
        style={{ position: 'absolute', transform: `translate3d(${origin.x}px, ${origin.y}px, 0)`, width: BRIEF_SECTION_W, zIndex: 10 }}
        className={`rounded-2xl border border-neutral-200 bg-white shadow-sm ${clickable ? 'cursor-pointer transition-shadow hover:shadow-md' : ''}`}
      >
        <div className="px-4 py-3">
          {markdown ? (
            <window.MarkdownView markdown={markdown} />
          ) : (
            <div className="text-sm text-neutral-400">The project brief appears here.</div>
          )}
        </div>
      </div>
    </>
  );
};

if (typeof window !== 'undefined') {
  window.BriefSection = BriefSection;
}