import type { DocumentSlotState } from '../documents/useDocumentSlot';
import { DocumentPane } from './DocumentPane';

const DEFAULT_EMPTY_HINT = 'Select a file from the sidebar to open it here.';

type DocumentSlotViewProps = {
  state: DocumentSlotState;
  className?: string;
  placeholder?: string;
  emptyHint?: string;
};

function SlotPlaceholder({ message }: { message: string }) {
  return (
    <div className="border-border text-foreground/60 flex h-full min-h-0 w-full items-center justify-center rounded-md border border-dashed p-5 text-center text-sm">
      {message}
    </div>
  );
}

/**
 * Renders a document slot's empty, loading, error, or open states.
 * Workspaces compose this inside their layout chrome.
 */
export function DocumentSlotView({
  state,
  className,
  placeholder = 'Start writing…',
  emptyHint = DEFAULT_EMPTY_HINT,
}: DocumentSlotViewProps) {
  if (state.kind === 'empty') {
    return <SlotPlaceholder message={emptyHint} />;
  }
  if (state.kind === 'loading') {
    return <SlotPlaceholder message={`Opening ${state.request.title}…`} />;
  }
  if (state.kind === 'error') {
    return (
      <SlotPlaceholder
        message={`Could not open ${state.request.title}: ${state.message}`}
      />
    );
  }
  return (
    // Key by document id so switching tabs to a different document remounts a
    // fresh editor instead of reusing one bound to the previous document. The
    // shared editor view binds its content on mount only, so without this a
    // tab switch can leave the previous file's content showing.
    <DocumentPane
      key={state.handle.id}
      handle={state.handle}
      placeholder={placeholder}
      className={className}
    />
  );
}