import styled from '@emotion/styled';
import { useState } from 'react';

const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
`;

const Modal = styled.div`
  background: rgb(var(--rgb-background-primary));
  border-radius: 24px;
  padding: 32px;
  width: 480px;
  max-width: 90vw;
  box-shadow:
    0 20px 25px -5px var(--color-opacity-black-10),
    0 10px 10px -5px var(--color-opacity-black-4);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
`;

const Title = styled.h2`
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0.56px;
  margin: 0;
  color: rgb(var(--rgb-foreground-primary));
  text-align: center;
`;

const ContentWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
`;

const Description = styled.div`
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  color: rgb(var(--rgb-foreground-secondary));
  margin: 0;
  text-align: center;
  width: 290px;
`;

// TODO: Add workspace selection functionality
/*
const WorkspaceSection = styled.div`
  margin-bottom: 32px;
`;

const WorkspaceLabel = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-foreground-secondary);
  margin-bottom: 8px;
`;

const WorkspaceSelector = styled.div`
  padding: 12px 16px;
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  background: var(--color-background-secondary);
  color: var(--color-foreground-primary);
  font-size: 16px;
`;
*/

const ButtonContainer = styled.div`
  display: flex;
  gap: 8px;
  width: 100%;
`;

const StyledButton = styled.button<{ variant: 'cancel' | 'primary' }>`
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.36px;
  height: 56px;
  border-radius: 100px;
  padding: 19px 24px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;

  ${(props) =>
    props.variant === 'cancel' &&
    `
    background: transparent;
    color: rgb(var(--rgb-foreground-primary));
    flex: 1;
  `}

  ${(props) =>
    props.variant === 'primary' &&
    `
    background: rgb(var(--rgb-foreground-primary));
    color: rgb(var(--rgb-foreground-primary-on-light));
    flex: 1;
  `}

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &:hover:not(:disabled) {
    opacity: 0.9;
  }
`;

interface CloneProjectModalProps {
  isOpen: boolean;
  onClose: () => void;
  onClone: (title?: string) => Promise<string>;
}

export default function CloneProjectModal({
  isOpen,
  onClose,
  onClone,
}: CloneProjectModalProps) {
  const [isCloning, setIsCloning] = useState(false);

  if (!isOpen) return null;

  const handleClone = async () => {
    try {
      setIsCloning(true);
      const newProjectId = await onClone(undefined);

      // Redirect to the new project
      const url = new URL(window.location.href);
      url.searchParams.delete('project_version_id');
      url.pathname = '/studio';
      url.searchParams.set('initial_project_id', newProjectId);
      window.location.href = url.toString();
    } catch (error) {
      console.error('Failed to clone project:', error);
      setIsCloning(false);
    }
  };

  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <Overlay onClick={handleOverlayClick}>
      <Modal>
        <ContentWrapper>
          <Title>
            Duplicate project
            <br />
            to Remix
          </Title>
          <Description>
            This project was shared by another user, to make any edits you have
            to duplicate it to your own account.
          </Description>
        </ContentWrapper>

        <ButtonContainer>
          <StyledButton variant='cancel' onClick={onClose} disabled={isCloning}>
            Cancel
          </StyledButton>
          <StyledButton
            variant='primary'
            onClick={handleClone}
            disabled={isCloning}
          >
            {isCloning ? 'Remixing project...' : 'Remix Project'}
          </StyledButton>
        </ButtonContainer>
      </Modal>
    </Overlay>
  );
}