import { observer } from 'mobx-react-lite';
import { useState } from 'react';

import logWebUserEvent from '@/logging/logWebUserEvent';
import { Project, ProjectStore } from '@/state/projectStore';
import { UNTITLED_PROJECT_NAME } from '@/utils/constants';

import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import Modal from './Modal';

const CreateProjectModal = observer(
  ({
    project,
    isOpen,
    onClose,
    onProjectCreated,
  }: {
    project: ProjectStore;
    isOpen: boolean;
    onClose: () => void;
    onProjectCreated?: (project: Project) => void;
  }) => {
    const [createProjectLoading, setCreateProjectLoading] =
      useState<boolean>(false);
    const [projectName, setProjectName] = useState('');
    if (!isOpen) return null;

    const handleCreateProject = async () => {
      setCreateProjectLoading(true);
      try {
        const newProject = await project.createProject(projectName, '');
        // await project.loadAllProjects();
        if (newProject) {
          onProjectCreated?.(newProject);
          setProjectName('');
          onClose();
        } else {
          throw new Error('Failed to create project: No project ID returned');
        }
      } catch (error) {
        console.error('Failed to create project:', error);
        // Handle error (e.g., show error message to user)
      } finally {
        setCreateProjectLoading(false);
      }
    };

    return (
      <Modal
        title='Create New Workspace'
        titleClassName='font-sans text-lg font-semibold'
        onClose={() => {
          logWebUserEvent({
            actionName: 'CreateProjectModalClicked',
            context: { state: 'closed' },
          });
          onClose();
        }}
        wrapperClasses='max-h-[240px] mb-4'
        withHorizontalPadding
      >
        <div className='mb-4'>
          <p className='mb-4 font-sans'>Enter a name for your new workspace</p>
          <div className='relative'>
            <input
              autoFocus
              className='w-full rounded-md border border-foreground-secondary/20 bg-transparent px-2 py-3 outline-none focus-within:bg-background-fog-thin focus:outline-none'
              placeholder={UNTITLED_PROJECT_NAME}
              maxLength={100}
              value={projectName?.slice(0, 100) || ''}
              onChange={(e) => setProjectName(e.target.value)}
              onKeyPress={(e) => {
                if (e.key === 'Enter') {
                  logWebUserEvent({
                    actionName: 'CreateWorkspaceButtonClicked',
                    context: { state: 'clicked', projectName },
                  });
                  handleCreateProject();
                }
              }}
            />
            <div className='bg-o-50 absolute right-2 bottom-[2px] bg-inherit font-sans text-[12px] text-foreground-secondary opacity-50'>
              {projectName?.length} / 100
            </div>
          </div>
        </div>
        <div className='flex w-full justify-end'>
          <Button
            variant={ButtonVariant.Standard}
            shape={ButtonShape.Pill}
            onClick={() => {
              logWebUserEvent({
                actionName: 'CreateWorkspaceButtonClicked',
                context: { state: 'clicked', projectName },
              });
              handleCreateProject();
            }}
          >
            {createProjectLoading ? 'Creating...' : 'Create Workspace'}
          </Button>
        </div>
      </Modal>
    );
  }
);

export default CreateProjectModal;