<script setup lang="ts">
interface FeedbackReplyProps {
  userName?: string
  originalMessage?: string
  replyMessage?: string
  appName?: string
  baseUrl?: string
  appDescription?: string
  logoUrl?: string
}

withDefaults(defineProps<FeedbackReplyProps>(), {
  userName: '',
  originalMessage: '',
  replyMessage: '',
  appName: 'Harmonic SaaS',
  baseUrl: '',
  appDescription: '',
  logoUrl: ''
})

const main = {
  backgroundColor: '#ffffff'
}

const container = {
  paddingLeft: '12px',
  paddingRight: '12px',
  margin: '0 auto'
}

const h1 = {
  color: '#333',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif',
  fontSize: '24px',
  fontWeight: 'bold',
  margin: '40px 0',
  padding: '0'
}

const text = {
  color: '#333',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif',
  fontSize: '14px',
  margin: '24px 0'
}

const messageBox = {
  backgroundColor: '#f4f4f4',
  borderRadius: '5px',
  border: '1px solid #eee',
  padding: '16px',
  margin: '16px 0'
}

const footer = {
  color: '#898989',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif',
  fontSize: '12px',
  lineHeight: '22px',
  marginTop: '12px',
  marginBottom: '24px'
}
</script>

<template>
  <EHtml>
    <EHead />
    <EPreview>Response to your support request</EPreview>
    <EBody :style="main">
      <EContainer :style="container">
        <EHeading :style="h1">
          Response to your support request
        </EHeading>
        <EText :style="text">
          Hello {{ userName }},
        </EText>
        <EText :style="text">
          We appreciate you taking the time to share your thoughts. Here's our response:
        </EText>

        <ESection :style="messageBox">
          <EText :style="{ ...text, margin: '0 0 8px 0', fontWeight: 'bold' }">
            Your feedback:
          </EText>
          <EText :style="{ ...text, margin: '0', whiteSpace: 'pre-line' }">
            {{ originalMessage }}
          </EText>
        </ESection>

        <ESection :style="messageBox">
          <EText :style="{ ...text, margin: '0 0 8px 0', fontWeight: 'bold' }">
            Our response:
          </EText>
          <EText :style="{ ...text, margin: '0', whiteSpace: 'pre-line' }">
            {{ replyMessage }}
          </EText>
        </ESection>

        <EText :style="text">
          If you have any further questions or concerns, please don't hesitate to reach out.
        </EText>

        <EText :style="text">
          Thanks,<br>
          {{ appName }} team
        </EText>

        <EImg
          :src="logoUrl"
          width="32"
          alt="Logo"
        />
        <EText :style="footer">
          <ELink
            :href="baseUrl"
            target="_blank"
            :style="{ color: '#898989', textDecoration: 'underline' }"
          >
            {{ appName }}
          </ELink>, {{ appDescription }}
        </EText>
      </EContainer>
    </EBody>
  </EHtml>
</template>
