import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { useRouter } from 'next/navigation';
import { useContext, useMemo, useState } from 'react';
// eslint-disable-next-line @suno-custom/no-react-icons -- grandfathered in, need to migrate
import { BsWindow } from 'react-icons/bs';

import { useStores } from '@/app/(root)/AppProviders';
import { ModelTier } from '@/hooks/useGenerate';
import {
  CreateIcon,
  EditIcon,
  ExtendRightIcon,
  FadeIcon,
  InfoIcon,
  LibraryIcon,
  MoreVerticalIcon,
  RemoveIcon,
  ScissorsIcon,
  SectionIcon,
  SpeedIcon,
  StudioIcon,
  TriangleDownIcon,
  TriangleUpIcon,
} from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { FeatureKey, ModelType, PlanFeature } from '@/state/sessionStore';
import { isDev, isStaging } from '@/utils/environment';
import { isFeatureEnabledForPlan } from '@/utils/session';
import {
  DEFAULT_BLUEJAY_MODEL_NAME,
  DEFAULT_CROW_MODEL_NAME,
  canUseModel,
} from '@/utils/utils';

import Button, { ButtonSize, ButtonVariant } from '../button/Button';
import CloseButton from '../button/CloseButton';
import {
  ContextMenuItem,
  ContextMenuTrigger,
} from '../contextMenu/ContextMenu';
import Modal from '../modal/Modal';
import { ModalTypes } from '../modal/constants/ModalTypes';
import ProjectsDropdown from '../project/ProjectsDropdown';
import MagicStudioButton from '../studio/MagicStudioButton';
import SpinnerSVG from '../svg/SpinnerSVG';
import EditModeContext from './EditModeContext';
import GenerateContext from './GenerateContext';
import PreviewClipContext from './PreviewClipContext';

const ModeSelectWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0 20px;
  height: 100%;
`;

const ModeSelector = styled.button<{ active: boolean }>`
  font-family: 'Input Sans', monospace;
  text-transform: uppercase;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 0 5px 0;
  height: 100%;
  position: relative;
  svg {
    position: relative;
    top: 1px;
  }
  color: ${({ active }) => (active ? '#FFFFFFFF' : '#FFFFFF66')};
  svg * {
    fill: ${({ active }) => (active ? '#FFFFFFFF' : '#FFFFFF66')};
  }
  border-bottom: 2px solid
    ${({ active }) => (active ? '#FFFFFFFF' : 'transparent')};
  &:hover {
    color: #ffffffff;
    svg * {
      fill: #ffffffff;
    }
  }
`;

const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
`;

const ContentGroup = styled.div`
  display: flex;
  padding: 10px;
  align-items: center;
  height: 100%;
  gap: 5px;
`;

const PageTitle = styled.h1`
  font-size: 20px;
  opacity: 0.5;
`;

const ModelTierPickerWrapper = styled.div`
  border-radius: 4px;
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  height: 25px;
  > * {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    padding: 0 4px;
    font-family:
      'PP Neue Montreal', 'Neue Montreal', ui-sans-serif, system-ui, sans-serif;
    text-transform: none;
  }
`;

const ModelTierPicker = ({
  value,
  setModelTier,
}: {
  value: ModelTier | null;
  setModelTier: (newModelTier: ModelTier) => void;
}) => {
  const { session } = useStores();
  return (
    <ModelTierPickerWrapper>
      <Button
        size={ButtonSize.Mini}
        variant={
          value === ModelTier.V3_5
            ? ButtonVariant.Primary
            : ButtonVariant.Tertiary
        }
        onClick={() => setModelTier(ModelTier.V3_5)}
      >
        v3.5
      </Button>
      <Button
        size={ButtonSize.Mini}
        variant={
          value === ModelTier.V4
            ? ButtonVariant.Primary
            : ButtonVariant.Tertiary
        }
        onClick={() => setModelTier(ModelTier.V4)}
      >
        v4
      </Button>
      {isFeatureEnabledForPlan(session, PlanFeature.Auk) ? (
        <Button
          size={ButtonSize.Mini}
          variant={
            value === ModelTier.V4_5
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => setModelTier(ModelTier.V4_5)}
        >
          v4.5
        </Button>
      ) : null}
      {canUseModel(session.billingModels, DEFAULT_BLUEJAY_MODEL_NAME) ? (
        <Button
          size={ButtonSize.Mini}
          variant={
            value === ModelTier.V4_5_PLUS
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => setModelTier(ModelTier.V4_5_PLUS)}
        >
          v4.5+
        </Button>
      ) : null}
      {canUseModel(session.billingModels, DEFAULT_CROW_MODEL_NAME) ? (
        <Button
          size={ButtonSize.Mini}
          variant={
            value === ModelTier.V5
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => setModelTier(ModelTier.V5)}
        >
          v5
        </Button>
      ) : null}
    </ModelTierPickerWrapper>
  );
};

