import {Component, Suspense, lazy, type ComponentProps} from 'react';
import {Heading, Text} from '@whop/react/components';
import {Button} from '../ui';
import {withLoadDeadline} from './load-deadline';

type WorkspaceProps = ComponentProps<typeof import('./BlackrockWorkspace').default>;
const createWorkspace = () => lazy(() => withLoadDeadline(() => import('./BlackrockWorkspace')));
const InitialWorkspace = createWorkspace();

/** Mounted on the first research visit and retained by the shell across mode switches. */
export default class LazyBlackrockWorkspace extends Component<WorkspaceProps> {
  state = {failed: false, Workspace: InitialWorkspace};

  static getDerivedStateFromError() {
    return {failed: true};
  }

  retry = () => {
    // React caches a lazy rejection. Only an explicit retry replaces its identity.
    this.setState({failed: false, Workspace: createWorkspace()});
  };

  render() {
    if (this.state.failed) return (
      <div className="empty" role="alert">
        <Heading size="4">Market workspace unavailable</Heading>
        <Text as="p">The workspace could not load. Retry, or reload if the app was updated.</Text>
        <Button onClick={this.retry}>Retry market workspace</Button>
        <Button onClick={() => location.reload()}>Reload app</Button>
      </div>
    );
    const Workspace = this.state.Workspace;
    return (
      <Suspense fallback={<div className="empty" role="status"><Text>Loading market workspace…</Text></div>}>
        <Workspace {...this.props}/>
      </Suspense>
    );
  }
}