import trackAnalyticsEvent from '@/lib/trackAnalyticsEvent';
import { gray100, gray150 } from '@/styles/colors';
import styled from '@emotion/styled';
import { StandardButton } from './Buttons';
import Tooltip from './Tooltip';

export const MAX_UNLOCKED_DEVICES_ALLOWED = 1;
export const MAX_TRACKS_ALLOWED = 8;
export const MAX_TIMELINE_BEATS_ALLOWED = 384;

const FeatureColumnWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  @media screen and (max-width: 700px) {
    grid-template-columns: 1fr;
  }
`;

const FeatureColumn = styled.div<{ emphasized?: boolean }>`
  display: flex;
  flex-direction: column;
  align-items: center;
  color: ${gray100};
  text-align: center;
  padding: 30px 55px;
  background-color: ${({ emphasized }) => (emphasized ? gray150 : 'transparent')};
  position: relative;
  @media screen and (max-width: 950px) {
    padding: 30px 20px;
  }
  @media screen and (max-width: 650px) {
    padding: 30px 20px 60px 20px;
  }
`;

const PlanName = styled.h3`
  font-family: Architekt;
  font-size: 22px;
  position: relative;
`;

const PlanPrice = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
`;

const DollarSign = styled.span`
  font-family: Architekt;
  font-size: 40px;
  opacity: 0.5;
  margin-top: 10px;
`;
const PriceNumber = styled.span`
  font-family: Montreal;
  font-size: 10rem;
  line-height: 1;
  letter-spacing: -5px;
`;
const PlanPriceDetails = styled.div`
  opacity: 0.5;
  font-size: 1.5rem;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  margin-top: 0;
`;

const PlanFeature = styled.div`
  display: flex;
  width: auto;
  font-size: 2rem;
  padding: 2px;
  cursor: help;
`;

const ComingSoon = styled.div`
  font-family: Montreal;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  margin: 20px 0 10px 0;
  font-size: 18px;
  opacity: 0.5;
`;

const FeatureTooltipMessage = styled.div`
  max-width: 350px;
  padding: 5px 10px;
`;
const FeatureTooltipTitle = styled.h3`
  font-family: Architekt;
  font-size: 14px;
  margin-bottom: 5px;
`;
const FeatureTooltipDescription = styled.div`
  opacity: 0.7;
  ul {
    margin: 0;
    padding: 0 0 0 10px;
    list-style-type: '> ';
    li {
      padding: 0 0 0 0;
    }
  }
`;

const FeatureTooltip = ({
  title,
  description,
  children,
}: {
  title: React.ReactNode;
  description: React.ReactNode;
  children: React.ReactNode[] | React.ReactNode;
}) => (
  <Tooltip
    position="bottom"
    allowRapidfire
    message={
      <FeatureTooltipMessage>
        <FeatureTooltipTitle>{title}</FeatureTooltipTitle>
        <FeatureTooltipDescription>{description}</FeatureTooltipDescription>
      </FeatureTooltipMessage>
    }
  >
    {children}
  </Tooltip>
);

