import type { MappedContentLink } from '~/lib/songwhipApi/mapper';
import type { CreateFlowStage } from '../../components/CreateFlow/types';

import Box from '~/src/components/Box';
import OutlineButton from '~/src/components/Button/OutlineButton';
import Card from '~/src/components/Card';
import { Clickable } from '~/src/components/Clickable';
import ClickToCopy from '~/src/components/ClickableCopy';
import HoverBackground from '~/src/components/HoverBackground';
import CopyIcon from '~/src/components/Icon/CopyIcon';
import EditIcon from '~/src/components/Icon/EditIcon';
import EmailIcon from '~/src/components/Icon/EmailIcon';
import ExternalLinkIcon from '~/src/components/Icon/ExternalLinkIcon';
import FacebookIcon from '~/src/components/Icon/FacebookIcon';
import ImageIcon from '~/src/components/Icon/ImageIcon';
import TwitterIcon from '~/src/components/Icon/TwitterIcon';
import Image from '~/src/components/Image';
import InputLabel from '~/src/components/InputLabel';
import Link from '~/src/components/Link2';
import Text from '~/src/components/Text';
import TextInput from '~/src/components/TextInput';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import { useI18n } from '~/src/lib/i18n';

export const SuccessStage: CreateFlowStage<MappedContentLink> = ({
  definition: { props },
}) => {
  const { t: tApp } = useI18n('app');
  const { t } = useI18n('create');

  const isLargeScreen = useIsLargeScreen();

  if (!props) return;

  const { id, name, image, customLink } = props;
  const link = `${customLink.domain}${customLink.path}`;
  const url = `https://${link}`;

  return (
    <Box
      flexBox
      flexColumn={!isLargeScreen}
      gap="4rem"
      padding="2rem"
      maxWidth="64rem"
      width="100%"
    >
      <Box flexColumn gap="1.3rem" width="21rem">
        <Card width="100%" height="21rem" flexColumn>
          <Box positionRelative flexGrow centerContent>
            {image ? (
              <Image alt="" src={image} fillParent cover />
            ) : (
              <ImageIcon color="#555" size="5rem" />
            )}
          </Box>
          <Box
            style={{
              background: '#1a1a1a',
              padding: '1.3rem',
              borderTop: 'solid 1px #333',
            }}
          >
            <Text
              size="1.9rem"
              isBold
              lineClamp={2}
              breakWord
              margin="0 0 0.5rem 0"
            >
              {name}
            </Text>
            <Text withEllipsis breakWord>
              {link}
            </Text>
          </Box>
        </Card>
        <OutlineButton
          testId="contentLinkEditButton"
          text={t('contentLink.success.editLink')}
          Icon={EditIcon}
          href={`/content-links/${id}/edit`}
        />
      </Box>
      <Box flexGrow flexColumn gap="2.5rem">
        <InputLabel
          value={
            <Text>
              {t('contentLink.success.shareLink')}{' '}
              <Link
                href={url}
                style={{ color: '#fff' }}
                withFocusStyle
                inNewTab
              >
                {tApp('actions.visit')}{' '}
                <ExternalLinkIcon isInline size="2rem" margin="0 0 -0.4rem 0" />
              </Link>
            </Text>
          }
        >
          <TextInput
            defaultValue={url}
            readOnly
            renderAfter={() => (
              <ClickToCopy
                value={url}
                isInline
                padding="1rem"
                withHoverOpacityFrom={0.4}
                toastText={tApp('actions.copied')}
              >
                <CopyIcon color="#fff" />
              </ClickToCopy>
            )}
          />
        </InputLabel>
        <Box>
          <Text margin="0 0 1rem 0">
            {t('contentLink.success.shareSocial')}
          </Text>
          <Box flexBox flexWrap gap="1rem">
            {socialShareOptions.map(({ name, Icon, shareUrl }) => (
              <HoverBackground key={name}>
                <Clickable
                  href={shareUrl(url)}
                  inNewTab
                  title={name}
                  style={{
                    border: '1px solid #555',
                    padding: '1.2rem',
                    borderRadius: '5px',
                  }}
                >
                  <Icon size="2.2rem" className="Icon" />
                </Clickable>
              </HoverBackground>
            ))}
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

const socialShareOptions = [
  {
    name: 'Facebook',
    Icon: FacebookIcon,
    shareUrl: (url: string) =>
      `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
  },
  {
    name: 'Twitter',
    Icon: TwitterIcon,
    shareUrl: (url: string) =>
      `https://x.com/intent/tweet?url=${encodeURIComponent(url)}`,
  },
  {
    name: 'Email',
    Icon: EmailIcon,
    shareUrl: (url: string) =>
      `mailto:?subject=Check%20out%20my%20new%20content%20link&body=${encodeURIComponent(url)}`,
  },
];