export const ModelList = ({
  models,
  selectedModel,
  onSelect,
}: {
  models: ModelType[];
  selectedModel: string | null;
  onSelect: (model: ModelType) => void;
}) => {
  const [showAll, setShowAll] = useState(!!selectedModel);
  const sortedModels = useMemo(() => {
    return models.sort((a, b) => a.name.localeCompare(b.name));
  }, [models]);
  return (
    <>
      <ContextMenuItem
        keepMenusOpen
        onClick={() => setShowAll(!showAll)}
        icon={showAll ? <TriangleUpIcon /> : <TriangleDownIcon />}
      >
        [DEV] All Models
      </ContextMenuItem>
      {showAll && (
        <div className='flex flex-wrap gap-1 pb-4'>
          {sortedModels.map((model) => (
            <Button
              size={ButtonSize.Mini}
              key={model.id}
              className='h-auto'
              variant={
                selectedModel === model.external_key
                  ? ButtonVariant.Primary
                  : ButtonVariant.Secondary
              }
              onClick={() => onSelect(model)}
            >
              {model.name}
            </Button>
          ))}
        </div>
      )}
    </>
  );
};

export default observer(function EditHeader({ clipId }: { clipId: string }) {
  const [workspaceModalOpen, setWorkspaceModalOpen] = useState(false);

  const { setPreviewEdit } = useContext(PreviewClipContext);
  const { editMode, setEditMode } = useContext(EditModeContext);
  const router = useRouter();
  const { session, edit, menus } = useStores();
  const { modelTier, setModelTier, modelOverride, setModelOverride } =
    useContext(GenerateContext);
  const hasStudio = session.flags && Boolean(session.flags['studio']);
  const [creatingStudioProject, setCreatingStudioProject] = useState(false);
  return (
    <Wrapper>
      {workspaceModalOpen && (
        <Modal
          onClose={() => {
            setWorkspaceModalOpen(false);
            logWebUserEvent({
              actionName: 'CloseEditModeWorkspaceModal',
              context: {
                editSessionId: edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                editingClipId: clipId,
                actionIndex: -1, // todo?
              },
            });
          }}
          title='Select Workspace'
        >
          <ProjectsDropdown editMode={true} />
        </Modal>
      )}
      <ContentGroup>
        <ContextMenuTrigger
          title='Menu'
          placement='bottom-right'
          ButtonComponent={(props) => (
            <Button
              variant={ButtonVariant.Tertiary}
              size={ButtonSize.Small}
              className='opacity-50 hover:opacity-100'
              icon={MoreVerticalIcon}
              {...props}
            />
          )}
          ContentsComponent={() => (
            <>
              <ContextMenuItem
                keepMenusOpen
                icon={<LibraryIcon className='h-4 w-4' />}
                onClick={() => {
                  setWorkspaceModalOpen(true);
                  logWebUserEvent({
                    actionName: 'OpenEditModeWorkspaceModal',
                    context: {
                      editSessionId:
                        edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                      editingClipId: clipId,
                      actionIndex: -1, // todo?
                    },
                  });
                }}
              >
                Select Workspace
              </ContextMenuItem>

              <ContextMenuItem
                keepMenusOpen
                icon={<CreateIcon className='h-4 w-4' />}
              >
                <div className='flex w-[180px] items-center justify-between'>
                  Model
                  <ModelTierPicker
                    value={modelOverride ? null : modelTier}
                    setModelTier={(newModelTier: ModelTier) => {
                      const modelTierBefore = modelTier;
                      setModelTier(newModelTier);
                      setModelOverride(null);
                      logWebUserEvent({
                        actionName: 'ChangeEditModeModel',
                        context: {
                          editSessionId:
                            edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                          editingClipId: clipId,
                          modelBefore: modelTierBefore,
                          modelAfter: newModelTier,
                          actionIndex: -1, // todo?
                        },
                      });
                    }}
                  />
                </div>
              </ContextMenuItem>

              {(isDev || isStaging) && (
                <ModelList
                  models={session.getViewableModels()}
                  selectedModel={modelOverride}
                  onSelect={(model) =>
                    setModelOverride(model.external_key || null)
                  }
                />
              )}

              <ContextMenuItem
                icon={<EditIcon className='h-4 w-4' />}
                onClick={() => {
                  setEditMode('fixLyrics');
                  logWebUserEvent({
                    actionName: 'SelectEditModeTool',
                    context: {
                      editTool: 'edit_details',
                      editSessionId:
                        edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                      editingClipId: clipId,
                      actionIndex: -1, // todo?
                    },
                  });
                }}
              >
                Match Lyrics to Audio
              </ContextMenuItem>

              <ContextMenuItem
                icon={<InfoIcon className='h-4 w-4' />}
                onClick={() => {
                  setEditMode('none');
                  logWebUserEvent({
                    actionName: 'ShowEditModeWelcome',
                    context: {
                      editSessionId:
                        edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                      editingClipId: clipId,
                      actionIndex: -1, // todo?
                    },
                  });
                }}
              >
                Welcome Screen
              </ContextMenuItem>

              <ContextMenuItem
                icon={<BsWindow className='h-4 w-4' />}
                href={`/edit/${clipId}`}
              >
                New Editor
              </ContextMenuItem>
            </>
          )}
        />
        <PageTitle>Edit</PageTitle>
      </ContentGroup>

      <ModeSelectWrapper>
        <ModeSelector
          active={editMode === 'replace'}
          onClick={() => {
            setPreviewEdit(null);
            setEditMode('replace');
            logWebUserEvent({
              actionName: 'SelectEditModeTool',
              context: {
                editTool: 'infill',
                editSessionId: edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                editingClipId: clipId,
                actionIndex: -1, // todo?
              },
            });
          }}
        >
          <SectionIcon className='h-4 w-5' /> Replace Section
        </ModeSelector>
        <ModeSelector
          active={editMode === 'extend'}
          onClick={() => {
            setPreviewEdit(null);
            setEditMode('extend');
            logWebUserEvent({
              actionName: 'SelectEditModeTool',
              context: {
                editTool: 'extend',
                editSessionId: edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                editingClipId: clipId,
                actionIndex: -1, // todo?
              },
            });
          }}
        >
          <ExtendRightIcon className='h-4 w-4' /> Extend
        </ModeSelector>
        <ModeSelector
          active={editMode === 'crop'}
          onClick={() => {
            setPreviewEdit(null);
            setEditMode('crop');
            logWebUserEvent({
              actionName: 'SelectEditModeTool',
              context: {
                editTool: 'crop',
                editSessionId: edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                editingClipId: clipId,
                actionIndex: -1, // todo?
              },
            });
          }}
        >
          <ScissorsIcon className='h-4 w-4' /> Crop
        </ModeSelector>
        {session.flags?.['crop-remove'] && (
          <ModeSelector
            active={editMode === 'remove'}
            onClick={() => {
              setPreviewEdit(null);
              setEditMode('remove');
              logWebUserEvent({
                actionName: 'SelectEditModeTool',
                context: {
                  editTool: 'remove',
                  editSessionId:
                    edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                  editingClipId: clipId,
                  actionIndex: -1, // todo?
                },
              });
            }}
          >
            <RemoveIcon className='h-4 w-4' /> Remove
          </ModeSelector>
        )}
        {session.flags?.['edit-mode-speed'] && (
          <ModeSelector
            active={editMode === 'speed'}
            onClick={() => {
              setPreviewEdit(null);
              setEditMode('speed');
              logWebUserEvent({
                actionName: 'SelectEditModeTool',
                context: {
                  editTool: 'speed_change',
                  editSessionId:
                    edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                  editingClipId: clipId,
                  actionIndex: -1, // todo?
                },
              });
            }}
          >
            <SpeedIcon className='h-4 w-4' /> Speed
          </ModeSelector>
        )}
        <ModeSelector
          active={editMode === 'fadeOut'}
          onClick={() => {
            setPreviewEdit(null);
            setEditMode('fadeOut');
            logWebUserEvent({
              actionName: 'SelectEditModeTool',
              context: {
                editTool: 'fade',
                editSessionId: edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                editingClipId: clipId,
                actionIndex: -1, // todo?
              },
            });
          }}
        >
          <FadeIcon className='h-4 w-4' /> Fade Out
        </ModeSelector>
      </ModeSelectWrapper>
      <ContentGroup>
        {hasStudio && (
          <MagicStudioButton
            disabled={creatingStudioProject}
            icon={
              creatingStudioProject ? (
                <SpinnerSVG className='h-6 w-6' />
              ) : (
                <StudioIcon className='h-6 w-6' />
              )
            }
            onClick={async () => {
              if (!isFeatureEnabledForPlan(session, PlanFeature.Studio)) {
                menus.setCurrentUpsellFeature(FeatureKey.STUDIO);
                menus.openModal(ModalTypes.UPSELL_MODAL);
                return;
              }
              setCreatingStudioProject(true);
              window.location.href = `/studio?for_clip_id=${clipId}`;
              logWebUserEvent({
                actionName: 'NavigatedToStudio',
                context: {
                  trigger: 'edit_v2_header',
                },
              });
            }}
          >
            Edit in Studio
          </MagicStudioButton>
        )}
        <CloseButton
          onClick={() => {
            router.push('/create');
            logWebUserEvent({
              actionName: 'ExitEditMode',
              context: {
                editSessionId: edit.editSessionId || 'MISSING_EDIT_SESSION_ID',
                editingClipId: clipId,
                actionIndex: -1, // todo?
              },
            });
          }}
        />
      </ContentGroup>
    </Wrapper>
  );
});