const CoreDAWFeatures = () => (
  <FeatureTooltip
    title="The most powerful DAW on the web"
    description={
      <ul>
        <li>Unlimited Song Length</li>
        <li>Unlimited Tracks</li>
        <li>Audio Recording & Editing</li>
        <li>MIDI Recording & Editing</li>
        <li>Virtual Instruments & Effects</li>
        <li>700+ Loops & Samples</li>
      </ul>
    }
  >
    <PlanFeature>Core DAW Features</PlanFeature>
  </FeatureTooltip>
);
const ConductorChatbot = () => (
  <FeatureTooltip
    title="Meet your new assistant"
    description={
      <ul>
        <li>AI-powered music production chatbot</li>
        <li>Answers questions about music production</li>
        <li>Guides you through music production workflows</li>
      </ul>
    }
  >
    <PlanFeature>Conductor Chatbot</PlanFeature>
  </FeatureTooltip>
);
const CloudSaves = () => (
  <FeatureTooltip
    title="Never lose your work"
    description={
      <ul>
        <li>Cloud-based project storage</li>
        <li>Automatic project backups</li>
        <li>Access your projects anywhere</li>
      </ul>
    }
  >
    <PlanFeature>Cloud Saves</PlanFeature>
  </FeatureTooltip>
);
const ExportWAV = () => (
  <FeatureTooltip
    title="Full quality audio exports"
    description={
      <ul>
        <li>Export uncompressed audio files</li>
      </ul>
    }
  >
    <PlanFeature>Export WAV</PlanFeature>
  </FeatureTooltip>
);
const ExportWAVMIDI = () => (
  <FeatureTooltip
    title="Every format you need"
    description={
      <ul>
        <li>Export uncompressed audio files</li>
        <li>Export MIDI files for use in other apps</li>
      </ul>
    }
  >
    <PlanFeature>Export WAV/MIDI</PlanFeature>
  </FeatureTooltip>
);
const BasicSkills = () => (
  <FeatureTooltip
    title="Accelerate your production workflow"
    description={
      <ul>
        <li>Analyze chords</li>
        <li>Add and tweak effects with the help of Conductor</li>
        <li>Humanize MIDI clips</li>
        <li>Bulk-adjust timing & pitch</li>
      </ul>
    }
  >
    <PlanFeature>Basic Skills</PlanFeature>
  </FeatureTooltip>
);
const ComposerAI = () => (
  <FeatureTooltip
    title="AI Musical Autocomplete"
    description={
      <ul>
        <li>Generate new basslines, beats, and melodies</li>
        <li>Break out of musical writer's block</li>
        <li>Write accompaniments in an instant</li>
        <li>All outputs are editable - you're in control</li>
      </ul>
    }
  >
    <PlanFeature>Composer AI</PlanFeature>
  </FeatureTooltip>
);
const StemSplit = () => (
  <FeatureTooltip
    title="Deconstruct your favourite songs"
    description={
      <ul>
        <li>Create karaoke tracks in seconds</li>
        <li>Split songs into their component parts</li>
        <li>Remix your favourite track</li>
        <li>Remove instruments and jam along</li>
      </ul>
    }
  >
    <PlanFeature>Stem Split</PlanFeature>
  </FeatureTooltip>
);
const ConvertToMidi = () => (
  <FeatureTooltip
    title="Transform Audio to MIDI"
    description={
      <ul>
        <li>Transform audio content to MIDI</li>
        <li>Instantly get melodic information from melodies, chords or basslines</li>
        <li>Customisable sensitivity options for best results</li>
      </ul>
    }
  >
    <PlanFeature>Stem Split</PlanFeature>
  </FeatureTooltip>
);
const AudioGeneration = () => (
  <FeatureTooltip
    title="New sounds, made by AI"
    description={
      <ul>
        <li>Create loops and samples</li>
        <li>Use text prompts to shape the music</li>
        <li>Ready to tweak, stem split, and edit in the WavTool UI</li>
      </ul>
    }
  >
    <PlanFeature>Audio Generation</PlanFeature>
  </FeatureTooltip>
);
const PrototypeExecution = () => (
  <FeatureTooltip
    title="Transform any sound into any other"
    description={
      <ul>
        <li>Turn your voice into a saxophone, trumpet, or drum kit</li>
        <li>Change basic sounds into realistic instruments</li>
        <li>[coming soon] Convert vocals into new voices</li>
      </ul>
    }
  >
    <PlanFeature>Timbre Transfer</PlanFeature>
  </FeatureTooltip>
);
const PrototypeTraining = () => (
  <FeatureTooltip
    title="Train your own timbre transfer models"
    description={
      <ul>
        <li>Create timbre transfer models out of any instruments or sounds</li>
        <li>Replace your favourite song with your own voice</li>
        <li>Unlimited sound design potential</li>
      </ul>
    }
  >
    <PlanFeature>Timbre Transfer Model Training</PlanFeature>
  </FeatureTooltip>
);
const PluginSupport = () => (
  <FeatureTooltip
    title="VST & AU Plugins"
    description={
      <ul>
        <li>Use VST & AU plugins in your WavTool projects</li>
        <li>Fully compatible with Composer, Timbre Transfer, and all other WavTool features</li>
      </ul>
    }
  >
    <PlanFeature>Plugin Support</PlanFeature>
  </FeatureTooltip>
);
const MultiplayerProduction = () => (
  <FeatureTooltip
    title="The studio experience, across the net"
    description={
      <ul>
        <li>Record a voice or instrument across the world</li>
        <li>Work with clients, as they follow along in real-time</li>
        <li>Create new music with friends</li>
      </ul>
    }
  >
    <PlanFeature>Multiplayer Production</PlanFeature>
  </FeatureTooltip>
);

