import { useEffect } from 'react';

import { DocumentSlotView } from '../../editors/DocumentSlotView';
import { useDocumentSlot } from '../../documents/useDocumentSlot';
import { useDocumentTitle } from '../../documents/useDocumentTitle';
import { WorkspaceBarSlot } from '../barSlot';
import type { WorkspaceProps } from '../workspace';

export function ZenWorkspace({
  active,
  openRequestId,
  openRequest,
  resolveProvider,
  onOpenEntry,
  onActiveDocumentChange,
}: WorkspaceProps) {
  const { state, close } = useDocumentSlot({
    openRequestId,
    openRequest,
    resolveProvider,
    accepts: active,
  });

  const handle = state.kind === 'open' ? state.handle : null;
  const title = useDocumentTitle(handle);

  // Same contract as tiling: report what is shown, derived from slot state.
  const shownDocument = active && state.kind !== 'empty' ? state.request : null;
  useEffect(() => {
    if (!active) return;
    onActiveDocumentChange?.(shownDocument);
  }, [active, shownDocument, onActiveDocumentChange]);

  return (
    <>
      <div className="flex h-full min-h-0 w-full flex-col overflow-hidden p-2">
        <DocumentSlotView
          state={state}
          className="min-h-0 flex-1"
          onOpenEntry={onOpenEntry}
        />
      </div>
      <WorkspaceBarSlot>
        <div className="text-foreground/70 min-w-0 flex-1 truncate text-xs">
          {state.kind === 'empty'
            ? 'Zen · no document open'
            : state.kind === 'open'
              ? title || state.request.title
              : state.request.title}
        </div>
        {state.kind !== 'empty' ? (
          <button
            type="button"
            onClick={close}
            className="border-border bg-background text-foreground hover:bg-border/30 focus-visible:ring-accent/50 shrink-0 rounded border px-2 py-1 text-xs outline-none focus-visible:ring-2"
          >
            Close
          </button>
        ) : null}
      </WorkspaceBarSlot>
    </>
  );
}