const CTAButton = styled(StandardButton)`
  font-size: 2rem;
  padding: 1rem 3rem;
  text-transform: none;
  margin: 3rem 0;
`;

const DiscountedIndiePrice = () => {
  return (
    <PlanPrice style={{ position: 'relative' }}>
      <DollarSign style={{ opacity: 0.2, transform: 'translateX(-20px)' }}>$</DollarSign>
      <PriceNumber
        style={{
          position: 'relative',
          opacity: 0.2,
          transform: 'translateX(-20px)',
        }}
      >
        <div
          style={{
            position: 'absolute',
            borderTop: '8px solid black',
            width: '150%',
            top: '50%',
            left: -30,
            transform: 'rotate(25deg)',
          }}
        />
        10
      </PriceNumber>
      <DollarSign>$</DollarSign>
      <PriceNumber>4</PriceNumber>
    </PlanPrice>
  );
};

export const FeatureColumns = ({ onCTA }: { onCTA: () => void }) => {
  return (
    <FeatureColumnWrapper>
      <FeatureColumn>
        <PlanName>Basic</PlanName>
        <PlanPrice>
          <DollarSign>$</DollarSign>
          <PriceNumber>0</PriceNumber>
        </PlanPrice>
        <PlanPriceDetails>USD Per Month</PlanPriceDetails>
        <CTAButton
          onClick={() => {
            onCTA();
            trackAnalyticsEvent({
              name: 'Landing Button Clicked',
              properties: {
                text: 'Get Started',
                location: 'Pricing Page, Basic Plan',
              },
            });
          }}
        >
          Get Started
        </CTAButton>
        <CoreDAWFeatures />
        <PluginSupport />
        <ConductorChatbot />
        <CloudSaves />
        <ExportWAV />
      </FeatureColumn>

      <FeatureColumn>
        <PlanName>Indie</PlanName>
        <DiscountedIndiePrice />
        {/* <PlanPrice>
          <DollarSign>$</DollarSign>
          <PriceNumber>10</PriceNumber>
        </PlanPrice> */}
        <PlanPriceDetails>USD Per Month</PlanPriceDetails>
        <CTAButton
          onClick={() => {
            onCTA();
            trackAnalyticsEvent({
              name: 'Landing Button Clicked',
              properties: {
                text: 'Get Started',
                location: 'Pricing Page, Indie Plan',
              },
            });
          }}
        >
          Get Started
        </CTAButton>
        <CoreDAWFeatures />
        <PluginSupport />
        <ConductorChatbot />
        <CloudSaves />
        <ExportWAVMIDI />
        <BasicSkills />
        <ComposerAI />
      </FeatureColumn>

      <FeatureColumn>
        <PlanName>Pro</PlanName>
        <PlanPrice>
          <DollarSign>$</DollarSign>
          <PriceNumber>20</PriceNumber>
        </PlanPrice>
        <PlanPriceDetails>USD Per Month</PlanPriceDetails>
        <CTAButton
          onClick={() => {
            onCTA();
            trackAnalyticsEvent({
              name: 'Landing Button Clicked',
              properties: {
                text: 'Get Started',
                location: 'Pricing Page, Pro Plan',
              },
            });
          }}
        >
          Get Started
        </CTAButton>
        <CoreDAWFeatures />
        <PluginSupport />
        <ConductorChatbot />
        <CloudSaves />
        <ExportWAVMIDI />
        <BasicSkills />
        <ComposerAI />
        <StemSplit />
        <ConvertToMidi />
        <AudioGeneration />
        <PrototypeExecution />
        <PrototypeTraining />
        <ComingSoon>coming soon to pro</ComingSoon>
        <MultiplayerProduction />
      </FeatureColumn>
    </FeatureColumnWrapper>
  );
};

export default FeatureColumns;